网页设计之几何圆的视觉焦点

剖析网页设计中的几何圆

网页设计之几何圆的视觉焦点（图一） src="/upload/users/1/20101202/101115174536210.jpg" width=510 border=0>

你的设计为什么平平无奇，为什么吸引不到别人的眼球，这里先来说说什么是焦点（也可以称兴趣中心或者视觉中心），我认为用焦点更能简单准确的阐述。有人用通俗的方法来诠释焦点，在设计的页面上最吸引人注意的地方，视线上集中交汇的地方，这个位置就叫焦点，在日常生活中我们运用照相机对准人的脸部，那也是在获取一个焦点。在网页设计中，引导用户集中在你想让他关注的画面上，那样会让你的设计有重心和亮点。

视觉焦点的处理方式

网页设计之几何圆的视觉焦点（图二） src="/upload/users/1/20101202/101115174536211.jpg" width=510 border=0>

人们用视觉获取环境中的信息，对你注意的周围都会是模糊的，你视线集中的中心点是最清晰的。第一张，视觉上呈现这样的状态是，视线上没有集中，整体模糊，是成方形的视觉框架。第二张和第三张，图中的两朵花在图形中是最漂亮的亮点，漂亮的东西会引人注意，你会注意到上一朵或则下一朵，注意任何一朵花的时候，眼球集中点会以圆的形状向外逐渐模糊，最中心点就是焦点。圆形作为设计中的元素的时候，自然更加的适应视觉上的感知。

视觉强弱

网页设计之几何圆的视觉焦点（图三） src="/upload/users/1/20101202/101115174536212.jpg" width=510 border=0>

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

下面本人做了点对比图片

网页设计之几何圆的视觉焦点（图四） src="/upload/users/1/20101202/101115174536213.jpg" width=510 border=0>

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

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

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

几何的对比

网页设计之几何圆的视觉焦点（图五） src="/upload/users/1/20101202/101115174536214.jpg" width=510 border=0>

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

实例效果进行比较

网页设计之几何圆的视觉焦点（图六） src="/upload/users/1/20101202/101115174536215.jpg" width=510 border=0>

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

网页设计之几何圆的视觉焦点（图七） src="/upload/users/1/20101202/101115174536216.jpg" width=510 border=0>

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

网页设计之几何圆的视觉焦点（图八） src="/upload/users/1/20101202/101115174536217.jpg" width=510 border=0>

富有节奏的设计，连贯的圆形元素组合，网站的主体富有节奏的形状，营造了网站活泼的气氛。方形的组合结构使得网站变得严谨许多。

网页设计之几何圆的视觉焦点（图九） src="/upload/users/1/20101202/101115174536218.jpg" width=510 border=0>

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

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