近两年，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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

信息架构是产品的骨架。具体而言，就是一款产品有几个一级页面，以及支撑起整个产品的一级页面、二级页面各有几种内容样式。所谓一级页面，微信的“发现”页就是一个一级页面；在“发现”页点“朋友圈”，进去的就是一个二级页面。所谓内容样式，Banner 是一种内容样式，九宫格是一种内容样式，设置页面那种列表也是一种内容样式。

 

这样的信息架构，有什么价值？

 

 

01 信息架构的价值：掌控感与健康迭代

 

对用户而言，信息架构的主要价值在于掌控感；对产品而言，信息架构的主要价值在于健康迭代。

 

1. 掌控感

 

如果房间里很乱，到处都堆满了东西，常穿的衣服也找不到了，我们就很容易变得烦躁不安。相反，如果混乱的房间被收拾得很整洁，我们的心情也会随之变得愉悦起来。

 

这中间的原因是什么？

 

个人觉得，从原始社会到 21 世纪，我们人类一直生活在竞争中，所以一直在追求一种对生活的掌控感。这种掌控感，会让我们找到一种存在感和价值感，从而给身处竞争中的我们一种安全感。一个收拾得井然有序的房间，会让我们觉得一切尽在掌握中；一个胡乱塞满东西的房间，则会让我们觉得这个房间处于失控状态，从而引发烦躁不安。

 

一款 App，如果主要的几个一级页面也都塞满了各式各样的内容，那么用户通常也会感到烦躁不安。这是因为用户不能马上理出头绪，不能马上获得那种掌控感。另外，如果大的改版经常让用户体会到这种烦躁不安，用户就会对这款 App 感到不满和失望，甚至失去信心和期待。

 

所以说，信息架构的第一个价值，就是让用户始终有掌控感。

 

2. 健康迭代

 

产品的更新迭代，有时会出现“发福”和“微整形”的情况。这都属于不健康的迭代。

 

所谓发福，就是变得臃肿了，比如一级页面突然增加了很多内容样式。所谓微整形，就是和之前比有点乱套了，比如有的一级页面突然消失了、有的一级页面突然出现了、有些常用的功能突然找不到了，诸如此类。

 

一款产品，如果大的改版总是通过发福、甚至微整形的方式实现，用户就很难获得掌控感。

 

反过来，一个优秀的信息架构，是接近“冻龄”的。也就是说，不管产品怎么更新、怎么加新功能，都能简单如初，都能让用户马上获得掌控感。典型的例子是微信：微信已经加了很多功能，但整体给人的感觉依然是简单的。

 

这样的信息架构，很少发福，也几乎不做微整形，所以能让用户永远有掌控感，从而确保产品能够健康迭代。

 

 

02 怎样实现信息架构的价值

 

什么样的信息架构，能够实现“掌控感”和“健康迭代”？

 

其实参考答案刚才已经出现了，那就是接近冻龄的信息架构。或者更确切地说，是一种“以不变应万变”的信息架构。

 

这里的不变，是指信息架构看起来永远没有明显变化，永远都很简单。万变，是指不断新增的功能，不断变化的功能。

 

如何做到以不变应万变？一级页面和二级页面都很关键，其中最核心的是一级页面。这里也顺便抛一个问题：一级页面，用来干啥？

 

一级页面主要用来干三件事，分别是：提供掌控感、提供常用功能、提供小入口。也就是说，一级页面尤其要把掌控感给到用户，要让用户快速找到常用功能，同时还要为不常用的功能提供一个小入口。需要说明的是，这个理念可能不太适合一些商店类产品，比如淘宝这样的电商产品，所以仅供参考。

 

那如何完成这三件事？主要有以下四个要点。

 

1. 不要超过 4 个一级页面

 

4 个和 5 个，它俩之间存在微妙的区别。比如我们给手机号或银行卡号分段时，更喜欢每段最多分 4 个数字，而不是 5 个，直观对比见下图。

4 个还是 5 个

 

很多 App 的底部导航栏，也是只有 4 个Tab，即 4 个一级页面。受生活经验等因素影响，当我们看到 App 有 4 个一级页面时，内心或潜意识里可能会觉得：哦，4 个，还算简单，基本能记住；而当看到有 5 个一级页面时，可能会感到一丝压力：5 个啊，有点多了。

 

