UI设计中的视觉层级研究

李时颖

摘 要：UI设计本质上是一种视觉传达系统，而清晰、高效能的传达信息就应该先解决视觉层级问题。

关键词：UI设计；前端；视觉层级

信息时代人们的生活离不开各种各样的终端设备，而人们使用终端访问互联网应用时主要通过UI界面进行。在UI设计领域，流畅的访问体验主要体现在用户能够马上对提供了那些信息一目了然；能够根据引导快速找到自己想要的东西，能够在交互时得到及时和有效的相应。UI设计本质上是一种视觉传达系统，而清晰、高效能的传达信息就应该先解决视觉层级问题。

一、视觉层级的含义

由于本质上UI设计是视觉领域的信息传播，所以UI设计也应遵循信息传播的基本规律。信息传播追求准确和高效。而实现高效的传播就需要将信息条理化、秩序化。对于视觉传播而言，秩序化就是在视觉上直观的建立起信息的内在逻辑关系，和形成主次轻重的秩序。常见的信息逻辑关系包括父子关系和并列关系，逻辑关系本质上就是一种信息的层级。

二、视觉层级关系在UI设计中的体现

在UI界面中，视觉层级体现在很多方面。

在网页布局方面，为了让页面上复杂的信息更有序的展示，依据人们的视觉习惯，网页被划分为页头、页底、导航、banner、内容等不同区域，不同区域通过空隙、边框、tab栏标记等相互区分，在视觉上形成一种信息被分门别类有序展示的印象。

如果相同大类的信息又以多个小类在多区域展示，比如校园网新闻板块中需要分别展示学校要闻、二级学院要闻、团学相关新闻等，往往会采用区分空间但统一形式的做法，比如采用相同的tab栏标记样式，在视觉上形成一种同类信息的效果。

在前端设计中常用的列表结构、菜单结构则是体现父子关系的常用形式。通过导航系统、菜单列表将信息以主要信息、次级信息的双重维度组织起来，用户访问时以交互的方式展开一个信息项，就可以看到从属于它的具体内容，既能够让用户快速理解信息层级结构，又能够根据自己的需要进一步访问，避免无关信息的干扰，大大提升了信息传播的效率。

三、优化视觉层级的技巧

视觉层级的优化就是将视觉层级关系从模糊变得更为明确清晰的过程。主要体现在三个方面：信息的统一、信息的强化、信息的弱化。

信息的统一就是遵循形式构成法则，追求同类信息在视觉上的统一性。可以从色彩、大小、形状、空间等很多方面入手。比如同一个网站相同级别的文字除了特殊强调的部分外都被统一成相同的字号，相同的颜色，相同的字体。这样在视觉上就可以形成稳定的统一感。同一个网站的每个单页一般采用相同或者类似的排版布局让用户在访问时可以沿襲相似的访问习惯而避免因为排版布局变化太多带来的无所适从；配色系统也保持统一和一定规律避免杂乱；网站的Icons系统也保持一致的外观，如主要形状、配色规律、视觉风格等，这些都是为了让访问者尽快的获得一种信息展示的规律和结构感，形成一种与之相适应的阅读习惯，并能顺畅的延续到每个部分的访问中，提升用户访问信息的流畅性。同时也因为让同类信息在视觉上更统一强化了信息的逻辑结构感。

信息的强化就是拉开和强调信息之间的差异感。前端设计一些标签如

～

标题标签自带加粗、加大字号属性，目的就是区分文本的标题和正文，形成层级感。信息的强化可以从色彩、大小、形状、动静等很多方面入手强调差异性。比如文本中加粗、倾斜、高亮显示相关内容引起用户的注意。Icons系统往往使用较鲜明颜色从页面中凸显出来让用户容易识别。JavaScript技术让UI界面中的元素可以通过在网页中弹出、悬浮飘动、闪动等方式区别其他一切静止元素而迅速吸引用户的视线。

与信息的强化相对应的是信息的弱化。顾名思义，信息的弱化就是缩小差异。弱化的过程事实上是一个尺度问题。是获得信息层级关系在视觉上最恰当的体现。比如Icons系统事实上就应当保持统一感中又能区分彼此的差异感，这里面就既需要通过强化解决Icons与页面其他部分的差异感凸显Icons的提示、引导作用，又需要弱化Icons中不同Icon之间的差异让他们彼此相对统一。信息的强化弱化、统一实时上是体现信息的层级关系的矛盾统一，它们都是服务于让视觉层级关系更明确更清晰这个根本目的。

四、视觉层级与视觉习惯

互联网的发展已经持续了几十年，由于终端设备的普及和UI设计的不断成熟事实上已经建立了一套普遍被接受的视觉符号系统，比如网页常用的布局样式，菜单的基本样式、按钮的形状、符号和指示含义的对应关系等等。遵循这些规律会让用户更为熟悉，有助于访问体验的流畅性，但也容易造成视觉的雷同；而打破这些规律带来视觉新鲜感的同时可能会给用户带来困扰。因此寻找设计新鲜感和视觉习惯之间的有效平衡也是UI设计的重要课题。

参考文献：

[1]刘心美.DIV+CSS网页布局的设计与实现[J].科技资讯，2021

[2]韦立梅，张淑荣.基于HTML+CSS+JQuery的网站开发简述[J].电脑与电信，2017