当前位置：首页 >> 网站设计 >> 正文

页面表达常用方式-网站设计思维

《页面表达常用方式》是整个“web交互设计方法”中的一部分：

设计师在设计页面时，应该在页面上建立许多视觉层次，引导用户的视觉焦点。把用户的注意力吸引到最重要的元素上，然后才把视线引导到其他重要程度次要的信息上。这样便于用户快捷迅速地找到自己所需，更好的完成阅读、浏览任务。这里介绍几种页面表达的常用方式。

一、页面的浏览顺序

对用户扫描页面的时候进行视线跟踪，这叫做“视觉流”。好的设计能够让人们按照顺畅的次序沿着它向前流动。人们一般的习惯是从左到右、从上到下。

从左至右，从上到下：长期以来，用户已经习惯了从左至右、从上到下的阅读习惯，所以页面设计的时候我们需要让浏览者从一个方向上看文字，用户的视线从左至右、从上到下的，这样做会更快更有效。不要让文字排列成这样：

这样的排列也可以，仍是从左至右、从上到下：

按钮要放在右边：

左上角优先：下图中，亮度越高、越集中的地方，说明被关注的越多：

从上到下，从左到右是默认的视觉流方向。强烈的焦点会首先吸引眼球，然后才是次要信息的。

所以，在浏览顺序上靠前、靠上的位置，即先被看到的位置，是容易被关注和记忆的地方，即“左上角优先”。因为日常中人们往往没有充足的时间浏览网页，或在很快地获取需要的资讯后即停止浏览或转连到其它网页，所以左上角常常成为视觉焦点。

对齐

在内容排版的设计中，把内容右对齐，会形成一种良好的双重边界，该边界沿着这一组对象的中间向下延伸（利用了格式塔原则——连续性原则），这样带来的好处是加强了边界引导读者的眼光平滑向下延伸，有助于形成良好的视觉流。如下图：

在表单设计中，也是如此。能够使操作区域对齐，将大大提升用户的完成任务的效率。但是对齐是以左对齐还是右对齐也要引起注意。据研究表明，标签和输入框之间的空白区域加重了用户的认知负担（cognitive loading），用户必须花相当多的时间以便在标签和输入框之间移动视线：

操作过程中，用户更关注输入框本身，而不是标签。用户眼睛关注点的转移速度是非常快的，并且即使不从头阅读标签也能明白它的意思。但人们习惯于从左至右的书写，所以这种右对齐的布局给用户造成了细微的阅读障碍：

而以下这种摆放形式的好处就是，用户可以一眼就看到标签和它对应的输入框，而且不用担心用户阅读标签带来的额外负担：

二、大字更突出

文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的必须考虑文字的整体诉求，给人以清晰的视觉印象。因此，设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的是为了更好、更有效的传达作者的意图，表达设计的主题和构想意念。