Mobile Browser Design tips: Carry the design

Can carry, is the advantage of mobile devices, although "carry" with the design itself does not have a lot of relationship, but think our design is indeed everyone carry, the heart can not help a little secretly pleased, at the same time, and therefore the mobile device product design requirements will be higher, because all of us carry the Dongdong, Must be the daily needs of everyone, loved, or commonly used, nature of these things will be higher requirements, I hope it can show the self. Therefore, it is more difficult to carry the design in fact.
Speaking of mobile browser, from preview to beta1 release, to the current release of the Beta2 version, has done nearly a year, personal feeling though small, spite, mobile phone software looks very small, in fact, to do a little bit more complex than the PC side of the software products, or even more, During the follow-up encounter a lot of problems, but also accumulated a part of the experience, the following mainly through a number of typical cases and design process of several links to do a simple share.

　　Question 1: The balance point between visual performance and development realization

Lifting the design of mobile devices, it is hard to remember the current hot iphone, Microsoft Windows Mobile System, as well as a lot of times to make you big eyes of the new and fashionable products, the overall impression of the whole feeling is avantgarde, cool and full of technology.

To say no, I believe you can see similar stunning design everywhere, the point is that the mobile phone software needs to take into account a number of mobile operating systems, and the current mainstream smartphone operating system, such as Nokia's Symbian, Microsoft's Windows Mobile,palm, Linux , as well as BlackBerry OS, IPhone OS, Java and MTK, and so on, and each system will be constantly updated to upgrade multiple versions, such as Symbian system and according to different hardware characteristics are divided into S40, S60, S80, S90 and other different versions, These systems and versions have different characteristics, and the interfaces they support are not the same. So in the visual design, to understand the different systems, can not emphasize the visual expression, pure pursuit of cool visual effects and lost compatibility.

At the same time, mobile phone software will also be limited by hardware devices. We can note that different brands occupy the entire mobile phone market, which has a high share of Nokia, Sony Ericsson, Samsung, Motorola, as well as Dopod, Apple and other Up-and-comer. The entire mobile phone industry to update very quickly, the new models quickly come out, the old models will not be eliminated immediately, so the development of mobile phone software to be refined to different brands of different models.

Also, pay attention to the cost of product development. At present, the development of QQ Mobile browser is still in the early stage, the goal is to quickly create a simple fast, lightweight and Easy-to-use Mobile browser, simple design is consistent with the current goal. We do not deliberately pursue external performance, but the design of a practical, performance first browser. Mobile phone browser with the mobile phone QQ interface Implementation mechanism, but also because of the operating system, and now does not support the effect of translucent, in the texture performance, mainly one-way gradient mainly, in addition to the size of the installation package has strict control, as little as possible using the texture elements and dynamic effects.

　　Question 2: Design around the core value

Browser's core function is page browsing and content rendering, users use the browser to surf the web, the browser's task is to users to view the page to parse and quickly correct the presentation of the content of the Web page, and the style and style of the Web site should be considered by the construction of things. Here to mention in the preview version has been set in the mobile phone QQ style theme skin, the background color of the Web browsing window is also defined, that is, the dark blue that is consistent with the start page, and during implementation and testing, we find that this dark background affects the browsing of some of the pages. For example, CCTV's WAP Web site uses style sheets to define the page text as dark, and, in close proximity to the background color value, is basically unable to see the text. So preview version We paused the implementation of the theme, and in the Beta2 version we adjusted the background color of the browse window for that theme to a light tint.

The control design also encounters a similar problem, the start control style is consistent with the current application theme style, the default blue theme of the control is blue, the pink theme of the control is pink, but this is relatively poor in generality, such as in a blue-style Web page, want to distinguish the blue input box is a little difficult. Therefore, we have finally defined a set of common mobile phone browser standard control, can be applied to each topic.

　　Standing on the shoulders of giants

The company already has some more mature wireless products, such as mobile phone QQ project has accumulated rich experience in mobile device design, in the early stage of mobile phone browser project and mobile phone QQ project designers have many exchanges and learning, in the later design process is also very grateful for their experience to share and enthusiastic support. Other mobile phone QQ music, mobile phone QQ Theater and other products are worth our learning, follow-up we will enhance the communication between the projects and technology sharing, and improve together.

Multi-channel learning of mobile device-related design knowledge is necessary, particularly recommended by the Nokia Forum (forum.nokia.com), where the design and User experience columns have a large number of interactive and visual design articles, At the same time, the library of the standard construction document is also very comprehensive and perfect, is a good design reference. For example, several of the discussion articles on vertical list, horizontal list and tabbed list provide a great help for the list design of the Beta2 version of the mobile browser.

There are more popular mobile phone browser products, such as UCWeb, opera and so on, relatively mature, the overall experience of the browser has been very good grasp, and attracted quite a lot of loyal users, we can also learn from their design advantages to enhance the product experience.

In addition, the reference to excellent handheld device software design is a good shortcut, as the previous mentioned mobile phone software will be operating system, hardware and other restrictions, and excellent design has been better to avoid many problems.

　　Process Assurance Results

Mobile screen display effect and computer screen difference is very large, different models of the mobile phone chromatic aberration is also very large, we are in the visual design when the need to debug the design of different phones on the tone and contrast, through continuous testing to ensure the final display effect. To save time to test and adjust the effect chart, it is recommended to use a data cable connection, so that the PC and mobile phone between the speed of the transfer of pictures much faster, and as much as possible on different mobile phones to see the effect, because many mobile phone color display does not reach true color, some color values will not be normal display.

Mobile browser is a multisectoral cooperation project, in the design process will inevitably appear in various areas of disagreement, through a rigorous review process can ensure the final design quality and reasonable resolution of differences of opinion. The design manuscript first through the design Center's expert review, then carries on two times in the project team review and the final confirmation, finally submits the development realization.
In order to facilitate the development of colleagues rapid high-quality interface implementation, as well as the follow-up function modules to add and maintain work, we have developed a need for detailed specifications. The standard production has the important significance to the follow-up work development, for instance the new topic increase, the interface realization inspection and so on.

　　Other supplements

Mobile phone software interface design should pay special attention to the content, the structure of a clear hierarchy, as far as possible to fit in the performance of different scenarios, because the characteristics of handheld devices is very convenient in different occasions to use.

The design principle of the handset and the PC side is common, the key is to play out the characteristic of the different equipment.

Mobile phone font related specifications need to further improve the complement.

　　Last Words

Mobile browser project for mobile device design, is just taken the first step, there is a very broad space needs to expand, the experience of mobile phone software design is still only a drop in the bucket, to rely on everyone to supplement, carry the design, we can let you fondle admiringly.