总的来说，我们更偏爱只有 4 个一级页面的产品，因为 4 个仍在简洁的范畴内，5 个就已经开始走向复杂。在《微信背后的产品观》这场分享中，张小龙也提到过：“微信保证只有 4 个底部 Tab。”

 

2. 不要超过 3 种内容样式

 

Keep 6.0 系列的“探索”页面有 5 种内容样式，显得很复杂。微信的 4 个一级页面中，“发现”和“我”页面只有 1 种内容样式，“微信”和“通讯录”页面只有 2 种内容样式（加上顶部的搜索框），显得非常简单，和 Keep 的对比如下图所示。

 

Keep 6.0 系列与微信的内容样式数量

 

像微信这种内容样式数量上的极简，可能很多产品难以做到。那么，我们不妨退而求其次，早期先从 1 种、2 种内容样式开始。后期加功能了，可以考虑第 3 种，谨慎考虑第 4 种，尽量不要增加第 5 种，因为一定会变得复杂。

 

大家可能会说，产品的功能很多，3 种内容样式不够用。

 

针对这种情况，只要逻辑上不存在大的问题（比如把“支付”放到“通讯录”页面），就可以尝试把不同内容合并成一种样式。微信在这方面就做得很好，大家可以参考它的设计。比如下图的“通讯录”页面，联系人上方那些内容，和联系人不是同一类内容，但它们共用一种内容样式——一个简单的图文列表。

 

微信“通讯录”页面：不同内容合并成一种样式

 

3. 不为二成需求，去打扰八成用户

 

产品设计里存在一个比较常见的问题，就是往一级页面塞很多内容或功能，其中有相当一部分是用户日常用不到的，这种设计容易让人觉得臃肿。比如 Keep 6.0 系列的“运动”页面，就用了较大空间来推荐付费计划和运营活动，如下图所示。

 

用较大空间来推荐付费计划和运营活动的 Keep 页面

 

相信有相当一部分用户是不需要这些内容的，所以这其实也是一种打扰。这种打扰会影响到这些用户对这个界面的掌控感。

 

这种现象有两个可能的原因。一是企业担心用户不用这些功能，所以就在一级页面用很多空间来展示它们，Keep 的例子应该属于此类。二是有部分用户提建议，所以企业就加了这些功能。

 

关于第一个原因，个人观点，有些功能本身就属于二成需求，在一级页面占用太多空间不仅改变不了这个现实，还会对用户形成打扰。

 

关于第二个原因，个人看法，用户的建议通常只代表个人立场，而企业至少要代表大部分用户的立场。比如，网上就有人建议微信在朋友圈加一个屏蔽别人的功能，实际上微信有这个功能，只是一直隐藏，没有放出来——因为用的人少，它属于二成需求，放出来的话会对八成用户形成打扰。

 

总的来说，理想情况是接受现实、尊重规律：是八成需求就提供八成空间，是二成需求就提供二成空间。具体参考如下图所示。

 

是八成需求就提供八成空间，是二成需求就提供二成空间

 

4. 尽量不在标题栏使用 Tab 或下拉框，增加维度

 

这其实是张小龙分享过的一个观点，我个人很赞同，就直接引用一下。下面直接看两个例子。Keep 6.0 系列的前三个一级页面，标题栏都使用了 Tab，就显得内容很多，有点复杂，如下图所示（仅展示前两个）。

 

使用了 Tab 的标题栏

 

微信中拥有标题栏的前三个一级页面，其标题栏都没有使用 Tab 或下拉框，就显得简单、内容少，如下图所示（仅展示前两个）。这也是微信保持简单的一个重要原因。

 

没有使用 Tab 的标题栏

 

 

结语

 

一般情况下，产品都需要更新迭代：增加新功能，完善旧功能。

 

用户则是一个矛盾体：一方面对新功能和新事物怀有好奇心；另一方面又希望每次打开常用的产品时，都有一种回到家一样的熟悉感和一种家里井然有序的掌控感。

 

好的做法，就是类似微信那样：尽管加了新功能，但是看起来没有明显变化。也就是说，以“不变”的信息架构，来应对万变的功能。

原文地址：站酷    作者：SnowDesign

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

我们来探讨下交互设计的善意。

