1.  

   观察研究：深入观察用户在实际生活中的行为、习惯和需求，理解他们的真实需求和痛点。这需要设计师具备敏锐的观察力和同理心，能够设身处地地站在用户的角度思考问题。
2.  

   用户调研：通过问卷、访谈等方式，直接获取用户的反馈和建议。这有助于了解用户的期望、偏好和顾虑，进一步揭示他们的心智模式。
3.  

   竞品分析：研究市场上类似产品的设计，理解其满足用户需求的优点和不足。通过竞品分析，可以洞察用户在不同产品间的选择和行为模式，从而深入理解他们的心智模式。

1.  

   明确目标用户：了解目标用户的心智模式，根据他们的需求和行为习惯进行产品设计。这有助于确保产品功能、交互和视觉设计等方面符合用户的内在期望。
2.  

   优化用户体验：基于用户的心智模式，优化产品的使用流程。例如，通过合理的信息架构、易于理解的交互设计和符合用户直觉的视觉语言，提升产品的易用性和用户体验。
3.  

   创新设计：通过深入了解用户的心智模式，发现潜在的需求和痛点，为产品设计带来创新点。这有助于创造出真正解决用户问题的产品，提升市场竞争力。
4.  

   迭代优化：在产品发布后，持续收集用户反馈，了解用户在使用过程中的感受和体验。根据用户的反馈和行为数据，不断优化产品设计和用户体验，以满足用户不断变化的心智模式。

“整体不等于部分之和，意识不等于感觉元素的集合，行为不等于反射弧的循环。”一、格式塔的起源

格式塔的德文为“Gestalt”，意思为「形状」和「图形」，在心理学中可以看作是任何一种被分离的整体。格式塔心理学的研究源于视知觉，是现代认知主义学习理论的先驱，为后来的社会心理学的发展打下了坚实的基础，其创始人是韦特海墨、考夫卡和苛勒。

作为产品经理，在进行竞品分析时，运用用户体验五要素（战略层、范围层、结构层、框架层和表现层）是至关重要的。竞品分析应该根据不同的需求目的出发，有针对性地进行分析，以提供有价值的洞察和指导。

本文将详细探讨每个要素在竞品分析中的应用，并阐述如何根据不同的需求目的进行有针对性的分析。

决策疲劳在现今互联网深度发展的时代似乎非常常见，面对眼花缭乱的APP页面，我们通常会因为需要做出过多决策而烦躁。那么产品设计者应该如何减少决策疲劳现象，给予用户更好的体验。本文围绕解决用户决策疲劳展开了详细讲述，推荐对此感兴趣的伙伴阅读。

决策疲劳是用户体验圈一个路人皆知的词汇，用于描述人们在某个时期内做出过多决策而导致厌烦的情况。研究表明，它主要发生在人类的认知能力在单位时间内随着时间的延长而减少时。这就是为什么学习、钻研问题，是一件非公众都能做好的少数事件。

在产品设计中，我们要坚持减少用户需要做出决策数量的基本原则。保证用户使用产品来完成一项任务，能够越顺利、越直接。个人在特定时期内被要求做出的决定越多，即使这些决定是微不足道的（比如选择播放那个节目），他们的决策质量也会越低。

当你感到疲倦时，这会显著地影响你的决策能力，而 设计师在为用户设计界面时必须了解到疲劳可能对用户的影响。这个话题很有趣，因为人们在使用你的产品时可能会遇到的认知过载的原因有很多。

本文重点是介绍在你进行下一个 产品项目时减少认知过载的六种方法。

一、让用户少做选择

作为用户，每天我们拥有的选择题都在呈指数增长。互联网让我们可以在瞬间访问世界上的内容。如此多的选择会使我们思维迟钝，降低我们的满意度，并可能导致我们对体验感到沮丧而不是变得更好。

当给用户太多选择时，他们往往会感到困惑和迷茫。一个产品可以拥有世界上所有的功能，但是当界面因为选择过多而过于复杂时，它最终给到用户的体验一定很差。《人格与社会心理学杂志》的一项研究表明，当我们有太多选择时，往往会导致决策失误和情绪沮丧。

来自哈佛商业评论的模型

在追求最大化满足商业化可能的产品设计中，老板可能会要求在其产品中包含过多或过少的功能。通过使用哈佛商业评论提供的模型，横轴为功能数量，三个点依次为用户复购最大化、用户终生价值最大化、用户初次购买销售最大化，公司能够根据他们想要的结果找到适合他们的功能数量最佳点。

研究表明，人们更有可能购买提供了有限数量的商品。在这种情况下，他们也会对自己的选择更满意，而不是从购买前的犹豫到购买后的忐忑，从而产生更大的满足感。

关键是很多产品为用户创造了太多的选择，这可能会造成浪费并适得其反。用户可能会浪费时间尝试点击所有可能的产品，而不是按照预期进行实际购买。

1. 扯淡的神奇数字7

在用户体验世界中，关于使用多少次点击以及人脑一次可以接收多少信息，存在许多相关的说法。但最重要的是，产品设计师需要在简单性和功能性之间取得平衡，这样他们就不会要求用户做太多的操作或过多考虑用户的需求遗漏了什么。

最容易被误解的理论之一是乔治米勒的“神奇数字 7”。有人说产品设计应该只有七个菜单选项卡或下拉列表中的七个项目。

这是个谬误，虽然我在某种程度上同意这种观点，因为坚持这样的限制似乎更自然，但我们也必须考虑信息是如何随着社会和我们的大脑发生变化的。当前的互联网会通过网站和大屏手机向我们展示数据，而不是早年的4.0英寸的小屏手机，用户可以轻松地一次看到他们的所有选项，并不是非要强制通过数字7的限制让用户一块很大的屏幕上来回滚动。

同时现在也有一些研究表明，人们有可能喜欢有多种选择的菜单。我们拥有的选项越多越好，因为用户不必花时间深入查找相关信息。

比如主页上最多包含 几十个类别链接的淘宝列表）比仅提供有限选项（如没有子类别的类别）的网站更有用。但这里要强调的是需要考虑实际的用户场景，电商平台的属性导致了要为消费者提供更多的选择，而类似工具产品，尤其是垂直工具产品，在设计选项数量时一定要谨慎。

2. 击规则站不住脚

还有另一个站不住脚的理论：从业者普遍接受但完全不靠谱的“三击规则”，或者更加扯淡的“两击规则”。用户的满意度和事件完成率其实并不一定受几次点击影响，比方说付费流程，缺少必要的流程硬按点击次数把流程缩短，导致用户错误付费而产生的用户体验变差几乎是不可逆的。

3. 视觉布局用点心

比菜单选项卡或下拉列表的数量更重要的是视觉体验。视觉布局可以更轻松地扫描和记住每个选项。根据信息搜索理论，信息线索的持续感知对你的用户体验很重要。

人们在日常生活中要做出很多选择，而太多的选择可能会让人不知所措。当我们因产品特性不得不呈现更多的信息时，重要的是信息组织方式。

你可以去尝试减少选择的数量，但最重要的是你的信息结构。如果你的信息没有组织好，或者给到用户的决策过程中涉及的步骤过多，用户就不会费心去寻找他们想要的东西，因为他们觉得这会花费太长时间或可能没必要去更更努力地探索。

为了在产品上让用户的决策中有更好的转化，我建议去掉任何不必要的东西，例如无关的标签和链接，这些标签和链接会分散用户的注意力，使其无法找到他们正在寻找的东西。同时综合产品特性去考虑实际该有的流程数量和必要选项，平衡简单性和功能性的关系。

二、允许用户后悔

现实中我们都会犯错。它可能发生在我们所有人身上！但是，如果用户犯了错误，优秀的产品设计师应该怎么做？

答案是：让用户轻松回到起点。

通过让用户走上正轨，你更有可能留住他们作为用户，而不是导致他们离开你的网站或应用程序。

下面是我在设计用户流程时的一些最佳实践：

• 尽可能少制造意外情况；
• 错误问题尽可能明晰，让用户更容易发现以修复它们并继续用户操作；
• 在操作错误破坏用户体验之前通过提供保存数据选项来主动防止错误的数据输入；
• 不要只是弹出一条覆盖整个页面的消息，而是向他们展示哪些字段是错误的；
• 避免在你的消息中使用苛刻的措辞，因为文案可能会赶走甚至激怒某些用户。

