浪言之梳理界面布局

108687

上图的示例相信很多人都看过，其背后原理就是信息层次结构，根据信息的重要程度对视觉元素进行排序。今天我们就来聊一聊界面布局的信息层次结构。

创建一个界面布局，通常我们需要先完成以下任务：

决定任务的重点；

确定内容和交互的重要性顺序；

定义频繁和相关的信息；

了解用户的需求和期望。

这些任务旨在确定信息的层次结构，即用户浏览信息的顺序。

在视觉层面，上面的示例仅探讨了通过改变文本大小来搭建层次结构，但我们还可以改变其他特征，如字体、颜色、透明度等。使用场景也可以扩展到各种组件，例如按钮，菜单，表单等。

视觉元素大体上是通过相似性来分组，通过间隔距离来做区分的。它的基本前提，即格式塔定律，是构建数字界面的根本（考虑到原子设计方法论）。元素的视觉秩序是由它们的定位决定的。这些定位将引导用户去做他们能做或者期望做的事情。不管怎么说，用户才是决定信息浏览顺序的主体。

根据尼尔森·诺曼集团的研究：

“在网络上，人们不会阅读页面上的每个单词；相反，他们只会扫描整个页面。为了达到目标，他们会自然地努力提高效率，尽可能少地投入精力。”

这意味着在一个具有多种功能的界面中，用户将以扫描的方式找到他要找的东西，因此许多可见信息将会被过滤。

人们在网上阅读的方式很大程度上取决于：

他们的目的

他们根据以往经验所作的假设

页面布局

页面内容的类型

很明显，最后两个因素是可以被设计师控制的。设计师应该使用知识和技术来影响用户的行为，而不是阻碍用户对一个数字产品的体验。在创建布局时，我通常会考虑不同级别的用户的影响，以及动态信息和固定信息的区分。

1
不同级别的用户

在创建一个界面时，我们知道访问它的人会有不同阅读习惯和浏览方法。为了便于理解，我将他们分为三组：首次访问用户、普通用户和经验丰富的用户。

首次访问用户，顾名思义，是指第一次接触到某个界面的人。如果这个界面是一个系统的一部分，那就意味着用户在某个时候还是会和其他页面有第一次接触。这一层次的用户浏览页面的速度往往比平均水平要慢，会花更多的时间去理解页面内容，直到找到他们要找的东西。

普通用户处于平台学习曲线的中间段，也可能只是在数字环境下有更多的使用经验，但是还没有掌握界面本身。

经验丰富的用户已经使用了某个平台一段时间，所以他们的扫描速度更快，不需要阅读大量的内容,因为他们知道内容在布局中的位置，并能摸索出元素、板块和交互的视觉规律。但也许正是这些因素，导致很多用户对不同产品突然变化的界面产生抵触情绪。

那么不同级别的用户对界面布局的设计有什么影响呢？让我们先看看设计师们关于图标使用的讨论。

有些人认为，如果有必要在图标旁边添加文字标签，那么图标本身就没那么重要了，因为它将成为次要的存在，只是另一个识别负荷。但众所周知，不管人们对页面本身的体验如何，图标都有帮助快速识别的作用。



图标可以帮助快速阅读。

在上图中，可以看到菜单中的图标是伴随着要访问的页面标题而改变的，根据用户期望的功能来显示不同的图案。因此在看第一眼时，图标将更容易引导用户，它便于用户扫描页面，而不需要阅读所有的内容来寻找所需的东西。

对于首次访问的用户来说，图标和文字标签都可以帮助他们快速了解这些功能。而对于经验丰富的用户来说，图标将成为一个快速定位功能的标志，文字标签将变成一个辅助。

2
动态信息和固定信息的区分

下图是一个投资类APP每周通过邮件发给用户的报告。用户会阅读卡片上的所有内容吗？每次都会看吗？还是只看对他重要的内容？



在这个例子中，你的阅读顺序是什么？我们可以发现，由于缺乏更明确的层次结构，页面的一些部分信息在视觉上互相对抗着。日常工作时，我们有必要对用户进行一些测试，以确定需要做出哪些必要的变化。

上图的示例相信很多人都看过，其背后原理就是信息层次结构，根据信息的重要程度对视觉元素进行排序。今天我们就来聊一聊界面布局的信息层次结构。

创建一个界面布局，通常我们需要先完成以下任务：

决定任务的重点；

确定内容和交互的重要性顺序；

定义频繁和相关的信息；

了解用户的需求和期望。

这些任务旨在确定信息的层次结构，即用户浏览信息的顺序。

在视觉层面，上面的示例仅探讨了通过改变文本大小来搭建层次结构，但我们还可以改变其他特征，如字体、颜色、透明度等。使用场景也可以扩展到各种组件，例如按钮，菜单，表单等。

