HTML5 Tutorial: NetEase Weibo WebApp development process introduction (3)

NetEase Weibo WebApp is run and displayed from the safari browser, which is one of the environments of this product. Web pages give people the feeling of being "light and streamlined", and local clients give people the feeling of "heavy and steady;

 

2. what is the impact of running in Safari?
NetEase Weibo Web apps are run and displayed from the safari browser, which is one of the environments of this product. Web pages give people the feeling of being "light and streamlined", and local clients give people the feeling of "heavy and steady;
 
Therefore, lightweight visual style is a good choice;
 
3. current visual style trend
The "small fresh" style led by Metro UI and Google + has become a great trend in visual style development. After a period of exquisite and complex visual experience, the simple and fresh visual style becomes popular;
As a result, visual designers have made several visual attempts, including red, black, and light gray. After comparison, we all agree that the fresh and light gray. Fresh and light gray is the dominant color. after an icon is clicked, the color is the usual red color used by NetEase. To some extent, the visual style is consistent;
 
V. front-end development: see recruitment
Owner: front-end engineers; participants: product managers, interaction designers, visual designers, and background technicians;
 
A brief answer is provided to some questions in the list:
 
Question 1: Can I talk about the front-end architecture? why didn't I use sencha?
 
A: sencha touch 1.x/ 2.x, jQuery mobile, and so on are not ideal for customization, performance, and resource consumption. Therefore, NetEase's front-end developed its own framework, as you said, using seajs to process script loading, iscroll simulates Rolling. At present, it seems that the results are good. NetEase's front-end will continue to improve this framework;
 
Question 2: Can I take photos or upload images?
 
A: iPhone Safari does not have the permission to retrieve cameras and image libraries. Therefore, this requirement is not met yet. In other words, when Android gives permissions, it will certainly meet this "New need ";
 
VI. follow-up work
Subsequent work mainly involves interactive queries, visual queries, QA tests, and post-launch feedback to fix problems and plan the next iteration. Everyone understands the project process;
 
Lessons learned
 
I. feelings about Workflow
1. guided by excellent experience design;
This project is a typical example of taking the design as the forerunner. First, give the designer sufficient time and space to use. For more information about the technology, see the recruitment. This work idea is the cornerstone for the entire product to gain a good user experience. HTML5 technology is very powerful and there are too many possibilities; design is to shape these technical possibilities into a mold;
 
2. Product Manager, interaction, visual, and front-end communication in a timely and frequent manner
Throughout the project, product managers, interaction designers, visual designers, and front-end engineers will have a weekly meeting. It is proved later that this frequent communication greatly reduces the return rate and improves the development efficiency;
 
3. small steps and fast running, focusing on iteration;
NetEase Weibo products are complicated. In addition, HTML5 development is slow and the manpower is limited. it is impossible to complete all functional details at the same time. Otherwise, it will take one month for the subsequent debugging to increase the burden for the rapid development of the product. Therefore, in the first phase, only the core functions become an inevitable choice;
 
2. user experience
 
1. the navigation system is more suitable for the top of the screen;
The toolbar of the browser always exists, so that the tab navigation bar is not suitable for fixing at the bottom of the screen, and the top is more suitable;
 
2. convenience is more important, and the most common functions are cleverly set;
Because of the product performance and browser performance, the current Web App smoothness and jump speed are not comparable to that of Native apps, and the jump cost is slightly higher. Therefore, the most common functions need to be closer to the user, reducing the waiting cost caused by the jump;
 
3. there is a trade-off between beautiful and concise visual drafts. most visual drafts need to be implemented using code;
Almost all vision is implemented through code, so it is best not to be too complex in visual design. It also takes time for front-end engineers to digest visual drafts;
 
III. Technical implementation
1. Safari browser permission restrictions. Web apps cannot call camera tools or support Image upload. this is a headache and helpless thing. The permissions granted to Web apps by the iOS system are too low. In contrast, the Android Web App can retrieve camera controls and support the Weibo Image upload function (however, the Android version has not yet been developed );
2. the scene animation cannot be as smooth as the local client;
The reasons are: good on-the-spot animation will eat away the performance of the product; HTML5 technology is not so complete and mature; and there is still a lack of a powerful browser;
 
Summary
In addition to the permissions of the iOS system, the excellent performance of Web apps is close to that of Native apps. HTML5 technology has given wap Web pages a new life and brought about revolutionary changes to wap. In HTML5 projects, function planning should be refined; information architecture should be shallow and narrow as possible; interaction design should be concise and efficient; visual design should also consider the special operating environment of browsers; the front-end not only needs to gradually digest the interaction design and visual design, but also boldly try to find the trick in new technologies and new problems. It is very necessary for the entire team to communicate frequently. it is best to take a small step for the development steps;