建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > 心得技巧 >

用户体验与网页布局的关系(3)

时间:2011-08-03 22:28来源: 作者: 点击:
Only Scan: 用户只是扫描页面,并没有将焦点放在某个区域,也就是眼动很频密。 Focus on Title: 用户的注意力相对更多地放在标题上。 Navigation Reading: 用户的注意力更多放在导航条上,会花一定时间浏览导航内容

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

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

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

  由此可见,中韩用户更倾向以扫描、打圈的方式阅读网页。同时,中韩用户更喜欢往返于各个内容区域,说明他们阅读时比较随意。相反地,美国用户比较关注细节,也很少这看一眼那看一眼。

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

  

clip_image022

 

  ◆ “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像素更好”……这些在工作中轰炸你头脑的“建议”每天都会发生。

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

  那么什么是视觉焦点呢?

  视觉焦点就是在有限的视线范围内快速捕捉你自己认为吸引你的区域。反映在互联网产品设计中,就是指设计的页面上最吸引人注意的地方,视线上集中交汇的地方,这个位置就叫焦点。在日常生活中我们运用照相机对准人的脸部,那也是在获取一个焦点。在网页设计中,引导用户集中在你想让他关注的区域,那样会让你的设计有重心和亮点。

  

clip_image023

 

  视觉焦点的处理方式

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

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

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

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

  

clip_image024

 

  视觉强弱

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

  

clip_image025

 

  点对比图片

  图1 整体画面平平,人物排列没有层次,视觉上给人感觉很散。

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

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

  

clip_image026

 

  几何的对比

  上图中我们可以看到,方形过度到圆形的变化,圆形是由极其细小的边角组成,在变化当中图形变得越来越有乐趣,比较下来圆形在几何图形中具有平滑流畅的边缘,圆形更让人感觉轻松,愉悦。设计需要增加乐趣的时候,我们可以多运用流畅线条的图形来让页面活跃起来。

  

clip_image027

 

  实例效果进行比较(圆型设计)

  在这个页面上圆形挑起了大梁,支撑整个页面,人物笑脸图片组合的圆形包围着瓶子,映射了这个饮料带给我们的快乐。圆形不仅加强了焦点,更加强了页面的层次感,让页面不会单薄、无力度。

  

clip_image028

 

  实例效果进行比较(方型设计)

  虽然同样用加框的形式来集中物体焦点,同圆形边框相比整体画面呆板,僵硬,缺失了活跃的感觉。

  

 

  圆形在广告位中的设计

  圆形对价格的标注,让用户对这诱惑的价格更加的感兴趣,很好的营造了商品的气氛。

  圆形元素和其它几何图形比较

  圆形具有圆滑的特点,让人感觉轻松,愉悦,合理的运用会提高页面的层次,让焦点更加突出,增强视觉感的同时也能够营造活跃的氛围。我们都在不断尝试如何让页面变的美观而生动,创造富有活力的页面,让网站给人的视觉感受富有好感,把握好设计中的焦点,使页面信息有效传达的前提下,运用有趣的圆形来设计页面是设计中很有效的方法。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片