三、视觉提示有助于导航

导航是任何网站或应用程序的核心。这就是让你的设计能够让每个人都易于访问和使用的原因。设计出到适合你产品的导航系统，对用户体验至关重要。

导航的设计应该直观且易于使用。用户应该始终知道它在哪里，它的意义，以及点击它会去哪。

一个好方法是通过颜色为用户对操作区域进行导航：比如当进行切换、更改等动作时配备不同的颜色，并用文案清楚地说明每个菜单项下是什么功能。

这些小动作有助于使浏览您的网站或应用程序成为一种畅快的体验。

• 使扫描和阅读页面更容易；
• 改善视觉层次；
• 加强页面导航；
• 重要位置的鲜艳颜色可以提高转化。

一个例子是 Instapage 登陆页面。如果标题没有箭头，很难看出下方有更多内容：

四、利用习惯动作减少学习成本

在设计新界面时，必须尽可能降低受众的学习成本。一个方法是利用他们已经熟悉的模式和习惯。但是你怎么知道这些约定是什么？

下面是三个常见的 设计惯例，这些惯例可以让你的用户在与产品内交互时感觉更熟悉，这有助于减少他们的学习成本，并让他们更快地开始学习你试图传达给他们的任何内容。

1. 颜色不要缭乱

简洁的配色方案要远比复杂华丽的配色更有效果。人眼会被颜色所吸引，因此如果你在整个界面中使用简洁的配色方案，人们会更容易找到自己想要的信息而不是被颜色乱神。

2. 把设计风格重复使用

不仅要遵循常见的用户体验规则，而且要在一个产品里不停的重复，不要轻易作新颖的尝试，前辈们大多已经帮你尝试过了。

这样的意义在于：

人们使用你的产品感觉更轻松，因为这个产品没什么复杂的新东西（降低了学习成本）。

一个例子是，目前无论你在那个浏览器查看哪个页面，你的菜单栏都会保持在站点的顶部或底部。这会让你产生导航认知，因为它在帮助你决定下一步需要采取什么行动时减轻了学习成本。

3. 使用生活中的事物表示符号，比如用于删除文件的垃圾桶。

图标是在你在表示操作对象是什么的好方法，它们易于理解且具有普遍可识别性，因此非常适合作为交互介质。使用在生活中已经被广泛理解的图标和符号有助于让你的产品内容不会感觉难以理解和过于复杂。

图标一定要广为人知——例如房子。这个图标被普遍认为是“主页”或开始屏幕的图标。垃圾桶也是一样——这个图标被认定为一个垃圾桶图标来删除一个元素。

五、别自嗨

我们都知道应该以用户为中心进行设计，而不是你自己，但其实不是那么容易。当你处于设计过程中试图弄清楚你的用户需要什么或他们会如何反应时，其实往往会按照自己的喜好走偏。

一个方法是你可以使用一些简单的技巧来确保你在设计时考虑到你的用户。有些人发现从第一人称的角度写下他们的想法有助于将自己想象成最终被服务的用户。

或者某些设计师会讲角色分类，然后全情单线程的专注一个项目，以牺牲时间和效率为代价确保航道的正向。

以用户为中心进行设计的最佳方式是听取用户的意见。当你从事一个新项目并考虑这个产品将如何服务于用户时，请确保在进行原型设计之前先和你的用户聊聊。

可以尝试提出以下问题：

• “你最喜欢我们上一款产品的哪一点？”
• “如果我们更改 x 功能，你会有何感受？”

往往你会惊讶于他们可以提供的见解以及他们将期望如何改变你原型的方向。

你可以使用多种用户体验研究方法来确保你在设计时考虑到用户：

1.  做一定的市场调查；
2.  创建角色故事；
3.  使用线框或原型快速获得反馈；
4.  定期和客户服务团队交流。

六、简约至上

不要提供太多的选项或功能让用户不知所措。

每个产品都有自己为用户解决的核心问题，用户希望在产品中获得帮助并快速做出决定。问题是，很多产品经常沉迷于他们产品功能以及他可以为用户实现什么，忘记了如果有太多选项和功能，新用户可能会感到不知所措。

如果你负责一个产品，可以考虑你的用户在面临过多选择或功能时的感受，并尽量优先突出他们最需要的选项或功能。

例如，在电子商务网站中，用户不能从 50 种不同的衣服面料中选择他们最喜欢的材质，如果预先只有三四个选择，可能会带来更好的体验。也可以考虑隐藏一些选项，方法是使用视觉提示，例如类似“探索更多”文字的按钮。

确保将最重要的信息呈现给用户的一种方法是将信息流设计为金字塔形状，首先呈现基本信息，不太重要的信息尽量放在不显眼的地方或者想办法隐藏。

七、结论

这里提供了六种方法，帮助你减少产品中的决策疲劳，从而使用户更有可能走上正轨，解决他们的问题，并帮助获得更高的转化。产品设计时把自己放到用户的角度去思考，才能更好的服务于用户

文章来源：人人都是产品经理   作者：公众号：真的不一定

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

以下内容主要分成两大部分，第一是聊聊响应式和自适应的区别和原理，以及我们应该如何去设计响应式界面；第二部分也是比较关键的B端系统设计的核心，B端设计中台完整构建过程的具体步骤，以及应用到的格式塔原则，和命名的一些注意事项，内容较多，大家可以根据上述目录来选择性阅读。

1.1多端兼容设计的发展史

简单概括多端兼容设计的发展史，最早是桌面端，比如桌面的一些应用；后来出现了移动端，针对移动端大家用的都是WAP，指一种无线应用协议，大家在用手机浏览一些网站，会把网站翻译成一种低流量的浏览方式，比如去掉图片大图，只剩全文字，因为当时网络不好，早在3G和2G时代移动端用的都是WAP；在2008年之后出现了响应式，也就是做一套代码可以兼容三端（网页、移动端、iPad）设备，在发展的同时也遇到很多问题，但响应式同时也遇到了很多问题；于是又出现了自适应，指不同的设备打开不同的页面进行自适应，自适应能增加效率，但需要增加工作量；2017年以后直到现在看到最常用的就是渐进式，类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。

1.2 响应式布局的种类

1.2.1 响应式布局RWD

可以理解成用户在手机、电脑、ipad打开同一个界面，所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。

1.2.2 自适应布局AWD

自动布局算是响应式的一种，但平时看到很多响应式其实并不是真正的响应式，而是自动布局，因为界面在不同的设备用的是不同的模板，当我们用电脑打开呈现的是一套模板，而用手机打开则是另外一套模板，这种看起来是响应式，其实不是。因为当我在开发者模式下调节不同设备展示时，就会发现，其实是换了一个网址来根据不同的设备进行自适应的，而真正的响应式是不需要刷新的，在拖小窗口的时候就会变成手机端的那个样子。

1.2.3 渐进式布局PWD

渐进式布局是近几年比较新起的，这种布局设计，很像一个网站或者本身它就是一个网站，但用起来就像一个APP一样，看到这里大家很容易相到，小程序就是渐进式布局得一种，小程序明显是一个网页，但通过技术的一些嵌入和一些接口或者缓存的方式的操作，让用户在使用的时候感觉小程序就是一个APP，但核心技术还是web网页。

1.3 如何应用设计响应式

响应式的原理是通过定位的方式来做响应式的各种开发，需要在页面中至少标出这十个点：中心点，上下左右点，上左上右点和下左下右点，这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解，其实结合figma来看，这些点对应的就是这样（如下图），在figma中的布局点。设计师通过调节图形的布局点，可以做到在页面拉伸时，让想动的元素跟随变化，不动的元素静止不动，这就是响应式的原理。换言之，我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。

1.4 响应式和自适应的区别

01、响应式

如下图是响应式的优点和缺点。响应式其实就是只开发一套页面，这个页面兼容三端。虽然做了响应式，但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面，然后全部做好对应的自动布局，再进行页面拉伸，内容随之会发生变化，比如当拉伸到1024*768的时候，也就是iPad的尺寸，就会发现局部在设计上有些不合实际情况，这时就需要设计师在对应尺寸的设计稿上进行内容上的微调，比如按钮不可能那么长，就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时，然后再酌情针对网页尺寸的呈现样式，局部进行尺寸的调整，比如文字和按钮被拉伸到网页版都需要居中对齐，电脑端的样式就需要设计师重新排版了。

