网页板块设计研究

网页板块设计研究用户体验（User Experience，简称UE）是用户在使用产品过程中建立起来的一种纯主观感受。

在基于Web的产品设计中，UE是一个相对较新的概念。

Donald Norman博士提出了―用户体验‖一词，他是一个认知科学的研究人员，首次提出了在互联网领域以用户为中心设计的重要性（用户的需求决定产品如何设计）。

Donald Norman用户体验很重要，最大的理由是：它对你的用户很重要。

◆最起码是要让产品有用，这个有用是指用户的需求。

(尊重用户价值+满足用户需求)◆其次是能用，所有的流程都走得通，没有致命的BUG。

(尊重用户价值+满足用户需求)◆然后是易用，操作起来很便利，这非常关键。

(注重用户体验)◆设计的下一个方向就是友好，关注用户的情感需求。

（注重用户体验+关注创新）以上四者都做好了，就融会贯通上升到品牌。

(品质：品味+质量→品牌)用户的需求决定产品如何设计人的视觉通常不是先看中间，而是根据母语的读写习惯，经过大脑的指令，按照：从上到下，从左到右的路线进行查看，下图为用户浏览网站时视线注意力―F现象‖研究：注：绿色、黄色、红色关注度以此升高，这说明人喜欢第一眼看左上角的内容，这告诉我们，重点要在左边偏上的部位出现。

从左上角的至右下角优先比重逐级递减[案例]淘宝网商品搜索列表页谷歌的搜索结果出现―金三角‖现象：谷歌搜索列表页对于google搜索结果的―金三角‖现象（也有很多前端设计师形象地描述为搜索结果的―F 现象‖）。

什么是google搜索结果的―金三角‖现象？这项关于用户对于搜索结果注意力的研究由搜索引擎营销公司Enquiro、Did-it以及专门研究人们眼睛运动行为的公司Eyetools联合完成，通过对用户观察google搜索结果页面时眼睛的运动来确定对搜索结果内容的关注程度。

该调查结论是，位于google自然搜索结果―F‖顶部的信息，获得了被调查者100％的注意（该研究总共有50位被调查者），而位于最下面的信息则只获得了20％的注意力。

以下是自然搜索结果排名前10位的信息受到被调查者关注的比例：·第1位– 100%·第2位– 100%·第3位– 100%·第4位– 85%·第5位– 60%·第6位– 50%·第7位– 50%·第8位– 30%·第9位– 30%·第10位– 20%对于google搜索结果右侧的赞助商链接内容（即关键词广告），其受关注程度大约只有自然搜索结果的一半，即使位于第一位也只获得了50％的注意力。

下面是被调查者对全部8个关键词广告信息的关注情况。

·关键词广告第1位– 50%·关键词广告第2位– 40%·关键词广告第3位– 30%·关键词广告第4位– 20%·关键词广告第5位– 10%·关键词广告第6位– 10%·关键词广告第7位– 10%·关键词广告第8位– 10%关于google搜索结果金三角调查结论的分析－－Search Engine Watch文章―A NewF-Word for Google Search Results‖对上述调查结果的分析推论可总结为三点：（1）自然搜索结果的重要性远高于关键词广告（至少对google是这样，为了使客户的利益最大化，谷歌随后在搜索列表页的最上面及最下面加入了3条付费广告）；（2）用户对自然搜索结果的关注程度更高，除非搜索引擎关键词广告排名在最上端，否则很难获得用户的关注；（3）搜索引擎优化很重要，营销人员如果忽视这一事实，单纯依靠赞助商链接广告的搜索引擎营销方式很难取得最好的效果。

调查结果发现，用户对于搜索结果页面的关注的范围呈现英文字母―F‖的形状，也可以描述为―金三角‖现象。

这种现象证实了一个简单的问题：搜索结果中排名靠前的内容更容易受到用户的关注和点击。

这个规律对于google搜索结果右侧的关键词广告同样是适用的，只是对两种内容的点击率有所不同。

这正好和谋思副总裁张少华先生提到的―首屏理论‖一致。

网页板块规划——两栏设计研究两栏设计页面对于两栏设计，Jakbo Nielsen也曾对232位用户浏览几千个页面的过程中的眼动情况进行追踪，发现用户在不同站点上的浏览行为有明显的一致性。

这种浏览行为有三个特征：1.用户首先会在内容区的上部进行横向浏览。

2.用户视线下移一段距离后在小范围内再次横向浏览。

3.最后用户会在内容区的左侧做快速的纵向浏览。

显然，用户的浏览行为并非精确的包含这个三个过程，有时候，在这三个过程之后，还会在底部有横向浏览的热点，使得整个浏览热区图看上去更像E而不是F。

也有时候，用户浏览时只反应了上述的行为1和行为3，使得浏览热区图像一个倒写的L。

但从所有数据整体上来看，用户的屏幕浏览热区图还是较一致地反应出了F图像。

网页板块规划——三栏设计研究经过分析上面的纯理论性研究，我们再来看一个有趣的用户研究：中、美、韩用户浏览网页习惯。

中韩两国研究者进行了一个关于认知风格(cognitive style)与网页感知(webpage perception)的跨文化研究，找来中美韩三国用户（共27人）进行了眼动测试，研究结果颇有意思。

实验是让用户浏览（不做任何点击）以下这个仿照雅虎布局的测试页面（根据用户的国籍使用相应语言版本的页面），眼动仪将做实时记录，测试过程为30秒。

图1：测试页面研究者将页面分为9个兴趣区域（AOI, AREA OF INTERESTS）。

图2：兴趣区域（AOI）从下图―前25秒用户访问的AOI总和‖可以看出，韩国用户的眼睛一直在整个页面到处跳动。

