网页设计交互界面(网页设计交互效果)

　　2016年8月26日，照旧收到招商的账单通知，一眼就绝望的数字，然后我忽然发现了惊喜。它的展示样式发生了变化。

　　特意截图对比两个不同的信息展示。在没有看新版之前，看旧版也没有什么问题，我依旧可以获取到我想获取的信息。都是信息展示，能有什么差异呢？我们来看看新版，可以明显的看到三个层级，黑色的文字，灰色的文字，绿色的按钮。信息拆解的更清楚。这一堆信息里，用户主要想关注什么，产品本身又想传达什么。用户需要知道这是什么，标题强化告知用户这是信息是什么，用户关注的信息账单、最低还款信息强化。而对应的账单日期等用户的关注度更低。增加一个功能：立即还款。选用绿色很清晰的就可以看见。

　　改动不大不小，也许有些用户根本感知不到，但是可以肯定的是用户获取有效信息的时间更短了，速度越快了。我想这就是设计中的小较真，小细节。

　　带着这个小较真开始去翻信息展示的规则。看过一个实验，我们真实看到的信息跟我们眼睛实际获取的不一样。看下面两张图，左图为相机拍摄的效果，右图为人眼不移动时看到的效果，可以发现人眼对信息的获取并不是一次性完成的，它不能同时产生多个焦点从而把视线停留在更多的地方，设计师需要考虑的是让用户通过眼球移动，按照一定的顺序获取信息，帮助获取和理解的过程高效自然。

　　与之相匹配的设计准则主要有两个：

　　1、用户获取和理解信息的效率

　　建立良好的信息层级，能让用户在有限的时间里，快速获取和理解有用、感兴趣的信息，并产生下一步行为；

　　2、设计师的专业性

　　设计师有意识的分析信息优先级，了解哪些视觉表现手法可以建立信息层级及每一种方法背后的理论依据，不仅仅凭感觉做设计。

　　小tips

　　1.前期的了解和分析

　　在开始设计前，除了对项目本身的背景目标有所了解外，也需要了解一些内容，页面的信息层级和用户的核心行为。

　　1.1、页面定位是帮助分析页面信息优先级、核心行为的前提

　　通常有：

　　· 用户是谁

　　· 用户来自哪里，即从什么渠道来到该页面

　　· 页面内容定位，提供什么、不提供什么

　　· 页面作用

　　举个例子：

　　在设计数据分析的首页时，因为新增很多的功能，整个框架大调整，通过对页面的用户对服务的熟知度进行分析，确定首页的最核心功能是传达产品的基本功能。

　　1.2、了解页面需要营造的氛围，能帮助我们判断哪些元素能帮助达到目标，氛围可以是内容本身，也可以通过视觉元素设计来营造。

　　一般运营页面和产品主页比较多，营造页面氛围传达信息。

　　1.3、分析信息优先级

　　1）一级信息吸引用户：假设用户只会在这个页面停留3-5秒，能够吸引用户继续浏览是页面的一级信息，它必须少而精，在设计上就需要重点展示

　　2）二级信息帮助理解：针对一级信息进行解释，提炼精华内容，帮助用户在尽量短时间内理解信息

　　3）三级信息详细了解：一级和二级信息已经很好的解释，三级信息做补充，更多的做为一个展示或者入口，提供跳转功能。

　　1.4、分析用户核心行为

　　不同类型用户会在不同阶段产生不同的行为，我们需要判断这些行为最终导向是什么？

　　有了这些分析，交互产出物文档中会给予大模块的信息优先级和用户行为优先级，哪些需要重要展示，哪些信息可以弱化。交互稿可以通过黑白灰眼色来展示页面的信息层级。

　　2.建立信息层级的视觉方法

　　表现手法主要有以下几种元素

　　· 位置

　　· 大小

　　· 距离

　　· 内容形式

　　· 色彩

　　2.1 位置

　　提到信息展示规则就不得不提格式塔原则。位置的摆放是在设计开始就会考虑的元素，视线扫描事物时，总会遵循一些特定的规律，设计上如果遵循这些规律，就能够帮助用户更容易并且更高效的看到或者理解信息。

　　1）当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优，依次为右上，左下，而右下最差。因此，左上部和上中部被称为“最佳视域”。例如，网站logo、商品名、主题等重要信息，一般放在最佳视域内。当然，这种划分也受文化因素的影响，比如阿拉伯文字是从右向左书写的，这时最佳视域就是右上部。下图是摘自摘自张帆 罗琦 宫晓东的《网页界面设计艺术教程》对一个屏幕划分后，用户对不同位置不同的关注度差别：