善良常常被用来形容人，偶尔被用来形容产品，很少被用来形容交互设计。

就像人们会说，iPhone 有人文关怀，而很少会说，iPhone 的交互设计有人文关怀。在笔者看来，原因之一，是交互设计很难将人文关怀囊括完，而产品本身则基本可以。

类似的道理，本文探讨的善意，始于交互设计，但不局限于交互设计，还包括产品和企业的善意。

一家之言，欢迎交流探讨。

01 为什么选择善意？

一个 3 岁小孩流落街头，无家可归，会让无数人起恻隐之心。我们普通人的微小善意，有时可能是一种本能反应，或者说是一种感性反应。

“他内心是有时邪恶，还是对人们始终良善”，这是李宇春《年轻气盛》里的一句歌词。

恶是否为本能，笔者不知道。科学家的解释是，有些基因中会带有恶。可以肯定的是，善恶皆为人性，共存于人类当中。

感性和理性是会此消彼长的，林黛玉和薛宝钗就是两个极致的例子。同理，人类体内的善恶，也会此消彼长。

一款产品，在做决策时，很大程度上是基于理性。

这种理性决策，很多时候是无意为善，也无意为恶。但遗憾的是，那个非善非恶的中间地带不会一直存在，有些无意为善和无意为恶，最终会成为非善即恶，比如开屏页是否放广告这件小事（下文有详述）。

既然善恶会此消彼长，而且产品的有些理性决策会导致非善即恶，那么不可避免的，有时候，善恶会变成一道二选一的选择题。

接下来，我们就从理性的角度探讨下，为什么选择善意。

1 长期主义

最近几年，互联网从业者有个共识：创业是件九死一生的事儿。因为据数据统计，90% 的创业公司活不过三年。

这是一个值得深思的社会现象，背后的原因究竟是什么？直接原因，往往是资金断裂。深层原因，会有很多，比如产品不够好、方向不够准，等等。

那么，核心原因呢？笔者认为，和创始人的执念有关。

有两类执念可以避免此类悲剧。第一类是做出优秀产品；第二类是长期主义。

做出优秀产品这块，有很多例子，最典型之一是特斯拉。特斯拉曾面临多次危机（资金、产能等），但都挺过来了，这肯定和产品深受车主喜爱有关。

笔者也见过两个普通创业公司的例子。他们都有一颗做出好产品的心，都很重视 UI、交互、用户体验这些基础的东西，而且把 UI 做的比较优秀，交互和用户体验做的还不错。其中一家靠着用户的付费在平稳发展，另一家连产品带团队被大厂收购了。

长期主义这块，典型例子之一是巴菲特。巴菲特信仰并践行价值投资，价值投资依赖长期主义。最近几年，长期主义在国内也被越来越多的提及。

个人的理解，长期主义至少包含两个要点，分别是：积累、多赢。因为，没有积累就不会有成就，没有多赢成就就不会长久。

中国女排，世界冠军。排球界有个说法，叫三年成型，五年成才，八年成器。互联网行业，也大致如此。这是积累。

用户，员工，投资人，三方利益都兼顾好，才是多赢。

俗话说，顾客是上帝，大家都知道对用户好；投资人作为强势一方，利益也往往有保障；员工的利益是否有保障，往往取决于创始人，所以存在很大变数。

回到主题，长期主义和善意，有什么关系？

通常而言，多赢能否实现，关键在于员工的利益能否得到保障。

笔者在网上看过一个有意思的评论，说当下的年轻人，如果收入、成就感、高兴这三点有两点达不到，就会辞职。

所以，员工利益得到保障的标准，可以简单定义为“三中二“，即收入、成就感和愉悦这三点满足两点。

再来分析一下现状：相比员工，公司是强势一方；人们仍受最大程度剥削剩余价值、官僚思想等观念影响；恶性加班等风气存在；僧多粥少的就业行情。

在这样的大环境下，如果公司对员工没有爱和善意，员工的利益是很难得到保障的。

最后，总结一下：公司有善意，员工利益就有保障，就能实现多赢，从而有望实现长期主义。

2 美好生活

前段时间，因为给武汉捐款 5000 万、并且疫情期间蔬菜按成本价销售，一些网友被胖东来这个商超刷屏了。

胖东来来自河南许昌，一个三四线城市，也是笔者的家乡。目前仅在许昌和新乡有店。