通常在B端系统，设计师需要做响应式设计时，往往是从大往小做设计，这也取决于这个B端产品是否需要进行移动端的设计，《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端，就需要我们将网页改成移动端设计，比如B端的侧边栏导航在拉伸到移动端时，就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中，做三端拉伸时候，可以用断点插件来进行演示，通过对断点插件的设置，就可以完美的看到页面在三端不同情况的适配呈现，断点插件用来做演示非常方便。

02、自适应

如下图是自适应的优点和缺点，其实就是一个项目开发三个页面，分别做定制设计，网页端、移动端和Ipad端。

2.1必读前言

我们都知道2021年也就是今年是我国新基建的元年，十四五规划2035远景目标里提到重点发展传统企业数字化转型，尤其是今年我们设计师更能深刻体会，C端和B端已经是完全两个不同的行业，C端发展近十年，已经很难再做到创新上的突破，该做的功能和创新都已经做了，而B端这片蓝海才刚刚开始发力，很多企业也都在考虑B端系统的搭建，降本提效率成了很多公司新的指标，因此数字化转型重点在于B端系统探索，B端重点在于中台的搭建！设计师通过设计中台，构建出基本的业务类型，再分类到业务中，构建出不同的业务界面，所以设计中台非常关键，很多公司经常会用这两个系统去构建，Antdesign和Elemnet就是设计中台，我们会发现用Antdesign可以做出很多的系统，那怎么进行设计中台的设计呢？和我们设计师有什么样的关联度呢？带着这个问题，我们深度探索B端设计中台的落地！

2.2 中台的概念及作用

概念：中台是互联网的术语，一般应用于大型企业，中国互联网的变革永远是从大型互联网开始，大型互联网公司引发了技术的变革，这也是中台的兴起，一般指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提高工作效率目的。

作用：降本提效。如果没有组件库，普通设计师一天最多做十个页面，再多就不太可能了，如果有组件化得产生，一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前，组件库的作用尤为重要。但如果落地，就需要前端工程师的密切配合，因为设计师设计的组件只是一个样式，而前端需要把组件进行代码化，所以组件一定是代码化的，也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用，和前端代码的复用，可以大大提高设计师的工作效率。

2.3 设计中台的构建过程

2.3.1 基本库建立

基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等，之所以强调系统两个字，有系统就要统一规则和统一规范，然后进行调用应用在系统中的各个地方，比如我们想调用一个颜色，不是去随选用一个颜色，应该严格的从色彩系统中去调用，如果系统组件库里没有这个颜色，我们也绝对不可以使用，可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用，这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面，组件库中如果没有相应的组件，我们应该试着反推一下，是否要加进组件库中去，来进行系统的调用。在做中台的过程中，我们一直使用Antdesign，我们对组件的名称，组件的分类其实一点都不陌生，其实Antdesign也在借鉴国外的Bootstrap组件库（大家感兴趣可以下载Bootstrap组件库进行查看），所以并不是Antdesign组件库形成了一定的规则，它也是在沿用别人的规则，而这些规则也需要不断的有大公司去继承出来，所以慢慢衍生出来现在这样的组件库，那中台设计，首先要搭建基本库，把基本库里的基础一些系统搭建好后，我们继续去做扩展库。

2.3.2 扩展库建立

如下图，扩展库中包含了很多内容，比如分了四类，导航系统，数据录入，数据展示和反馈系统。其中导航系统又包含了，面包屑导航、下拉菜单、导航菜单、顶部导航等等，包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库，也不需要做成像Antdesign的组件库里包含的那么多，或者和新出得字节Arco组件库，因为它们面向的是系统级的解决方案，各行各业都可以用它，它面向的是一个大系统，也许我们只涉及到了其中的20%，因为也没有一个系统能用到它所有的组件，所以我们自己在设计组件库的时候，一定是按照我们自己项目的范围去做组件库，而不是做一个大而全的，大而全的组件库对我们也没有意义。它们做的是公共平台，而我们要做的是一个专属平台。

2.3.3 方法库建立

形成完基本库和扩展库后，第三步是建立方法库。方法库告诉我们的是什么时候用，比如我做了一个多选框，这个多选框应该什么时候用，是不是只要遇见一个选择就去用多选框，肯定不是，应该加以说明什么时候用这个多选框。类似于是组件的设计说明。

2.3.4 案例库建立

最后再做一个案例库，最佳实践库，具体组件什么时候用我们知道了，接着案例库就是在告诉我们应该如何正确的使用，或者说的方法是什么。比如标签的左对齐和右对齐，这种情况都对，什么时候用顶对齐，什么时候用左对齐，什么时候用右对齐呢？那么根据眼动仪实验数据数据来看，并且结合给出一些工作中业务中的最佳实践得案例放进去，给使用的人去做指引。

所以设计师做的事情，不仅仅是应用组件库和创造组价库，还应该指导其他设计师，指导开发人员在去复用每个页面组件的的时候，应该怎么正确的使用，这也是在B端设计中一个关键的环节，同时我们的视觉系统一定也是和业务有关联度的，所以在B端中做设计一定也不会脱离业务去做，我们一定要联系到实际的业务场景中，这个业务场景指的就是业务和视觉的结合，在做C端的时候，业务场景一定不会比B端多，C端的业务场景大多是定制化的业务场景，它要求的是个性化，不要求通用，尽量得个性化，比如图标、按钮、页面，而B端需要统一化，中台组件库的落地，可以大大提高设计师的工作效率和开发人员的协同效率，严谨的调用组件使用组件，可以使得系统页面保持高度的一致。

2.4 认识格式塔原则

2.4.1接近性

如图1：可以看出纵列的关系更紧密，因为纵间距小于行间距。

如图2：可以看出行间距大于列间距，它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢？这属于用户心理学的应用，如果元素相邻的更近，元素之间的关系就会更加的紧密。

如图3：如果元素相邻的关系都是保持一样的，那么它们的关系是相对对等的。

由此可以得出结论，如果相邻的关系越近，它们的关联度就越近，如果相邻的越远，它们的关联度就越远。

应用案例：如图4卡片中得标题和内容，设计中把标题和内容进行区分，所以我们会做大量的留白，这样的留白就会让信息结构具有层次感，层次感就是指它们信息结构的关联度，如果想让它们有关联度，就让它们距离近一点不要做区分，如果不想让它们有关联度，或者关联度出现一个等级的区分，那么就可以加一条线，让它们之间的关联度分隔开。这就是格式塔接近性的应用。

2.4.2 相似性

如图5：如果去区分右边的形状，通常我们会根据形状进行区分，因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。

应用案例：如果文字的标题大小是保持一致的，包括它有统一的大小，统一的色彩，统一的字号，那系统中的其他同样功能的地方，都应该用统一的文字，这就是格式塔相似性的应用，比如图标也是一样，只有用了相似的图形大小，相似的颜色，在相同的位置，用相同的图标进行表达，图标之间的设计才具有相似性。

2.4.3 主体与背景

如图6：可以看到有一个L，是主体与背景进行了区分，如果在设计的时候让L看的更加明显，我们采用的办法就是将主体的色彩或者形状变的更加独特，或者将背景的颜色变得更加分明，这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。

应用案例：比如警告弹出，可以用色彩去区分，目标就是让用户看的更加得清晰，当警告的时候给用户一个警告的信息，当成功的时候给用户一个成功的信息。还有类似对话框的弹出，采用背景变暗和加阴影的方式，都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中，前景和背景进行区分的时候，我们就可以通过色彩进行区分，色彩的区分要保持统一，比如背景色彩透明度50%同时加一些背景模糊，其他的背景也需要保持一致，阴影也是一样，如果把阴影放在一个平面上，距离平面越近，它得阴影越短，距离平面越远，它得阴影越长，这也是阴影的层级关系。

2.4.4 封闭性

如图7：可以看出这是一个四分之一的圆形。

如图8：这个图可以看出是一个五角星。

封闭性应用案例：当一个形状被另外一个形状或者被另外一个色彩阻断的时候，并不影响人们对这个形状额外得认知，一定会脑补出另外一个形状，这个原则和我们UI的关系是什么呢？比如一个loading，半圆一直在旋转，或者图表中的圆占比，我们就可以判断出谁大谁小，谁多谁少，判断出当前的进程和位置，封闭性原则通常应用在图标的设计，图表的设计和步骤条的设计中。