比起其他两个组别，他们更多地在各个区域中跳来跳去。

在前15秒，中美两国用户的眼动比较相似：在前10秒，中国用户的AOI活动稍微高于美国用户，但很快就明显领先了。

15秒之后，美国用户的AOI的增长率低于中国用户，说明美国人的眼睛活动开始稳定，并开始将注意力集中在页面的某一处。

下图是―每AOI注意点时长总和‖。

注意点停留时长反映出该区域对用户的重要性。

页头中部的区域2（见图2）是尤其重要的，它吸引了三国用户最长久的注意。

总体来说，美国用户将注意力放在区域1、2、5的时间明显高于其他两组。

中国用户则在区域2、5、6、8、9集中了更久的注意力。

再来看看眼动结果（由上至下依次为中、美、韩）。

绿色的点代表眼睛活动的开始，红色代表结束。

中国用户眼动图美国用户眼动图韩国用户眼动图根据眼动结果，研究者从两个方面做出了分析：备注：◆Sequential Reading: 眼睛随着区域块依次浏览。

◆Circular Scan: 眼睛扫描路径接近于顺时针画圆。

◆Back and Forth Scan: 眼睛在内容之间往返扫描，某个区域在短时间内被反复注视。

◆Only Scan: 用户只是扫描页面，并没有将焦点放在某个区域，也就是眼动很频密。

◆Focus on Title: 用户的注意力相对更多地放在标题上。

◆Navigation Reading: 用户的注意力更多放在导航条上，会花一定时间浏览导航内容(导航的起源也在美国) 。

由此可见，中韩用户更倾向以扫描、打圈的方式阅读网页。

同时，中韩用户更喜欢往返于各个内容区域，说明他们阅读时比较随意。

相反地，美国用户比较关注细节，也很少这看一眼那看一眼。

下图是从另一个角度来阐释眼动结果。

◆―0‖ Shape: 眼动路径类似于画0。

◆―5‖ Shape: 眼动路径类似于画5 (也就是，眼睛以此访问: 2, 5, 6, 9, 8, 7区域)。

◆―N‖ Shape: 眼睛看完一列再看另一列。

◆―Z‖ Shape: 眼睛依次扫过各行。

◆―X‖ Shape: 眼睛以对角线的方式扫描，随意跳跃。

可见，多数中国人和韩国人都采用0式浏览，而美国人更多是采用5式浏览。

也就是说，中韩用户会整体去看一个页面，而多数美国人趋向于从中心向外围浏览。

最后，研究者提出了一些设计建议。

对于采用整体思维方式（holistic thinkers）的中韩用户来说，他们更倾向于扫描页面整体，而且以一种非线性的浏览方式，因此内容安排可以较为灵活。

对于采用分析性思维方式（analytic thinkers）的美国用户来说，页面布局要非常清晰，每个信息区域都要有区别于其他区域的特点，导航部分也尤其重要。

视觉焦点之几何圆的使用由于每个人受教育程度、知识面、习惯、及生活方式、对色彩的喜好等因素的影响，不同的人对同样的设计会有不同的理解和判断。

例如―我不喜欢这个网页的设计‖、―花花绿绿不喜欢‖、―是不是用黄色比较好‖、―喜庆的节日当然用红色啦‖、―还是采用苹果的灰色比较好‖、―左边栏再宽出10像素更好‖……这些在工作中轰炸你头脑的―建议‖每天都会发生。

我们不可能满足每一个人对于色彩、页面设计的喜好，但是我们可以从另一个交互设计的角度来满足绝大多数的需求，这就是——视觉焦点。

那么什么是视觉焦点呢？视觉焦点就是在有限的视线范围内快速捕捉你自己认为吸引你的区域。

反映在互联网产品设计中，就是指设计的页面上最吸引人注意的地方，视线上集中交汇的地方，这个位置就叫焦点。

在日常生活中我们运用照相机对准人的脸部，那也是在获取一个焦点。

在网页设计中，引导用户集中在你想让他关注的区域，那样会让你的设计有重心和亮点。

视觉焦点的处理方式人们用视觉获取环境中的信息，对你注意的周围都会是模糊的，你视线集中的中心点是最清晰的。

第一张，视觉上呈现这样的状态是：视线上没有集中，整体模糊，是成方形的视觉框架。

第二张和第三张，图中的两朵花在图形中是最漂亮的亮点，漂亮的东西会引人注意，你会注意到上一朵或则下一朵，注意任何一朵花的时候，眼球集中点会以圆的形状向外逐渐模糊，最中心点就是焦点。

圆形作为设计中的元素的时候，自然更加的适应视觉上的感知。

视觉强弱美女其实可以独立成为一个视觉焦点，但当我们给美女加了圆形边框后，视觉焦点就转移到圆形边框包括到的美女上，最后将圆形填充，视觉焦点就转移到填充色的圆形的美女上。

点对比图片图1 整体画面平平，人物排列没有层次，视觉上给人感觉很散。

图2通过添加圆形背景框，会让你想表达的图形首先进入用户眼球。

图3不仅添加圆形背景框，再区分人物大小，主次分明，焦点突出，画面活跃立体。

几何的对比上图中我们可以看到，方形过度到圆形的变化，圆形是由极其细小的边角组成，在变化当中图形变得越来越有乐趣，比较下来圆形在几何图形中具有平滑流畅的边缘，圆形更让人感觉轻松，愉悦。

设计需要增加乐趣的时候，我们可以多运用流畅线条的图形来让页面活跃起来。

实例效果进行比较(圆型设计)在这个页面上圆形挑起了大梁，支撑整个页面，人物笑脸图片组合的圆形包围着瓶子，映射了这个饮料带给我们的快乐。