UI案例

入手的新人或是经验不足的设计师，往往很难把控APP界面的设计细节。字号差一点、主次区分不清、投影深了一点点、配图不统一等。都能决定UI界面的品质。

It is often difficult for new or inexperienced designers to control the design details of the APP interface. The size is a little bit, the primary and secondary distinctions are not clear, the projection is a little deeper, and the drawings are not unified. Can determine the quality of the UI interface.

下面用24个案例为大家分析移动APP界面的细节，这些往往是新手设计师常犯的错误，请大家认真看看，会有收获。

The following use 24 cases for everyone to analyze the details of the mobile APP interface, these are often novice designers often make mistakes, please look carefully, there will be harvest.

一、视觉表现型问题

Visual phenotype problems

01、勿过度装饰，让更界面简洁

do not overdecorate, make the interface more concise

设计需要准确的把握“度”，过度的设计会干扰信息的传达。减少不必要的设计元素，让信息脱引而出，整个界面将会更加简洁清爽，也不会分散用户的注意力。

Design needs to accurately grasp the "degree", excessive design will interfere with the transmission of information. Reduce unnecessary design elements, let the information out, the entire interface will be more concise and clean, and will not distract the user's attention.

02、图标大小的视觉平衡Visual balance of icon size

同一个界面出现多个图标时，我们需要保持整体的视觉平衡。并非是所有图标都采用相同的尺寸就能达到平衡，由于图标的体量不同，相同尺寸下不同体量的图标视觉平衡也不相同，例如相同尺寸的正方形会比圆形显得大。因此，我们需要根据图标的体量对其大小做出相应的调整。

When multiple ICONS appear on the same interface, we need to maintain the overall visual balance. Not all ICONS use the same size to achieve balance, because the volume of the icon is different, the visual balance of different volumes under the same size of the icon is not the same, for example, the square of the same size will be larger than the circle. Therefore, we need to adjust the size of the icon according to its volume.

03、优化你的分割线Optimize your dividers

界面设计中往往细节的处理最容易被忽略，根据界面配色的不同，我们在分割线色彩的选择上面也要做出相应的调整。由于分割线的作用是区分上下信息层级和界面装饰，配色的表现力要低于文字信息的力度，通常我们会选择浅色而否定深色，这样界面会更加简洁通透。深色的分割线要慎用，除非在一些特定的产品场景下。

In the interface design, the processing of details is often the most easily ignored. According to the different color matching of the interface, we should also make corresponding adjustments in the selection of the color of the dividing line. Since the function of the dividing line is to distinguish the upper and lower information levels and interface decoration, the expression of the color is lower than the strength of the text information, usually we will choose light colors and deny dark colors, so that the interface will be more concise and transparent. Dark dividers should be used sparingly, except in some specific product scenarios.

04、合理的运用投影的颜色与透明度Use the color and transparency of the projection properly

通过对按钮、卡片等进行投影运用可以增强立体感与层次感。我们在制作投影时，需要根据不同背景改变投影的颜色、透明度。Through the projection of buttons, cards, etc. can enhance the sense of three-dimensional and hierarchical. When we make the projection, we need to change the color and transparency of the projection according to different backgrounds.

浅色背景下投影的颜色会选择拾色器偏左上角的位置和透明度在10%~40%（个人经验）之间进行调整。深色背景下投影的颜色会选择拾色器偏右下角的位置和透明度在20%~40%（个人经验）之间进行调整。The color projected on a light background will be adjusted by selecting the upper left corner of the color picker and the transparency between 10% and 40% (personal experience). The color of the projection on a dark background will be adjusted by selecting the lower right corner of the color picker and the transparency between 20% and 40% (personal experience).

投影的权重要符合页面设计的氛围，投影的运用是为了增强元素的立体感与层次感，而不是影响整个页面的视觉平衡。The importance of the projection is in line with the atmosphere of the page design, and the use of the projection is to enhance the three-dimensional and hierarchical sense of the elements, rather than affecting the visual balance of the entire page.

05、统一的图标设计风格Unified icon design style

图标设计在整个APP设计中是比重较大的板块之一，图标设计风格有：线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。无论我们选择何种表现形式的图标都请保持统一性，相同的模块采用一种风格的表现形式，如果是线性图标就保持一致的描边数值。