在一些关于胖东来文章的评论区，很多网友在喊胖东来去自己的城市开店。

为什么有这么多呼声？简单分享几个例子。

顾客方面，胖东来有 6 类购物车，包含婴儿手推车、儿童购物车和老年人购物车。老年人购物车自带凳子，可供休息，同时还配有放大镜。

员工方面，有高薪、高福利和利润分红等。胖东来比较为业界称道的高福利有：每周二闭店，春节闭店 5 天，工龄满 1 年即有 30 天带薪年假，一天最多工作 7 个小时。

从网上的报道、评论以及公布于网上的企业文化来看，胖东来一方面主张工作和生活（爱情、家庭、休假等）的平衡，一方面在践行和传播幸福、快乐、尊重等很多积极的文化价值观。

看新闻的时候，笔者注意到，老板于东来经常会提到“美好”这个词儿。实际上，在笔者看来，胖东来本身就代表了一种美好生活，一种物质和精神双丰盛的美好生活。

对于这样的美好生活，用户和员工自然喜欢。可这对企业有什么好处？

胖东来曾经意欲退出新乡市场，新乡合作商家和市民纷纷请愿，政府也多次出面挽留，最终胖东来留下来了。可见，胖东来在新乡已经深入人心，顾客自然会大力支持它的发展。

胖东来有一句 slogon，能够很好的解释这一切，那就是：爱在胖东来。

同样，既提供体面的收入，又关注员工和用户的精神需求，给他们带去美好生活，当然需要更大更多的善意。

在当下中国，能提供高薪的互联网公司已经很多了，但是能在精神层面让员工感觉良好、感觉愉悦、感觉幸福和快乐的公司却为数不多。

对于所有企业而言，这又何尝不是一种机会？

02 交互设计里，有哪些善意？

现实中，像胖东来给顾客和员工提供的这种美好生活不常有。但是退一步讲，还是有很多产品对用户展现了很多微小善意，值得我们学习。

这种微小善意主要有三类，分别是：不打扰，护尊严，人为先。

1 不打扰

我们生活在一个信息爆炸的时代，不被手机上的信息过度打扰，是一个刚需。有三类信息，如果把握不好度，就会对用户形成打扰。它们分别是：广告、推送、推荐。

广告这块，主要有两类会形成打扰，分别是：时机不佳的广告，过长的广告。

这方面，微信是个榜样，值得学习。比如开屏页广告，就是时机不佳的广告，因为大家不想在这里看到广告，微信就没有放。朋友圈里也有较长的视频广告，微信的常见做法有两类，要么先展示一张图片，要么先是无声播放。是否看完整的视频广告，选择权在用户手里。

推送这块，常见的有手机系统的通知和 App 内的红点消息。

系统通知，目前也有被滥用的趋势。根据使用情况和感受，个人的建议是这类推送控制在 1-2 类。第 1 类是关于核心功能，比如微信推送新消息，搜狐新闻推送新闻；第 2 类可保留一定的弹性，核心原则是对用户有价值，比如偶尔的活动通知。

目前有两种情况会对用户形成打扰和困扰，第一种是过于频繁的活动通知；第二种是推送和核心功能相差甚远的信息，比如金融类产品推送新闻。

红点消息，有一类会对用户形成打扰，那就是来自官方的过于频繁的各类活动、促销等信息。

推荐这块，主要指 App 内的 Banner 和专题。目前对用户形成打扰的主要是一级频道的一些专题。

一种是过多，比如网易云音乐的首页，就有 9 个专题；一种是位置不佳，比如 Keep 的“探索”频道就包含了课程的推荐，但是在“运动”频道还有两个专题来推荐课程。

2 护尊严

护尊严，就是尽最大可能，维护用户的形象和尊严。

最近几年，常有产品花巨资撒红包给用户抢。产品的初衷自然是好的，而且看起来也是一件皆大欢喜的事情。但是这件事很难提升产品的美誉度，也就无法增加用户对它的喜爱和忠诚程度。

为什么会这样？

让用户抢自己撒的红包，这件事能维护用户的形象和尊严吗？非但不能，可能还会对此造成伤害。因为可能会显得用户爱占小便宜，也可能会使用户处于被施舍的一方。总之这种事对用户来说，并不酷。

