文章列举了一些界面设计中的案例细节，希望对产品设计工作有所帮助。

UI设计工作中，设计师们往往不喜欢将界面设计得与原型图一致，总会刻意的去寻求存在感与原型做出差别，那么对于UI设计师来说，更应该懂得用户体验，成为办个用户体验设计师。

以下列举了一些界面设计中的案例细节，希望对设计师们有所帮助。

一.图标

1.统一图标的样式

图标在界面设计中还是占着较大的比重，它的存在有利于平衡界面，也让页面看起来更加的美观，也有一定的提示作用。图标风格有：线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。

在决定使用某一风格的图标设计之后，在相同木块下，请尽量使用同一的风格的图标，如填充图标的色彩饱和度；线性图标的线条粗细；拟物风格的光线阴影等。

2.意义明确的图标

很多人都喜欢纯图标式的设计，去掉文案试图让图标看起来更高大上，但是往往忽略了图标最重要的作用是提示用户该按钮的功能。如上图所示，去掉文案之后很多图标根本无法准确表达出确切的含义，这也是图形的缺陷。

做好图标和文字的排版与比例一样可以设计出好看的界面。

3.图标的视觉平衡

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

4.符合用户心理的图标（按钮）

图标在大多数情况下都是充当着按钮的作用。设计时必须要清晰准确的传达出当前状态，不能为了视觉效果而带给用户错误的判断，例如深灰色的按钮用户会理解为是禁用状态而放弃点击。

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

二.布局

1.合理的模块区分

界面设计中不乏内容信息很多，需要折叠的情况。因此经常存在信息的层级关系，而这时就需要利用不同的颜色对各个模块进行区分，利用同色系不同明度来体现这样的层级关系。这样也让用户更容易理解当前所处的模块。也让页面看起来更丰满些。

2.正确的文字层级关系

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

3.合理的内容归纳

应该善用色块和分割线对页面的内容进行合理的归纳和整理。线条通常用于分割同一类别或拥有相同属性的元素；而色块更多的是用于分割不同类别或者区分不同属性的元 素，以达到层次清晰，归类明确的目的。但是所有的一切都应该服务于信息的准确表达，切忌不可为了视觉上的协调而强行的合并或折叠。

4.预估内容承载范围

新人总是会忘记规范信息呈现的边界宽度。程序在开发的时候总会问，你这个超过长度之后如何显示。有一些程序更是直接用右图的”…”显示。但是在这样的情况下，作为地址这样的简单信息的展示，还需要用户去点击一次才能看见全部地址，明显是不合理的交互。因此我们在设计界面应该要考虑到超过展示边界的时候该如何展示，如何取舍。

5.尊重App用户的使用习惯

许多App的设计师都是由网页设计师转行而来的，但是App界面有其特殊性。它界面小，过小的按钮无法像鼠标一样能够精确点击。因为有一些网页的设计习惯不应该带到App的设计中来，这也是交互设计师在App的设计过程中需要去把关和注意的。

三.设计元素

1.颜色

页面信息总是各有权重。在选用配色方案的时候，在界面中最好不要使用3个以上的颜色。最好能以一个主色+两个辅色最佳。颜色太多会让用户模糊界面的焦点。无法聚焦在我们想让用户聚焦的信息上。

2.透明度与投影

通过对按钮、卡片等进行投影运用可以增强立体感与层次感。

给予用户该卡片能够切换，且当前展示的信息为该卡片的详情的交互暗示。虽然不加投影和阴影也能达到这个效果，但是效果会弱不少。

3.表单

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

4.缺省页

作为用户当遇到页面内容为空的时候本身就是一件比较沮丧的事情。因为应该加入一些情感化的设计。在空界面的一些设计中也由以前的纯文字转变为一些应景的插画表现，带给用户更多的愉悦感。

本文由 @endlishted 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自PEXELS，基于CC0协议