2.4.5 连续性

如图9：可以看出用一些简单得形状来体现，其中三角形具有明显的指向性，三角形箭头指向右边，上面五个是一组，可以看出它们具有连续性；另外一组三角形箭头指向右下角，可以看出它们是连续的一组。不同的形状会有连续性，箭头也特别有指向性，这就是为什么返回和前要进放在不同的位置，当我们的数据需要有连续的时候，我们也要使用相似的形状来表达，这就是连续性原则的应用。

同理如图10：连续性一定是要有连续等阶的变化，从左上角开始，向下和向右我们可以看出有明显的颜色连续等阶变化，通过色彩的透明度也可以做到连续性。

2.5 组件的命名规则

2.5.1 如何正确的命名

很多公司或者不同公司有不同的命名方式，这个需要和团队开发提前做沟通，主要以方便开发习惯操作为主，如果不命名也不能非得说成是错误的，命名可以理解成是一件锦上添花的事情，因为一切都以效率优先，命名自然会影响工作效率，通常情况，组件的命名可以分成组件的名称、级别、尺寸、状态，这样的命名顺序来进行，这样命名开发使用也比较方便，因为是按照了开发的统一规则来进行命名的。如图所示：

2.5.2 更多命名英文词汇

当英文不好的时候，推荐大家记常用组件英文名，以及常用状态名、级别名、内部名、尺寸名和位置名，那这些英文也几乎涵盖了工作中80%的英文词汇，收藏记忆哦~

文章来源：站酷   作者：飞鱼十七

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

近两年，vivo 浏览器一直选择的是留白分割的设计方式，但核心竞品已经逐渐都采用了线性分割，甚至卡片分割的设计，是要坚守留白还是追随“趋势”，面对内外部声音的追问，我们开始了关于分割方式的详细研究与探索。

图1 资讯新闻的分割方式

研究不局限于资讯新闻信息流列表，而是回归到分割方式的本源，希望能一次性给大家一个明确的分割方式设计指南。

通过一系列的桌面研究、实践对比和趋势总结，我们可以将结论简要概括如下：

1. 优先使用留白分割。
2. 当留白分割不能起到明显的分割作用时，建议采用线性分割。
3. 当线性分隔不能起到明显的分割作用时，建议采用卡片分割。

图2 三种分割方式示意

也就是说从选择的优先级而言：留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文（小结图见文末），希望可以帮助你扫清所有关于分割方式的困惑。

留白分割

1. 定义

所谓留白分割，指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息进行分组。

图3 亲密性原则体现的留白分割

如上图所示，当纵向间距增加 1.5 倍后，信息被分为上下 2 组，当横向间距也增加 1.5 倍后，信息被分为上下左右四组，这就是留白分割。

值得一提的是，同类单一元素（图片、文字、图标等）之间默认采用的都是留白分割。比如相册中单张照片之间，文章中每个文字之间，间距留白是区隔单一信息元素的默认选择。

图4 相片和文字之间的留白分割

2. 使用原则

单个元素之间默认使用留白分割，随着元素的增多，多个元素按照特定的组合形成条目，条目与条目之间，或者条目组与条目组之间进行区隔时，就涉及到今天的主题：留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。

图5 iOS和Android系统的分割方式差异

在 iOS 中，线性分割是条目间默认的分割方式（参见 iPhone 通讯录和设置），当多个条目成组后，为了区分不同组别，则会采用更高层级的卡片分割方式。

在 Android 系统，留白分割是条目间默认的分割方式，线性分割用于划分信息组块，而不仅仅是区隔上下文内容。（参见 Pixel 5 的通讯录和设置）

从 2014 年 Material Design 发布后“卡片式设计”的风靡，再到 2019 年前后“去线化设计”盛行，结合设计趋势，再对比上图中 iOS 和 Android 的分割效果，建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸（毕竟即使是卡片设计的创始团队 Google，在设计 Android OS 时也并没有滥用卡片）。

3. 留白分割的分类及适用场景

留白分割的分类，指的是留白间距大小的设计规范，信息之间有多少种间距，每种间距适用于什么情境。

图6 留白分割的分类

日常设计中，视觉设计师经常会将页面网格化，然后以最小网格为基准，设计不同倍数的间距大小，以此来增强页面的秩序感。

理论上讲，只要分隔的间距够大，都可以根据接近性原则形成信息分组。但信息层次越多，需要的间距种类就越多，间距种类一多，信息层次就越不清晰（只能单纯根据间距大小判断信息层次，就好像只用邻近色进行色彩区分一样，不对比就不容易发现差异，不够直白）。而且每增加一个视觉层次，要求其间距至少要是上一层次间距的 2 倍，接近法则才能生效产生明显的分组效果。所以当条目信息层次较少（≤2）时，留白分割是比较合适的，当信息层次较多（≥3）时，留白分割既会浪费空间，也难以达到一目了然的分割效果。

线性分割

1. 定义

线性分割，顾名思义，就是指用线来分割不同的信息内容。在 Material Design 中，对分割线(Dividers)有明确的定义和规范。（iOS 中没有相关定义，根据上图 4 的视觉效果，我更偏向 Android 的分割方式，所以更倾向于采纳 Android 的设计规范建议和效果）

分割线是一条细长、轻量的线，用于对列表和页面布局中的内容进行分组。从视觉效果上看，分割线可以将页面内容分割成层次更清晰的组块。

此外，MD 还定义了其 UI 细节，规定分割线的粗细是 1dp，颜色根据日夜间模式，可分别使用黑色或白色，不透明度为 12%，以确保 Android 平台所有分割线的显示效果一致。（国内的实际情况是：大部分 App 的分割线是 1px 粗细，相比 MD 的 1dp，视觉效果更符合下方的微妙原则）

2. 使用原则

分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰，影响页面信息传达，所以 Android 系统明确规定了分割线的使用原则：

1. 微妙的：分割线在布局中应该很容易被注意到，但又不凸显。
2. 次要的：只有当留白不能起到分割作用时才采用分割线。
3. 少用的：谨慎使用分隔线，用它来创建分组而不是分割条目。

图7 Android系统中分割线的使用原则

3. 分类及适用场景

分割线可以分为三种类型：

1. 通栏分割线（Full-bleed dividers）：用于分隔彼此完全独立的内容。
2. 内嵌分割线（Inset dividers）：用于分割有锚点（头像或图标）的相关内容。
3. 中间分割线（Middle dividers）：用于分割无锚点（头像或图标）的相关内容。

图8 三种分割线示意

多数时候（信息层级≤2），采用分割线进行分割的信息，采用留白也是可以分割的，只不过需要留白间距足够大，比如我们把上述分割线的方式换成留白，因为间距够大，视觉效果也很清晰（没有多余线性元素的干扰）。

图9 用大留白替换分割线示意

但是如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的分割效果会更清晰，如下图所示：

图10 追求纵向信息屏效时线性分割效果更好

当信息层级≥3之后，使用线性分割就要谨慎一些，可以具体看一下是否满足下方卡分割的使用条件。

卡片分割

1. 定义

卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧，除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片之上。

图11 卡片可以包含的元素示意

2. 使用原则

使用卡片时应注意以下三个使用原则：

图12 卡片可以包含的元素示意

1. 包含的：卡片是一个可识别的、单独的、包含内容的单元。
2. 独立的：一张卡片可以独立存在，而不依赖于上下文环境。
3. 不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。

使用卡片需要满足以上三个原则，但并不是满足以上原则就可以使用卡片，具体卡片分类和适用情境请参考下文。

3. 分类及适用情境

卡片根据左右是否有边距，可以简单分为通栏卡片和非通栏卡片。

图13 卡片样式分类

从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。

不管是哪种卡片类型，它们都是独立的、包含单个主题的内容(操作)的容器，它内容的独立性与我们前面提到的通栏分割线分割的内容相似。

那什么时候使用通栏分割线，什么时候使用卡片分割呢？这里有三个参考建议给你：

1. 当这个主题内部的内容已经有分割线时，建议采用卡片分割，以让主题信息层次更清晰。
2. 当单个主题内部的内容类型较多，上下所占空间较大（比如≥1/2屏），建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。
3. 当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。

图14 使用卡片的三个参考条件

设计实践

