网页设计中信息层级

正文

前言

当我们拿到一个需求时，首先需要处理到就是众多的信息内容层级关系。在有限的空间内，哪些是需要重点展示的，哪些是相对次要的，各个信息间的关系是怎样的？如何才能让用户快速有效的获取并理解其中的内容？下面，一起来看一下如何合理的建立信息层级。

信息层次关系是视觉表现的基础。在设计开始前，我们首先应该明确设计目的、产品业务目标以及用户的核心需求，在此基础上再来确定信息的优先级。

一级内容 ：为用户提供核心内容信息并引起用户的注意

二级内容 ：在一级内容的基础上，用户需要进一步了解的重点内容

三级内容 ：在前两项内容的基础上，补充说明帮助用户获取更多的详细内容

以电商网站为例，设计目的是突出商品的品质感，向用户传达商品的基本信息内容。商品本身最重要属于一级信息，通过商品图来吸引用户的注意力；商品名称作为仅次于商品图的信息内容，为二级信息，帮助用户进一步的了解内容；说明文字为最弱的层级，如果用户对前面两个层级的内容感兴趣，则才会选择继续浏览这个层级的信息。

在此基础之上，结合用户的行为最终导向和核心需求突出商品价格和利益点，鼓励用户进行下一步的购买行为，以达到最终的业务目标。

设计师通过分析和梳理最终确定信息的优先级，做到主次分明，结构清晰。帮助用户快速的获取关键信息，有效传达我们想要传达的内容。

已经确定了页面的信息层级关系，接下来就需要对这些信息层进行设计排布了。通过下面的方法，使我们的信息层级更加科学合理，让内容以更加有效的方式被组织到一起，帮助用户更好的理解产品，提升使用体验。

位置

位置是设计时首要考虑的因素。在有限的屏幕内，人眼在提取事物时也总是会遵循一些特定的视觉规律。一般而言当人眼在偏离视觉中心时（偏离距离相等的情况下），左上的位置最为优先，其次是右上，然后是左下，最后是右下。眼睛沿水平方向运动比沿垂直方向运动更流畅。简单来讲也就是就是从上至下、从左向右，也就是我们常说的F形布局。

如一般的网页，都会将logo、导航、行为召唤控件放在顶部和左侧；而一些相对次要的、广告等信息则放在下方和右侧。

对比

请到「今天看啥」查看全文