让你的网页告别“失焦”:失焦

　　网页是一个图文并茂的文本，当我们打开网页，会以怎样的方式去浏览这个网页呢？　　一项研究表明，浏览者在打开网页后，会按照F型的浏览路线阅读网页（图1）。浏览者首先会在网页的最上部分形成一个自左向右的水平浏览轨迹，然后目光下移，水平扫描比上一区域更短的部分。完成以上两步以后，浏览者会将目光转向左侧，作自上而下的浏览。
　　这个名叫“眼球追踪研究”的项目由一位美国专家发起，他最后得出结论，要想让网页上的文字传播更有效，就不能照搬报刊等印刷体的文章。
　　因为浏览网页的人不会彻底去读完一个篇幅过大的网页文字，有时更多是在搜寻关键字，而且放在网页上的文字要在前两段就把重要内容提出来。
　　基于此，许多做网页设计的人会在通篇做些处理，让重要信息突出，形成一个网页的视觉焦点。
　　在摄影上，视觉焦点是在有限的视线范围内快速捕捉你自己认为吸引你的区域。
　　而在互联网产品中，就是指设计的页面上最吸引人注意的地方，视线上集中交汇的地方，这个位置就叫焦点。在网页设计中，这样的设计能够引导用户将关注点集中在你想让他关注的区域，这包括文字和图片。
　　如何聚焦文字
　　先来说如何做网页文字的视觉焦点设计。
　　一位朋友的网站想给一家企业做宣传，提交了文本，生成文字页面（图2）。
　　这是一篇推广文，乍看之下，一般人的第一反应都是，整个屏幕一片模糊，不知从哪里开始看，不知道文章写点什么，对象是什么，对自己有没有用。这一系列问题同一时间迸发出来，浏览者会被大量的信息淹没，而产生心理上的焦虑，最终结果是赶快离开这个网页。因此，我建议他将网页做一些处理（图3）。
　　我的处理方法是弱化信息干扰，突出重点，可以很清楚地看到整个推广文的重点─中国密度板门户。视觉焦点会在不自觉中停留在“中国密度板门户”几个字上面。
　　但相信到此为止，大脑对于阅读整篇一看就知道不好玩、纯广告的文字仍有抗拒，推广目的仍没有达到。其实这是一件大家心知肚明的事情，类似的推广文一般很少指望浏览者能当热门小说来拜读，唯一指望的是客户能在视线扫视停留的几分之一秒内，关键信息能到他的脑海里面。因此，我建议这位朋友做进一步的修改（图4）。
　　这类网页的文章对于读者来说从来是不会逐字逐句地阅读，而是跳跃地扫视，因此，我们一定要将关键信息高亮显示出来更易于读者把握重要信息。在这次的修改中网址被突出显示，希望能引起有兴趣的读者可以复制这个网址去网站看看。
　　如何让图片传达焦点信息
　　在一个网页上，与文字相比较，图片更为重要，但是现在很多网页上的图片都是“失焦”设计，如何让图片更为聚焦，以引导浏览者知道你想要强调什么目的。我提供以下思路。
　　方法一：适当给图片添加圆形
　　也许你会问我，为什么不添加方形、平行四边形、三角形，而偏偏要选择圆形？我可以告诉各位读者，圆形是由极其细小的边角组成，在变化当中图形会变得越来越有乐趣，圆形在几何图形中具有平滑流畅的边缘，会更让人感觉轻松、愉悦。设计需要增加乐趣的时候，我们可以多运用流畅线条的图形来让页面活跃起来。
　　在图5这个瑜伽培训机构的页面，如果美女穿着一身白色的瑜伽服加上白色的背景，会让她和背景无法分离，整个画面没有立体感，当然美女其实本身就是一个很重要的视觉焦点，当我们给美女加了圆形边框后，视觉焦点就转移到圆形边框包括着的美女上。最后将圆形填充，视觉焦点就转移到填充色的圆形的美女上。
　　同样地，在一家销售童装的网站，有一个五个儿童的合影，原始的图片让人觉得整体画面平平，人物排列没有层次，视觉上给人感觉很散。如果我们给中间那个小男孩添加个圆形边框进行处理，会让你想表达的图形首先进入用户眼球。到了这一步其实还不够，我们再进一步将所要强调的人物进行变大的处理，这样就使这张图片主次分明，焦点突出，画面活跃立体（图6）。
　　方法二：剪切、配色及加线
　　在化妆品网站上，我们可以看到美女特别多，但是美女多了也有麻烦，看了美女而忘记看要介绍的化妆品，这种做法有点得不偿失，在这类网站中，图片的视觉焦点尤其显得重要。
　　原始图片是一个漂亮的外国妞，而经过处理后，制作者只用了眼睛部分，在文字色彩的选用上，用了美女眼睛颜色最接近的颜色（图7、8）。
　　在一个口红厂家的网页上，他们选用一个美女给他们代言，但是，原始图片的问题很大：图片很香艳，与口红没有半毛钱的关系（图10）。制作者如果像上文一样把这个图片剪切了，会很可惜，所以他巧妙地在嘴唇区域添加了两条曲线（图11）。这两条曲线所形成的区域并没有破坏原始图片的美感，而且还进一步对想要强调的区域增加了表现效果。