Web交互规划办法：页面表达常用办法

《页面表达常用办法》是整个“web交互规划办法”中的一部分：

规划师在规划页面时，应该在页面上建立许多视觉层次，引导用户的视觉焦点。把用户的留意力招引到最重要的元素上，然后才把视野引导到其他重要程度次要的信息上。这样便于用户方便迅速地找到自己所需，更好的完结阅览、阅览任务。这儿介绍几种页面表达的常用办法。

一、页面的阅览次第

对用户扫描页面的时分进行视野盯梢，这叫做“视觉流”。好的规划可以让人们按照顺利的次第沿着它向前活动。人们一般的习气是从左到右、从上到下。

从左至右，从上到下：长期以来，用户已经习气了从左至右、从上到下的阅览习气，所以页面规划的时分咱们需求让阅览者从一个方向上看文字，用户的视野从左至右、从上到下的，这样做会更快更有用。不要让文字摆放成这样：

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

按钮要放在右边：

左上角优先：下图中，亮度越高、越会集的当地，阐明被重视的越多：

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

所以，在阅览次第上靠前、靠上的方位，即先被看到的方位，是简单被重视和回忆的当地，即“左上角优先”。由于日常中人们往往没有充足的时刻阅览网页，或在很快地获取需求的资讯后即中止阅览或转连到其它网页，所以左上角常常成为视觉焦点。

对齐

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

在表单规划中，也是如此。可以使操作区域对齐，将大大提高用户的完结任务的功率。可是对齐是以左对齐仍是右对齐也要引起留意。据研讨标明，标签和输入框之间的空白区域加剧了用户的认知担负（cognitive loading），用户有必要花相当多的时刻以便在标签和输入框之间移动视野：

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

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

二、大字更杰出

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

在页面文字的处理上，层次联系很重要。咱们的眼睛常常被招引到厚重而又比照激烈的图形上面，同时大的、加粗的字体表现了它的重要性和主题思想。字体比照中，字体越大越粗，就表明该部分内容越重要。对标题来说，一般都运用一种杰出的字体和其他内容差异开来——加粗、加宽、加大字号、激烈的色彩等（白纸黑字，黑色字体与白色页面比照是最激烈，反之亦然）。其次是一般字体，这些字体是对主题进行进一步的阐明。而指示和注释部分的小字重要性更次之，告知了咱们：你也许想阅览这些内容，可是没有看到也不要紧。同时要留意，所有图片中的文本都应该明晰易读。

三、图形更招引人

界面需求必定的图形辅佐，这将使产品更具招引力。图形可以传达各种产品的特性，例如：安全可靠、令人激动、好玩、充溢活力、舒适愉快、镇定、有力、严重等，这是情感诉求。Donald Norman（（唐?诺曼）以为，产品规划中一个非常重要的要素，那便是“愉悦”(Enjoyment)成分，让人喜爱这个东西——让人觉得高兴、有趣。他说：“积极的情感增强了创造性和广度优先的思考，而负面的情感会集在认知上，增强深度优先处理并把搅扰降到最少。”“积极的情感能让人们更能容忍一些困难，在寻觅解决计划的时分变得更灵敏而有创造性。”必定层度上，不影响人们在界面上完结任务功率的前提下，适度的装饰、美丽的细节会影响人们运用产品的心境，引导人们再次逗留和探索多点时刻，乃至推荐给别人。

图形需求削减认知担负。其实文字最早来源于图形，取材于天然形态，所以相比之下，简化的、顺利的、示意性精确的图形可以削减认知担负，让用户不需求一个个文字阅览，所以比文字更便于用户识别、了解和回忆。但图形规划必定要遵循简练规矩：你想要你的用户留意到你站点上所供给的产品、服务和信息，而不是你站点的精美规划。过多的装饰将搅扰用户操作。

四、动画会被误以为是广告

页面中动态的FLASH非常招引人们的留意力了。Adobe公司的这项动画技能让互联网变得更为强壮，从Nike公司非常夸张的首页动画到很多广告商运用的网页Banner。可是这项动画技能现在已被滥用，使得用户默许看到动画就误以为是个广告，一个只对页面内容感兴趣的人、或许常常阅览网页的人，或许会简单快速地越过动画部分。所以在页面规划中，应该尽量少地运用FIash动画，过多的动画不只没有实用性而且还会拖慢用户的网页阅览器。尤其是一个充溢广告的页面，那样会使你的方针客户无法阅览弃你而去。

五、内容逻辑：并排联系、从属联系

人们往往喜爱有条理的视觉信息，逻辑明晰、层次分明、严谨的内容才能有助于便捷快速地阅览。这儿主要介绍“并排联系”和“从属联系”。

并排联系：并排联系便是把平等重要的信息依次罗列，互相没有层级联系。逻辑上相关的部分在视觉表达上也相关。例如，把相近的内容分成一组，放在同一个标题至下，选用相似的办法显现信息，并把它们全部放在一个定义明确的区域以内。

在表现的形式上，常常用到的办法有：内容缩进、方位或留白、线框或分组（线条、方框、色彩条）。

内容缩进：

方位或留白：

线框或分组：（线条、方框、色彩条等等）：

从属联系：从属联系表明A信息全部包括在B信息之内，或许表明A信息依附于B信息。就好比如标题和正文的联系，所以A信息是B信息的一个子集。如下图中，“空间热门”就包括“日志精选”，她们之间便是从属联系。而“日志精选”里又包括6条文章称号，它们之间也是一种从属联系，这便是咱们所说的正文和标题的联系。

在这儿，B信息里边也可所以好几条并排联系的内容组构成。如：

六、多项并排的信息

多项并排的信息，由于视觉的连续性，混在一同简单产生混淆。咱们可以用一些小技巧将其区别。比如，在并排的信息内容前面加上小图标，或许区别排序：

七、不同的排序办法VS选择

这儿需求先阐明两个名词的含义。“排序办法”——指的是将文件中的各个信息按数值（如参与人数、点击数等）、或许某种特性（如热度）的递升或递降次第重新摆放成为一个新的记录序列。而“选择”是指一个以多个信息中按预订方针就某种特定性质进行精选的操作过程。它们都有“进一步”的联系，可是排序不会有数量的变化；而“选择”由于是进一步针对特定条件精确选择所剩，有或许导致数量的削减。如：

排序：

选择：