减轻用户疲惫，让你的页面优雅起来

kingfu

写在前面

页面“内容为王“，而内容的表达需要布局展示，混乱无章的设计表达宛如疯言疯语，让人不知所谓。

网页在选好配色后，接下来要对网页表达内容的布局进行设计。页面要考虑到用户的学习成本（操作习惯、逻辑判断等），与颜色配置相似的一点，设计师需要对元素进行有效处理，使之符合多数用户的习惯，用户更不易“疲惫”，更愿意使用这个网页。很多优秀的网页设计都是通过减轻用户的疲惫感来提高页面的使用效率的。

本篇我将会从布局方面着重阐述如何减轻用户“疲惫感”。

为什么用户不喜欢你设计的页面？

——设计造成的疲惫感。

页面元素过杂过多，布局乱七八糟，主次不明，色彩驳杂，五颜六色等等，第一眼就已经给用户造成视觉压力，使得用户从内心开始抗拒使用，自然收不到用户好评。

1、沉浸式短视频app，简单操作进行内容切换，相似内容推荐吸引用户无间断使用，刷着刷着就忘了时间。
2、方便快捷的购物网站，一键购买极简操作，相似好物推荐减少用户搜索，并对用户进行引导，逛着逛着也忘了时间。

以上两种应用场景都是通过减少了用户动作，提前预测用户行为，在视觉，动作方面减少用户疲惫感，增加视觉刺激，提高产品可用性。

基本原则

考虑到用户使用产品过程中疲惫感的来源，我们可以通过减少视线移动、增强视觉刺激来进行元素设计。设计主要遵循以下四个基本原则：“亲密性”、“秩序性”、“一致性”、“差异性”。（即所谓亲密性、对齐、重复、对比）

1、亲密性

为了减少用户视线移动，相关的元素（操作相关、功能逻辑相关、响应逻辑相关）应当放置在一起组成视觉单元（物理位置相近）；
逻辑联系较弱，彼此无关的元素则不应该靠近，亲疏远近，一目了然。

元素相关性强弱和物理位置远近的适当设计，便于用户理解元素逻辑内容，减少混乱干扰，亲密性可从用户行为操作与视线范围方面考虑。

1.1、用户行为操作相关的，例如选购、结算、付款，一系列相关逻辑的操作功能按钮需要保持在同一物理位置，避免视线上下移动，造成混乱。

实例：支付宝转账，视觉及操作区域保持在页面上半部分，这部分动作中，视线与操作区一直保持在上半部分，逻辑亲密（搜索账号、输入金额）的组成手机上半部分的内容。而后续验证密码从底部弹出则属于另一套逻辑操作，属于对比的原则，下文中详述。

1

1.2、视线范围内，元素逻辑联系紧密的规律排列，组成内容单元，通过适当留白，告知用户网页元素主体功能，这部分设计很常见。

实例：Apple官网，操作导航、产品分类、网页介绍、背景通过亲密性组合在一起，使得网页逻辑清晰。

2

一般来说，人眼会不自觉捕捉运动的物品，突兀的改变位置需要人脑进行一个搜索画面的过程，分开逻辑相近的元素增加了用户视线搜索判断的动作，而相近位置的组合展现则去掉了该过程。减轻观众处理信息的负担。

2、对齐
元素的摆放另一个重要原则就是对齐。对齐，绝非横平竖直，九宫格式的简单排列，而是在保证亲密性的原则下，打乱无关元素的物理位置位置，隔空保持各部分对齐，即所谓“乱中有序”。

随意摆放的元素在视觉上会造成混乱，同时在逻辑上也不易理解，因此在布局设计时，应当保证元素对齐，建立视觉联系。一般来说，不建议采用居中对齐的方式。

实例：Apple 开发者网站，顶部导航条、产品分类、标题、介绍内容等在逻辑联系上亲密，根据亲密性原则物理位置相近，为了避免视觉混乱，将元素对齐，使得元素排列整洁。

3

3、重复
3.1为什么重复？
对于类似的设计元素，要保持复用设计，保持整体设计的风格一致。

书籍的文章标题使用一样的字体、大小，使得整本书的风格统一。

3.2重复什么？
重复元素包含很多，符号、颜色、线条、字体甚至字间距等，组织重复信息利于帮助用户理清页面的层次逻辑，将设计中一致的元素统一起来，在外观上即可作为整体元素进行展示。

实例：下图中一级导航与二级导航的重复样式，视觉上相同，便于用户理解不同页面间的逻辑设置。

4

出现重复的元素，即提示用户上一段的结束和新一段的开始，免去用户判断过程。但要注意，没有逻辑相关的元素需要避免相同的设计，人的直观认知中，外观类似的元素会被自觉归为一类，如果没有逻辑相关的元素设计雷同，会让用户存在认知错误，增加其判断过程。

这就引出了最后一个原则——对比。

4、对比
上面说过，含义不同，外观雷同的元素设计会使用户多加判断，这也是用户疲劳的来源之一。

元素的对比设计，可以是颜色也可以是粗细，有鲜明的对比可以在视觉上形成层次效果；

拿一个现实的例子，平时我们吃旺旺仙贝经常吃了就停不下来，为什么呢？这是因为两个仙贝上面的调味粉是不一样的，一个少，一个多。当你先吃了调味粉少的，会觉得调味粉多的更好吃；先吃了调味粉多的，再吃少的会有味觉失落感，会让你更期待下一包仙贝。如此往复，通过调味粉的多少对比，形成味觉的刺激循环，当你意识到的时候，你已经吃了很多仙贝了。

页面的布局也一样，差异的元素的鲜明对比刺激用户，使得用户不易疲劳。

实例：支付宝付款输入密码此处输入密码属于转账中，输入账户-输入金额-输入密码，最后、最重要的一步操作，从底部弹窗，刺激视觉，与以上两步骤形成对比，将转账这一操作分解成了两个对比的视觉效果。

5

实例：导航条之间的对比、标题与内容的对比、文字与图片的对比，而iPhone和iPad显示同样的墙纸则是遵循了重复的原则，包括操作逻辑相同区域的亲密性组合、各区域对齐原则，加上适当的留白，整体是一个非常优雅的网页。

6

总结

元素的布局要考虑视觉疲劳，尽量降低用户学习成本，在布局上对场景进行逻辑处理，符合用户习惯的逻辑设计能够降低用户学习成本。

空间对于表达的重要性不言而喻，网页的布局属于美学范畴，同时也隐藏着用户逻辑判断，视觉效果的引导减轻用户负担。进一步优化网页，使网页本身表达内容，与用户进行交互，自然用户的使用兴趣会被调动起来。

当然上面的原则并非是一成不变的，根据现实场景，进行判断合理使用才是使网页优雅的终极奥义。

欢迎各位留言交流:)