Icon design is one of the most important parts in the whole APP design. Icon design styles include: linear icon, fill icon, face icon, flat icon, hand-painted icon and simulated icon. No matter what form of representation we choose, please maintain consistency, the same module to use a style of representation, if the linear icon to keep the same stroke value.

图标在配色上面也要保持有规律的统一，采用相同颜色是比较常用的配色方式。如果你采用不同色相的配色方式，要保持整体的配色协调，不要出现饱和度、明度反差过大的配色而影响整体的视觉协调。

The icon should also be regularly unified in the color matching, and the same color is the most commonly used color matching method. If you use different color matching methods, to maintain the overall color matching coordination, do not appear saturation, brightness contrast is too large color and affect the overall visual coordination.

06、图片比例&视平线的统一性Picture scale & uniformity of eye level

在人物展示的设计中，如果并列出现多个人物形象，为了保持视觉平衡我们需要调整并列图片的大小比例，就像所有角色都是在相同焦距下拍摄的。在人物上下位置的调整上面我们要尽量控制视平线的方向，让他们的眼睛处于相同的位置左右。

In the design of character display, if multiple characters appear side-by-side, in order to maintain visual balance, we need to adjust the size ratio of the side-by-side pictures, as if all characters are shot under the same focal length. In the adjustment of the upper and lower positions of the characters, we should try to control the direction of the eye level line, so that their eyes are in the same position.

07、控制好界面中的配色数量Control the number of colors in the interface

一个界面中出现3种左右的配色是相对比较容易把控的，如果超过3种以上的配色，是非常考验设计师功底的，如果颜色的处理不到位就会出现五彩斑斓的“视觉盛宴”。

The appearance of about 3 kinds of color matching in an interface is relatively easy to control, if more than 3 kinds of color matching, it is very testing the designer's skills, if the color processing is not in place, there will be a colorful "visual feast".

在选择配色组合时，使用相似色的配色方案可以使颜色更加协调和交融；如果希望更鲜明地突出某些元素，对比色是不错的选择。无论选择何种配色方案，都要控制好界面中的配色比重，使信息传达不受干扰。

When choosing a color combination, using a color scheme of similar colors can make the colors more coordinated and blended; If you want to highlight certain elements more sharply, contrasting colors are a good choice. No matter what color scheme is selected, it is necessary to control the color proportion in the interface so that the information transmission is not interfered with.

08、合理的进行设计对比Reasonable design comparison

通过对比可以让信息模块更加独立，界面层级关系更加丰富。案例中以不同的背景颜色区分不同的信息模块，提升了整个界面的节奏感。颜色的选择可以是同色系中不同明度的梯度表现，也可以选择不同色相的穿插搭配。

The comparison can make the information module more independent and the interface level relationship more rich. In this case, different background colors are used to distinguish different information modules, which enhances the rhythm of the entire interface. The choice of color can be the gradient performance of different lightness in the same color system, and you can also choose the interpenetration of different colors.

09、提高配图的质量Improve the quality of illustrations

图片的质量影响着整个界面的格调，现在越来越多的产品都会对图片进行美化后再展现给用户，目的就是为了提升产品在用户心中的印象。我们在设计提案的时候对配图的选择也要精挑细选，通过后期裁剪、曲线调整、色彩调整等技法使相同模块的配图视觉效果更加协调。

The quality of the picture affects the style of the entire interface, and now more and more products will beautify the picture and then show it to the user, the purpose is to improve the impression of the product in the user's mind. When we design the proposal, we should also carefully select the selection of illustrations, and make the visual effects of the same module more coordinated through post-cutting, curve adjustment, color adjustment and other techniques.

二、信息传达型问题Messaging questions

10、明确表达图标的含义Clearly express the meaning of the icon

去掉图标文案之后界面会显得更“逼格”，可是你确定用户能看懂图标表达的含义吗？我们在进行界面设计时，图标是为了辅助说明文案所传达的信息，如果去掉文案信息，那么需要图标本身带有很强的信息传达能力，确保用户能正确的识别。