　　2）第二条规律是眼睛沿水平方向运动比沿垂直方向运动快而且不易疲劳，一般先看到水平方向的物体，后看到垂直方向的物体。如下图所示，左右的关注度差别要小于上下关注度差别，如想要体现并列的关系，左右排列会更合适；而如果要拉开差距，仅通过位置来实现，上下排列更容易达到目标。

　　3）用户优先关注上部，在网页设计中有首屏的概念，首屏的信息比通过用户拖动滚动条出现的第二、三屏层级要高

　　虽然这个更多是视觉设计师的工作，但是输出交互原型的时候也应该考虑到这些细节问题，重要的信息展示在第一屏。由于用户使用的屏幕分辨率不同造成首屏的高度会有差别，根据网站的数据，分辨率的高度取多数值，根据多数值为基准，去掉浏览器本身的菜单等占用的高度，然后给出实际的展示高度。这个数据根据以后目标用户的分辨率变化做相应的调整，在设计时可用这个数值作为首屏的参考线。

　　2.2 大小

　　在确定了模块的位置需要考虑给这个模块多大的地盘，大小往往直观反映信息的重要程度。

　　有个体育海报设计的案例，涉及到四种球类运动包括足球、高尔夫球、棒球、篮球，如果按照实际大小设计会让篮球和足球显得更重要，为了体现体育的平等性，设计上将球的大小做了调整。

　　Giles Colborne的《简约至上》书中的结论可以指导我们通过大小拉开差距：

　　1）重要的元素要大一些，即使比例失调也可以考虑

　　2）要想办法表现出差距；如果一个元素的重要性是2，那就把它的大小做成4

　　以时代周刊首页为例，目前的设计左侧的焦点新闻图占的面积和中间新闻图对比拉开了差距，使得用户容易先关注到一级信息而且不容易被周边干扰；

　　我们对两个新闻图片的面积进行对比可以看到差距有4倍左右；

　　假如对界面调整如下：焦点新闻图缩小两倍后，可以看出视觉层级的区分就不明显了。

　　除了元素本身所占的面积会影响视觉层级，元素的细节放大程度也同样起到作用，细节放大后，人眼会感受到元素更清晰，离眼睛更近而容易先去关注，当然前提是保证信息可被理解，如果局部细节放大但用户不能理解信息是什么就不能起到吸引用户的作用；

　　下图是一个模特公司的网站，首页上随机出现模特的照片包括面部和半身照片，放大脸部特征后的照片保证了用户能理解这是一个模特的形象，使得用户会优先关注细节放大的照片。

　　2.3 距离

　　前面讲到的将元素的细节放大，眼睛会感受离它更近而被优先注意到，虽然信息展现的媒介是个平面，但是通过视觉手段能体现出三维的效果，除了三维，二维距离对视觉层级也有影响，根据格式塔心理学接近性定律，距离较短或互相接近的部分容易组成整体；人眼对距离临近的信息更容易先去关注，在表现手法应用上，元素距离上一个焦点近的，层级更高。如下图，第一层级的新闻焦点图和右侧的小图片比较临近，视线容易往右上角运动；

　　对距离做了调整后，虽然中间的小图片本身比文字更吸引人，但由于焦点图下方的标题距离更近而形成整体，视线容易先往下运动。

　　2.4 内容形式

　　确定模块的位置、大小和距离关系后，我们会考虑内容的形式包括视频、图片、文字等。相比起文字，图片在抓住用户眼球这一点上是功不可没的，同时还能使用户在短时间内形成形象记忆，从视觉层级上，人眼一般会先关注图后关注文字。

　　2.5、色彩

　　1）先暖色后冷色

　　美国数字营销公司Hubspot曾经做过一场A/B Test，用于测试不同颜色对于用户点击转化造成的差异。 在图中，左右两个测试页面在内容上完全一致，唯一不同的是按钮的颜色，在超过2000人次的样本测试中，最终红色方案的点击率超过绿色方案的点击率足足21%。而在测试之前，大部分的研究员都猜测绿色方案会获得更高的点击，因为就直觉而言，绿色代表着通行、准许通过的意思，而红色则更倾向于警告、阻止意味。

　　这个测试从一定程度上反映了暖色对用户关注度和行动力的影响，当然并不是说为了提高点击率就要用暖色，具体的色彩风格还是要根据产品定位来设计。

　　3.审视页面视觉流

