《规律与逻辑·用户体验设计法则》 学习笔记7

书接上回，这次记录一下在界面设计中对于细节的把控应当怎么做。

该部分为书中第四章内容，视觉体验进阶后半部分。笔记摘自《规律与逻辑》。

该系列将暂时停更一段时间，接下来更新的内容将会与Vue，JavaScript等相关。

界面设计中的层次感表现

层次感是在满足视觉合理性的基础上，把要强调或者突出的主体与画面中的其他元素进行区分。通过对比版面中的元素大小、远近和前后等多重关系进行梳理，并运用色彩加以区分，可以使元素和主体在画面中具有一定的主次关系，让人在观看时产生一定的视觉层次和心理变化。对设计师而言，可以通过技术手段对主体自身的层次感进行调整，使画面在传递的过程中具有更好的视觉效果和层次变化。

• 文字的层级区分

拉开文字层级的首选备选方法：

字号>粗细>色彩明度>字体特效，越高优先级的越应优先使用，但越低优先级的效果越明显（并不一定是效果越好，好不好要看实际情况）
首级文字最好拉开对比，做一个字号粗细和间距的区分。排版要做到上重下轻，左重右轻。文字层次要做到大方向上统一，局部对比调和。

• 元素的复杂程度

一般界面的复杂度是和元素的重要程度挂钩的，比如主页可以做的尽量花里胡哨，但是二级页面基本都很简洁，不然还像主页那么丰富多彩就会显得很混乱。使用元素复杂程度体现层次感有两个要点，一个是图标的效果控制，另一个是插图的合理利用。

在同系列学习笔记5中我记录了关于图标的知识，图标在界面设计中把控层次感是很重要的，入口层级较高的图标建议带彩，使用面性图标或者线条比较粗的线性图标，工具类或列表等层级较低的就可以使用线条比较细的线性图标了。

插图是一种能提升产品情感与品质感的设计方式，但是插图并不适合在任何场景。层级较高的界面可以使用，层级较低的使用反而会显得多余。

• 间距的合理性

这里是亲密性原则的一种体现，也就是用户会认为相邻的元素是相关的，所以确实相关的元素是应当挨着近一些，确实不相关的元素应当挨着远一些。

分界线和留白的取舍应当看信息的重要性，重要度最弱的用留白，其次再用分界线。如果一个界面版块过多，可以用粗分界线处理。

如今的设计趋势更倾向于利用较多留白让界面版块更清晰透气，但这并不代表一个产品内所有的几面都需要这种大面积留白。一般来说一级界面可以使用较大的留白，清晰的布局让界面看起来轻松具有呼吸感，但二级三级页面再这样设计就有些过分追求形式了。用户点到二级三级页面大概率的目的是为了获取信息，所以在设计二级三级页面时的核心点在于同屏的信息承载力，但这也不代表二级三级页面得很拥挤，设计时也需要遵循基本规律。

• 学会信息归类

要把相同表意的信息归到一起，在视觉上把相关的东西集中在一个版块内，而不相关的东西要有明确的提示，否则会没有层次感。

“查看更多”按钮经常存在于各大网站中，这个按钮的奥妙相当多。这个按钮代表的含义大多是跳入二级页，一般这个按钮会跟随在当前板块的标题后面。这样做的原因是避免歧义，如果按照常规思路，把查看更多按钮放在这个版块的底部，会让用户感到迷惑，迷惑的点是这个查看更多到底是查看这个板块内的更多信息，还是查看更多其他版块？而把查看更多按钮放在标题后面，用户就能很清楚的意识到这是查看更多其他版块。造成这种现象的原因就是查看更多按钮放在底部失去了层次感，原本是标题等级的组件放在了内容等级，层次感就这样缺失了。

• 色彩的合理把控

在界面设计中，色彩的运用需要克制。每一种色彩的使用都得有其缘由和目的。对于色彩的把控，有三个问题需要注意。

第一个是相比于黑白灰，有彩色层级更高。很多设计师喜欢把导航条做的花里胡哨的，从视觉层级上压住整个界面，避免界面缺少重量感。因为有彩色层级更高，所以不重要的元素一定不能给它赋予有彩色。比如头像的边框，完全可以使用浅灰色阴影解决的问题，如果加入彩色边框，可能会造成视觉干扰。

第二个是有彩色元素一般意味着可以点击。彩色的文字在用户的心理预期中一般是认为可点击的，在一些多文字场合（比如微信公众号推文页）使用按钮时，可以使用有彩色文字链接作为按钮，这样避免了有色按钮带来的视觉重心倾斜，也能很好的提示用户这个按钮可以点击。但并不是说所有可点击元素都得弄成彩色，那样就会让界面看着很碎，比如信息列表，文字都是黑色的，但这样的组件用户一般都会认为标题可点击，所以不需要再为标题修改颜色了。

第三个是黑色不适用于长文本。过深的黑色对于大量文字来说阅读负担比较重，可以让文字更灰一些，阅读起来压力会小很多，只需要让用户能容易识别出文字来就可以了，但是标题，加粗等地方还是需要用深黑色表示，这样也可以营造一个视觉的层级差。

界面设计中的选图规律

设计用户界面时基本都避免不了使用图片，但选图是需要谨慎的。这里有以下要点需要记住。

• 图片的比例选择

图片比例有以下四种类型：

1:1长宽等比型。这种类型比较常见，可以让界面看起来更简洁，比如头像，方形logo，但如果界面中的图片需要通屏时，这样的图片就不适用了，因为手机屏幕的尺寸是高而窄的。

4:3小众型。这种比例接近长宽等比，在实际使用中用的很少，适用于一些图片为主的产品或用户群体比较年轻的产品。

16:9人体工程学型。人体工程学的研究表明，人的视野范围是一个长宽比例为16:9的长方形，因此显示器等产品的尺寸一般都是以此比例进行设计的。在实际应用中，Banner，视频播放窗口等位置可以使用这样的尺寸，这是迎合人体工程学的。

X:≤Y瀑布流型。这个公式的意思是在界面设计中宽度固定，高度根据图片内容自适应。这样的模式在以图片为主且内容比较复杂的产品中使用较多，一般这样的页面都会使用瀑布流布局，所以名字就是这么来的。

• 选图的统一性。

选图的统一性从三个方面入手：

比例统一。当确定一款产品的图片比例后，就要尽量将图片比例都规范化，也就是相同属性的版块图片比例都要保持统一。

视平线统一。如果相同图片的视平线不同，会使用户在浏览时视觉变得不流畅。这个需求在大部分产品中都是很难实现的，但是作为设计稿而言，应该把产品最好的一面展现出来。即使这个需求很难实现，设计师也要把最终视觉稿做到完美。（前端震怒）

格调统一。配图的格调能反应出产品的格调，尽量选取与产品相关的图片。

• 选图的清晰度

选图的清晰度注重两个问题：

注重图片质量。选图清晰、高质量是提升界面效果最简单的方式。（当然，实际当中也要注意图片大小，太大了也不合适，得压缩一下）

将图片转换为智能对象。使用PS处理图片时尽量将图片转换为智能对象，这样可以减少像素丢失。

• 图片和主题的贴合性

贴合性注重两个方面：

图片要与产品相关联。要格调内容均统一。

避免图片重复。图片重复会很大程度影响预览视觉效果。