Editor’s note: As a field matures, there are things like “routines,” which are the rules that users and designers/developers develop in a gradual process. When designing mobile devices, there are some basic things to do well before considering differentiation. Today we are going to talk about this
If you look closely at the interaction design of the best mobile products of recent years, they all have one thing in common: their basic functionality and design are perfectly executed. They take cues from the most basic patterns of human behavior and, through good design and execution, quietly remove all obstacles for the user. When this happens, the user experiences amazing visuals and outstanding interaction, especially browsing experience. In today’s article, let’s take a look at the key and core mobile design projects and summarize the “core test points” of mobile design today.
Effective typographic design
Whether you’re designing a web page or an APP, the text establishes a clear relationship between the user and your product, and all the text helps the user get where they want to go. Therefore, typographical design plays a critical role in the interaction. The size of the text and the overall layout design on the screen have a huge impact on the user’s reading experience: when the text is too small and the spacing between lines and words is tight, it takes longer for the user to recognize the content, and many users simply skip much of it. The problem is even worse when it comes to mobile: too small fonts on a small, bright screen, poor recognition and glare can be a headache for users. Typography has an even greater impact on mobile users.
The key to text layout on mobile is to balance legibility and space utilization. When designing text for a mobile interface, choosing the right font size and spacing are two of the most important factors. The font size needs to be large enough to be recognizable to the vast majority of users, and enough spacing to make the content feel like it breathes and doesn’t feel cramped on a small interface. Of course, these are the bottom line, font and spacing is not the bigger the better, moderate and comfortable is the ultimate goal.
A good example is the font and pitch design on Medium’s iOS client.
Tip: To ensure the readability of mobile devices, English text should be 30 to 40 characters per line, and Chinese text should be 20 characters per line. On the desktop, English characters are usually limited to 60 to 75 characters, which makes people comfortable to read.
Simple color schemes
Color is the most complex part of visual design. Too complicated colors can sometimes make users feel uncomfortable. Simplifying color schemes can improve the overall experience. Learn to say no to complex color schemes. If a simple color scheme makes your design look a little monotonous, you can create a rich but not complicated color scheme by adding different saturation and lightness of existing colors in the same color system.
Blue monotone color scheme
The following APP design case adopts a monochrome color scheme, which forms a compact but not monotonous color scheme through different tones and saturation of the same color system.
Tip: There are a lot of tricks to creating a color scheme from scratch, but it’s not complicated in itself. Check out our article and use the right tools to create a color scheme. If the existing color scheme itself is monotonous, or the overall neutral, then might as well add a bright color, so that it can better attract users’ attention, simple and do not lose personality.
Content-based card navigation mode
No matter what content you want to present in your app or web page, you want your users to experience it as easily and fully as possible. The idea behind content-based navigation is to seamlessly switch between overview and detail, and card-based design works best because card-based design can organize content uniformly and freely, and can easily digest a large number of different types of content:
· Cards divide users into more meaningful blocks, allowing for higher screen utilization. Just as different paragraphs of text make up an essay, card designs carry different types of content on cards to form a coherent flow of information. · Cards are designed for mobile touch interaction. Users can click, slide and flip cards intuitively and naturally without learning, based on the rules of real-world physics.
Tip: To make the interface truly invisible, focus on the content.
Level and depth
Perhaps the most obvious difference between desktop and mobile is screen size. Due to the limitation of the screen size of mobile devices, more and more mobile APP designs begin to focus on the interface level and depth to make the interface have “thickness” and add a “Z axis” to the original plane.
Layers give depth to the interface and make the experience more realistic
The layered interface Design has even become the core Design principle of Google’s Material Design, which refers to the way people interact with different objects in the real world and integrates these physical laws into the interface interaction. The surface layer and shadows cast in the background play an important role in the interface hierarchy, separating different controls and elements into different layers.
The most common elements and characteristics of layered interfaces are:
· Floating operation button. Commonly used, recommended actions are integrated into these floating buttons, and you usually need to click on a circular button floating at the top of the screen to expand all of the floating actions.
· Zoom in and expand. One of the most common examples of hierarchical interfaces is that when you click on an item in a list, it expands to show details, and then you can zoom back to see the full list view.
· Top navigation. Keep necessary menus at the top of the screen for easy operation when the user operates.
· Typical popover. Similar to desktop pop-ups, these are superimposed on an existing interface to allow users to log in, prompt information, and even display advertisements.
Tip: Simplify your process so that you can only do one thing per screen.
Familiar gestures
Based on gesture to the mobile terminal of the interaction, change the way we communicate with smart devices and operation, touch screen is no longer simply click on the target, the more complex sliding and multi-touch gestures has brought more possibilities, from scaling, return to delete, we can do more and more, the established gestures action rules also gradually formed.
More apps are relying on gestures, and there are fewer buttons on the screen, freeing up more space for valuable content. As a result, apps themselves are increasingly focused on the presentation of content.
Tip: When we talk about standardized gestures, we emphasize the “intuitive” and universal nature of gestures. Think twice before you get creative with your gestures. Gestures are inherently hidden, so without some visual guidance, users may feel confused about how to interact with the APP.
Functional kinetic effects
Functional dynamics here refer to subtle dynamics that are embedded in the user interaction flow and usage process. They act as coordinators and connectors between interfaces and interactions:
· Provide visual feedback:
When the user sees these animations as trigger feedback, they know they’re done.
· Smooth transitions to allow users to notice changes:
Icon changes can have different effects at different stages.
Tip: Subtle motion effects can subtly connect different interfaces and states to improve the user experience. But don’t abuse kinetic effects. Focus on the experience, not adding kinetic effects for the sake of using them.
conclusion
I have to say that with the development of technology and the accumulation of experience, the current mobile design is full of routines. The outstanding designs that stand out have their own characteristics, but in the basic design, they are all equally excellent. As we concluded today, clean interface, simple color scheme, pleasing motion and layout, these are the basics, then explore their own characteristics.
Nick Babich: User Experience Design
By Nick Babich, author of uxPlanet
Review images
This article is originally translated by youset.com, please respect the copyright and translator’s achievements, please attach the youset.com link to transfer, violators will be corrected. Thank you for your cooperation.
[Yushi.com original article submission email: [email protected]]
= = = = = = = = = = = = = = = = nets about optimal set = = = = = = = = = = = = = = = = “optimal set uisdc.com” is the most popular web designers learning platform, dedicated to share web pages design, wireless terminal design and PS tutorials. 100 Books designers Need to Read: The most comprehensive Guide to Designer books ever: hao.uisdc.com/book/. Design micro blog: with 1.5 million fans of the popular micro blog @excellent web design, welcome to pay attention to get web design resources, download the top design materials. Design navigation: the world’s top design website recommended, designers must navigation: hao.uisdc.com