视觉元素大体上是通过相似性来分组，通过间隔距离来做区分的。它的基本前提，即格式塔定律，是构建数字界面的根本（考虑到原子设计方法论）。元素的视觉秩序是由它们的定位决定的。这些定位将引导用户去做他们能做或者期望做的事情。不管怎么说，用户才是决定信息浏览顺序的主体。

根据尼尔森·诺曼集团的研究：

“在网络上，人们不会阅读页面上的每个单词；相反，他们只会扫描整个页面。为了达到目标，他们会自然地努力提高效率，尽可能少地投入精力。”

这意味着在一个具有多种功能的界面中，用户将以扫描的方式找到他要找的东西，因此许多可见信息将会被过滤。

人们在网上阅读的方式很大程度上取决于：

他们的目的

他们根据以往经验所作的假设

页面布局

页面内容的类型

很明显，最后两个因素是可以被设计师控制的。设计师应该使用知识和技术来影响用户的行为，而不是阻碍用户对一个数字产品的体验。在创建布局时，我通常会考虑不同级别的用户的影响，以及动态信息和固定信息的区分。

1
不同级别的用户

在创建一个界面时，我们知道访问它的人会有不同阅读习惯和浏览方法。为了便于理解，我将他们分为三组：首次访问用户、普通用户和经验丰富的用户。

首次访问用户，顾名思义，是指第一次接触到某个界面的人。如果这个界面是一个系统的一部分，那就意味着用户在某个时候还是会和其他页面有第一次接触。这一层次的用户浏览页面的速度往往比平均水平要慢，会花更多的时间去理解页面内容，直到找到他们要找的东西。

普通用户处于平台学习曲线的中间段，也可能只是在数字环境下有更多的使用经验，但是还没有掌握界面本身。

经验丰富的用户已经使用了某个平台一段时间，所以他们的扫描速度更快，不需要阅读大量的内容,因为他们知道内容在布局中的位置，并能摸索出元素、板块和交互的视觉规律。但也许正是这些因素，导致很多用户对不同产品突然变化的界面产生抵触情绪。

那么不同级别的用户对界面布局的设计有什么影响呢？让我们先看看设计师们关于图标使用的讨论。

有些人认为，如果有必要在图标旁边添加文字标签，那么图标本身就没那么重要了，因为它将成为次要的存在，只是另一个识别负荷。但众所周知，不管人们对页面本身的体验如何，图标都有帮助快速识别的作用。



图标可以帮助快速阅读。

在上图中，可以看到菜单中的图标是伴随着要访问的页面标题而改变的，根据用户期望的功能来显示不同的图案。因此在看第一眼时，图标将更容易引导用户，它便于用户扫描页面，而不需要阅读所有的内容来寻找所需的东西。

对于首次访问的用户来说，图标和文字标签都可以帮助他们快速了解这些功能。而对于经验丰富的用户来说，图标将成为一个快速定位功能的标志，文字标签将变成一个辅助。

2
动态信息和固定信息的

上图中唯一的动态信息是视觉权重为4的信息，其重要性等同于权重为3的信息。权重为2的信息是不变的，这种类型的信息在每个报告中都会重复出现，而权重为1的信息在由该APP发送的所有类型的邮件中都有，因为这些信息是识别APP身份的一部分。

在第一次访问时，用户需要快速了解自己正在阅读的页面，因此所有的信息都要有，但不一定都要放在显著的位置。考虑到这一点，我们可以降低固定信息的视觉权重(褪色、改变字体大小等)，避免让用户在阅读时分心。



这张图中内容位置的简单变化突出了最重要的主题，展示了属性对层次结构的影响。动态信息的层级提升了，而固定信息在文字颜色上进行了弱化，“查看详情”的主按钮也更改为了辅助按钮。此外，APP的身份识别信息也被合并到了主体中。

此外，在商务类的软件中，表单的行标题比每行的内容在视觉层级上更突出也很常见。但是，既然标题是一种固定的信息，用户可能每天都有接触，那么为什么不把重要程度转移到主体和可变的内容上呢？




总结

在创建一个界面时，我们需要认识到信息的重要性顺序以及用户的需求和期望，遵循这一思路可以帮助决策如何对元素进行优先级排序，以满足面向不同层级用户的产品可用性。这样一来就能够建立一个高效和友好的用户体验，最终有助于提高用户的活跃度和留存率。

编译作者：叶苏 | 集创堂会员 | 纽约大学在读硕士

原文作者：ViniciusAndrade

原文链接： https://uxdesign.cc/visual-hierarchy-oriented-by-users-levels-5adc621c42b3

38004

说得很好，但你怎么没学下