回到开篇关于 vivo 浏览器信息流分割方式的选择，因为项目成员偏好不同，大家各执一词都无法说服对方，所以设计师设计了三种不同的分割方案（仅分割方式这一个变量），分别进行了定性研究、定量研究和灰度数据调研。

图15 设计师设计的三种分割效果

在定性研究中，我们在线下对十余位用户进行了访谈，左右滑动三张设计稿，让用户对比观察三张图的差异，（不管是线性分割还是卡片分割，设计师都遵循了以内容为主导，弱化分割方式以凸显内容这一大原则，期望用户能始终聚焦在内容本身，不受分割方式的干扰），结果所有用户都说觉得三张图是一样的，表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后，三种分割方式的选择也比较分散，并没有显著的差异（样本较少，不具有说服力）。

在定量的问卷研究中，我们提取了用户对三种分割方式描述的看法，基本也符合大家对分割形式的预期。

图16 筛选的用户典型反馈

在最终的灰度测试中，留白分割以相对较好的数据结果胜出（结果数据保密，暂不方便告知）。所以在最终大家看到的全量版本中，vivo 浏览器默认采用的依然是留白分割的设计形式。

小结

根据分割方式自身的特点（视觉干扰性、分割强弱感、滑动沉浸感）、上下文条目之间的关系，单个条目的内容复杂度，屏幕空间的利用率，我们可以对分割方式做一个简单的小结，如下：

图17 分割方式特点小结

简而言之：

1. 当信息条目复杂度较低时，优先采用留白分割，视觉清爽无干扰。
2. 当信息条目复杂度增加，只利用留白分割效果不明显时，建议引入线性分割，让信息层次更清晰且屏效高。
3. 当信息条目复杂度进一步提升，（比如已经有了线性分割，或者有更多操作），需要进一步强化信息条目本身的边界感，建议引入卡片，以强化条目信息的视觉层次和可操作性。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

近两年，vivo 浏览器一直选择的是留白分割的设计方式，但核心竞品已经逐渐都采用了线性分割，甚至卡片分割的设计，是要坚守留白还是追随“趋势”，面对内外部声音的追问，我们开始了关于分割方式的详细研究与探索。

图1 资讯新闻的分割方式

研究不局限于资讯新闻信息流列表，而是回归到分割方式的本源，希望能一次性给大家一个明确的分割方式设计指南。

通过一系列的桌面研究、实践对比和趋势总结，我们可以将结论简要概括如下：

1. 优先使用留白分割。
2. 当留白分割不能起到明显的分割作用时，建议采用线性分割。
3. 当线性分隔不能起到明显的分割作用时，建议采用卡片分割。

图2 三种分割方式示意

也就是说从选择的优先级而言：留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文（小结图见文末），希望可以帮助你扫清所有关于分割方式的困惑。

留白分割

1. 定义

所谓留白分割，指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息进行分组。

图3 亲密性原则体现的留白分割

如上图所示，当纵向间距增加 1.5 倍后，信息被分为上下 2 组，当横向间距也增加 1.5 倍后，信息被分为上下左右四组，这就是留白分割。

值得一提的是，同类单一元素（图片、文字、图标等）之间默认采用的都是留白分割。比如相册中单张照片之间，文章中每个文字之间，间距留白是区隔单一信息元素的默认选择。

图4 相片和文字之间的留白分割

2. 使用原则

单个元素之间默认使用留白分割，随着元素的增多，多个元素按照特定的组合形成条目，条目与条目之间，或者条目组与条目组之间进行区隔时，就涉及到今天的主题：留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。

图5 iOS和Android系统的分割方式差异

在 iOS 中，线性分割是条目间默认的分割方式（参见 iPhone 通讯录和设置），当多个条目成组后，为了区分不同组别，则会采用更高层级的卡片分割方式。

在 Android 系统，留白分割是条目间默认的分割方式，线性分割用于划分信息组块，而不仅仅是区隔上下文内容。（参见 Pixel 5 的通讯录和设置）

从 2014 年 Material Design 发布后“卡片式设计”的风靡，再到 2019 年前后“去线化设计”盛行，结合设计趋势，再对比上图中 iOS 和 Android 的分割效果，建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸（毕竟即使是卡片设计的创始团队 Google，在设计 Android OS 时也并没有滥用卡片）。

3. 留白分割的分类及适用场景

留白分割的分类，指的是留白间距大小的设计规范，信息之间有多少种间距，每种间距适用于什么情境。

图6 留白分割的分类

日常设计中，视觉设计师经常会将页面网格化，然后以最小网格为基准，设计不同倍数的间距大小，以此来增强页面的秩序感。

理论上讲，只要分隔的间距够大，都可以根据接近性原则形成信息分组。但信息层次越多，需要的间距种类就越多，间距种类一多，信息层次就越不清晰（只能单纯根据间距大小判断信息层次，就好像只用邻近色进行色彩区分一样，不对比就不容易发现差异，不够直白）。而且每增加一个视觉层次，要求其间距至少要是上一层次间距的 2 倍，接近法则才能生效产生明显的分组效果。所以当条目信息层次较少（≤2）时，留白分割是比较合适的，当信息层次较多（≥3）时，留白分割既会浪费空间，也难以达到一目了然的分割效果。

线性分割

1. 定义

线性分割，顾名思义，就是指用线来分割不同的信息内容。在 Material Design 中，对分割线(Dividers)有明确的定义和规范。（iOS 中没有相关定义，根据上图 4 的视觉效果，我更偏向 Android 的分割方式，所以更倾向于采纳 Android 的设计规范建议和效果）

分割线是一条细长、轻量的线，用于对列表和页面布局中的内容进行分组。从视觉效果上看，分割线可以将页面内容分割成层次更清晰的组块。

此外，MD 还定义了其 UI 细节，规定分割线的粗细是 1dp，颜色根据日夜间模式，可分别使用黑色或白色，不透明度为 12%，以确保 Android 平台所有分割线的显示效果一致。（国内的实际情况是：大部分 App 的分割线是 1px 粗细，相比 MD 的 1dp，视觉效果更符合下方的微妙原则）

2. 使用原则

分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰，影响页面信息传达，所以 Android 系统明确规定了分割线的使用原则：

1. 微妙的：分割线在布局中应该很容易被注意到，但又不凸显。
2. 次要的：只有当留白不能起到分割作用时才采用分割线。
3. 少用的：谨慎使用分隔线，用它来创建分组而不是分割条目。

图7 Android系统中分割线的使用原则

3. 分类及适用场景

分割线可以分为三种类型：

1. 通栏分割线（Full-bleed dividers）：用于分隔彼此完全独立的内容。
2. 内嵌分割线（Inset dividers）：用于分割有锚点（头像或图标）的相关内容。
3. 中间分割线（Middle dividers）：用于分割无锚点（头像或图标）的相关内容。

图8 三种分割线示意

多数时候（信息层级≤2），采用分割线进行分割的信息，采用留白也是可以分割的，只不过需要留白间距足够大，比如我们把上述分割线的方式换成留白，因为间距够大，视觉效果也很清晰（没有多余线性元素的干扰）。

图9 用大留白替换分割线示意

但是如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的分割效果会更清晰，如下图所示：

图10 追求纵向信息屏效时线性分割效果更好

当信息层级≥3之后，使用线性分割就要谨慎一些，可以具体看一下是否满足下方卡分割的使用条件。

卡片分割

1. 定义

卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧，除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片之上。

图11 卡片可以包含的元素示意

2. 使用原则

使用卡片时应注意以下三个使用原则：

图12 卡片可以包含的元素示意

1. 包含的：卡片是一个可识别的、单独的、包含内容的单元。
2. 独立的：一张卡片可以独立存在，而不依赖于上下文环境。
3. 不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。

使用卡片需要满足以上三个原则，但并不是满足以上原则就可以使用卡片，具体卡片分类和适用情境请参考下文。

3. 分类及适用情境

卡片根据左右是否有边距，可以简单分为通栏卡片和非通栏卡片。

图13 卡片样式分类

从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。

不管是哪种卡片类型，它们都是独立的、包含单个主题的内容(操作)的容器，它内容的独立性与我们前面提到的通栏分割线分割的内容相似。

那什么时候使用通栏分割线，什么时候使用卡片分割呢？这里有三个参考建议给你：