一款产品，要想赢得用户更多的喜欢、尊敬乃至忠诚，就最好不做哪怕仅是微弱伤害用户形象和尊严的事情，同时多做一些相反的事情。

3 人为先

人为先，是当用户利益和企业利益发生尖锐矛盾时，去追求一种用户利益在先的双赢局面。

大家都知道，吸烟是有害健康的，但是烟草公司又是要赚钱的。泰国香烟那种既触目惊心又恶心吓人的包装，就尽他们最大的可能诠释了“吸烟有害健康”，是真正的用户为本，让人心生敬意。

泰国香烟的这种做法，值得一些极易让人上瘾的游戏厂商借鉴和学习。

03 交互设计：如何做到善意？

上一大段，是善意的三类表现。这一大段，再探讨下做到善意的一个原则。

以社区型内容型产品为例，这个原则就是：先服务后管理。

这里的服务，是指以服务者的心态做好用户体验，并不局限于交互设计。这里的管理，指的是一些必要的管理，一般是用户的行为规范和用户违规时的处理，比如评论里骂脏话、发布侵权文章等。

所有用户都是需要被服务的，只有少数行为不当的用户才是需要被管理的，所以我们要先服务后管理，以免误伤了不需要被管理的用户。

服务本身就是一种善意，笔者把它分成了两个阶段，分别是：体验的初始阶段，体验的完整过程。

初始阶段对应的是：初始服务；完整过程对应两类服务，分别是：家常服务，极致服务。

1 初始服务

初始服务，是当用户刚开始用这款产品时，能给他们留下良好印象的服务。

如何做到？不出现任何轻微恶意和管理倾向即可，再提供一些便利和帮助则更好。

下面分享一个反面例子。

在个别城镇的卫生死角，有时会看到这样的标语，“此处禁止倒垃圾！违者罚款 200！“。结果那个地方往往有很多垃圾。

为什么会这样？

这个标语，有两层意思：第一，你很可能会在这里倒垃圾；第二，禁止你这么做，做了要罚钱。

也就是说，某种程度上，这个标语在用恶意揣度别人，同时也在很严的管理别人。

看到这个标语的人很可能会这样想：既然认为我会在这倒垃圾，那我索性就倒了；禁止我？凭什么？还罚我钱，吓唬谁呢，况且你有证据吗？

下面再分享一个很好的正面例子。

笔者有一个宜家的退货经历。把一个已经拆过的桌子打包送到了宜家，宜家没有检查里面的零配件（很多螺丝之类的），直接退了。这样宽松的退货条件，宜家可能会蒙受一定损失，比如小概率的零件丢失，但宜家还是把这种服务提供给了顾客。笔者当时的感受是宜家挺信任我们的，对宜家就多了几分好感。

2 家常服务

家常服务，是指一种稀松平常，但又让用户感到舒服自在的服务。

举个例子，你去好朋友家里玩，朋友给你倒了一杯水，并端出一盘削好切好的苹果，你们一边吃一边聊。你和朋友是平等的关系，他这种简单的招待并不会使你感动，但却使你有一种接近在自己家的那种舒服自在。

笔者在用微信公众号（后台）时会有这种感受。在星巴克和肯德基时也会有类似感受。

家常服务，如何实现？第一，要有良好的初始服务，这是基础；第二，要有周到且较高品质的交互设计，这是关键。

以微信公众号为例，和微信一样，它的交互设计也做到了周到和较高品质。下面看看微信公众号的初始服务。

面向大众的资讯平台大多都有一个发文规范，多是关于禁止的行为，通常都会用一个单独网页来展示，有 1-2 页纸那么多。

通常情况下，多数作者是不会违反发文规范的。对于这部分作者，当他们首次看到 1-2 页密密麻麻的发文规范时，可能会产生抵触心理，即便自己不会违规。就好像高中开学第一天，班主任二话没说，直接就立了 20 条班规，同学们会是什么心情。

微信公众号的做法就很巧妙，它把这些规范分割成了三部分。

第一部分是严禁的红线行为，以高度概括的一行文字呈现，所有人都能看到，但是得仔细留意才能注意到。这是规范性质。

