在用户使用APP的第一直观感受，便是我们所设计的ui界面，所以界面的信息阅读的舒适感、颜色配色是否合理都是在第一时间直接的传递给用户，我们在界面这块需要注意的设计细节。

提高用户阅读效率

在界面设计中，界面能否准确的将信息传达给用户,让用户在使用产品的过程中对信息的接受比较快速，所以界面的信息呈现的清晰度是设计师必备的能力，也是基础能力，我们通过细节处的把控，让设计助力用户对界面信息的理解，也许我们下的心思用户可能不会注意，但是它确确实实起到了作用，关于提升用户的阅读效率，我们可以从以下几方面去入手。

视觉降噪

要让用户能清晰的理解我们的产品的第一步是需要整理界面中信息，把干扰用户的信息都要进行处理，关于视觉降噪我们可以入手的细节有：

1.弱化小面积色彩

小面积的色彩我们在视觉上会将他看作为点，当点在界面中比较多的时候，会将用户的视线分散，给用户阅读上造成不好体验，所以我们在设计界面中的标签或者有图标的颜色的区分的时候，我们尽量要控制颜色的种类，不宜太多，另外如果带颜色的小标签也会给用户一种是按钮的心理暗示，所以，我们在设计中需要考虑到用户的使用场景和表意。

2.减少次要对比  

在APP中会有很多复用的板块以及功能相似的板块，我们尽量需要让他们去保持统一，比如像feed流这样通用的样式，只要有差不多的feed列表出现，我们需要在通用组件里去调用这个feed列表，其次是我们在每个列表和卡片中有不同种类的信息字段，并不是每次出现新的信息我们都要在样式上作出区分，我们需要尽量的衡量表意和层次，尽量让字段文字能保持统一，从而提升阅读的舒适感。

3.整合半透明  

一般的半透明浮层都是为了区分页面的层级，例如在支付时候，弹窗的半透明的选项卡，这些在视觉的Z轴的层级都是最高的，优点是可以强化浮层与底部的关联性，缺点是会使得视觉上不够整齐，所以当功能层面关联性不强的时候，我们尽量不要去使用半透明的设计形式，所以半透明的浮层通常会用户一些辅助的流程和体量比较好的任务型页面，这样的会让交互效率和层级都是比较清晰。

4.弱化分隔  

界面的设计都是以板块去区分每个功能层级模块的不一样，所以合理的设计分隔的样式对于设计师也是一种细节处的考虑。我们在分割的重要层级也是有区分的，分割层级最高的是卡片分割，其次是分割条，在其次就是分割线，而分割线也有种，一种是通栏的分割线，另外一种是不通栏的分割线，所以分割线的层级区分是通栏的高于不通栏的分割线，还有一种情况是通过间距（留白）来区分层级，一般是通过留白没办法去区分页面层级的时候，我们才会考虑用分割线来区分。

界面设计中的视觉分割

5.元素图形化

我们在APP中看到一个陌生的形状的时候，这个会在界面中形成视觉噪音，“人们在观察熟悉的视觉形象时，会把不完整的局部形象“作一个整体的形象来感知，这种知觉上的结束，称之为闭合。如果局部形象过于陌生或者简略，则不会产生整体闭合联想，这时大脑会产生负面体验”。

所以我们在界面中的元素摆放通常会将它们摆放成人们生活中比较常见的形状，便于用户去联想，来提升用户的阅读效率。

视觉聚焦

在用户打开APP去浏览的时候，在没有干扰的情况下，用户是根据自己的喜好去浏览页面，用户对板块内容的偏好决定用户注意力的所在之处，更多的时候，我们想要用户根据我们设定的浏览路径去浏览，我们就需要在设计的时候给用户埋下“陷阱”。关于设计聚焦，我们可以从以下三个角度上入手：

1.焦点放大  

在提升用户阅读效率的设计中，比较重要的就是主次要分明，将需要让用户了解到重要信息需要放大，让用户的视觉动线有落地点

2. 浏览形式的选择   

UI界面的排版往往需要考虑到不同字段的重要层级而去采用不同的设计样式。由于我们很多APP的品类的不同，每个产品都很难遵循常规页面布局来设计。尽管没有一种布局方法适合所有目的，但回到设计的基础上并理解诸如“ F”和“ Z”之类的视觉模式可以帮助简化产品布局，并使产品能够更有效地与用户进行交流。

3. 对齐基线

通常我们在设计界面的时候，在文本需要对齐的时候，不需要强制性的与列表最边缘对齐，并且当文字出现两列时，需要设计师主动控制第二列视觉起点，保证符合视觉对齐基线。而在有输入的表单的标题的长短不一致的时候，我们也是归档一端的对其基线，来稳定基本的视觉舒服感。

容器收纳