　　设计师不断审视用户的浏览顺序是否真如我们期望的层级1到2到3…，包括页面大模块和模块内的浏览，这些浏览顺序会在页面上形成视觉流；

　　审视页面视觉流能帮助我们判断用户浏览页面是否顺畅，浏览的顺序是否有规律可循；如果我们的设计不能有效引导用户的视线，用户的浏览更趋向于随机性，就难以将希望表达的信息快速传到到位。

　　下面的内容主要是介绍比较典型的视觉流及每种类型的特征，包括：

　　· 线性视觉流

　　· 导向性视觉流

　　· 跳动性视觉流

　　· 放射性视觉流

　　3.1 线性视觉流

　　· 横向视觉流引导用户视线从左到右或从右到左视觉流动，是最符合用户视觉习惯的浏览方式，给人稳定可信之感。

　　如digg.com首页，整体页面和单个模块都是典型的横向视觉流，用户从左到右浏览到边界后，视线回扫到下一行继续从左到右阅读；这里会有一个横向浏览最佳区域的数值，如digg选用的页面宽度为1000px左右，每行展示3个item，用户屏幕的分辨率变大后，这两个数值是否应该继续增加，增加到什么程度，是人眼获取信息效率最高的？这个疑问我还没有找到相应的理论或实验支撑，后续再查找资料。

　　之前在小浪做门户网站的时候也做过相对应的研究，页面宽度的增加，4个item是最合适的宽度。不过后续没有验证。

　　· 纵向视觉流引导用户视线从上到下浏览，由于眼睛纵向的运动方式需要瞳孔不断对焦，当纵向扫视页面模块时效率和横向浏览相差不大，但阅读细节时效率会变低，如纵向排列的文字，更适用于需要逐字阅读的古诗古文；

　　下图是将原来横向视觉流的digg首页的排版调整后，变成了纵向视觉流，除了大图，用户会选择三栏的其中一列纵向浏览直到找到某一目标信息后，横向浏览细节。

　　网页界面的纵向高度限制比横向小，因为用户习惯上下滚动来浏览更多信息，当用户还处于确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息；如下图facebook日历界面，时间轴横向排列时，由于宽度受限，需要横向切换或滚动条来查看更多日期：

　　将时间轴方向调整为纵向，使得用户能通过上下滚动更高效查看当月所有日期。

　　· 斜线视觉流能营造运动感和速度感，但由于角度倾斜使文字认知上会有一定困难，大量文字信息排列不适合这种视觉流，常用于设计中的点缀或本身信息量比较少的界面，如下图的健身俱乐部海报；

　　· 曲线视觉流，用户视线会形成个性化的曲线，具有律动和活泼感，这种类型由于眼动幅度较大，长时间大量的运用会产生视觉疲劳，所以不适合大段文字使用，一般会结合图形做曲线视觉流，让用户的视线在图像区域稍作停留；

　　2.导向性视觉流

　　如下图所示，导向性视觉流会设计一个诱导元素吸引用户注意，再通过诱导元素注意到目标信息；常见的诱导元素可以分为线条、形象包括人物或物品、指示符号如箭头字母等。这种视觉流要把握好诱导元素与目标信息的主次关系，纯诱导元素不宜太强，否则会削弱目标信息的传播力度；如果能在诱导元素中包含部分目标信息，可以增加信息传达的有效性。

　　3.跳动视觉流

　　在性质相同或相似的信息中，选择突出或感兴趣的信息之间跳动浏览, 给人一种自主选择的权利，但设计上也可以通过调整元素的强弱，不露痕迹的传递主次。

　　如前面提过的模特公司网站界面，模特的照片都是同等性质的信息，用户浏览具有一定的随机性，但通过放大和缩小人像同样也传递了主次。

　　4.放射性视觉流

　　视线开端在页面中部，使中间的元素冲击感最强，信息传达最明确，再形成由中部发散出去的视觉运动。

　　比如很多汽车网站，中间的主图最能体现信息的核心，通过主图再发散到上方的导航或下方的其他服务入口。

　　七七八八说的四种视觉流类型是比较典型的，但不代表全部。无论是那种路径，用户浏览是否顺畅，信息是否按照主次传递到位，是我们要一直坚守的目标。

　　最后归纳：

　　1.分析信息的优先级，用户的核心行为；

　　2. 通过位置、大小、距离、内容形式、表现方法来建立信息层级

　　3. 设计过程和结束都要不断审视页面视觉流，看看用户浏览是否顺畅。

　　微交互 ∣细节设计成就卓越产品

　　长按，识别二维码，加关注