5 key words to see the similarities and differences of UI design of applet and app


Keyword 1: Friendly and polite Corresponding to Apple: Less is more
Apple made a very big interface adjustment in iOS7, focusing on highlighting the content and removing all interface elements that would interfere with the user. This style has continued to this day (with Apple's own apps, such as compass and weather, can be seen as an example).
WeChat also emphasizes this principle at the beginning of the guide and illustrates it with two positive and negative examples. First, don’t put irrelevant factors on the search page. It’s better to put recent search terms, commonly used search terms, etc., and second, don’t give users too many options (now more and more people with phobias choose).
Keyword 2: Clear and clear corresponds to Apple:
The first of the three principles in Clarity Apple's HIG is clarity, which has several meanings, one of which is that developers are obliged to answer the three major questions of users through the navigation bar settings:
· Where are you currently?
· Where can I go?
· What can you do where you go?
WeChat also re-emphasized the importance of clear navigation settings, and solved the problem of where and how to go back directly at the WeChat level. As long as the developer defines where to go, it is OK. As for the navigation bar, in addition to the color There's not much developers can do outside of making changes. For example, the status bar of iOS provides two styles, dark and light, and the applet navigation bar also has these two styles, which are integrated with the status bar.
As for the color selection scheme, WeChat also gives an example. The principle is to have a harmonious color scheme without affecting the readability of the text. This is actually something Apple is particularly concerned about. It is recommended that the contrast between the text and the background color should be 4.5:1 – 7: between 1.
In addition, developers can embed their own navigation bar in the WeChat navigation page, but this is not recommended. If necessary, try to use tabs (Tab), with top and bottom styles. Apple's suggestion for the Tab bar is 3-5, WeChat recommends 2-4, putting too many options will not only make the page complicated, but also difficult for users to operate.
Keyword 3: Feedback in time corresponds to Apple: Responsiveness
Wechat spends a lot of space emphasizing the need for timely and feedback when loading pages. This must be related to the positioning of the applet itself, so basically everything that can be done can be done for developers. For example, the startup page can add a Except for its own logo, other elements cannot be changed. Many in-program animations are defined by WeChat standards, which is quite different from the flexibility of iOS native apps.
However, the two are the same in principle, to ensure that the interface responds to the user's actions in a timely manner, even during the loading process. Since the applet needs to highlight the brisk characteristics, it is not surprising that WeChat focuses on rendering this part, and the handling suggestions in different situations are explained in detail through examples.
Keyword 4: Convenience and elegance correspond to Apple: User Friendly
WeChat mainly mentions the problem of reducing input and avoiding misoperation, which is highly consistent with Apple, but Apple provides more controls to choose from.
In terms of reducing misoperation, Apple requires that all touchable ranges should be above 44pt, while WeChat is more accurate, converting this into a physical size of 7mm-9mm.
Keyword 5: Visual specification corresponds to Apple: Legibility
Apple can say that it has extremely high requirements for the readability of text, and launched its own font SF (San Fransisco) in 2015, a set of fonts that are specially optimized for this. , in addition, defines a set of dynamic font standards to ensure that anyone can read happily on iPhone and iPad.
The font of WeChat must be consistent with the system, and other considerations are similar to those of Apple. However, in order to ensure that the text is clear and readable, WeChat has gone a step further and directly defines the color of various texts. Considering the coordination with itself, even the color of the linked font, the wrong font, and the completed font are all dead. , without any room for play.

Finally, I also compared the controls of the two. The controls provided by WeChat are very "WeChat". Even the size, color, font size, etc. are stipulated, and there is no room for manipulation. For example, the Button control in the figure below, the developer Just choose among these 10 styles. In contrast, iOS controls provide developers with a broad customization space, which also reflects the different positioning of the two platforms.

In general, Apple and WeChat share the same UI design concepts, which are simplicity, clarity, and timely feedback, but WeChat is more detailed in specific explanations, trying to avoid misunderstandings. In addition, in addition to Clarity, Apple's three major design principles include Reference (compliance) and Depth (depth). The latter two are less talked about on WeChat, which is also due to the different positioning of the two.
I believe that after understanding the above information, you can understand the difference between Mini Programs and Apps more clearly. From the UI level, the Mini Program interface is unified, or it looks like a WeChat, while the App has thousands of people. more colorful.
Original link: http://bbs.jointforce.com/topic/24382

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326466020&siteId=291194637