运用视觉建立网页的信息层级

网页界面是一个网站向用户传递信息的窗口,换句话说,即网页界面设计是以信息传递的功能作为基础。通过视觉可以明确信息的层级/主次关系，能让用户在有限的时间里，快速获取和理解有用、感兴趣的信息，并产生下一步行为。这也是影响一个产品是否长存的必要条件。

而建立页面的信息层级主要包含以下几种元素：

· 位置

· 尺寸

· 文字

· 色彩

· 间距

· 对齐方式

下面通过实际项目ODA中0状态码诊断报告的页面作为分析对象，看一下页面是如何运用上面这几种视觉元素来建立信息层级的。（可能设计上，分析上还存在不足，还请多多包含，哈哈）

如下图，是还未进行视觉设计前，由交互输出的0状态码诊断报告原型页面：

通过分析页面，与交互设计师沟通，页面内容展示区主要分为两大部分：诊断名称、诊断结果。诊断结果中包含诊断情况总览，诊断结论，诊断过程三个模块。（当诊断过程不存在“诊断异常”、“人工确认”、“执行异常”时，诊断结论不出现）

那从视觉设计的角度出发，结合位置、尺寸、间距就可以清晰的表现各模块之间的所属关系（在数据、报表展示的页面，模块的尺寸依据具体内容的多少进行变化），如下图：

在确定了位置、尺寸、间距后就需要给各模块填充内容了。

1）诊断名称模块中，包含标题、诊断条件、以及操作

2）诊断结论展示内容：

诊断异常、人工确认、执行异常3种状态的诊断项时，按上到下顺序排列。（执行异常不需突出表现）

展示方式：

1. 一条展示一个诊断项。

2. 无解决方案和详细数据时，不提供展开收起按钮。

3. 有解决方案和详细数据时，提供展开收起按钮。默认收起详细数据，展示［异常结论］ （链接：查看完整报告／重试）［环节-诊断项］

点击展开详细数据，出现：解决方案（可选）与详细数据信息

如上图，在设计中，我首先通过位置进行了视觉上的层级划分，将其划分为2个层级（从左右阅读习惯上的基础上，可将信息层级表现概括为：左大于右，上大于下）

而在同一个层级当中，也有信息层级的不同，如第2个模块中，“1.43.32.42宕机”信息比“-「频道配置」DNSmap变化”信息层级高，而在文字字号一致的情况下，我运用了颜色进行视觉信息层级上的划分，将该模块的主次关系表达的更加明确。同样，该表现手法也适用于图中第一个模块，再将其扩大，这些表现手法也适用于该页面中的其它模块设计当中。

如上图，该模块共有3个模块：诊断状态、诊断内容、诊断操作。在了解了需求后可知，诊断状态层级是在3个模块中层级最高，那通过位置、大小、字体、颜色可以将其清晰的划分为3个层级：

如上图，在逻辑层级上诊断异常、人工确认、执行异常都为诊断状态，那在诊断状态中运用色彩的视觉元素将状态与表述性文字做了明显的区分，使用户可直观看到的诊断状态，而在诊断状态当中还存在信息内容层级上的区分，在选用字号同为16px的微软雅黑后，由于需求当中执行异常不需要突出表现，在这里也运用了色彩上的对比将其进行了层级上的划分。

综上所述，在面对一个页面逻辑，信息层级较为复杂的交互原型时，我们可以通过视觉的设计手法（位置、尺寸、文字、色彩、间距、对齐方式等多种单个元素，或多个元素组合）将最终输出的设计稿既满足项目组要求，又达到我们的视觉设计标准。

PS：在接到设计任务时需了解清楚页面的信息逻辑层级后，再对内部信息进行视觉的信息层级的划分。