1. 当这个主题内部的内容已经有分割线时，建议采用卡片分割，以让主题信息层次更清晰。
2. 当单个主题内部的内容类型较多，上下所占空间较大（比如≥1/2屏），建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。
3. 当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。

图14 使用卡片的三个参考条件

设计实践

回到开篇关于 vivo 浏览器信息流分割方式的选择，因为项目成员偏好不同，大家各执一词都无法说服对方，所以设计师设计了三种不同的分割方案（仅分割方式这一个变量），分别进行了定性研究、定量研究和灰度数据调研。

图15 设计师设计的三种分割效果

在定性研究中，我们在线下对十余位用户进行了访谈，左右滑动三张设计稿，让用户对比观察三张图的差异，（不管是线性分割还是卡片分割，设计师都遵循了以内容为主导，弱化分割方式以凸显内容这一大原则，期望用户能始终聚焦在内容本身，不受分割方式的干扰），结果所有用户都说觉得三张图是一样的，表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后，三种分割方式的选择也比较分散，并没有显著的差异（样本较少，不具有说服力）。

在定量的问卷研究中，我们提取了用户对三种分割方式描述的看法，基本也符合大家对分割形式的预期。

图16 筛选的用户典型反馈

在最终的灰度测试中，留白分割以相对较好的数据结果胜出（结果数据保密，暂不方便告知）。所以在最终大家看到的全量版本中，vivo 浏览器默认采用的依然是留白分割的设计形式。

小结

根据分割方式自身的特点（视觉干扰性、分割强弱感、滑动沉浸感）、上下文条目之间的关系，单个条目的内容复杂度，屏幕空间的利用率，我们可以对分割方式做一个简单的小结，如下：

图17 分割方式特点小结

简而言之：

1. 当信息条目复杂度较低时，优先采用留白分割，视觉清爽无干扰。
2. 当信息条目复杂度增加，只利用留白分割效果不明显时，建议引入线性分割，让信息层次更清晰且屏效高。
3. 当信息条目复杂度进一步提升，（比如已经有了线性分割，或者有更多操作），需要进一步强化信息条目本身的边界感，建议引入卡片，以强化条目信息的视觉层次和可操作性。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

近两年，vivo 浏览器一直选择的是留白分割的设计方式，但核心竞品已经逐渐都采用了线性分割，甚至卡片分割的设计，是要坚守留白还是追随“趋势”，面对内外部声音的追问，我们开始了关于分割方式的详细研究与探索。

图1 资讯新闻的分割方式

研究不局限于资讯新闻信息流列表，而是回归到分割方式的本源，希望能一次性给大家一个明确的分割方式设计指南。

通过一系列的桌面研究、实践对比和趋势总结，我们可以将结论简要概括如下：

1. 优先使用留白分割。
2. 当留白分割不能起到明显的分割作用时，建议采用线性分割。
3. 当线性分隔不能起到明显的分割作用时，建议采用卡片分割。

图2 三种分割方式示意

也就是说从选择的优先级而言：留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文（小结图见文末），希望可以帮助你扫清所有关于分割方式的困惑。

留白分割

1. 定义

所谓留白分割，指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息进行分组。

图3 亲密性原则体现的留白分割

如上图所示，当纵向间距增加 1.5 倍后，信息被分为上下 2 组，当横向间距也增加 1.5 倍后，信息被分为上下左右四组，这就是留白分割。

值得一提的是，同类单一元素（图片、文字、图标等）之间默认采用的都是留白分割。比如相册中单张照片之间，文章中每个文字之间，间距留白是区隔单一信息元素的默认选择。

图4 相片和文字之间的留白分割

2. 使用原则

单个元素之间默认使用留白分割，随着元素的增多，多个元素按照特定的组合形成条目，条目与条目之间，或者条目组与条目组之间进行区隔时，就涉及到今天的主题：留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。

图5 iOS和Android系统的分割方式差异

在 iOS 中，线性分割是条目间默认的分割方式（参见 iPhone 通讯录和设置），当多个条目成组后，为了区分不同组别，则会采用更高层级的卡片分割方式。

在 Android 系统，留白分割是条目间默认的分割方式，线性分割用于划分信息组块，而不仅仅是区隔上下文内容。（参见 Pixel 5 的通讯录和设置）

从 2014 年 Material Design 发布后“卡片式设计”的风靡，再到 2019 年前后“去线化设计”盛行，结合设计趋势，再对比上图中 iOS 和 Android 的分割效果，建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸（毕竟即使是卡片设计的创始团队 Google，在设计 Android OS 时也并没有滥用卡片）。

3. 留白分割的分类及适用场景

留白分割的分类，指的是留白间距大小的设计规范，信息之间有多少种间距，每种间距适用于什么情境。

图6 留白分割的分类

日常设计中，视觉设计师经常会将页面网格化，然后以最小网格为基准，设计不同倍数的间距大小，以此来增强页面的秩序感。

理论上讲，只要分隔的间距够大，都可以根据接近性原则形成信息分组。但信息层次越多，需要的间距种类就越多，间距种类一多，信息层次就越不清晰（只能单纯根据间距大小判断信息层次，就好像只用邻近色进行色彩区分一样，不对比就不容易发现差异，不够直白）。而且每增加一个视觉层次，要求其间距至少要是上一层次间距的 2 倍，接近法则才能生效产生明显的分组效果。所以当条目信息层次较少（≤2）时，留白分割是比较合适的，当信息层次较多（≥3）时，留白分割既会浪费空间，也难以达到一目了然的分割效果。

线性分割

1. 定义

线性分割，顾名思义，就是指用线来分割不同的信息内容。在 Material Design 中，对分割线(Dividers)有明确的定义和规范。（iOS 中没有相关定义，根据上图 4 的视觉效果，我更偏向 Android 的分割方式，所以更倾向于采纳 Android 的设计规范建议和效果）

分割线是一条细长、轻量的线，用于对列表和页面布局中的内容进行分组。从视觉效果上看，分割线可以将页面内容分割成层次更清晰的组块。

此外，MD 还定义了其 UI 细节，规定分割线的粗细是 1dp，颜色根据日夜间模式，可分别使用黑色或白色，不透明度为 12%，以确保 Android 平台所有分割线的显示效果一致。（国内的实际情况是：大部分 App 的分割线是 1px 粗细，相比 MD 的 1dp，视觉效果更符合下方的微妙原则）

2. 使用原则

分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰，影响页面信息传达，所以 Android 系统明确规定了分割线的使用原则：

1. 微妙的：分割线在布局中应该很容易被注意到，但又不凸显。
2. 次要的：只有当留白不能起到分割作用时才采用分割线。
3. 少用的：谨慎使用分隔线，用它来创建分组而不是分割条目。

图7 Android系统中分割线的使用原则

3. 分类及适用场景

分割线可以分为三种类型：

1. 通栏分割线（Full-bleed dividers）：用于分隔彼此完全独立的内容。
2. 内嵌分割线（Inset dividers）：用于分割有锚点（头像或图标）的相关内容。
3. 中间分割线（Middle dividers）：用于分割无锚点（头像或图标）的相关内容。

图8 三种分割线示意

多数时候（信息层级≤2），采用分割线进行分割的信息，采用留白也是可以分割的，只不过需要留白间距足够大，比如我们把上述分割线的方式换成留白，因为间距够大，视觉效果也很清晰（没有多余线性元素的干扰）。

图9 用大留白替换分割线示意

但是如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的分割效果会更清晰，如下图所示：

图10 追求纵向信息屏效时线性分割效果更好

当信息层级≥3之后，使用线性分割就要谨慎一些，可以具体看一下是否满足下方卡分割的使用条件。

卡片分割

1. 定义

卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧，除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片之上。

图11 卡片可以包含的元素示意

2. 使用原则

使用卡片时应注意以下三个使用原则：

图12 卡片可以包含的元素示意

1. 包含的：卡片是一个可识别的、单独的、包含内容的单元。
2. 独立的：一张卡片可以独立存在，而不依赖于上下文环境。
3. 不可分割的：一张卡片不能与另一张合并，也不能拆分成多张卡片。

使用卡片需要满足以上三个原则，但并不是满足以上原则就可以使用卡片，具体卡片分类和适用情境请参考下文。

3. 分类及适用情境

卡片根据左右是否有边距，可以简单分为通栏卡片和非通栏卡片。

图13 卡片样式分类

从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。

