| Article Description: Mobile web design should contain 5 basic elements. |
Most people think that mobile web design and computer Web design is very different, in fact, the mobile phone page in addition to small and can touch, many design principles and computer web design is common. There are 5 basic elements in the hope of helping the designer.
1. Meaningful navigation
Getting information on a mobile device is actually an interesting experience, so it is necessary to make the user feel happy in the process, and simply deleting the link (or taps) on the screen does not serve the purpose of a user-friendly experience. Navigation should contain the content that the user needs and provide a clear path. If the user knows the specific page of the jump, it will be clicked.
First, make sure that the navigation is "clickable" to the user, such as buttons, lists, arrows, and so on, these small icons can help users understand the next step to some extent. In the absence of mouse hover effect and tags to help, as much as possible to guide users.
Tags are very important, and with good it can better guide users. Tags should be kept simple and meaningful, such as having a link that requires several taps, and you don't have to name the return key as the title of the previous page, just replace it with "back". In addition, avoid the use of ambiguous buttons or labels, these are potential pitfalls of losing users. But simplicity does not mean simplicity, so instead of hiding "my profile" or "passwords" in "Settings," add an additional one or two navigation buttons to them.
Icons are a simple but powerful way to communicate, not only because it is difficult and time-consuming to read text on your phone, but also because you can achieve a better visual balance by using icons. The proper use of icons in mobile Web pages can improve the user's overall experience. In addition, the icon that is combined with the label means a more specific navigation path for the user.
2. Composition of content
Simply deleting the content does not make the page simpler, and the deleted content may be what the user wants, so it is necessary to spend more time on the layout of the content.
Instead of simply deleting what you think is "unimportant", you should rearrange the layout of the content. To make it easy for users to read, try to avoid using a lot of text, and it's good practice to rearrange the text to small icons or small items. In addition, using quotations, lines or other design elements to separate large paragraphs of text, so that these plates appear more beautiful.
Use visual elements to refine text elements:
- Headings use both text and icons.
- Use graphic element dates instead of text dates.
- Use small information icons to enhance the interpretation of the section.
- In addition to the font size change, use a different article/title color.
- Use a different light background color to distinguish between different content.
- Use Gao Lianlai to emphasize important parts.
- Use padding and negative spaces to highlight text or to differentiate text.
- Use a different view to break the content down into smaller pieces.
From the user's point of view, they want to read all of the content, so we do content rendering, only with partition, reorganization or other visual solutions to make these content easier to access.
3. Feedback
Feedback is a key part of the design, especially the mobile Web page, user feedback is particularly important.
Mobile devices do not have mouse hover and animations, and most devices are displayed when they are touched, so it is important to provide clear operational feedback in a timely manner. In real life, when I use ATM, the feedback information includes the auditory (key sound), Touch (button metal cold feeling), but on the mobile device, we have only one choice-visual feedback.
Use visual feedback mechanisms to communicate with users:
- Use color to highlight the selected area.
- Use fade animation when the user switches.
- Use border color and gradient to indicate button touch status.
- Use a different button or text color to show changes in status.
- When you select the Pull-down menu, use the turning/turning arrows.
- Use a slide or gradient animation between views to show changes in the area.
4. A clear brand
Each company or application has a different style of brand elements, the key to shaping the brand is the design elements such as logo, font and color, etc. to be able to represent the brand. This is crucial for mobile web design. The location of the logo may be different from the computer version, and may even be present in the main view of the Web application, so the color scheme is important.
Another point to note is that the top of the phone page does not have a title bar or address bar, accordingly, there is no site title and icon. So your design should let users know that the name of the site they are browsing is also important to branding.
5. White leaves
Although the size of the screen has become smaller, the gap is still not less, because white is the key to all good design. In mobile web design, because of space constraints, in order to make the design more efficient, usable, readable, all elements (buttons, navigation, icons, text, etc.) need to be ordered and correctly arranged.
This is not to have you cut the content to achieve the purpose of white, nor is it to use large characters for users to read. Mobile web design needs more than the computer Web design more UI planning, and white planning is playing an important role.
Stay white to create a better user experience:
- With smaller fonts, there is a blank space around the text, which is not as bloated as the big print.
- Use a lot of padding around all the square elements to build blocks of text or icons.
- Elements and elements are distinguished by a large number of clear white grids.
- Use a large number of padding around the entire view to surround all elements so that the elements overflow into areas that cannot be manipulated.
English Original: 5 things Every Mobile desigh Should Have
