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

界面设计中的版式设计是视觉设计的核心，也是视觉设计的基础。界面板式作为颜色的框架支撑，在设计中必然占据核心地位。

该部分学习笔记为第一大块内容，版式。笔记摘自《规律与逻辑》。

界面设计操作顺序：

内容呈现->应用场景与信息层次->版式设计->色彩与细节的处理

统一与变化

考虑到用户会长时间停留在某个界面，因此统一列表样式是有必要的。然而单一的列表也会让用户感到疲劳。可以通过版式设计让列表呈现不同的模块变化。

统一是主导，变化是从属。遵循统一规范的同时，再进行版式上的变化，会让界面看起来整体感更强，又不会让人产生烦闷的感觉。需要权衡视觉疲劳感和交互效率之间的平衡点，在设计时这个需要好好考虑。

界面图标的设计同样需要遵循这一设计原则，在设计成套的图标时，在统一配色、线条粗细和长短的前提下，外形上可以不受约束地进行美化。

对比与调和

对比是为了强调差异化，让界面信息更有主次之分。调和是为了寻找共同点，调节界面的舒适感。

针对大小对比，大的方面有板块之间的面积对比，小的方面有字体之间的字号对比。字号可以代表层级，如主题字信息层级最大，简介文字信息层级次之，话题名称以及评论点赞等信息层级最小。适当的对比调和可以让信息清晰可见，又避免了过多无意义的对比使得界面信息杂乱。

对称与平衡

界面设计中的版式对称与平衡是一个统一体，常表现为既对称又平衡。从视觉上讲叫做寻求人心理上的稳定感。

说实话，我读这一块的时候，感觉什么是对称什么是平衡在主观上讲可能会差异很大，没有办法想到一个简单的评判标准，只能说是结合自己的审美来考虑，简单来讲就是有点玄学。

节奏与韵律

最基本的要求：通过版式设计给予用户明确的阅读顺序引导，并且要做到有始有终。在这里，有始有终是一种态度，即使是单页面也要给用户明确的视觉起点和视觉终点，而针对长图或多版面的设计更应该如此。

用户的一般视觉浏览习惯为从左到右，从上到下，由题目到正文。无论是使用电脑端还是手机端，这个阅读顺序都不例外。在界面设计中，如果在标题、图片和栏目上都能有所变化，在视觉上就能形成跳跃式的点线面效果，这样用户在浏览的时候就会有一种节奏感。

对于以图片展示信息为主的页面，比如电商，用户一般通过标题判断不出是否需要此商品，更多的是基于对此商品图片的判断，所以根据视觉浏览习惯，建议将图片放在左侧，而描述信息放在右侧。目前的主流电商平台商品页都是这么做的。而对于新闻类页面，则不再是图片为主，而是标题为主，此时可以将图片放在右侧或者下方，将重点留给新闻的标题。

好的版式是界面的导游，优秀的设计不需要明显的一二三四来引导用户先看什么再看什么，其本身的设计效果就能决定用户的视觉走向。扩展一下上方的用户视觉浏览习惯，其实还有从有彩色到无彩色，从饱和度高到饱和度低，从大元素到小元素，从复杂元素到简单元素，从衬线字体到无衬线字体，从特殊字体到通常字体从留白较多到留白较少等等。同时，在白色背景下，颜色越深视觉层级越高，在黑色背景下，颜色越浅视觉层级越高。

亲密性原则

在同一个版面中，关联性较强的元素一定要相邻，关联性不是很强的元素一定要明显地隔开。一般情况下，相邻的两个事物大多存在着一定联系。在设计中，应该把有关联的内容放在一起，没有关联的信息明显隔开，界面中的信息就会让人感到清晰直观，并且识别度高。

比如图片和文字堆叠显示的列表，我们只需要将同一单元下的图片和文字设定小间距，不同单元之间设定大间距，这样不需要人为划分分割线，用户也能知道什么文字对应的什么图片。而如果文字和图片的间距完全一致，用户在向下滑动浏览时就会感到迷惑。

相似性原则

如果一个版面的某几个元素在外形上是相似的，那么用户会认为这几个元素是有关联的。所以在界面设计中，给不同布局的元素相似的视觉特征，会激发用户对界面分组和联结的本能。相似的视觉特征主要表现在颜色，形状，大小，方向等元素上。

比如在设计计算器页面时，不应该把数字键和符号键设置为同种颜色，这样用户在使用时会加大误触概率。正确的做法是将数字键设置为一种颜色，符号键设置为另一种颜色，用户就可以很好地进行区分。

卡片/分界线/无框

目前界面设计常用的版式设计风格主要分为三种：卡片、分界线和无框。这三种风格各有各的应用场景。

卡片风格就是把界面中各版块的信息用卡片的形式承载起来，让界面直观清晰。非常适合用在一些列表页里。同时手机端的卡片由于与现实卡片大小相似，也可以让用户联想到现实中的卡片，所以也可以承载一些现实生活中的信息。卡片风格最适合的场景：单个界面需要获取较多信息时

分界线风格是最传统的分割方式，一般出现在各信息段落或板块之间，分界线的使用可以让界面更有规律。使用分界线风格的最大好处在于，达到了信息区分的目的，又不损失界面的整体性

无框风格是近年来兴起的一种极简设计风格。但无框风格设计难度较大，如果使用不当反而会导致界面信息杂乱。在包含图片较多的界面中可以采用无框风格，其实也是一种伪分界线风格，因为图片本身就可以起到分割线的作用，所以就没有必要再添加框线元素了。

留白

留白在设计中是不可或缺的元素。留白的真正意义是留出空间，并不一定非得要留出白色，也可以是其他颜色。只要是没有进行过度装饰的区域都可以称作留白区域。

需要注意留白需规范合适。信息卡片的上下左右间距最好相等，卡片内信息之间的距离也避免过近，不同的模块之间需要留出足够的间距，可以让界面看起来更加整洁透气，空间感更强。

利用留白还可以强调重点，制造信息的差异化，这也是界面设计中常用的一种技巧。减少多余的元素和颜色，多一些留白，可以将用户的视线快速引领到需要重点表达的信息上，大面积的留白可以突出重点信息，或者突出层次感。信息周围留白越多，便意味着该信息越容易成为视觉焦点。