不管是哪种卡片类型，它们都是独立的、包含单个主题的内容(操作)的容器，它内容的独立性与我们前面提到的通栏分割线分割的内容相似。

那什么时候使用通栏分割线，什么时候使用卡片分割呢？这里有三个参考建议给你：

1. 当这个主题内部的内容已经有分割线时，建议采用卡片分割，以让主题信息层次更清晰。
2. 当单个主题内部的内容类型较多，上下所占空间较大（比如≥1/2屏），建议采用卡片分割，以更好的圈定该主题的内容范围，给用户明确的内容边界感。
3. 当需要扩展页面的横向空间时，暗示页面可以横向滑动时，需要采用非通栏卡片，利用横向内容连续性原则，帮助用户建立可以横向滑动的意识。

图14 使用卡片的三个参考条件

设计实践

回到开篇关于 vivo 浏览器信息流分割方式的选择，因为项目成员偏好不同，大家各执一词都无法说服对方，所以设计师设计了三种不同的分割方案（仅分割方式这一个变量），分别进行了定性研究、定量研究和灰度数据调研。

图15 设计师设计的三种分割效果

在定性研究中，我们在线下对十余位用户进行了访谈，左右滑动三张设计稿，让用户对比观察三张图的差异，（不管是线性分割还是卡片分割，设计师都遵循了以内容为主导，弱化分割方式以凸显内容这一大原则，期望用户能始终聚焦在内容本身，不受分割方式的干扰），结果所有用户都说觉得三张图是一样的，表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后，三种分割方式的选择也比较分散，并没有显著的差异（样本较少，不具有说服力）。

在定量的问卷研究中，我们提取了用户对三种分割方式描述的看法，基本也符合大家对分割形式的预期。

图16 筛选的用户典型反馈

在最终的灰度测试中，留白分割以相对较好的数据结果胜出（结果数据保密，暂不方便告知）。所以在最终大家看到的全量版本中，vivo 浏览器默认采用的依然是留白分割的设计形式。

小结

根据分割方式自身的特点（视觉干扰性、分割强弱感、滑动沉浸感）、上下文条目之间的关系，单个条目的内容复杂度，屏幕空间的利用率，我们可以对分割方式做一个简单的小结，如下：

图17 分割方式特点小结

简而言之：

1. 当信息条目复杂度较低时，优先采用留白分割，视觉清爽无干扰。
2. 当信息条目复杂度增加，只利用留白分割效果不明显时，建议引入线性分割，让信息层次更清晰且屏效高。
3. 当信息条目复杂度进一步提升，（比如已经有了线性分割，或者有更多操作），需要进一步强化信息条目本身的边界感，建议引入卡片，以强化条目信息的视觉层次和可操作性。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

“复杂是世界的一部分，但它不应该令人困惑，好的设计帮我们驯服复杂，不是让事物变简单（如果复杂是符合需求的），而是去管理复杂”--唐纳德·A·诺曼

与复杂共处，这是一个有趣的话题。在这个奉行“少即是多”的时代，设计师对于复杂噤若寒蝉，认为优秀的设计应该简洁明了，若无必要，勿增实体，而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思，甚至试图通过削弱功能的方式来降低产品的复杂度，得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗？从心理学的角度来看，复杂的事物往往功能强大，而功能强大意味着更好的服务与更高的价值，用户也更愿意为之付费。当我们购买商品时，我们会仔细斟酌，拿着产品的功能列表反复比对，这个时候我们忘记了产品复杂与否，更多考虑的是功能是否满足自身需求。

对于大部分B端产品而言，复杂或许难以避免，复杂是出于实实在在的业务的需要，而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂，是因为产品需要完成复杂的工作任务，界面内承载的信息内容较多，在视觉上会带给用户压力，直观感受上觉得产品很复杂。但是这些信息又都是必需的，如果缺少这些必要的信息，会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱，密密麻麻的按钮如此复杂，但是每一个按钮都有着相应的功能，不可或缺。既然复杂难以避免，那么作为设计师我们不应该被动接受或盲目拒绝复杂，我们应该学会如何与复杂共处，去尝试驯服复杂、管理复杂。

理性看待复杂

相信很多设计师和我一样，经历过现代主义浪潮的洗礼，对于简约的设计有着或多或少的偏好。因为这种偏好，在自己进行设计时也希望能够选用这种风格，在设计时刻意的去追求界面简约，却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看，复杂的事物更容易理解，简单的事物反倒令人困惑，一味的追求简单反而会让事物变得复杂。

B端产品的目标是降本提效，追求简约的设计思想在B端产品的设计中并没有那么适用，为了提升用户的操作效率，我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度，但是相较于产品视觉界面会因此变得复杂，产品的易用性和操作效率对于B端产品而言会更为重要。

与复杂共处的前提是能够理性地看待复杂，复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态，它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定，就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单，因为两者的功能需求不是一个层面的，所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。

分清复杂与困惑

我们之所以对复杂怀有畏惧，其实更多的是畏惧令人困惑的复杂，复杂与困惑有着本质的区别，理解他们之间的区别很有必要，复杂描述的是事物的状态，而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑，理解这些规则和逻辑，能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑，用户难以理解产品的运转机制，需要花费很大力气才能完成有效操作，容易让用户产生挫败感。产品可以是复杂的，但是不应该让用户困惑。

在很多复杂的传统线下业务数字化转型的过程中，为了让产品易于使用，设计师需要深入到一线，去了解真实用户在线下业务场景中是如何处理日常任务的，在流程线上化过程中也需要遵循这样的业务流程，这样能够让用户更快上手，而如果我们在设计过程中不去参考用户在线下的操作场景，按照自己的想法去意测用户的行为，这样设计出的产品背离了用户的心理模型，缺乏内在逻辑，会让用户感到混乱困惑，陷入深深的麻烦。

基于产品本身功能需要，我们可能无法很主观的去降低产品的复杂度，这就需要我们在进行产品设计时花费更多的心思，通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰，不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计，用户在编辑器内完成一系列针对表单的编辑、配置操作，然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列，这种方式结构简单，但是扩展性较差，过多的栏目也容易让用户陷入困惑，不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构，在步骤导航上给出完成表单编辑配置的主要步骤，在大的步骤下用侧栏导航承载小的编辑项，结构清晰，且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致，视觉观感上甚至方案B更为复杂，但是方案B在这里可能是更合适的方案，因为方案B在配置流程的指引上更为清晰，也更贴近用户心理模型，即使没有使用过在线表单的用户也能理解产品流程，因而用户能够更容易的完成表单配置并发布表单。

功能决定产品的复杂程度

我们在使用产品时，都会有一个大概的心理预期，会认为某一类型的产品会较为复杂，某一类型的产品会相对简单。为什么我们会有这样的认知呢？是因为我们知道这些产品大概有哪些功能，而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定，而不是依照设计师的自我喜好，像如淘宝、京东这类的购物网站、拥有着很多的栏目，所以淘宝、京东的界面相对来说较为复杂；而像百度这样的搜索引擎功能相对来说比较简单，所以界面设计相对简单干净。

我们可以容许一个功能强大的产品设计得相对复杂，但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计，即不过度设计，也不执着于追求简约，而是基于需求恰到好处的进行设计。

复杂产品也能有好的体验

复杂的产品会有好的用户体验吗？答案是肯定的，用户体验的好坏与产品是复杂还是简单并没有直接的关系，很多时候复杂的产品也能带给我们良好的用户体验，在互联网产品中，我们可以看到很多复杂的产品，这些复杂的软件产品，一点点的改变着我们的生活与工作方式，让我们生活与工作变得便捷与高效。

首先可以看看我们的国民级电商应用淘宝，乍看淘宝的界面，可能会觉得十分复杂，甚至会给人一种眼花缭乱的感觉，但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际，做社区团购的淘鲜达，专做拍卖的阿里拍卖等数十个板块，业务繁多，功能复杂，但这几乎很难改变，因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看，虽然淘宝的业务和功能繁多，却有着清晰的布局、信息对齐、内容组织，产品尽管复杂，但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿，贴近用户的心理模型，用户容易了解产品功能、容易与之交互，整体上有着良好的用户体验。