第二部分和竞品一样，也是链接出来的一个单独网页。链接入口也和竞品一样，在关联性最强的发文页面右上角。不同的是，这一页展示的是规则，主要以问答的形式呈现，给人感觉是有帮助的信息。这是服务性质。

而竞品的这个页面，通常都是禁三禁四的规范，给人的感觉可能是紧张、压抑甚至抵触。

第三部分是次于红线的禁止行为，比如侵权、低俗内容等。这部分内容的管理办法被以公告的形式分散在公告列表里。而且公告列表里内容多样，还有很多一般的通知，所以这个公告列表也不会像竞品的那一页规范一样，给人紧张、压抑的感觉。性质上是中性。

另外，这部分的入口在后台首页右上角，和发文模块是分开的。所以不会违法规范的作者一般不会去公告列表里翻这些内容，也就看不到。

微信公众号就是这么巧妙的让多数作者看不到“班主任”的“20 条班规”，同时还让他们看到了“班主任”的“常见问题回答”。

这就是微信公众号在发文规范方面的初始服务。另外还有一个加分的细节，就是检测疑似错别字的功能，很贴心，虽然目前还不是很准。

3 极致服务

极致服务，是指让用户感动的服务，比如海底捞和胖东来的服务。

这种服务，一般是由许多细节积累而来，是一种做加法的服务，而且背后往往依赖人力。

好的交互设计，一般都是在做减法，而且纯粹是界面、机器在和用户打交道。所以极致服务难以复制到交互设计上。

不过，一款互联网产品，除了交互设计，还有其它方面的内容。

B 站就是一个例子，它以不走寻常路的方式，在两个方面做到了较为极致的服务。那就是：视频无广告，比较积极、欢乐的弹幕氛围。

结语

以用户利益为先，不打扰用户，维护用户的尊严，这是交互设计里的三种善意，值得我们学习。

先服务后管理。服务作为一种善意，也能够引来用户的善意，最终形成良性循环。

杜绝任何轻微恶意和管理倾向，再提供一些便利和帮助，便能做到良好的初始服务；

在初始服务的基础上，提供周到、高品质的交互设计，就能做到良好的家常服务；

交互设计难以做到极致服务，但是其它方面有机会。

最后，用刘备的一句话来结束本文。

勿以善小而不为。

原文地址：站酷    作者：SnowDesign

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

B类领域设计师必然会面对譬如CRM、ERP等诸多类型的中后台类产品。大多就是做做表单设计，年底考核时想争取涨薪证明自己，但老板要问的“设计价值”是个啥？在这些业务主导下的中后台产品又该如何定位设计机会及价值？

本文就以比较典型且系统化的中后台企采SaaS服务产品为例，来聊聊在这个领域中，是如何进行机会的挖掘，探索并付诸实践的。

01. 业务先赢 完成体验助力是基础

-

在过往数年里，阿里Ant Design，Alibaba Fusion为代表的中台团队进行了大量基础组件设计体系的积累，也沉淀了一些可直接复用的工程化解决方案。如果说有就行，的确产品经理和技术人员自己拼拼凑凑，就可以极低成本的获得一个较为套路化，但无需设计师介入费脑的中后台产品。

但作为用户工作环境中和风险、钱打交道为主，被强制使用的工具载体，在全球数字化经济转型推进趋势下，越来越多的中后台B端产品需要具备更高效，更细腻的体验，以改善千千万万使用者的数字化工作方式.

初步接触业务，我们即发现沿用基础通用设计组件库，“拼组件”的方式没办法满足垂直业务模块比如供应链询价、采购、财务核账履约领域高强度信息承载密度下精细化的用户体验诉求。

因此，为了增强SaaS产品及服务的不可替代性，提升售卖价值亮点以及产品续约率，我重点对业务场景下特有的行为组件、模板及方案链路进行抽象归纳改良设计。

这样做最直观的好处就是不浪费时间重复造轮子，站在巨人的肩膀上来完善组件库，提升设计效能，1位设计师就能通过业务场景组件，高效承接密集的产品需求。 

另一方面，收拢特定场景下核心差异点，只聚焦最小范围来打磨组件及流程，可敏捷实现差异化设计的最佳实践。 

精细化的场景多欠缺合适的线上化解法，作为你深度挖掘，充分思考下的设计方案，相对更容易获取某些领域的设计奖项甚至专利，证明你有在设计上做出了壁垒，创造了价值。 