Removing the icon copy will make the interface look more "awkward", but are you sure the user can understand the meaning of the icon? When we design the interface, the icon is to help explain the information conveyed by the copy. If the copy information is removed, the icon itself needs to have a strong ability to convey information to ensure that users can correctly identify it.

11、正确的表达按钮属性Properly express button properties

按钮的设计必须要清晰准确的传达出当前状态，不能为了视觉效果而带给用户错误的判断，例如深灰色的按钮用户会理解为是禁用状态而放弃点击。

The design of the button must clearly and accurately convey the current state, and cannot bring wrong judgment to the user for visual effects. For example, the user will understand that the dark gray button is disabled and give up clicking.

通过按钮的颜色、大小、风格等来引导用户进行操作，需要强化的就要做得突出，不要整个界面都处于主次不明的状态，分散用户的注意力，削弱了界面需要传达的主旨。

Through the color, size, style of the button to guide the user to operate, the need to strengthen the need to do prominent, not the entire interface is in a state of primary and secondary unclear, distracting the user's attention, weakening the interface needs to convey the theme.

12、正确处理文字排版的层级关系Properly handle the hierarchy of text typesetting

工作中我们拿到的需求总会出现大篇幅的文案，不能像概念设计那样任性的删减，在进行文字排版的时候，正确的处理信息之间的层级关系将会提高用户对信息的识别度。我们通常会通过字体大小、颜色、留白、层级分割等技巧来处理，把相同属性的信息归类设计，通过留白的不同达到层级的区分，让整个信息排列主次分明，层级清晰。

In the work, there will always be a large length of copy, which can not be arbitrarily deleted like the conceptual design. When the text is typesetting, the correct handling of the hierarchical relationship between the information will improve the user's recognition of the information. We usually use font size, color, white space, level segmentation and other skills to deal with it, classify and design information of the same attribute, and achieve hierarchical differentiation through different white space, so that the entire information arrangement is clear and the level is clear.

13、线条与色块分割的合理运用Reasonable use of line and color block segmentation

线条通常用于分割同一类别或拥有相同属性的元素；而色块更多的是用于分割不同类别或者区分不同属性的元    素，以达到层次清晰，归类明确的目的。我们在选择分割形式的时候要根据信息之间的关系作出明确的表达，不可为了视觉效果而盲目的穿插运用。

Lines are often used to separate elements of the same category or with the same attributes; The color block is more used to divide the elements of different categories or distinguish different attributes, so as to achieve the purpose of clear hierarchy and clear classification. When we choose the segmentation form, we should make a clear expression according to the relationship between the information, and cannot blindly intersperse the use of visual effects.

14、要提前预估信息呈现的最大值Estimate the maximum value of information in advance

在进行界面布局时，明确信息呈现的最大值，而不是取最小值进行设计。过于理想的长度范围也许界面样式更美观，可是落地之后就会给用户带来非常糟糕的体验。

In the layout of the interface, it is clear that the maximum value of the information is presented, rather than taking the minimum value for design. Too ideal length range may be more beautiful interface style, but it will bring a very bad experience to the user after landing.

15、运用提示符提高用户的阅读效率Use prompt to improve user's reading efficiency

在大篇幅的文字信息布局中，合理的运用提示符会提高用户对信息的理解和快速找到需要的信息。提示符可以是数字、字母、图形、色块等等，只要能有效的区分信息层级即可。

In the layout of large text information, reasonable use of prompt can improve the user's understanding of information and quickly find the required information. Prompt can be numbers, letters, graphics, color blocks, etc., as long as it can effectively distinguish the level of information.

16、布局层次分明，重点突出The layout is clearly layered and the key points are prominent

好的界面布局是为了更好的引导用户阅读和操作，界面布局要有层次和重点，而非简单的将信息进行罗列。通过卡片模块的区分和大小的变化可以很好的进行视觉引导，大大提高用户对界面的理解，从而提高用户的操作效率。

A good interface layout is to better guide users to read and operate, and the interface layout should be hierarchical and focused, rather than simply listing information. Through the distinction of card modules and the change of size can be a good visual guidance, greatly improve the user's understanding of the interface, so as to improve the user's operation efficiency.

17、信息布局符合阅读习惯The information layout conforms to reading habits

从左到右，从上到下的进行阅读是我们已有的习惯，如果你要打破这个习惯进行视觉表现，会承受挑战用户体验的强大压力。