又如我一直在使用的一款笔记软件Notion，Notion相对于印象笔记、有道云笔记而言更为复杂，需要花费一定的时间成本学习才能够从容上手使用，但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前，甚至都不会想到会出现在一款笔记产品里面，如甘特图，多维表格等，这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式，让笔记能够自由拖拽，拥有了极强的自由度，用户可以很自由的用各种各样的形式来记笔记，要是你肯再花一些心思，你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识，打造个人专属知识库。将我们习以为常的线性笔记思维，转变成纵向思维，甚至是网格状思维。Notion无疑是复杂的，但是这样做是为了给用户提供的强大功能和极高的自由度，这些功能恰恰也切合了用户的需求，创造了一种全新的笔记体验，带给用户愉悦的使用感受。

过度简化的潜在风险

简单是产品追求的最终形态吗？其实未必，很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计，不可避免的就需要隐藏一些信息或者拉长操作路径，这是一个权衡的过程，我们在做设计时也会经常面临这样的抉择，是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要，人们对于美的事物往往更有耐心，也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言，准确的传达信息，帮助用户进行判断，频繁使用的功能设计得更高效便捷，这些点能带给用户更实际价值，也是我们在设计产品时应该优先考虑的点。

特别是在一些专业性的软件中，如果我们为了追求简约而弱化或者省略掉一些关键信息，还有可能会导致用户错误操作的出现，造成严重的后果。试想一下当你在使用软件编写一个计算字段时，软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例，导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用，为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。

如何与复杂共处

前面我们了解了关于复杂的定义，认识了复杂与困惑之间的区别，也明确了在B端产品中复杂或许难以避免，复杂是出于实实在在的业务的需要而非某位设计师的错误喜好，既然复杂无法避免，我们就应该学会与复杂共处，管理与驯服复杂。那么如何与复杂共处呢，有一些策略或许可以给予我们一些思路。

1.为产品注入规则

复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑，而困惑缺少这样的规则与逻辑，让人无法预测与揣摩，对应到软件产品的设计，一款成功的优秀的软件产品，应该是易学易用、能够满足用户预期，用户能够直观的理解产品的流程与主要功能，并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢？

这里可以看看我们团队正在使用的研发管理工具TAPD，TAPD是一款敏捷研发协作工具，凝聚了腾讯研发方法及敏捷实践精髓，其中敏捷开发的方法就是TAPD的内在规则与逻辑，有过敏捷开发经验，理解敏捷开发流程的的开发人员能够快速的上手使用TAPD，对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想，进而理解产品的功能与流程，因此虽然TAPD功能与页面结构相对复杂，但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径，实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处，将原本零散的功能点通过特定逻辑链接成操作流程，帮助用户更好地理解与使用产品。

相同的在我们公司自己的一个项目中我们也运用了同样的方法，在我们公司之前研发的一款crm产品中，为了给用户提供最佳的销售实践，帮助用户更快上手使用我们的产品，我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询，并依照硅谷蓝图的销售转化路径来构建我们的产品体系，确定产品功能，梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户，让用户能够更好地使用我们的产品，实现产品的最高价值，为中小企业销售团队赋能。

通过前面两个案例其实我们可以感受到，当一款复杂的产品有了内在的规则与逻辑以后，用户理解和使用我们的产品会变得更顺畅，用户不会迷失在茫茫的功能之中，通过理解规则与逻辑，用户能够对自己操作结果有一个大概的预期，而不是处于困惑状态，作为设计师的我们也可以将这种规则逻辑作为我们设计的引导，让我们的设计更为系统和有条理，让产品不再是一堆功能的堆叠，各自为战。

2. 贴近用户心理模型设计

复杂是用户的一种心理感受，用户觉得产品复杂除了产品本身结构信息复杂之外，也是因为产品在设计上没有贴合用户的心理预期，用户很难理解产品的流程与交互，所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念，实现模型、表现模型和心理模型，三个概念的释义如下：

实现模型：产品是怎样工作的
心里模型：用户认为产品是怎样工作的
表现模型：通过设计来让用户认为产品是怎样工作的

表现模型越接近心理模型，用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型，用户越难理解产品，产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制，很多B端产品在设计时更多的偏向于实现模型，用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致，使用过程中会遇到很多的阻碍，影响整体的使用体验。对于一款复杂的产品而言，我们需要让我们产品的表现模型更接近于用户的心理模型，这样用户能够更容易了解产品的功能，并与之交互。

大家使用电脑时有没有遇到过类似下图这样的电脑报错信息，里面是一堆的专业名词，看得人一头雾水。这时候我们能做的只有默默的打开百度，去了解弹窗里面讲的内容究竟是什么，了解后才明白原来这样，然后按照百度上操作步骤一通操作，侥幸解决了问题。但是当下次我们遇到相同问题时，可能还是不知道如何解决，无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰，用户不是专业的开发者，他们不了解也不需要了解产品背后的实现逻辑，这对用户而言是没有价值的，给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难，变相的是在人为的增加产品的复杂度，与复杂共处，我们需要学会贴近用户心理进行设计。

3.统一交互模式

复杂的产品往往功能、页面繁多，如果页面内的视觉元素以及交互各自为战，那么放大到整个产品就是一个灾难，不仅是产品给用户感官上不统一、整体性差，过多的交互模式也会增加用户的学习与记忆成本，用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑，对用户使用产品造成困扰。针对这个问题，现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互，一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题，通过模块化解决方案，也能降低冗余的生产成本，实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题，但实际上就算一个产品有了一个自己的组件库，依旧还会遇到体验上统一性问题，这是为什么呢？

在原子化设计理论中，粒子是构成页面的最小颗粒，粒子构成简单组件，简单组件到复杂组件，再到区块、页面。虽然用组件能去构建页面，但是还会遇到页面结构、交互不一致的问题，设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题，在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。

这里我们拿B端产品中常见的列表页来举例，纵观所有后台列表页面，抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区，在不同的业务场景下，对筛选器的需求也各不相同，简单的可能只需要使用标签选择就能够完成筛选，复杂的可能添加很多的筛选项甚至选项之间还有且或关系，我们需要根据实际的业务场景设计适合的筛选器，但是需要注意的是一个产品中用到的筛选器形式不应太多，我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。

B端后台产品中比较常见的还有表单，我们可以归纳出产品内可能会使用到的表单类型，然后定义出具体的框架结构与交互，在具体的设计过程中在根据实际情况选用不同的表单区块。

1.分组表单

一种常见的信息录入以及信息展示表单，这种形式是我们最长用。

2.分步表单

分布表单适用于信息录入项以及信息展示项过多，在一个页面内已经不能合理清晰的组织传递信息，或者表单内容的录入方式或者展示方式存在较大差异，不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。

3.组合表单

组合表单因其结构能够承载更多的信息，每一个栏目都可以承载一个独立的表单页，有效的管理信息。

4.弹窗表单

很多时候我们也会用弹窗来承载表单，好处是交互衔接流畅，不用跳页。

将产品中类似的区块做成最佳的交互模式范例，能够最大的程度的规范我们产品中的交互，这样才能真正的实现产品体验上的统一，化繁为简，让复杂的产品也能够调理清晰，上手简单容易。在面对复杂的系统级软件时，在统一组件样式的基础上还应该统一产品内的交互模式。

信息归纳突出重心

复杂的产品页面内信息往往都特别繁多，如果不做好信息归纳，用户将很难把握住重点内容，信息获取效率低下，十分影响用户的使用体验，所以信息的强弱的整理十分重要，那么什么样的信息是对用户而言重要的信息呢？

信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”，他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。

如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型，通过调研的来得用户模型是对于我们产品客户的抽象归纳，通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出，哪些内容相对不是那么重要可以弱化处理，通过对于页面内容强弱的划分，用户能够更快的获取到对自己有用的内容，尽管页面仍旧复杂，但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验，帮助用户高效的处理任务。

说在最后

复杂是产品的本来特性，本身不含褒贬，但是如果复杂不加以控制，让其发展为困惑与混乱，这对于一款产品而言绝对不是一件好事情，这样即使产品功能上很优秀，用户也无法长期忍受，一旦市场上出现替代产品，那么忍受已久的用户也将抛弃产品转向体验更好的新产品。

曾经我也是一个极简主义的追捧者，但是经历过越来越多的设计项目，我开始发现某些产品复杂性是必需的，将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂，而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素，让其在视觉界面上变得简洁干净，而是要让产品拥有内在规则、一致且能够被理解。

文章来源：站酷   作者：Yone杨
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务