除此之外，由于该敏捷的体验设计过程是以抽象核心差异为契机，对应领域的设计师亦能更高效的构建出业务特定场景下的独有的“Design System"，在后续过程中放大设计价值。

02. 中后台产品 效率是关键

-

多数中后台产品（尤其是企业级应用系统）会出现 "功能、页面多"、“流程长”的臃肿现象。 

受打工人身份禁锢下的实操用户大多也是迫于工作合规要求，不得不从原本习惯的线下作业流程，转变为在中后台线上了解信息，以及多角色协同决策处理事务。甚至可以说有了中后台的存在，反而增加了他们日常工作操作成本，故无论是新用户还是老用户，都难有意愿于中后台完成事务处理的体验闭环。

为提高采购流程的效率，让中后台线上作业更轻松，更提升企业收益/价值。

我们基于用户行为能力动机，从“替ta完成”，“催ta处理”，“助ta做快”这三个维度，通过协同引导提效的方式来促进线上事务处理完成并流转。简单说，机器能做的就自动处理推进，不能的则及时触达引导，力求做到中后台事务处理过程去人工化，以及主动精准有效的引导。

设计师在这个环节内除了结合新技术，和业务团队共同打造一些智能化服务替代原本高重复性操作以形成新体验外，还可以深刻研究并理解人性本质，在相关待办或服务内容触达上精细化设计。

01、让待办任务更有效的被触达并解决

与业务一起分层提醒内容，及对应内容的可读性、可视化设计；

02、基于用户行为动机下的推送规则设计

不打扰用户工作前提下，及时引导助其理解更促使用户启用自动化提效服务，譬如处理受阻失败、或用户刚完成一项任务时，引导其配置自动处理规则，提高整体效率；

03、打造激励机制和场景

定期进行实操人员处理任务完成度/时长的同团队数据分析比较及外显方案，结合数据可视化呈现手段，在行业内外部团队相互制约下，促使用户自我驱动警示，保障事务推进流转。

最终目标即是推进业务中后台的用户数字化体验从最早的帮助Q&A被动唤起自助化服务，变为主动承接服务告知可处理，半自动化分发，及自动处理，甚至社会智能化数据自驱的演变进阶。

总体来说，在中后台产品给用户提供更简单、更集成的方案，大量消减操作步骤，突出真正重要的信息就是设计最大的价值。

03. 构建数字化管控的新体验

-

除一线实操用户外，我们还要关注管理者，有时更是一号位的老板这一类关键角色，他们在线上各个子环节都有较为强烈的可控，可管理的诉求在，以证明其付钱购买的中后台“在线数字化”工作方式真的能降本增效，或作为企业内部管理优化的量化指标依据。

在企业按年续费产品服务的商业化增长目标下，让管理者能真切意识并实际体会到数字化工作方式的价值就变得尤为重要。因此，设计的关键是增强管理决策者对数字化平台服务的感知度以及满意度。

01、智能化决策辅助的设计

和一线操作员侧的提效类似，只不过对于管理者，我们需更多着重于“替ta完成”和“助ta做快”这两部分去打造智能化服务的管控新体验。

为确保机器智能化处理逻辑更接近人的自然思维，设计师在这个环节中可主动补位，制定相应类型下数据的机器思维处理分析规则以及内容维度。

在过往采购SaaS中后台业务设计中，设计亦抽象了事务型进展以及综合决策分析决策两类数据模块新场景，通过直观结果呈现以及判断要点佐证，在管理行为及流程上促进管控手段的数字化升级，帮助管理者高效获取/查看/分析数据要点。

02、多维度的数据关怀提醒

有了对应的分析数据结果和要点，我们还要将数字时代下的管理数据，团队事务整体进度、风险预判结论有效触达管理角色，更放大其体感。

给老板用的数据大屏/中后台数据看板，及数字孪生可视化即是一种可以充分发挥设计表现力并擅长的领域，即便你所在的中后台团队没有相应技术资源，设计依旧可以通过“电子邮件” “长图”等通用载体，以轻量化的方式来完成价值传递。 

在这个环节，设计的价值就是让管理者读懂数据，受惠数据驱动的决策方式。

03、形成体验质量监测评估体系