Reading from left to right, top to bottom is a habit we have, and if you want to break this habit for visual representation, you will be under strong pressure to challenge the user experience.

三、概念表达型问题Conceptual presentation questions

18、相同界面下圆角&直角的统一性Uniformity of rounded corners & right angles under the same interface

在同一个界面设计中，圆角&直角的选择要更加统一的出现在界面中，不要出现混合运用造成视觉表达不一致。如果选择圆角作为视觉语言，统一相同模块下圆角的大小，不可出现大小不一致的情况，让整个界面设计的视觉语言更加规范统一。

In the same interface design, the selection of rounded corners and right angles should be more unified in the interface, and there should be no mixed use resulting in inconsistent visual expression. If you choose rounded corners as a visual language, unify the size of the rounded corners under the same module, and do not have inconsistent sizes, so that the visual language of the entire interface design is more standardized and unified.

19、设计元素的表达符合用户心理The expression of design elements conforms to user psychology

设计是为了更好的帮助用户理解界面的操作逻辑，如果你的设计改变了用户的心理与习惯，可能会增加用户的学习成本或者被用户抛弃。我们在进行界面设计的时候，如果要设计一些创新的操作规则，需要做更多的调研和测试，确保这个规则符合用户的心理。

Design is to better help users understand the operation logic of the interface, if your design changes the user's psychology and habits, it may increase the user's learning cost or be abandoned by the user. When we design the interface, if we want to design some innovative operating rules, we need to do more research and testing to ensure that the rules are in line with the user's psychology.

20、设计表达的一致性Consistency of design expression

相同的信息模块采用统一的设计表达，不要为了变化而加强用户的理解。前后信息设计的多样性也许在视觉上面更加丰富，可是用户会理解为这是两个不同的模块，操作会不会也不同，无形中就增加了用户的思考时间和学习成本。

The same information module uses a uniform design expression, do not change to enhance the user's understanding. The diversity of the information design before and after may be more visually rich, but the user will understand that these are two different modules, and the operation will be different, which will increase the user's thinking time and learning cost virtually.

21、别把网页的习惯带到APP设计中Don't bring web habits into your APP design

网页与APP的设计在本质上面有很多不同的视觉表现规则，我们在设计APP界面的时候要脱离网页的一些交互习惯，回归到移动用户的习惯中，让界面的操作逻辑更加顺畅。

The design of web pages and apps has many different visual presentation rules in essence. When designing APP interfaces, we should break away from some interactive habits of web pages and return to the habits of mobile users, so as to make the operation logic of the interface smoother.

22、让表单设计更简洁Make the form design more concise

表单设计在界面中随处可见，看到一望无际的表单用户总是望而却步。为了缓解用户的这种心理活动，我们设计的时候通常会通过合并归纳相同属性的表单，采用逐步填写来让用户感觉内容很少，通过这样的视错觉让用户完成表单的填写。

Form design can be seen everywhere in the interface, and users are always discouraged from seeing endless forms. In order to alleviate this psychological activity of users, when we design, we usually combine forms with the same attributes and fill them in step by step to make users feel that there is little content, and let users complete the form through such an optical illusion.

23、运用真实的信息填充你的设计Fill your design with real information

经常看到一些设计稿整个界面都是一样的配图，胡乱输入的文案，看起来显得非常的不专业。为了降低视觉落地的差值，我们在设计的时候尽量运用真实有效的信息去填充我们的设计稿，在提案的时候才能给决策者一个还原真实场景的有效方案。

Often see some design draft the whole interface is the same picture, random input copy, looks very unprofessional. In order to reduce the difference of visual landing, we try to use real and effective information to fill our design draft when designing, and only when proposing can we give decision-makers an effective plan to restore the real scene.

24、空界面中插画的运用The use of illustration in an empty interface

为了提高APP的情感化设计，插画的运用也开始越来越普遍。在空界面的一些设计中也由以前的纯文字转变为一些应景的插画表现，带给用户更多的愉悦感。

In order to improve the emotional design of apps, the use of illustrations has become more and more common. In some of the design of the empty interface, the previous pure text has been transformed into some situational illustration performance, which brings more pleasure to users.