The mobile internet era has been quietly changing our way of life, so a large number of design forces have poured into the design field of the mobile side, which also shows that more and more people are attaching importance to the user's experience at the terminal level of each device. In the planning of products, the PC-side and mobile-side products are often placed in the same important position to think. However, the diversity of equipment and the diversity of product forms bring more space for designers, as well as greater challenges. How are these products different in design? How to plan the function of products on different platforms? What are the differences in design? The interface design of 2014 mobile terminals is a topic that is worth discussing.
Unique primary hue
2014, the pursuit of minimalist design style, the main color may only select a color, and then adjust the transparency or saturation, (the more popular is the color fade or deepen), resulting in new colors, so that it can be a good expression of the interface level, important information, and show good visual effects. Such a page looks uniform and has a layered sense. Some mobile apps currently on the line use very little color and even discard all colors. A good visual effect can be achieved with only one main hue.
Multi-color Style design
Metro led the multi-color style is the only main color to form a contrasting relationship between the design style, color more than the performance of a variety of pure color block use, is very simple pure color, only need to pay attention to the way of color matching, you can get a good visual effect. Multi-color mosaic design style, a screen-style layout of the page, the overall fashion is a concise atmosphere of the design. "Colorful color" concept, in 2014 mobile phone end will continue to develop.
Information Frame Flattening
In the design of the expression of our pursuit of flat interface, focus on weakening the visual effects to strengthen the application of the function. On mobile devices, excessive levels can cause users to lose patience and discard the use of the product. And the mobile end of the page is small, not too many places to put multiple tabs navigation or breadcrumbs, just left the upper left-hand corner of a "return" button as a navigation, you can go deeper, but jump three, and then look at the upper left corner of the "Back" button, you have been difficult to determine where to return to. From the perspective of information architecture, further application of the flat design concept, the purpose of flattening information framework is to reduce information levels, the pursuit of information to reach the shortest distance users, fundamentally solve the above problems.
Flattening is an idea that allows designers to reduce the level of information in the interface design process.
Dynamic Data visualization
Data visualization design is a tedious and tedious list and text into intuitive pie, fan-shaped, folding style, histogram and other rich intuitive design elements, improve user experience. and the current data visualization is not only static display data, users hope to get the data stream through interaction, if the dynamic effect to present, can be multidimensional to present to the user real-time information, at the same time with the user to form interactive, improve the performance of the data interesting. Dynamic Data visualization will emphasize the real-time updating of data translation graphics, as well as dynamic graphical representation.
Parallax effect at moving end
Parallax scrolling is the most popular web design technology, by allowing multi-layer backgrounds to move at different speeds to form a stereo motion parallax effect, although purely visual effects, but it can not be denied that the content when scrolling form the visual experience is very good! Parallax effect in the application of the site is not uncommon, if in mobile applications, can also use some fine parallax effect, to bring users a new visual experience. When users tilt and move the screen, Parallax allows the user to see the same visual effect on the screen as 3D, bringing a very good sensory experience.
Layered structure
Layered structure is to expand the screen space through the dynamic effect, rendering with vertical depth of the level, the operation area and content zoning separate, cultivate users to use habits, make people impressive, to achieve unexpected results. This design is more focused on content, more exposure to information, reduced structure levels, and efficient operation.
Cater to the user's usage habits
To meet the user's use habits, mainly in order to allow users in the operation of simple to the extreme. Users do not like to often repeat the input of some information, such as personal accounts, security information, operating habits, the next action, etc., which occupy the user to complete other important tasks of the time. Minimize user input, and users can provide appropriate reference when entering.
According to the user's behavior habits, the mobile application of the overall layout of the redesign, so simple, simple, simple, simple to the extreme, through a clear flow and interface, so that users can reduce the application of thinking and looking for the time, so that accurate color and expression to reduce the user's psychological struggle time.
Provide clear navigation
Navigation is important in mobile interface design, the main role of navigation is: Tell the user, where am I? Where Have I been? Where can I go? How do I get there? What am I going to do? And so on, these are the roles of navigation. Clear navigation design, can enhance the user's experience, let the user directly in the main interface can see the corresponding child interface information, reduce user blind operation. Can return to the main interface or exit the application at any location, so each operation on the navigation should be logical for the user, and the user will be able to understand the information and emotion it wants to express more easily.
The main action bar is not too much content
The main action bar is to display the most important content to the user, generally no more than three items. Excessive content can cause interference to the user. So the simple main action bar is easy for users to use and understand, and reduce the likelihood that the user has wrong choice. Action buttons on the action bar are typically used to show the most important, commonly used, and frequently used function operations, such as the return button in the upper-left corner of the mobile end interface.
User-centric
Users always follow their own methods to understand and use the mobile end, so from the user's point of view, think of users, do users have made the design of the designers to consider one of the criteria. For example, users in the case of not networking to send information or comments, the corresponding content will be automatically saved on the phone, the network only need to resend, do not need to re-enter the content.
Reasonable user Guidance
Because of the limited capacity of the mobile interface, product function is constantly expanding, you must open the application after the user to tell him some novel features, guide him to complete some of the main task flow, to help users quickly master the use of the application method, so that users quickly experience the fun of the application, arouse the user's desire to function. The Guide statement must be short, focus on the most important tasks, reduce the user's thinking time, so that users are not lost in unfamiliar applications overwhelmed. At the same time, avoid a succession of display guidance information, which will not only create short-term problems of increased memory, but also make new users feel that your application is too complex and daunting.
Quasi-True dynamic
The motion phenomenon in reality is simplified and abstract, which results in some characteristic animation effects in the moving end. For example, weather applications, full screen of the weather animation elegant and lifelike, voluminous snow grains, floating clouds, the lightning pierced the sky conveys a unique expression, to the user more complete, more authentic and more interesting sensory experience.
Use graphical elements as much as possible
As we all know, graphics are easier to remember and understand than words. The most reasonable way is: "Appropriate graphic elements + short text", and integrated into a presentation level, this way not only for users to read, but also to make multi-step process more intuitive, understandable, easy to remember. The use of graphics as easy to understand, the image of concrete. Avoid an ambiguous icon, because it will mislead the user and lose the design interaction experience. For example, the circle is the most easy to feel comfortable shape, especially in the screen filled with various boxes, add some mellow shape embellishment, will immediately increase the lively atmosphere, to increase goodwill. The mobile interface is designed with a circular option button to make the selection more focused and clear and not stereotyped.
Summary:
The design of the mobile end is flexible according to the strategy and specific situation of different products. The core principle advocated by the user is to take full account of the user experience. In this paper, the mobile end of the interface design for a superficial analysis, I hope to bring some thinking and help, there are deficiencies welcome correction, but also with you.
Author: anyforweb UDC Center