以设计体验度量量化为起点，深度关联管理决策者关心的企业运营数据“健康度”，及商业化营收续签强相关的“续签意向”，来评定并监测用户对SaaS产品服务的整体接受度及体验满意度。

我们基于HEART、PULSE、UES、五度模型等已有模型，选择业务目标和场景核心指标来调整衡量维度并推导演变，从业务、产品、技术、服务等多维视角构成适合企业采购SaaS产品的体验度量模型，推动运营/算法/后端共建机制及产品将体验监测工具化，以形成业务中多角色都能有效应用起来的体验质量评估体系。

最终，管理决策者较过往能更实时的掌握一线人员工作使用中后台的健康度情况，有效数字化管理。

对我们的合作伙伴业务运营团队而言，全新的客户续签意向管理预测方式，可提早发现风险，更能联合内部预警及平台触达运营服务有效规避客户流失。

而对于我们自身设计职能，通过这种度量维度方法和工具，不但能定期便携的获取核心指标变化作为设计价值量化凭证，体验监测所获得的相关结论还可以指出中后台产品当前业务阶段问题方向，结合设计目标锁定问题范围，定位后续设计着力点。

中后台领域心得技巧

-

上述即是企采SaaS中后台产品中的设计实践。我们也总结了几个定位设计机会及价值的心得或方法。

01、学徒式调研实操，同理映射用户 

具有出众同理心的设计洞察以及解法是体验价值的基础。（常说要站在用户视角做设计，但不像消费端，设计师多不是中后台实际用户，也很难换位思考理解用户工作行为特征和痛点。) 

因此，中后台领域的设计角色迫切的需要与更多的实际用户去交谈、调研。 

为提升该过程的质量及效率，我们尝试在用户定性调研访谈之前，多通过学徒式调研的方法，来熟悉其工作行为特征，定性的挖掘用户痛点。 

即是以单任务为维度，先请教我们的实际用户他们是如何做的，并依此自己上手完整实操，直到确保能按时保质完成目标任务。 

设身处地还原目标用户情景，理解各方案的优劣势，及如何在他人身上起作用的目的，在该环节之后再去和用户交谈，即可更高效的获得真实的用户洞察以及理想方案假设。

02、用设计擅长的可视化手段，呈现体验痛点

天马行空的设计创新方案总是在决策时受各种技术、资源为由被Pass，推进创新智能的体验方案在中后台领域是个尤为费事的过程。 

面对这一难题，我们可以通过体现设计思维的一些工具模型调整应用，来增强表现说服力，进而建立信任以及方案推进的成功率。

譬如设计侧常用的决策工具用户体验地图，在B类中后台领域中可以将原本情绪体验波浪线替换为效率数据来调整应用，梳理并呈现产品的全流程效率数据曲线，同理“峰终定律”来快速界定并洞察全链路中短板模块，以及低效待设计优化关键点。

借此数据可视化手段，呈现出来体验关键问题严重性，亦可让项目组各职能伙伴共情，获得设计策略及方案的认同。

03、和业务方向紧密结合，跟业务匹配的设计创新

设计创新提案难免会出现两类问题：

首先是创新提案推不下去，甚至被说是设计自high。

这多是因为没有想着结合业务方向，光想着创新或新颖的方式去设计方案。

我们擅长也希望通过酷炫的动效，创新的交互，智能化体验的畅想及解法来表现设计手段的精深。固然，这些事情的探索尝试或练习都有其意义价值，但作为商业设计师不能光纸上谈兵，只有结合业务顺势而为，我们耗时做的方案才有可能提案成功，更推进技术还原落地，从而带给用户更好的用户体验。

再者就是方案有结合业务，也被认可有价值了，但优先级往后走？

这说明设计结合的点不大对，并非业务最关心的。

中后台产品，多和前台核心战略有着强逻辑关系，或有广泛的、潜在的商业化潜力。而了解业务核心关注点，最简单快速的方法就是找到对的人——业务一号位，并快速抄作业。

勇敢点的可直接约业务一号位聊聊，含蓄的设计师亦可尝试借美化一号位汇报PPT等手段，巧妙的获取并理解业务核心目标，布局以及关键利益，在此基础上再从上至下梳理了解各子业务线规划，设计就能更好的取舍。

原文地址：站酷    作者：阿里巴巴CBU设计

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司