我们每个APP都会承载大量文字、图片、视频的各种操作控件，UI设计师的职责便是将他们按照美的形式来排版设计和归类，其中归类信息承担的责任便是用户对信息的理解和吸收，所以，这是我们不可忽视的一步。关于容器收纳我们可以通过以下设计策略进行：

1.接近性原则归纳法

单个视觉元素之间无限接近，视觉上会形成一个较大的整体。距离近的单个视觉元素会溶为一个整体，而单个视觉元素的个性会减弱。如果相关的元素不够紧凑，用户浏览时就需要根据内容进行主观上的判断，降低阅读效率，所以在设计的时候，我们尽量要将相关联的元素靠的比较近，不相关的元素隔的比较远。

2.卡片既是容器

当产品中的图标字段和文字和字段比较多的时候，我们想要将他们有序的区别开，且不会很凌乱，这个时候我们可以考虑用卡片的来分隔页面，这样板块与板块直接会更加清晰明朗，而且列表中的信息比较多的时候，通常是采用卡片的形式进行划分，让界面看起来更为整洁。

3.同属性板块整合

我们用户在同一个板块看到的相关的元素和列表的时候，我们潜意识会将他们认为他们是有关联的，所以，为了避免用户出现认知断层，我们尽量要将界面中不相关的元素不要放在一起，不然会影响用户在使用过程中对自己信息的判断。

提高视觉舒适度

视觉的舒适度是用户对于产品比较直观的感觉，它在于我们设计对产品颜色的把控、图标的细节以及其他细节方面的处理。关于视觉舒适度我们可以通过以下设计策略进行：

色彩的协调感

我们产品中一般所包含的颜色的种类会比较多，而协调感是人类生理上和心理安全感的需求，也是受众时间持久阅读的色彩保障。关于色彩的协调感我们可以通过以下设计策略进行：

1.品牌色的延续

我们生活比较常见的黑色，除了将眼睛闭上，一般不会有纯黑的颜色，纯黑色会给与人一种比较闷的感受，比如黑色的夜空不会是纯黑色的，黑色的电脑显示器也不是纯黑色的，显示器上我们去浏览的字体，也不会给我们纯黑色的的。

所以我们在产品中对黑色的文字的处理也不应该去选用纯黑的，纯黑的色彩的选用会给我们用户的视觉来一次断层的处理，感觉这个颜色会比较突兀，所以，我们较早之前为了避免纯黑色文字的出现会采用“高级灰”的文字色彩，即在纯黑色上偏灰色的色相，随着用户体验设计的水涨船高，我们现在为了避免文字出现比较纯的黑色一般会黑色上往自己产品的主色调去偏移，这样既不会出现纯黑色的不好体验，也可以对自家产品色的一个颜色，提升对品牌的感知度。

2.让配色有规律

一般在我们APP产品的配色中，让人感觉配色不协调因素主要有两个，一个是色彩选用的过多和过杂，会让人感觉颜色的突然出现会比较突兀，第二个是页面中的色彩缺少关联性，让用户看起来哪个颜色都是新出现的，使用起码比较容易在当前的产品跳出，感觉进入了一个全新的产品。

所以我们在产品中是色彩的选用，尽量定好一组常用的色彩，然后便可以在界面中的图标、插画中去复用，提升色彩在产品中的规律，让色彩在页面中能有呼应。

3.纹理解决配色的极端场景

我们在日常的设计工作的交接过程中，经常会听到领导这样的说，“这个背景配色太单薄了，不够丰满”这样的言语，这个时候我们可以采用点缀的纹理来装饰，通过使用同类色来增加点缀的元素从而让视觉上更加协调，来增加产品的通透感，使得我们产品的搭配呈现上会更加的立体。

视觉层次设计提升UI设计的易读性

图形体现细节

图形体现细节不是说我这个图形在画的时间有多长，而是你的思考点需要深，有些地方是别人想不到的，图形体现细节我们思考的点是将图标的设计流程化，标准化。

图标在我们在界面中占有举足轻重的地位，它花费的时间是仅次于我们运营插画的设计，所以我们需要花心思做思考，去设计，图标的风格也会带领界面的风格的走向，所以，图标的设计也是ui设计师的基本功。

图标设计有科学的流程，每一次产品中图标的迭代改变图标都是经过千锤百炼的，在设计图标的过程中，有一套科学的流程，我们在提案讲诉的过程中，会更加人信服。

 

提高产品品质感

在设计中，如何可以做到产品品质感高级呢？这是我们经常会遇到的问题，其实高级感可以理解为一种可以传递感染力的设计，那么哪些界面中设计元素会影响人呢？例如我们的色彩等。另一种高级感就是Dieter Rams(迪特・拉姆斯)在“设计十戒”中提到的“好的设计是尽可能是无设计”，我们可以理解为，在设计中我们需要克制，让产品统一且简洁。

提升设计品质的6个实战技巧

作者：Alice