大家好，11 月的第 3 波设计干货合集又来了！这次的合集当中，有帮助产品设计师省去大量时间的截屏工具，有为 PPT 准备的免费图片素材合集，还有系统的文案管理工具、免费的样机生成工具，最特别的还是结尾的黑暗系人工智能插画生成服务，视觉风格相当有特色！当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第一波！

大家好，11 月的第 3 波 设计干货 合集又来了！这次的合集当中，有帮助产品设计师省去大量时间的截屏工具，有为 PPT 准备的免费图片素材合集，还有系统的文案管理工具、免费的样机生成工具，最特别的还是结尾的黑暗系 人工智能 插画生成服务，视觉风格相当有特色！

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第一波！2022年11月精选实用设计干货合集 大家好，11 月的第 1 波设计干货来了！

阅读文章 >

第二波！2022年11月精选实用设计干货合集 大家好，11 月的第 2 波设计干货来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、超好用的新型 Figma 截屏工具 https://www.figma.com/community/plugin/1169796060307918456/Literal

有时候，想将一个现有 APP 的用户流程和界面完全梳理出来需要花费大量的时间来截图梳理，而这个工具能够帮助产品设计师和团队提升速度，你所需要做的，就是直接录屏，开始操作，结束之后将录屏结果直接拖到这个插件当中，它能帮你将视频中的截屏提取出来，梳理成用户流程图，省去大量的时间和精力。

2、免费无代码工具与素材合集 https://zeroqode.com/free

也许你曾经听说过 Bubble 这种面向非技术工作者的可视化编程语言，而这个网站是 Zeroqode 为不懂代码的各位进一步降低门槛的福利素材——这是基于 Bubble 语言所构建的工具和模板，34 个免费模板，70 个免费的插件，还有 12 套免费的课程，即使你完全不懂代码，也可以构建出属于自己的、足够好用的网站和 APP。

3、为演示而准备的免费植物图片素材合集 https://tahiryildiz.gumroad.com/l/plants

风格优雅简约的植物图片可以在很多 PPT 页面当中作为装饰元素存在，相当百搭。这套植物主题的图片素材就是为了演示文稿所准备的，单图片是完全免费的，直接下载即可，而付出 5 美元可以连模板一起获得。

4、Icons8 旗下免费素材 Mac 客户端 https://icons8.com/app/macos

PiChon 是著名的设计素材供应商 Icons8 旗下的一个客户端工具，它可以将各种免费的素材库直接集成到本地，让你无需透过浏览器搜索引擎来获取，也无需打开网站，可以直接透过客户端获得你想要的素材，无论是图片、插画、图标、音乐甚至 人工智能生成服务。

5、产品文案统一管理工具 Frontitude https://www.frontitude.com/

产品中的文案表述和视觉、交互设计同样重要，而产品越成体系、越复杂，文案的管理越容易乱，这个时候类似 Frontitude 这样的工具就有用武之地来，它可以把文案当作设计系统一样来管理，和你的代码库、UI 相互同步。

6、黑暗风人工智能插画生成服务 https://picso.ai/

PicSo 是一个基于人工智能的数字艺术插画生成工具，和很多同类工具一样，只需要使用文本描述（英文）即可生成艺术作品，不过相比于其他平台，PicSo 在视觉风格上「劲儿更大」，总体上来说更加黑暗，更加赛博朋克，带有反乌托邦气质，这种特殊的风格气质可能会非常符合一部分设计师的口味。

7、免费的在线样机工具 Pixelied https://pixelied.com/mockups

必须给你们安利这个好用的免费样机工具！首先它是免费的！其次它内置大量的 免费样机 ，最后它还自带一个编辑器，你可以把的素材直接贴到它的编辑器里面，自动套用样机之后，微调即可下载！简单直接好用，还要啥自行车！

大家好，11 月的第 3 波设计干货合集又来了！这次的合集当中，有帮助产品设计师省去大量时间的截屏工具，有为 PPT 准备的免费图片素材合集，还有系统的文案管理工具、免费的样机生成工具，最特别的还是结尾的黑暗系人工智能插画生成服务，视觉风格相当有特色！当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第一波！

大家好，11 月的第 3 波 设计干货 合集又来了！这次的合集当中，有帮助产品设计师省去大量时间的截屏工具，有为 PPT 准备的免费图片素材合集，还有系统的文案管理工具、免费的样机生成工具，最特别的还是结尾的黑暗系 人工智能 插画生成服务，视觉风格相当有特色！

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第一波！2022年11月精选实用设计干货合集 大家好，11 月的第 1 波设计干货来了！

阅读文章 >

第二波！2022年11月精选实用设计干货合集 大家好，11 月的第 2 波设计干货来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、超好用的新型 Figma 截屏工具 https://www.figma.com/community/plugin/1169796060307918456/Literal

有时候，想将一个现有 APP 的用户流程和界面完全梳理出来需要花费大量的时间来截图梳理，而这个工具能够帮助产品设计师和团队提升速度，你所需要做的，就是直接录屏，开始操作，结束之后将录屏结果直接拖到这个插件当中，它能帮你将视频中的截屏提取出来，梳理成用户流程图，省去大量的时间和精力。

2、免费无代码工具与素材合集 https://zeroqode.com/free

也许你曾经听说过 Bubble 这种面向非技术工作者的可视化编程语言，而这个网站是 Zeroqode 为不懂代码的各位进一步降低门槛的福利素材——这是基于 Bubble 语言所构建的工具和模板，34 个免费模板，70 个免费的插件，还有 12 套免费的课程，即使你完全不懂代码，也可以构建出属于自己的、足够好用的网站和 APP。

3、为演示而准备的免费植物图片素材合集 https://tahiryildiz.gumroad.com/l/plants

风格优雅简约的植物图片可以在很多 PPT 页面当中作为装饰元素存在，相当百搭。这套植物主题的图片素材就是为了演示文稿所准备的，单图片是完全免费的，直接下载即可，而付出 5 美元可以连模板一起获得。

4、Icons8 旗下免费素材 Mac 客户端 https://icons8.com/app/macos

PiChon 是著名的设计素材供应商 Icons8 旗下的一个客户端工具，它可以将各种免费的素材库直接集成到本地，让你无需透过浏览器搜索引擎来获取，也无需打开网站，可以直接透过客户端获得你想要的素材，无论是图片、插画、图标、音乐甚至 人工智能生成服务。

5、产品文案统一管理工具 Frontitude https://www.frontitude.com/

产品中的文案表述和视觉、交互设计同样重要，而产品越成体系、越复杂，文案的管理越容易乱，这个时候类似 Frontitude 这样的工具就有用武之地来，它可以把文案当作设计系统一样来管理，和你的代码库、UI 相互同步。

6、黑暗风人工智能插画生成服务 https://picso.ai/

PicSo 是一个基于人工智能的数字艺术插画生成工具，和很多同类工具一样，只需要使用文本描述（英文）即可生成艺术作品，不过相比于其他平台，PicSo 在视觉风格上「劲儿更大」，总体上来说更加黑暗，更加赛博朋克，带有反乌托邦气质，这种特殊的风格气质可能会非常符合一部分设计师的口味。

7、免费的在线样机工具 Pixelied https://pixelied.com/mockups

必须给你们安利这个好用的免费样机工具！首先它是免费的！其次它内置大量的 免费样机 ，最后它还自带一个编辑器，你可以把的素材直接贴到它的编辑器里面，自动套用样机之后，微调即可下载！简单直接好用，还要啥自行车！

一、前言Confluence 是一个由 Atlassian 公司所开发的专业的企业知识管理与协同软件，可以用于构建企业 Wiki。它能够帮助团队成员之间共享信息、文档协作、集体讨论，信息推送等。如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。

一、前言 Confluence 是一个由 Atlassian 公司所开发的专业的企业知识管理与协同软件，可以用于构建企业 Wiki。它能够帮助团队成员之间共享信息、文档协作、集体讨论，信息推送等。

如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。基于此，这里给大家分享一下 Confluence 的产品体验设计拆解。通过对 Confluence 的体验设计拆解，为你提供一份文档类产品的解题宝典！

更多 产品拆解 ：

万字拆解！樊登读书产品设计全方位深度解析 编者按：本文从产品画像、读书服务、内容服务、会员服务等多个方面，完整拆解樊登读书的产品设计。

阅读文章 >

Ps：笔者之前写文章主要是使用语雀或 Notion，这次为了拆解「Confluence」，就专门用 Confluence 写文章来拆解 Confluence～（套娃警告 ）

事先声明

强烈建议使用电脑查看，用户体验更佳； 为了让设计细节更容易被看到，用 Gif 来呈展示；  Gif 体积较大，请耐心查看。 适合人群

第一类，UI/UX 设计师，可以跳出执行层，去思考 Confluence 的产品设计策略，提升产品分析能力；

第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；

第三类，文档产品从业者，通过全面的 产品设计 策略推导、用户需求分析，获取竞品分析参考。

二、日常使用场景 1. Confluence 基础概念

首先了解一下这几个 Confluence 中的基本概念，页面都是以树状结构放置与空间之中，页面之间也可以互相链接和访问。创建页面时除了采用空白文档，也可以选择模板。权限控制分了 3 个维度，分别是团队、个人和匿名用户，按照权限最小化原则，分空间和分页面管理。

2. 页面模板

点击「+」号新建页面后，这里并没有像飞书一样把推荐使用哪些模板作为一个弹窗打断用户，而是直接进入到新页面的编辑流程，光标聚焦到标题，整个过程更加自然。给用户的预期还是直接新建页面，当用户在右侧浏览到有很多丰富的模板时，如果有需求便会主动地去触发使用。

Confluence Cloud 附带了 100+个模板，覆盖了非常多的主题，如人力资源、软件开发、团队合作、项目规划等。这些模板帮助能够用户制作精美有效的页面内容。并且模板预览的交互也非常轻量，不需要再次跳转或者打开弹窗去中断用户的操作行为，而是直接鼠标悬停便能预览模板的详情。

3. 读写分离

关于读写分离，看起来是和语雀类似的，把读和写区分为两种场景。语雀考虑的更多的是希望对作者来说，他的写能够在一种平静又沉浸的一个创作环境中，他能够无所顾虑的写。而读者他能够放心的去阅读。然后在这两个体验之间，用一个“发布/更新”的动作来实现连接。这个发布让作者更加有仪式感，这个动作告诉作者，你的内容将交给读者，由读者来阅读。

而 Confluence 的考虑更多的应该是基于团队协同的办公场景。期望团队中被大家看到的的文档也应该是一个相对稳定或者是被审阅过后的版本，即通过「发布」这个行为来进行确认。在编辑页面时，进行的更改会自动保存并同步，以便编辑这个页面的所有人都能看到。不过，只有在您发布后，查看页面的人才会看到这些更改。您每次发布更改时，Confluence 会启动页面的一个新版本，并将它存储在版本历史记录中。这样，用户可以跟踪不同时间的更改，并在需要时轻松恢复到以前的版本。

4. 插入区块

Confluence 支持非常可插入的区块，点击「+」或者输入「/」，通过下拉菜单可以展示一些常用的区块，在「查看更多」内，可以显示所有支持插入的区块，并且还有一个专门的应用市场可以去安装更多的应用，例如可以安装 Mind Maps，在 Confluence 中就可以直接绘制思维导图。

5. 草稿和已发布页面

基于读写分离的设计理念。Confluence 也区分草稿和已发布的页面。创建了新页面后，在未发布之前它会以草稿形式存在，直到发布为止。草稿不会出现在其他成员的页面树、动态订阅源或搜索结果中（一经发布，页面便会出现在所有这些位置，除非它带有加密的标识）。发布、关闭、更多组成了一个按钮组，在「更多」内也可以对进行其他的发布操作，例如发布但不通知关注者、安排发布的时间等。

6. 页面权限

每个页面都可以设置单独的页面权限，例如允许任何人都可以查看和编辑、只有某些人可以查看或编辑等。整体权限配置的交互操作也是比较符合由大到小的权限配置原则，先配置总的三大权限类型，再在小的权限类型中可以细化，例如邀请不同的人，给予不同的查看或编辑权限。

三、体验亮点 1. 顶部工具栏

Confluence 的顶部工具栏和右侧的发布、查找、协同功能是放在同一行功能区域里，同时也可以看到并没有把太多的工具都平铺出来，而是把一些相对常用的工具平铺出来，不常用的工具则隐藏到「更多」里。相对腾讯文档、语雀、石墨这类型的产品，顶部能够节省一行空间，在保留工具栏常显的基础上，整体显得更加简洁。

2. 图片缩放栅格

图片的缩放不像常见的文档工具那样随意缩放，容易缩放出各种大小不一的图片，Confluence 的图片缩放会基于特定的栅格参考线，鼠标在参考线的附近释放会自动吸附，并缩放至相应的大小，这样就能够在一定程度上限制整篇文档的图片大小的种类，使图片的排版也更加精美。

3. 页面层级省略

左上角的面包屑层级不易默认显示全部出来，而是会默认将中间省略，优先显示第一个和最后一个层级节点。这个细节可以体现在产品设计的策略，并不会一股脑的把所有信息都展示给用户，而是优先展示相对重要的信息，隐藏会省略此药的信息，当用户想要关注的时候，也能够很方便的进行触发。

4. 添加表情符号

鼠标悬停至 Confluence 的标题出，会显示可以添加表情符号。通过适时隐藏的方式，当鼠标经过时才出现，避免常驻显示给用户带来的干扰。内置了很多表情，团队内部可以确认表情使用的规则，便可以帮助用户更快速地对文档的类型做出识别和判断。

5. 页面状态

Confluence 支持给页面添加自定义的状态，例如计划中、草稿、正在进行、随时可以查看等，同时状态的设置除了基本的文本外，还支持用户自定义状态的颜色，让其他成员在阅读文档的时候，可以很直观地了解到当前这篇文档的状态，便于团队协同和管理。

6. 表格标题行自动固定

Confluence 的表格支持设置标题行，当页面滚动至表头不在正常可视范围时，会自动将表头进行固定悬浮，让用户能够看清楚下面的内容和标题的对应关系，体验非常自然顺畅。除了设置标题行，也支持设置编号列，同理也是可以在横向滚动表格的时候，能够便捷的浏览对应的编号。

7. 表格单元格的设置

在表格中框选单元格后，会在右上角出现对于单元格的更多操作设置，例如设置单元格背景色、合并/拆分单元格等。将这些对于单元格的设置直接外露出来，其他的一些文档工具有的是需要右键才触发，略显隐蔽，有的虽然也是浮动工具栏的形式，但是框选文本和框选单元格的触发区分不明确，操作体验上欠佳。Confluence 中这种表格交互的方式很好的解决了一些表格中的交互问题，使用体验上也非常流畅。

8. 灵活的分栏设置

Confluence 中的分栏设置也是内置了几种固定的栏数和布局百分比，基本上能够兼容绝大部分场景，同时做出限制也能够让整体页面的分栏效果不会因为参差不齐而显得凌乱。调节的方式也非常便捷，所有关于区块的调整方式都是位于区块的下方调整。

9. 自动保存提示

目前市面上主流的在线文档工具绝大部份都是实时保存的，不过难免会有一些用户会有数据丢失的焦虑。为解决这种用户焦虑，Confluence 会在页面的顶部出现保存的状态提示，告知用户刚刚编辑的数据正在保存、已保存等，避免用户担心编辑的内容没有保存而引发的焦虑情况。

10. 无障碍设计

关于无障碍设计的一个小亮点，对于因视觉障碍而使用屏幕朗读起的用户，如果遇到图片，便无法被朗读器识别，这个时候就可以使用替代文本的功能，当朗读器朗读到某张图片时，可以将图片转化为编辑者所设置好的替代文本，这样就能够通过替代文本的方式帮助有视觉障碍的用户理解内容。

四、体验槽点 1. 归档弹窗按钮错位

在点击页面归档时弹出来的弹窗，发现右上角的「关闭」错位到弹窗外部了，一个非常明显的线上 BUG。

2. 区块拖动没有交互反馈

一部分区块在拖拽的时候，只会讲区块的名称带上，缺少即将移动到的目标位置的交互反馈。

3. 一些视觉样式不统一

创建空间的时候，可以发现创建空间的弹窗与外面的其他页面的视觉样式差异很多，明显看起来就不是一套设计样式。推测是因为有比较久远的历史设计债务问题，导致目前整体产品内存在一些页面的视觉样式格格不入。

4. 页面目录

在体验 Confluence 的过程中，不知道是不是因为笔者没有找到功能的原因，发现 Confluence 没有国内一些文档工具都有的目录锚点功能（如果大家有发现的话，可以告诉我 ），虽然可以通过插入目录索引来实现，但是这个目录只是实现一个跳转，并不能将目录固定在页面的左侧或右侧显示。并且这个目录只能在页面的查看态才能看到，在编辑态的时候无法预览目录，导致在整理这篇文章的时候，经常要上下滚动翻看，略显麻烦。

五、总结 总体来讲，Confluence 是非常强大的团队知识管理工具，它覆盖了非常全面的团队协同场景，国内很多文档产品的设计都会借鉴 Confluence 中的一些设计策略和设计理念。本文只是依据日常使用场景测试出的一些小模块，功能体验也还有非常多的可取之处。

由于时间和篇幅有限，本文关于 Confluence 的设计拆解中存在的疏误之处还望大家给与指正，欢迎大家一起学习和讨论。

感谢阅读，我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注，期待与你链接～

参考链接

https://www.woshipm.com/pd/4836001.html https://zhuanlan.zhihu.com/p/105877523

一、前言Confluence 是一个由 Atlassian 公司所开发的专业的企业知识管理与协同软件，可以用于构建企业 Wiki。它能够帮助团队成员之间共享信息、文档协作、集体讨论，信息推送等。如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。

一、前言 Confluence 是一个由 Atlassian 公司所开发的专业的企业知识管理与协同软件，可以用于构建企业 Wiki。它能够帮助团队成员之间共享信息、文档协作、集体讨论，信息推送等。

如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。基于此，这里给大家分享一下 Confluence 的产品体验设计拆解。通过对 Confluence 的体验设计拆解，为你提供一份文档类产品的解题宝典！

更多 产品拆解 ：

万字拆解！樊登读书产品设计全方位深度解析 编者按：本文从产品画像、读书服务、内容服务、会员服务等多个方面，完整拆解樊登读书的产品设计。

阅读文章 >

Ps：笔者之前写文章主要是使用语雀或 Notion，这次为了拆解「Confluence」，就专门用 Confluence 写文章来拆解 Confluence～（套娃警告 ）

事先声明

强烈建议使用电脑查看，用户体验更佳； 为了让设计细节更容易被看到，用 Gif 来呈展示；  Gif 体积较大，请耐心查看。 适合人群

第一类，UI/UX 设计师，可以跳出执行层，去思考 Confluence 的产品设计策略，提升产品分析能力；

第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；

第三类，文档产品从业者，通过全面的 产品设计 策略推导、用户需求分析，获取竞品分析参考。

二、日常使用场景 1. Confluence 基础概念

首先了解一下这几个 Confluence 中的基本概念，页面都是以树状结构放置与空间之中，页面之间也可以互相链接和访问。创建页面时除了采用空白文档，也可以选择模板。权限控制分了 3 个维度，分别是团队、个人和匿名用户，按照权限最小化原则，分空间和分页面管理。

2. 页面模板

点击「+」号新建页面后，这里并没有像飞书一样把推荐使用哪些模板作为一个弹窗打断用户，而是直接进入到新页面的编辑流程，光标聚焦到标题，整个过程更加自然。给用户的预期还是直接新建页面，当用户在右侧浏览到有很多丰富的模板时，如果有需求便会主动地去触发使用。

Confluence Cloud 附带了 100+个模板，覆盖了非常多的主题，如人力资源、软件开发、团队合作、项目规划等。这些模板帮助能够用户制作精美有效的页面内容。并且模板预览的交互也非常轻量，不需要再次跳转或者打开弹窗去中断用户的操作行为，而是直接鼠标悬停便能预览模板的详情。

3. 读写分离

关于读写分离，看起来是和语雀类似的，把读和写区分为两种场景。语雀考虑的更多的是希望对作者来说，他的写能够在一种平静又沉浸的一个创作环境中，他能够无所顾虑的写。而读者他能够放心的去阅读。然后在这两个体验之间，用一个“发布/更新”的动作来实现连接。这个发布让作者更加有仪式感，这个动作告诉作者，你的内容将交给读者，由读者来阅读。

而 Confluence 的考虑更多的应该是基于团队协同的办公场景。期望团队中被大家看到的的文档也应该是一个相对稳定或者是被审阅过后的版本，即通过「发布」这个行为来进行确认。在编辑页面时，进行的更改会自动保存并同步，以便编辑这个页面的所有人都能看到。不过，只有在您发布后，查看页面的人才会看到这些更改。您每次发布更改时，Confluence 会启动页面的一个新版本，并将它存储在版本历史记录中。这样，用户可以跟踪不同时间的更改，并在需要时轻松恢复到以前的版本。

4. 插入区块

Confluence 支持非常可插入的区块，点击「+」或者输入「/」，通过下拉菜单可以展示一些常用的区块，在「查看更多」内，可以显示所有支持插入的区块，并且还有一个专门的应用市场可以去安装更多的应用，例如可以安装 Mind Maps，在 Confluence 中就可以直接绘制思维导图。

5. 草稿和已发布页面

基于读写分离的设计理念。Confluence 也区分草稿和已发布的页面。创建了新页面后，在未发布之前它会以草稿形式存在，直到发布为止。草稿不会出现在其他成员的页面树、动态订阅源或搜索结果中（一经发布，页面便会出现在所有这些位置，除非它带有加密的标识）。发布、关闭、更多组成了一个按钮组，在「更多」内也可以对进行其他的发布操作，例如发布但不通知关注者、安排发布的时间等。

6. 页面权限

每个页面都可以设置单独的页面权限，例如允许任何人都可以查看和编辑、只有某些人可以查看或编辑等。整体权限配置的交互操作也是比较符合由大到小的权限配置原则，先配置总的三大权限类型，再在小的权限类型中可以细化，例如邀请不同的人，给予不同的查看或编辑权限。

三、体验亮点 1. 顶部工具栏

Confluence 的顶部工具栏和右侧的发布、查找、协同功能是放在同一行功能区域里，同时也可以看到并没有把太多的工具都平铺出来，而是把一些相对常用的工具平铺出来，不常用的工具则隐藏到「更多」里。相对腾讯文档、语雀、石墨这类型的产品，顶部能够节省一行空间，在保留工具栏常显的基础上，整体显得更加简洁。

2. 图片缩放栅格

图片的缩放不像常见的文档工具那样随意缩放，容易缩放出各种大小不一的图片，Confluence 的图片缩放会基于特定的栅格参考线，鼠标在参考线的附近释放会自动吸附，并缩放至相应的大小，这样就能够在一定程度上限制整篇文档的图片大小的种类，使图片的排版也更加精美。

3. 页面层级省略

左上角的面包屑层级不易默认显示全部出来，而是会默认将中间省略，优先显示第一个和最后一个层级节点。这个细节可以体现在产品设计的策略，并不会一股脑的把所有信息都展示给用户，而是优先展示相对重要的信息，隐藏会省略此药的信息，当用户想要关注的时候，也能够很方便的进行触发。

4. 添加表情符号

鼠标悬停至 Confluence 的标题出，会显示可以添加表情符号。通过适时隐藏的方式，当鼠标经过时才出现，避免常驻显示给用户带来的干扰。内置了很多表情，团队内部可以确认表情使用的规则，便可以帮助用户更快速地对文档的类型做出识别和判断。

5. 页面状态

Confluence 支持给页面添加自定义的状态，例如计划中、草稿、正在进行、随时可以查看等，同时状态的设置除了基本的文本外，还支持用户自定义状态的颜色，让其他成员在阅读文档的时候，可以很直观地了解到当前这篇文档的状态，便于团队协同和管理。

6. 表格标题行自动固定

Confluence 的表格支持设置标题行，当页面滚动至表头不在正常可视范围时，会自动将表头进行固定悬浮，让用户能够看清楚下面的内容和标题的对应关系，体验非常自然顺畅。除了设置标题行，也支持设置编号列，同理也是可以在横向滚动表格的时候，能够便捷的浏览对应的编号。

7. 表格单元格的设置

在表格中框选单元格后，会在右上角出现对于单元格的更多操作设置，例如设置单元格背景色、合并/拆分单元格等。将这些对于单元格的设置直接外露出来，其他的一些文档工具有的是需要右键才触发，略显隐蔽，有的虽然也是浮动工具栏的形式，但是框选文本和框选单元格的触发区分不明确，操作体验上欠佳。Confluence 中这种表格交互的方式很好的解决了一些表格中的交互问题，使用体验上也非常流畅。

8. 灵活的分栏设置

Confluence 中的分栏设置也是内置了几种固定的栏数和布局百分比，基本上能够兼容绝大部分场景，同时做出限制也能够让整体页面的分栏效果不会因为参差不齐而显得凌乱。调节的方式也非常便捷，所有关于区块的调整方式都是位于区块的下方调整。

9. 自动保存提示

目前市面上主流的在线文档工具绝大部份都是实时保存的，不过难免会有一些用户会有数据丢失的焦虑。为解决这种用户焦虑，Confluence 会在页面的顶部出现保存的状态提示，告知用户刚刚编辑的数据正在保存、已保存等，避免用户担心编辑的内容没有保存而引发的焦虑情况。

10. 无障碍设计

关于无障碍设计的一个小亮点，对于因视觉障碍而使用屏幕朗读起的用户，如果遇到图片，便无法被朗读器识别，这个时候就可以使用替代文本的功能，当朗读器朗读到某张图片时，可以将图片转化为编辑者所设置好的替代文本，这样就能够通过替代文本的方式帮助有视觉障碍的用户理解内容。

四、体验槽点 1. 归档弹窗按钮错位

在点击页面归档时弹出来的弹窗，发现右上角的「关闭」错位到弹窗外部了，一个非常明显的线上 BUG。

2. 区块拖动没有交互反馈

一部分区块在拖拽的时候，只会讲区块的名称带上，缺少即将移动到的目标位置的交互反馈。

3. 一些视觉样式不统一

创建空间的时候，可以发现创建空间的弹窗与外面的其他页面的视觉样式差异很多，明显看起来就不是一套设计样式。推测是因为有比较久远的历史设计债务问题，导致目前整体产品内存在一些页面的视觉样式格格不入。

4. 页面目录

在体验 Confluence 的过程中，不知道是不是因为笔者没有找到功能的原因，发现 Confluence 没有国内一些文档工具都有的目录锚点功能（如果大家有发现的话，可以告诉我 ），虽然可以通过插入目录索引来实现，但是这个目录只是实现一个跳转，并不能将目录固定在页面的左侧或右侧显示。并且这个目录只能在页面的查看态才能看到，在编辑态的时候无法预览目录，导致在整理这篇文章的时候，经常要上下滚动翻看，略显麻烦。

五、总结 总体来讲，Confluence 是非常强大的团队知识管理工具，它覆盖了非常全面的团队协同场景，国内很多文档产品的设计都会借鉴 Confluence 中的一些设计策略和设计理念。本文只是依据日常使用场景测试出的一些小模块，功能体验也还有非常多的可取之处。

由于时间和篇幅有限，本文关于 Confluence 的设计拆解中存在的疏误之处还望大家给与指正，欢迎大家一起学习和讨论。

感谢阅读，我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注，期待与你链接～

参考链接

https://www.woshipm.com/pd/4836001.html https://zhuanlan.zhihu.com/p/105877523

大厂的设计改版流程是怎样的？本文从京东云的视觉改版案例出发，手把手带你认识完整系统的改版流程。更多网站改版设计：大厂实战！

大厂的 设计改版 流程是怎样的？本文从 京东云 的视觉改版案例出发，手把手带你认识完整系统的改版流程。

更多网站改版设计：

大厂实战！vivo官网APP首页改版设计过程复盘 vivo 官网 APP是什么？

阅读文章 >

一、升级背景 京东云官网作为京东云对外唯一官方门户，并承载整个云业务售前及售中的核心渠道，是用户接触京东云的首要渠道； 京东云作为京东科技集团统一的技术服务品牌，线上页面风格元素在快速更迭互联网背景下较落后，所以本次 视觉设计 重要使命之一是探索前沿的设计趋势，对京东云品牌风格进行全新升级； 随着京东云的不断发展，用户群体扩大及用户需求的变更，原有官网内容架构单一无法打动用户查看转化，需针对现有用户浏览和阅读习惯对官网首页内容进行结构上的调整和更新。

京东云官网平台的产品是联系用户的载体，平台提供产品、服务、输出各种信息，用户通过我们的官网获取各种信息，咨询对比服务等，从而最终购买我们的产品。

二、设计分析 1. 发现设计问题

旧版首页与产品详情页面

首先是设计分析，因为只有发现了平台现有问题，挖掘用户痛点，才能有方向有思路去解决它；

首页：最重要的首屏信息量很大，有主推的广告位、特价产品展示、KA 品牌案例展示等，设计初期考虑充分利用首屏空间，展示更多使其抓住用户感兴趣内容点，最终形成有效转化。上线完成后通过数据对比首屏除 Banner 区域外，其它信息点击率较低，我们提供了这么多信息在首屏是用户想看的吗？

产品详情页：内容空洞没有任何产品的优势价值体现，一堆文本排列但提供给用户有效信息少之又少。

问题走查

通过内部走查及外部调研汇总的结果来看，问题主要集中在：体验差、不好找、看不懂、缺少量化标准这 4 类，比如：行业属性不突出、科技感不足、首页过于促销化、内容单一等等问题。

2. 确定优化目标

有了上述提出的一些问题，就要去解决它，从体验设计出发，确定优化目标。

从现有问题中进行拆解，比如上图左侧为提出的问题，右边是通过问题进行设定的目标。

如“网站缺少科技技术元素、货架营销感重”，通过强化科技属性增加动效、交互形式，突出科技元素；

如“内容展示无重点不利于阅读”，通过走查竞品看竞品是如何展示的，我们如何再向前一步展示自身的特色从而差异化展示；

3. 用户分析

大部分 B 端平台用户基本分 3 类：

第 1 类：潜在大企业用户，到访目的是搜寻、调研可靠长期的服务/产品；

第 2 类：潜在中、小企业用户，到访目的可能是搜寻比较低成本的服务/产品；

第 3 类：潜在行业个人从业者，到访目的是搜寻比较廉价/短期服务/产品或个人测试使用；

京东云用户群体主要是面向：中小企业、个人开发者、以及一些高校学生使用。

中小企业很多是因为信任京东品牌而来的，是带有一定的信任感，关注的产品是否稳定安全、使用过程中有问题售后是否能够快速得到响应。

个人开发者及高校学习，除安全稳定外，更多追求的是物美价廉。

因此，设计中我们需要考虑如何给用户传递出：安全、技术、服务、信赖的感觉。

4. 设计关键词

① 头脑风暴

设计之前小组进行了几轮脑暴，结合自身品牌、用户分析、产品功能特点，由小组人员讨论：“你认为的京东云”应该有哪些关键词组成？

关键词查找

57 人投票结果

并进行二次筛选、线上线下各部门不同人员投票、总结，最终得出：数智、生态、供应链、安全等关键词。

② 关键词拆解

通过系列关键词和行业特征，从我们面向的中小企、各类产业、城市的新视角为核心“数智化”作为第一个关键词；

从决策链路和用户分析我们总结了第二个关键词“安全”；基于新生态搭建的愿景和定位，我们总结了第 3 个关键词“供应链”。

其次是关键词转化，落地我们视觉上如何表达这几个关键词呢？

首先是数智化：顾名思义就是数字+智能，由此可以转化为科技；

如何表达安全呢？让用户对我们的品牌形成信赖，在定义页面颜色时增加自然暖色，尽量减少使用深色系，采用浅色作为背景，减少与用户之间距离感；

供应链：链接各个渠道搭建整个生态场景。

③ 收集情绪版

情绪版的目的是辅助展现最终视觉表达效果，帮助设计师找到合适的视觉演进方向。根据搜集的情绪版，对设计关键词有大概的表达视觉意向。

数智化-科技：我们对于科技的理解是未来的、智能的，所以定位的视觉表现为：空间的通透以及一些超现实的表现技法；图形元素用一些简单的几何图形；然后适当增加动效来增强对科技感的诠释。

安全-信赖：安全的最高境界是信赖，让用户感觉安全舒适，所有的元素要贴近自然，符合大众对于安全的认知。减少使用较深的颜色，减少使用较尖锐的形状，对于材质的使用也偏向于柔和，尽量为用户呈现出轻松放松的感觉。

供应链-场景：作为链接整个供应链和整个生态的桥梁纽带，我们希望做到的是共赢，而我们也是希望在这过程中，能够表达出友好的态度来面向所有人，给需求多样化的企业提供开放共生打造更有活力的生态场景。

通过情绪版提取视觉应用部分，最终视觉风格基调为：轻盈、微质感的浅色科技风格；通过 3D 几何、发光链接、透明空间进行“形”的组合。

5. 视觉探索

在进行视觉执行过程中并非一蹴即至，而是不断改进调整，视觉元素与画面场景呈现比例、主次层级也需不断探索和演进。

经过初步视觉探索、讨论，我们发现场景模型离理想差距较大，重点突出供应链主题、但缺少行业特性及科技感、主次层级关系模糊、难以及形成规范化的设计语言，所以不能完全满足设计目标；

既然有了改动方向与目标下个阶段融入产品与科技结合的场景，将更多的供应链元素融入到背景。突出主题产品，弱化辅助元素，使“形”更轻盈精细化的质感与行业属性。

根据初稿进行修改讨论敲定设计方案：实现主元素与画面场景呈现比例、主次层级优化。

产品主图形：用于单个产品时即简化底座即可。

模型：要求干脆、严谨，将虚拟云形象进行具象表达。

画面最终以轻盈、微质感的浅色科技风，通过 3D 几何、发光链接、透明空间进行“形”的组合。达到了我们的初期目标。

6. 动效设计

本次官网 Banner 及产品矩阵楼层尝试引入动效设计，在确保动效的必要性与合理性上，我们在动效设计上保持了克制，仅通过背景镜头剧场式转角变化、数据光效流动传输、产品主题慢节奏微动效的恰当变化，对用户进行弱打扰的视觉引导，将虚拟云计算进行更进一步丰富的场景式具象表达。

产品 icon 设计中，强化识别及趣味性是本次优化的重点，在表现手法上为了增加整体趣味性引入动效，并规范时长规范时长为 24 帧。

以恰到好处，不过度设计，做到不增加操作，不干扰用户的动效设计理念。

产品图标动效：等角透视，光线颜色材质比例保持统一

落地到页面上最终方案敲定：整体页面为了呼应主视觉风格质感，功能图标使用了毛玻璃风格、模块背景及部分动效使用弥散光感做渐变模糊，目的是打造产品记忆点、优化信息层级，这样使之页面保持整体感与统一感。

三、视觉延伸与规范 1. 布局规范化

为用户在不同终端的提供更加舒适的界面和适配规则，官网采用响应式布局 RESPONSIVE WEB DESIGN 简称为 RWD，可以让网页自动的适应不同尺寸的显示器。

为了提高线上各产品线的规范性一致性及开发维护成本最低化，采用基础的 24 栅格简单便捷的栅格化布局。

响应式布局

1680px 以上：版心内容区域 1576px，显示 PC 头尾；

1440px~1680px：版心内容区域 1384px，显示 PC 头尾；

1280px~1440px：版心内容区域 1192px，显示 PC 头尾；

768px~1280px：版心容区域 1192px，会出现滚动条，显示 PC 头尾

768px（包括 768px）以下：宽度为 100%，为 M 端效果，显示 H5 头尾

设计方法

同时为满足官网不同的业务诉求，兼顾 首页、店铺、产品详情 100+产品 Banner 日常运营上线需求对“响应效率”的追求，和官网本身对“视觉品质”的要求，对适用于产品页面的 2.5D 图标进行了全新升级，从颜色、透视、光影、质感遵循 3D 场景同等原则。

PC、M 端栅格设置

PC 端以宽度 1440 举例：PC 端页面宽度为 1440px，内容区宽度为 1200px，24 栅格 8px 间距，版心区域在：1192px，列宽 a=42px，列间距为 i=8px。

M 端以宽度 375 举例：M 端页面宽度为 375px，内容区宽度为 343px，24 栅格 4px 间距，版心区域在：343px，列宽 a=10px，列间距为 i=4px。

2. 视觉统一组件化

为了保持与京东科技品牌对外的统一性，在质感上采用统一 3D 设计规范，主视觉整体图形结构由主产品模型、基础辅助模型、辅助背景组成，以此结构形成统一的视觉构成；为了提高执行效率提取 3D 组件规范，后续目标对所有 banner 图形统一拆分、重组，利用组件拼装 Banner 达到快速上线目的。

同时为满足官网不同的业务诉求，兼顾首页、店铺、产品详情 100+产品 Banner 日常运营上线需求对“响应效率”的追求，和官网本身对“视觉品质”的要求，对适用于产品页面的 2.5D 图标进行了全新升级，从颜色、透视、光影、质感遵循 3D 场景同等原则。

2.5D 同样进行的产品组件设计，满足日常页面需求；

3. 视觉规范化

在视觉建立的过程中统一升级了我们积攒了长达 3 年的组件素材，在后续的设计协作以及设计复用时，提供有效指导。将虚拟云产品进行具象表达，不同形式图标使用不同应用场景。

虚拟云产品具象表达

京东云设计系统秉承开放、灵活、发展的设计原则为京东云主站及其他相关子业务提供有效参考。

四、总结 通过这次升级改版，除了更新我们官网组件设计同时，在更系统化的整理京东云设计体系，我们将能力和资源不断沉淀，形成可快速支持业务的设计工具和资源库，助力业务提效同时也可减轻设计师压力。

本次官网视觉风格的改版只是初步探索的开始，我们将持续关注业务本身，将设计趋势与业务结合呈现，后期在探索中我们将融入更多的技术动效，使之更具有科技感，展现更多层面的品牌调性。

欢迎关注作者微信公众号：「JDTDA」

大厂的设计改版流程是怎样的？本文从京东云的视觉改版案例出发，手把手带你认识完整系统的改版流程。更多网站改版设计：大厂实战！

大厂的 设计改版 流程是怎样的？本文从 京东云 的视觉改版案例出发，手把手带你认识完整系统的改版流程。

更多网站改版设计：

大厂实战！vivo官网APP首页改版设计过程复盘 vivo 官网 APP是什么？

阅读文章 >

一、升级背景 京东云官网作为京东云对外唯一官方门户，并承载整个云业务售前及售中的核心渠道，是用户接触京东云的首要渠道； 京东云作为京东科技集团统一的技术服务品牌，线上页面风格元素在快速更迭互联网背景下较落后，所以本次 视觉设计 重要使命之一是探索前沿的设计趋势，对京东云品牌风格进行全新升级； 随着京东云的不断发展，用户群体扩大及用户需求的变更，原有官网内容架构单一无法打动用户查看转化，需针对现有用户浏览和阅读习惯对官网首页内容进行结构上的调整和更新。

京东云官网平台的产品是联系用户的载体，平台提供产品、服务、输出各种信息，用户通过我们的官网获取各种信息，咨询对比服务等，从而最终购买我们的产品。

二、设计分析 1. 发现设计问题

旧版首页与产品详情页面

首先是设计分析，因为只有发现了平台现有问题，挖掘用户痛点，才能有方向有思路去解决它；

首页：最重要的首屏信息量很大，有主推的广告位、特价产品展示、KA 品牌案例展示等，设计初期考虑充分利用首屏空间，展示更多使其抓住用户感兴趣内容点，最终形成有效转化。上线完成后通过数据对比首屏除 Banner 区域外，其它信息点击率较低，我们提供了这么多信息在首屏是用户想看的吗？

产品详情页：内容空洞没有任何产品的优势价值体现，一堆文本排列但提供给用户有效信息少之又少。

问题走查

通过内部走查及外部调研汇总的结果来看，问题主要集中在：体验差、不好找、看不懂、缺少量化标准这 4 类，比如：行业属性不突出、科技感不足、首页过于促销化、内容单一等等问题。

2. 确定优化目标

有了上述提出的一些问题，就要去解决它，从体验设计出发，确定优化目标。

从现有问题中进行拆解，比如上图左侧为提出的问题，右边是通过问题进行设定的目标。

如“网站缺少科技技术元素、货架营销感重”，通过强化科技属性增加动效、交互形式，突出科技元素；

如“内容展示无重点不利于阅读”，通过走查竞品看竞品是如何展示的，我们如何再向前一步展示自身的特色从而差异化展示；

3. 用户分析

大部分 B 端平台用户基本分 3 类：

第 1 类：潜在大企业用户，到访目的是搜寻、调研可靠长期的服务/产品；

第 2 类：潜在中、小企业用户，到访目的可能是搜寻比较低成本的服务/产品；

第 3 类：潜在行业个人从业者，到访目的是搜寻比较廉价/短期服务/产品或个人测试使用；

京东云用户群体主要是面向：中小企业、个人开发者、以及一些高校学生使用。

中小企业很多是因为信任京东品牌而来的，是带有一定的信任感，关注的产品是否稳定安全、使用过程中有问题售后是否能够快速得到响应。

个人开发者及高校学习，除安全稳定外，更多追求的是物美价廉。

因此，设计中我们需要考虑如何给用户传递出：安全、技术、服务、信赖的感觉。

4. 设计关键词

① 头脑风暴

设计之前小组进行了几轮脑暴，结合自身品牌、用户分析、产品功能特点，由小组人员讨论：“你认为的京东云”应该有哪些关键词组成？

关键词查找

57 人投票结果

并进行二次筛选、线上线下各部门不同人员投票、总结，最终得出：数智、生态、供应链、安全等关键词。

② 关键词拆解

通过系列关键词和行业特征，从我们面向的中小企、各类产业、城市的新视角为核心“数智化”作为第一个关键词；

从决策链路和用户分析我们总结了第二个关键词“安全”；基于新生态搭建的愿景和定位，我们总结了第 3 个关键词“供应链”。

其次是关键词转化，落地我们视觉上如何表达这几个关键词呢？

首先是数智化：顾名思义就是数字+智能，由此可以转化为科技；

如何表达安全呢？让用户对我们的品牌形成信赖，在定义页面颜色时增加自然暖色，尽量减少使用深色系，采用浅色作为背景，减少与用户之间距离感；

供应链：链接各个渠道搭建整个生态场景。

③ 收集情绪版

情绪版的目的是辅助展现最终视觉表达效果，帮助设计师找到合适的视觉演进方向。根据搜集的情绪版，对设计关键词有大概的表达视觉意向。

数智化-科技：我们对于科技的理解是未来的、智能的，所以定位的视觉表现为：空间的通透以及一些超现实的表现技法；图形元素用一些简单的几何图形；然后适当增加动效来增强对科技感的诠释。

安全-信赖：安全的最高境界是信赖，让用户感觉安全舒适，所有的元素要贴近自然，符合大众对于安全的认知。减少使用较深的颜色，减少使用较尖锐的形状，对于材质的使用也偏向于柔和，尽量为用户呈现出轻松放松的感觉。

供应链-场景：作为链接整个供应链和整个生态的桥梁纽带，我们希望做到的是共赢，而我们也是希望在这过程中，能够表达出友好的态度来面向所有人，给需求多样化的企业提供开放共生打造更有活力的生态场景。

通过情绪版提取视觉应用部分，最终视觉风格基调为：轻盈、微质感的浅色科技风格；通过 3D 几何、发光链接、透明空间进行“形”的组合。

5. 视觉探索

在进行视觉执行过程中并非一蹴即至，而是不断改进调整，视觉元素与画面场景呈现比例、主次层级也需不断探索和演进。

经过初步视觉探索、讨论，我们发现场景模型离理想差距较大，重点突出供应链主题、但缺少行业特性及科技感、主次层级关系模糊、难以及形成规范化的设计语言，所以不能完全满足设计目标；

既然有了改动方向与目标下个阶段融入产品与科技结合的场景，将更多的供应链元素融入到背景。突出主题产品，弱化辅助元素，使“形”更轻盈精细化的质感与行业属性。

根据初稿进行修改讨论敲定设计方案：实现主元素与画面场景呈现比例、主次层级优化。

产品主图形：用于单个产品时即简化底座即可。

模型：要求干脆、严谨，将虚拟云形象进行具象表达。

画面最终以轻盈、微质感的浅色科技风，通过 3D 几何、发光链接、透明空间进行“形”的组合。达到了我们的初期目标。

6. 动效设计

本次官网 Banner 及产品矩阵楼层尝试引入动效设计，在确保动效的必要性与合理性上，我们在动效设计上保持了克制，仅通过背景镜头剧场式转角变化、数据光效流动传输、产品主题慢节奏微动效的恰当变化，对用户进行弱打扰的视觉引导，将虚拟云计算进行更进一步丰富的场景式具象表达。

产品 icon 设计中，强化识别及趣味性是本次优化的重点，在表现手法上为了增加整体趣味性引入动效，并规范时长规范时长为 24 帧。

以恰到好处，不过度设计，做到不增加操作，不干扰用户的动效设计理念。

产品图标动效：等角透视，光线颜色材质比例保持统一

落地到页面上最终方案敲定：整体页面为了呼应主视觉风格质感，功能图标使用了毛玻璃风格、模块背景及部分动效使用弥散光感做渐变模糊，目的是打造产品记忆点、优化信息层级，这样使之页面保持整体感与统一感。

三、视觉延伸与规范 1. 布局规范化

为用户在不同终端的提供更加舒适的界面和适配规则，官网采用响应式布局 RESPONSIVE WEB DESIGN 简称为 RWD，可以让网页自动的适应不同尺寸的显示器。

为了提高线上各产品线的规范性一致性及开发维护成本最低化，采用基础的 24 栅格简单便捷的栅格化布局。

响应式布局

1680px 以上：版心内容区域 1576px，显示 PC 头尾；

1440px~1680px：版心内容区域 1384px，显示 PC 头尾；

1280px~1440px：版心内容区域 1192px，显示 PC 头尾；

768px~1280px：版心容区域 1192px，会出现滚动条，显示 PC 头尾

768px（包括 768px）以下：宽度为 100%，为 M 端效果，显示 H5 头尾

设计方法

同时为满足官网不同的业务诉求，兼顾 首页、店铺、产品详情 100+产品 Banner 日常运营上线需求对“响应效率”的追求，和官网本身对“视觉品质”的要求，对适用于产品页面的 2.5D 图标进行了全新升级，从颜色、透视、光影、质感遵循 3D 场景同等原则。

PC、M 端栅格设置

PC 端以宽度 1440 举例：PC 端页面宽度为 1440px，内容区宽度为 1200px，24 栅格 8px 间距，版心区域在：1192px，列宽 a=42px，列间距为 i=8px。

M 端以宽度 375 举例：M 端页面宽度为 375px，内容区宽度为 343px，24 栅格 4px 间距，版心区域在：343px，列宽 a=10px，列间距为 i=4px。

2. 视觉统一组件化

为了保持与京东科技品牌对外的统一性，在质感上采用统一 3D 设计规范，主视觉整体图形结构由主产品模型、基础辅助模型、辅助背景组成，以此结构形成统一的视觉构成；为了提高执行效率提取 3D 组件规范，后续目标对所有 banner 图形统一拆分、重组，利用组件拼装 Banner 达到快速上线目的。

同时为满足官网不同的业务诉求，兼顾首页、店铺、产品详情 100+产品 Banner 日常运营上线需求对“响应效率”的追求，和官网本身对“视觉品质”的要求，对适用于产品页面的 2.5D 图标进行了全新升级，从颜色、透视、光影、质感遵循 3D 场景同等原则。

2.5D 同样进行的产品组件设计，满足日常页面需求；

3. 视觉规范化

在视觉建立的过程中统一升级了我们积攒了长达 3 年的组件素材，在后续的设计协作以及设计复用时，提供有效指导。将虚拟云产品进行具象表达，不同形式图标使用不同应用场景。

虚拟云产品具象表达

京东云设计系统秉承开放、灵活、发展的设计原则为京东云主站及其他相关子业务提供有效参考。

四、总结 通过这次升级改版，除了更新我们官网组件设计同时，在更系统化的整理京东云设计体系，我们将能力和资源不断沉淀，形成可快速支持业务的设计工具和资源库，助力业务提效同时也可减轻设计师压力。

本次官网视觉风格的改版只是初步探索的开始，我们将持续关注业务本身，将设计趋势与业务结合呈现，后期在探索中我们将融入更多的技术动效，使之更具有科技感，展现更多层面的品牌调性。

欢迎关注作者微信公众号：「JDTDA」

本文从信息架构的定义、构建方式、构成、影响因素、设计原则6个方面，帮你完整吃透信息架构的知识体系。更多信息架构设计干货：信息架构如何设计？5000字干货帮你快速掌握！

本文从信息架构的定义、构建方式、构成、影响因素、设计原则6个方面，帮你完整吃透信息架构的知识体系。

更多 信息架构 设计干货：

信息架构如何设计？5000字干货帮你快速掌握！ 信息架构设计是每个交互设计师都必须要掌握的基本功，那到底什么是信息架构设计？

阅读文章 >

前言

第一次认识「信息架构」，还是刚入行的时候。当时做 B 端产品，经常会研究产品的信息架构，利用思维导图工具输出一份关于功能的结构图。

当时信息架构主要应用在两个方面：

① 竞品分析

信息架构基本是竞品分析的必备环节。主要是将竞品产品功能（侧重导航系统），采用脑图的形式罗列出来（颗粒度有时粗有时细），勾画出产品的功能体系，展示出信息组织结构。根据前辈的经验，将架构大致会分为「宽而浅」和「窄而深」两种形式进行一通分析，得出一个比较主观的结论。

② 界面设计层面

在实际的设计应用时，信息架构更偏向于导航菜单的组织结构。设计师需要将产品功能清单进行结构化梳理，曾经尝试过卡片分类法等，搭建起整个产品的导航菜单结构，并对菜单命名做出一定的优化建议。

总体来说，对信息架构的理解还是比较浅薄的。

今天我们来系统地了解下信息架构的知识。

一、信息架构的定义 信息架构（information architecture，缩写为 IA）是指对某一特定内容里的信息进行统筹、规划、设计、安排等一系列有机处理的想法。

IA 的主体对象是信息，由信息架构师来加以设计结构、决定组织方式以及归类，好让使用者与用户容易寻找与管理的一项艺术与科学。——百度百科

定义都是概括性极强的，读起来会比较晦涩难懂。但是我们可以从中获得一些关键信息。

1. 对于产品

信息架构是产品信息的组织、归类方式。需要能够真实地反映出产品的核心价值、展现出主线功能、特色功能，提升用户对产品的认知。

2. 对于用户

信息架构要方便用户理解，并能够帮助用户顺利地找到对应的功能完成操作。在 信息架构设计 时，要充分考虑用户的理解能力、操作习惯、目标内容使用频率等因素，符合用户认知从而提升用户体验。

二、信息架构与交互设计 在用户体验 5 要素中，信息架构归属于结构层，主要是面向信息型产品。功能型产品的结构层主要指的是交互设计。

交互设计和信息架构都强调⼀个重点：确定各个将要呈现给⽤户的元素的“模式（patterns）”和“顺序（sequences）”。 交互设计 关注于将影响⽤户执⾏和完成任务的元素。信息架构则关注如何将信息表达给⽤户的元素。——《用户体验要素：以用户为中心的产品设计》

两种产品类型为什么会有交互设计和信息架构的区分呢？说一下我个人理解。

1. 信息型产品

信息型产品就是我们常见的各类网站，例如门户网站、品牌官网、知乎、今日头条、或者腾讯视频等内容类产品。这些产品主要是为用户提供各类信息，任务类操作比较少。

网站最终的任务是给予用户足够可用、有效的信息，确保用户在产品中不会迷失或者无法找相应的信息入口，所以结构层的主要任务是构建符合用户认知的信息架构，便于在框架层以此架构为基础完成界面、导航设计。

2. 功能型产品

功能型产品更多的是中后台管理系统，目的是帮助特定的用户完成各种任务，包含了各种流程。在产品中用户会有大量的操作，功能之间可能互为前置条件或者相互协同。

例如用户在商品加购之前，需要完成登录。或者管理员在增加用户之前，需要提前设定系统用户角色。所以对于功能型产品，除了确定信息架构，还要明确好功能之间的交互逻辑关系。

我认为在结构层中，交互设计和信息架构并不是绝对割裂的，功能型产品同样需要制定信息架构，只不过信息架构相对固定，需要遵从用户的业务场景、工作流程等，设计师不能根据自己的理解随意更改。

另外随着业务场景和功能的发展迭代，有些产品已经不能通过简单信息型产品或者功能型产品进行划分。例如电商网站，既要提供商品信息供用户选购，还要提供购物车、下单、支付、物流、售后等一系列的环节，每个环节之间都是环环相扣。因此，在结构层需要信息架构和交互设计并重。

三、信息架构的构建方式 信息架构最核心的是确定产品信息的组织形式，我们可以采用以下两种⽅式来建⽴分类体系：「自上而下」或「自下而上」。

1. 自上而下

这种分类方法从“战略层”（产品目标）出发去考虑内容分类。即根据产品目标与用户需求直接进行结‍构设计。最先从最广泛的、可能满足决策目标的内容与功能开始进行分类，然后在按逻辑细分出次级分类，这样的“主要分类”和“次级分类”就构成了“一个个空槽”，将想要的内容和功能按顺序一一填入即可。

我理解这样的方式是从产品视角出发，根据功能清单，结合用户场景，逐级建立起信息分类形成产品的信息架构，最后将功能/内容放入到信息架构中。

这种方法比较适合 B 端产品，产品功能和用户业务场景比较明确，并且是紧密结合在一起的。比如财务报销需要包括提单、审批、支付、消息、记录等等环节。信息架构也要按照这些场景和流程进行归类，便于用户理解和找寻。

此外对于 C 端产品，某些用户需求和场景并是不特别明确，需要产品主动构建信息架构引导用户需求，此时也需要自上而下建立信息架构。例如电商产品中引入短视频，首页的订阅方式等，短视频产品中的同城、兴趣等功能。这些是基于用户洞察，产品自上而下推进信息结构的优化升级。

2. 自下而上

这种分类方法是根据对“内容和功能需求的分析”⽽来的。先从已有的资料（或者当⽹站发布后将存在的资料）开始，我们把这些资料统统放到最低级别的分类中，然后再将它们分别归属到较⾼⼀级的类别，从⽽逐渐构建出能反映我们的产品⽬标和⽤户需求的结构。

当产品已经拥有了内容，但是并不明确如何进行归类，才符合用户的认知和需求。这是就可以采用自下而上的方法倒推，建立信息架构。对于信息量不大的产品，可以做几版方案，找些用户进行测试就可以得出结论。对于信息量会比较大的产品，可以采用卡片分类法，让用户参与其中，为信息架构设计提供参考依据。

我个人认为，在实际的应用中自上而下的创建方式居多，这种方式从产品和用户两个维度出发，可以搭建出比较平衡的一套信息架构。

四、信息架构的构成 在《信息架构——超越Web设计》一书中，将信息架构定义为：

共享信息环境的结构化设计； 数字、物理和跨渠道生态系统中的组织、标签、搜索和导航系统的合成； 创建信息产品和体验的艺术及科学，以提供可用性、可寻性和可理解性； 一种新兴的实践性科学群体，目的是把设计和建筑学的原理理导⼊入数字领域中。 —— 《信息架构——超越Web设计》

这就意味着信息架构不仅仅是我们看到的导航菜单，只不过由于导航菜单是信息架构的直观表现形式，所以常常被理解为“信息架构就是导航菜单”。

信息架构包含了 4 大系统：组织系统、标签系统、导航系统、搜索系统。

1. 组织系统

组织系统是信息架构的根基，决定了信息架构的基础逻辑，可以拆解为组织方案与组织结构两个模块。

① 组织方案

组织方案就是产品信息的分类逻辑，需要根据用户、场景和业务逻辑进行组织和定义，在产品中信息的归属有不同维度和标准，大致可分为精确信息和模糊信息 2 类。

有些信息可以按照精确的维度进行划分。例如首字母、时间、行政区、组织结构、文件类型等。精准的信息组织方式可以保证将信息分成定义明确且互斥的区域，容易设计与维护。

但是一些信息缺少明确的划分标准，属于模糊信息。例如网站栏目的划分、电影的分类等，更多的是按照业务和用户认知习惯确定组织形式。

常见的模糊组织方案主要有以下几种方式：

主题组织方案

当我们无法按照精确分类时，可以按照用户场景、业务逻辑归纳为符合用户认知的主题（频道），搭建信息架构的基础分类。例如品牌官网的信息归类方式。

任务导向方案

任务导向的组织方案通常用在对操作要求较高的工具型产品中，信息架构的基础分类是各种功能的集合。例如 WPS 工具栏就是按照任务导向分类的。

特定受众方案

特定受众的组织方案即根据不同类型的访问者呈现不同类型的信息。以受众为导向的信息组织方案会把网站切分成更小、以受众为主的小型网站，可以在网页上呈现特定用户感兴趣的内容，避免网页的杂乱。

例如 Boss 直聘中用户可以拥有“牛人”和“Boss”两种角色身份，信息内容、组织形式有着明显的差别。

另外随着老龄化人口比重越来越大，无障碍设计成为了产品设计的重要组成部分。无障碍设计并不仅仅是将字体变大，在产品内容、信息结构上也会有一定的优化调整，内容更加精简、聚焦于产品核心功能。

总的来说，特定受众方案应用还是比较少的。有的 C 端产品会根据用户角色划分为多个产品，例如滴滴出行有乘客端和司机端两款产品。

而在 B 端产品中，角色划分通常比较多，并且不同的角色间有着比较强的业务关联。因此用户会共用一个产品，通过角色权限区分不同的信息架构。

混合方案

在一款产品中，单一的分类模式很难满足所有场景的需要，信息架构应该根据实际情况，灵活地采用多种方式混合分类。

② 组织结构

组织结构指的信息架构内在的逻辑结构，分为以下四种组织方式：

层级结构

在层级结构中，节点与其他相关节点之间存在父级/子级的关系。子节点代表着更狭义的概念，从属于代表着更广义类别的父节点。不是每个节点都有子节点，但是每个节点都有一个父节点，一直往上直到整个结构的父节点。

层级结构是信息架构中最常见的形式，信息多级逐层展开。因此具有很强的拓展性和包容性，可以承载复杂的信息量。并且节点之间是相互独立的，内容的归属比较明确，构建的单个信息空间也比较清晰简洁。

层级结构会存在广度和深度的问题。在信息总量一定的情况下，可以分为「宽而浅」和「窄而深」2 种不同的形式。

「宽而浅」的结构意味着父节点越多，子节点层级就会变少。「窄而深」的结构意味着父节点比较少，子节点的层级就会变多。

信息架构增加广度，意味着信息的入口增多，用户不太容易辨别目标点的归属，就会增加寻找和记忆成本。最上层的信息入口，我们一般会遵循 7±2 原则，Web 端产品控制在 7 个以内，移动端产品控制在 5 个以内。

子节点层级一般为 3 层，最多不超过 5 层。过深的层级会造成信息难以查找，同时用户到达目标点的路径会变长，操作成本也会相应的增加。

矩阵结构

矩阵结构允许用户在节点与节点之间沿着两个或更多的“维度”移动。由于每一个用户的需求都可以和矩阵中的一个“轴”联系在一起，因此矩阵结构通常能帮助那些“带着不同需求而来”的用户，使他们能在相同内容中寻找各自想要的东西。

矩阵式结构是一种多维度结构，可以让用户在相同的内容中按照个人需求找寻自己所需的信息，最典型的就是产品首页信息。作为产品内容聚合、分发的页面，可以满足用户的不同需求。目前不少 C 端产品都采用的是「主题+推荐」的模式，通过算法实现产品内容与用户需求的高度匹配。

B 端首页则是依靠「角色+场景」构建起产品的矩阵结构，实现功能的快捷直达，以及重要信息的清晰展示。

另外矩阵式结构还体现在链路关系上，没有层级和中心的概念，更加强调信息之间的互联互通。通过这种连接关系甚至可以将跨领域、跨层级的信息关联起来。

比较典型的就是电商 App，通过商品详情页可以到达店铺、到达同类推荐产品、到达客服、到达购物车、到达活动页面，甚至是搭配商品等等。这种结构具有很强的自由度和灵活性，既可以避免用户行为进入「死胡同」，又可以通过多重的信息连接，丰富产品的运营场景，带给用户更多的可能。

当然这种结构的前提是信息必须是关系紧密的功能场景，否则信息会出现错乱，并增加用户的认知负担。

自然结构

自然结构不会遵循任何一致的模式。节点是逐一被连接起来的，同时这种结构没有太强烈的分类概念。自然结构对于探索一系列关系不明确或一直在演变的主题是很合适的。但是自然结构没有给用户提供一个清晰的指示，从而让用户能感觉他们在结构中的哪个部分。

自然结构具有随机性和不确定性，随着算法的提升，这种结构应用越来越广泛。最常见的就是各种推荐信息流，电商平台、音视频、资讯平台等产品都主打推荐频道，透过投喂的方式，吸引没有明确需求的用户，给他们更多的选择。

不过自然结构的随机性意味着用户无法建立固定的信息架构认知，所以自然结构不会单独存在，只是对信息架构的补充。另外在 B 端产品中，用户通常具有明确的任务和目标，所以自然结构并不适用于 B 端产品。

线性结构

线性结构来自于你最熟悉的线下媒体。连贯的语言流程是最基本的信息结构类型，而且处理它的装置早已被深深地植入我们的大脑中了。书、文章、音像和录像全部都被设计成一种线性的体验。

线性结构是比较单一的信息结构，信息有先后顺序要求，逐层向下递进，并且没有交叉。这种组织形式决定了线形结构主要用在简单产品或者产品信息构架的末端场景中。

例如在微信读书中，打开书籍后用户只能一页页翻看，不会与其他书籍有交叉关联。在 OA，电子邮箱等产品中，每一个流程，每一封邮件都是线性的、相互独立的，信息之间不会增加不必要的关联。

2. 标签系统

标签系统指的是整个产品信息节点的命名体系，静态展示产品信息架构的具体内容，包含文字和图片（图标）2 种信息。标签系统需要符合用户的认知习惯，减少用户的学习成本。在日常设计工作中，标签系统需要注意以下 3 个方面：

① 标签内容的准确性

标签定义时，需要准确地表达信息的内容项。举两个例子：

在 C 端领域为了提高用户的点击率，经常会遇到一些信息融合累加的设计形式。例如宣传用语是“立享 300 元福利”，用户点开一看，或许只是 10 张优惠券。这种设计利用了用户“贪便宜”的心理，已经成为了行业约定俗成的表达形式，倒也可以接受。

不过之前有个营销弹窗的案例，用户点击后跳转到活动页面，然后逐个领券。弹窗中按钮有两种方案，A 方案是“开心收下”，B 方案是“立即领取”。

虽然后台有历史数据显示，“开心收下”的文案用户点击率比较高，并不意味着这个文案可以用在所有场景下。“开心收下”意味着完成领取并入账，“立即领取”则是需要继续操作才能完成领取，两者适用于不同的场景。

标签系统首先要考虑表达的准确性，要符合用户的心智模型以及所代表的行为模式。

② 优先选用行业通用的术语或图标

尼尔森十大可用性原则中要求「贴近用户真实环境」。在标签定义的时候，尽量使用目标用户的语言。尤其在 B 端产品中，不少名词对设计师而言比较陌生。但是对专业领域的用户，这些都是日常工作术语，早已达成了共识。如果做出改变，反而会增加用户认知成本。

所以设计师要克服自己的认知缺陷。一方面要了解业务、通过用户调研，建立更符合用户认知的标签系统，另一方面也可以参考竞品来学习和应用信息标签。

为了保证新、老用户的快速了解系统，最大程度地降低学习成本，可以在标签旁边添加注释进一步说明。例如英文缩写术语、容易引起歧义的指标、不易理解的标签等等。

对于图标，有些是各个产品通用的形式，用户很容理解。例如「设置」、「删除」、「帮助」等。还有相当大一部分图标很难准确表达出内在信息，就需要增加文字信息，辅助信息表达。

③ 标签信息简洁高效

标签系统既要完整表达信息，也要注意信息的简洁高效。

例如下图中菜单命名，大量重复的信息增加了信息识别的难度，并且名称字数没有控制导致内容截断，也会增加用户的操作成本。

3. 导航系统

导航系统是信息架构的动态交互逻辑。一方面能够告诉用户当前所处于的位置，页面信息的层级归属，让用户不会在产品中迷失方向。另一方面导航系统实现了信息的动态联接，用户可以依靠导航系统在不同的层级结构中「闪转腾挪」，高效操作。

导航系统分为 4 大类：全局导航、局部导航、情景式导航、辅助导航。

① 全局导航

全局导航是面向整个产品的导航形式，通常位于系统的整体框架中，实现在所有页面中可见、可操作。所以全局导航也只是对产品的核心、关键功能和部分即时功能开放。

例如信息框架中的一、二级的信息，或者消息、用户管理这类即时、强管理的内容。

② 局部导航

局部导航是全局导航的补充，对于复杂的产品，局部导航非常有必要，避免全局导航变得臃肿复杂，有利于信息逐级有序地展开。

③ 情景式导航

情景式导航又称为上下文导航，指的是根据当前场景或者内容产生的信息链接关系。例如文章内的超链接，或者是标题信息等，点击可以跳转新的网页、下载文件或指定某个对象等。情景导航中可以承载产品外部的内容链接，不必完全是本产品中的内容。

④ 辅助导航

辅助导航包括网站地图，网站索引，网站指南等辅助类型的导航。

4. 搜索系统

搜索系统解决的是大容量、高密度信息的定位问题。大到全产品范围内的搜索，小到当前列表搜索，基本成了产品中的必备功能。即使有些产品中搜索功能，用户的使用频率不高，也是需要配备的，方便用户的不时之需。

「搜索」系统对外呈现或许是一个带着图标的输入框，甚至只是一个图标。但是操作则是一个多种状态的融合的交互过程，包括了输入前、输入中、搜索结果展示等内容。系统比较复杂，大家可以去找一些专门的文章学习，也可以看一下我之前的文章：

如何做好搜索设计？我总结了3个原则！ 搜索设计看似简单，展现形式上只有一个输入框和搜索按钮就可以了，但是里面隐藏了很多交互细节。

阅读文章 >

小结

以上就是信息架构的 4 大组成系统。信息架构的最终目标是为了让用户能够更快速地获取信息。在实际应用过程中，可以根据产品类型，用户群体做出内容取舍。

值得注意的是，信息架构最重要的标准，不是“整个过程一共需要多少步骤”，而是“用户是否认为每一个步骤都是合理的”，以及“当前的步骤是否自然地延续了上一个步骤中的任务”。

五、信息架构的影响因素 信息架构是为产品和用户服务的，因此信息架构的影响因素主要是来自于这两个方面。

1. 产品视角 ① 产品目标及定位

同类型产品的目标、定位、用户群体并不是完全相同的，在各自的细分领域形成了各自的差异化优势。这些都会直接和间接地影响产品的信息架构。

例如国内 3 大电商平台的主导航基本一致，但也不是完全相同，大家可以体会和思考下其中的差别。

② 产品类型

上面不少案例提及了 B 端和 C 端产品，由于产品类型、适配终端、产品目标等方面的影响，信息架构有着比较明显的差异。同样都是 C 端产品，购物类产品重搜索与推荐，金融证券类产品则是重功能导向，界面看似一致的，但是信息架构中组织系统、搜索系统背后的逻辑也存在较大差异。

③ 产品复杂度

简单产品的信息架构也会比较简单，或许线性的组织结构就可以搭建起核心业务的信息架构，例如 QQ 邮箱。

复杂产品的信息架构会运用多种组织结构方式，相关的标签系统、导航系统、搜索系统都会加强。例如云类产品的标签系统，既要考虑整体的一致性，又要明确各个产品间的差别。搜索功能也不仅限于产品功能，还会拓展到活动优惠、帮助文档等内容，让用户搜索得更彻底。

2. 用户视角 ① 用户需求

产品不能一味的只考虑自己的产品目标，还要考虑用户的接受程度。就好比舞台上高雅的古典歌剧，只顾展示自己的专业能力，而底下观众根本听不懂唱的内容，必然无法引起观众兴趣。

如果不重视用户需求，产品设计时，只顾着各种高级能力输出、各种复杂的产品流程，但是从没有考虑用户是否需要这样的产品，带来的结果就是信息架构的无序扩张、内容庞杂、过程混乱，最终成为产品体系的「自嗨」。

② 用户认知能力

不同的用户之间认知能力有很大的差别，需要面向目标客户群体完成信息架构。

例如之前做过门店后台管理系统改版设计，通过前期调研发现，店员们年龄偏大、学历不高，老版本的信息架构虽然足够的大而全，但是核心功能并不凸显，用户操作流程也被拉长。因此在改版设计时，信息架构做了精简，优先聚焦打造用户核心任务，减少信息的复杂度。

六、信息架构的设计原则 将信息架构抽离出来，其实包括了组织体系、展示形式和操作体验 3 个环节。相应的也会有 3 个设计原则。

1. 延展性

产品是不断成长迭代的，信息架构需要具有兼容性和弹性，可以适应多个层级的扩展或精简，保证一定迭代周期内的架构稳定。频繁变动的信息架构必然会带来产品的研发成本提高，并且增加用户的学习成本。

2. 易学性

信息架构需要有一套准确的分类标准，能够指导后续架构的优化迭代，也可以便于用户理解和学习。细分下来包含了逻辑性和一致性两个方面。逻辑性则体现在信息之间的关联关系，实现用户链路的准确、高效。一致性体现在分类方式、分类结构等方面，便于用户认知。

3. 易用性

上文提到过，信息架构的的广度和深度在一定程度上决定了操作体验。设计时要做好信息架构的平衡性，避免只是从业务角度出发，出现十几个一级导航菜单并存的局面。

写在最后 信息架构是个复杂的系统，并不是设计师个人的工作，也不应该从零开始构建。而是在产品功能架构或者产品规格清单基础上，从用户需求和场景出发，梳理出来的符合用户体验逻辑的产品骨架。

信息架构直接决定了后续产品设计的组织脉络，因此准确有效的信息架构是产品战略落地过程中重要的一环。设计师需要拥有相关的知识和能力，才能在设计工作中产出合理的设计方案。

信息架构内容很多，文章是笔者个人的观点，难免存在不足之处，欢迎大家交流指正。

欢迎关注作者微信公众号：「子牧UXD」

本文从信息架构的定义、构建方式、构成、影响因素、设计原则6个方面，帮你完整吃透信息架构的知识体系。更多信息架构设计干货：信息架构如何设计？5000字干货帮你快速掌握！

本文从信息架构的定义、构建方式、构成、影响因素、设计原则6个方面，帮你完整吃透信息架构的知识体系。

更多 信息架构 设计干货：

信息架构如何设计？5000字干货帮你快速掌握！ 信息架构设计是每个交互设计师都必须要掌握的基本功，那到底什么是信息架构设计？

阅读文章 >

前言

第一次认识「信息架构」，还是刚入行的时候。当时做 B 端产品，经常会研究产品的信息架构，利用思维导图工具输出一份关于功能的结构图。

当时信息架构主要应用在两个方面：

① 竞品分析

信息架构基本是竞品分析的必备环节。主要是将竞品产品功能（侧重导航系统），采用脑图的形式罗列出来（颗粒度有时粗有时细），勾画出产品的功能体系，展示出信息组织结构。根据前辈的经验，将架构大致会分为「宽而浅」和「窄而深」两种形式进行一通分析，得出一个比较主观的结论。

② 界面设计层面

在实际的设计应用时，信息架构更偏向于导航菜单的组织结构。设计师需要将产品功能清单进行结构化梳理，曾经尝试过卡片分类法等，搭建起整个产品的导航菜单结构，并对菜单命名做出一定的优化建议。

总体来说，对信息架构的理解还是比较浅薄的。

今天我们来系统地了解下信息架构的知识。

一、信息架构的定义 信息架构（information architecture，缩写为 IA）是指对某一特定内容里的信息进行统筹、规划、设计、安排等一系列有机处理的想法。

IA 的主体对象是信息，由信息架构师来加以设计结构、决定组织方式以及归类，好让使用者与用户容易寻找与管理的一项艺术与科学。——百度百科

定义都是概括性极强的，读起来会比较晦涩难懂。但是我们可以从中获得一些关键信息。

1. 对于产品

信息架构是产品信息的组织、归类方式。需要能够真实地反映出产品的核心价值、展现出主线功能、特色功能，提升用户对产品的认知。

2. 对于用户

信息架构要方便用户理解，并能够帮助用户顺利地找到对应的功能完成操作。在 信息架构设计 时，要充分考虑用户的理解能力、操作习惯、目标内容使用频率等因素，符合用户认知从而提升用户体验。

二、信息架构与交互设计 在用户体验 5 要素中，信息架构归属于结构层，主要是面向信息型产品。功能型产品的结构层主要指的是交互设计。

交互设计和信息架构都强调⼀个重点：确定各个将要呈现给⽤户的元素的“模式（patterns）”和“顺序（sequences）”。 交互设计 关注于将影响⽤户执⾏和完成任务的元素。信息架构则关注如何将信息表达给⽤户的元素。——《用户体验要素：以用户为中心的产品设计》

两种产品类型为什么会有交互设计和信息架构的区分呢？说一下我个人理解。

1. 信息型产品

信息型产品就是我们常见的各类网站，例如门户网站、品牌官网、知乎、今日头条、或者腾讯视频等内容类产品。这些产品主要是为用户提供各类信息，任务类操作比较少。

网站最终的任务是给予用户足够可用、有效的信息，确保用户在产品中不会迷失或者无法找相应的信息入口，所以结构层的主要任务是构建符合用户认知的信息架构，便于在框架层以此架构为基础完成界面、导航设计。

2. 功能型产品

功能型产品更多的是中后台管理系统，目的是帮助特定的用户完成各种任务，包含了各种流程。在产品中用户会有大量的操作，功能之间可能互为前置条件或者相互协同。

例如用户在商品加购之前，需要完成登录。或者管理员在增加用户之前，需要提前设定系统用户角色。所以对于功能型产品，除了确定信息架构，还要明确好功能之间的交互逻辑关系。

我认为在结构层中，交互设计和信息架构并不是绝对割裂的，功能型产品同样需要制定信息架构，只不过信息架构相对固定，需要遵从用户的业务场景、工作流程等，设计师不能根据自己的理解随意更改。

另外随着业务场景和功能的发展迭代，有些产品已经不能通过简单信息型产品或者功能型产品进行划分。例如电商网站，既要提供商品信息供用户选购，还要提供购物车、下单、支付、物流、售后等一系列的环节，每个环节之间都是环环相扣。因此，在结构层需要信息架构和交互设计并重。

三、信息架构的构建方式 信息架构最核心的是确定产品信息的组织形式，我们可以采用以下两种⽅式来建⽴分类体系：「自上而下」或「自下而上」。

1. 自上而下

这种分类方法从“战略层”（产品目标）出发去考虑内容分类。即根据产品目标与用户需求直接进行结‍构设计。最先从最广泛的、可能满足决策目标的内容与功能开始进行分类，然后在按逻辑细分出次级分类，这样的“主要分类”和“次级分类”就构成了“一个个空槽”，将想要的内容和功能按顺序一一填入即可。

我理解这样的方式是从产品视角出发，根据功能清单，结合用户场景，逐级建立起信息分类形成产品的信息架构，最后将功能/内容放入到信息架构中。

这种方法比较适合 B 端产品，产品功能和用户业务场景比较明确，并且是紧密结合在一起的。比如财务报销需要包括提单、审批、支付、消息、记录等等环节。信息架构也要按照这些场景和流程进行归类，便于用户理解和找寻。

此外对于 C 端产品，某些用户需求和场景并是不特别明确，需要产品主动构建信息架构引导用户需求，此时也需要自上而下建立信息架构。例如电商产品中引入短视频，首页的订阅方式等，短视频产品中的同城、兴趣等功能。这些是基于用户洞察，产品自上而下推进信息结构的优化升级。

2. 自下而上

这种分类方法是根据对“内容和功能需求的分析”⽽来的。先从已有的资料（或者当⽹站发布后将存在的资料）开始，我们把这些资料统统放到最低级别的分类中，然后再将它们分别归属到较⾼⼀级的类别，从⽽逐渐构建出能反映我们的产品⽬标和⽤户需求的结构。

当产品已经拥有了内容，但是并不明确如何进行归类，才符合用户的认知和需求。这是就可以采用自下而上的方法倒推，建立信息架构。对于信息量不大的产品，可以做几版方案，找些用户进行测试就可以得出结论。对于信息量会比较大的产品，可以采用卡片分类法，让用户参与其中，为信息架构设计提供参考依据。

我个人认为，在实际的应用中自上而下的创建方式居多，这种方式从产品和用户两个维度出发，可以搭建出比较平衡的一套信息架构。

四、信息架构的构成 在《信息架构——超越Web设计》一书中，将信息架构定义为：

共享信息环境的结构化设计； 数字、物理和跨渠道生态系统中的组织、标签、搜索和导航系统的合成； 创建信息产品和体验的艺术及科学，以提供可用性、可寻性和可理解性； 一种新兴的实践性科学群体，目的是把设计和建筑学的原理理导⼊入数字领域中。 —— 《信息架构——超越Web设计》

这就意味着信息架构不仅仅是我们看到的导航菜单，只不过由于导航菜单是信息架构的直观表现形式，所以常常被理解为“信息架构就是导航菜单”。

信息架构包含了 4 大系统：组织系统、标签系统、导航系统、搜索系统。

1. 组织系统

组织系统是信息架构的根基，决定了信息架构的基础逻辑，可以拆解为组织方案与组织结构两个模块。

① 组织方案

组织方案就是产品信息的分类逻辑，需要根据用户、场景和业务逻辑进行组织和定义，在产品中信息的归属有不同维度和标准，大致可分为精确信息和模糊信息 2 类。

有些信息可以按照精确的维度进行划分。例如首字母、时间、行政区、组织结构、文件类型等。精准的信息组织方式可以保证将信息分成定义明确且互斥的区域，容易设计与维护。

但是一些信息缺少明确的划分标准，属于模糊信息。例如网站栏目的划分、电影的分类等，更多的是按照业务和用户认知习惯确定组织形式。

常见的模糊组织方案主要有以下几种方式：

主题组织方案

当我们无法按照精确分类时，可以按照用户场景、业务逻辑归纳为符合用户认知的主题（频道），搭建信息架构的基础分类。例如品牌官网的信息归类方式。

任务导向方案

任务导向的组织方案通常用在对操作要求较高的工具型产品中，信息架构的基础分类是各种功能的集合。例如 WPS 工具栏就是按照任务导向分类的。

特定受众方案

特定受众的组织方案即根据不同类型的访问者呈现不同类型的信息。以受众为导向的信息组织方案会把网站切分成更小、以受众为主的小型网站，可以在网页上呈现特定用户感兴趣的内容，避免网页的杂乱。

例如 Boss 直聘中用户可以拥有“牛人”和“Boss”两种角色身份，信息内容、组织形式有着明显的差别。

另外随着老龄化人口比重越来越大，无障碍设计成为了产品设计的重要组成部分。无障碍设计并不仅仅是将字体变大，在产品内容、信息结构上也会有一定的优化调整，内容更加精简、聚焦于产品核心功能。

总的来说，特定受众方案应用还是比较少的。有的 C 端产品会根据用户角色划分为多个产品，例如滴滴出行有乘客端和司机端两款产品。

而在 B 端产品中，角色划分通常比较多，并且不同的角色间有着比较强的业务关联。因此用户会共用一个产品，通过角色权限区分不同的信息架构。

混合方案

在一款产品中，单一的分类模式很难满足所有场景的需要，信息架构应该根据实际情况，灵活地采用多种方式混合分类。

② 组织结构

组织结构指的信息架构内在的逻辑结构，分为以下四种组织方式：

层级结构

在层级结构中，节点与其他相关节点之间存在父级/子级的关系。子节点代表着更狭义的概念，从属于代表着更广义类别的父节点。不是每个节点都有子节点，但是每个节点都有一个父节点，一直往上直到整个结构的父节点。

层级结构是信息架构中最常见的形式，信息多级逐层展开。因此具有很强的拓展性和包容性，可以承载复杂的信息量。并且节点之间是相互独立的，内容的归属比较明确，构建的单个信息空间也比较清晰简洁。

层级结构会存在广度和深度的问题。在信息总量一定的情况下，可以分为「宽而浅」和「窄而深」2 种不同的形式。

「宽而浅」的结构意味着父节点越多，子节点层级就会变少。「窄而深」的结构意味着父节点比较少，子节点的层级就会变多。

信息架构增加广度，意味着信息的入口增多，用户不太容易辨别目标点的归属，就会增加寻找和记忆成本。最上层的信息入口，我们一般会遵循 7±2 原则，Web 端产品控制在 7 个以内，移动端产品控制在 5 个以内。

子节点层级一般为 3 层，最多不超过 5 层。过深的层级会造成信息难以查找，同时用户到达目标点的路径会变长，操作成本也会相应的增加。

矩阵结构

矩阵结构允许用户在节点与节点之间沿着两个或更多的“维度”移动。由于每一个用户的需求都可以和矩阵中的一个“轴”联系在一起，因此矩阵结构通常能帮助那些“带着不同需求而来”的用户，使他们能在相同内容中寻找各自想要的东西。

矩阵式结构是一种多维度结构，可以让用户在相同的内容中按照个人需求找寻自己所需的信息，最典型的就是产品首页信息。作为产品内容聚合、分发的页面，可以满足用户的不同需求。目前不少 C 端产品都采用的是「主题+推荐」的模式，通过算法实现产品内容与用户需求的高度匹配。

B 端首页则是依靠「角色+场景」构建起产品的矩阵结构，实现功能的快捷直达，以及重要信息的清晰展示。

另外矩阵式结构还体现在链路关系上，没有层级和中心的概念，更加强调信息之间的互联互通。通过这种连接关系甚至可以将跨领域、跨层级的信息关联起来。

比较典型的就是电商 App，通过商品详情页可以到达店铺、到达同类推荐产品、到达客服、到达购物车、到达活动页面，甚至是搭配商品等等。这种结构具有很强的自由度和灵活性，既可以避免用户行为进入「死胡同」，又可以通过多重的信息连接，丰富产品的运营场景，带给用户更多的可能。

当然这种结构的前提是信息必须是关系紧密的功能场景，否则信息会出现错乱，并增加用户的认知负担。

自然结构

自然结构不会遵循任何一致的模式。节点是逐一被连接起来的，同时这种结构没有太强烈的分类概念。自然结构对于探索一系列关系不明确或一直在演变的主题是很合适的。但是自然结构没有给用户提供一个清晰的指示，从而让用户能感觉他们在结构中的哪个部分。

自然结构具有随机性和不确定性，随着算法的提升，这种结构应用越来越广泛。最常见的就是各种推荐信息流，电商平台、音视频、资讯平台等产品都主打推荐频道，透过投喂的方式，吸引没有明确需求的用户，给他们更多的选择。

不过自然结构的随机性意味着用户无法建立固定的信息架构认知，所以自然结构不会单独存在，只是对信息架构的补充。另外在 B 端产品中，用户通常具有明确的任务和目标，所以自然结构并不适用于 B 端产品。

线性结构

线性结构来自于你最熟悉的线下媒体。连贯的语言流程是最基本的信息结构类型，而且处理它的装置早已被深深地植入我们的大脑中了。书、文章、音像和录像全部都被设计成一种线性的体验。

线性结构是比较单一的信息结构，信息有先后顺序要求，逐层向下递进，并且没有交叉。这种组织形式决定了线形结构主要用在简单产品或者产品信息构架的末端场景中。

例如在微信读书中，打开书籍后用户只能一页页翻看，不会与其他书籍有交叉关联。在 OA，电子邮箱等产品中，每一个流程，每一封邮件都是线性的、相互独立的，信息之间不会增加不必要的关联。

2. 标签系统

标签系统指的是整个产品信息节点的命名体系，静态展示产品信息架构的具体内容，包含文字和图片（图标）2 种信息。标签系统需要符合用户的认知习惯，减少用户的学习成本。在日常设计工作中，标签系统需要注意以下 3 个方面：

① 标签内容的准确性

标签定义时，需要准确地表达信息的内容项。举两个例子：

在 C 端领域为了提高用户的点击率，经常会遇到一些信息融合累加的设计形式。例如宣传用语是“立享 300 元福利”，用户点开一看，或许只是 10 张优惠券。这种设计利用了用户“贪便宜”的心理，已经成为了行业约定俗成的表达形式，倒也可以接受。

不过之前有个营销弹窗的案例，用户点击后跳转到活动页面，然后逐个领券。弹窗中按钮有两种方案，A 方案是“开心收下”，B 方案是“立即领取”。

虽然后台有历史数据显示，“开心收下”的文案用户点击率比较高，并不意味着这个文案可以用在所有场景下。“开心收下”意味着完成领取并入账，“立即领取”则是需要继续操作才能完成领取，两者适用于不同的场景。

标签系统首先要考虑表达的准确性，要符合用户的心智模型以及所代表的行为模式。

② 优先选用行业通用的术语或图标

尼尔森十大可用性原则中要求「贴近用户真实环境」。在标签定义的时候，尽量使用目标用户的语言。尤其在 B 端产品中，不少名词对设计师而言比较陌生。但是对专业领域的用户，这些都是日常工作术语，早已达成了共识。如果做出改变，反而会增加用户认知成本。

所以设计师要克服自己的认知缺陷。一方面要了解业务、通过用户调研，建立更符合用户认知的标签系统，另一方面也可以参考竞品来学习和应用信息标签。

为了保证新、老用户的快速了解系统，最大程度地降低学习成本，可以在标签旁边添加注释进一步说明。例如英文缩写术语、容易引起歧义的指标、不易理解的标签等等。

对于图标，有些是各个产品通用的形式，用户很容理解。例如「设置」、「删除」、「帮助」等。还有相当大一部分图标很难准确表达出内在信息，就需要增加文字信息，辅助信息表达。

③ 标签信息简洁高效

标签系统既要完整表达信息，也要注意信息的简洁高效。

例如下图中菜单命名，大量重复的信息增加了信息识别的难度，并且名称字数没有控制导致内容截断，也会增加用户的操作成本。

3. 导航系统

导航系统是信息架构的动态交互逻辑。一方面能够告诉用户当前所处于的位置，页面信息的层级归属，让用户不会在产品中迷失方向。另一方面导航系统实现了信息的动态联接，用户可以依靠导航系统在不同的层级结构中「闪转腾挪」，高效操作。

导航系统分为 4 大类：全局导航、局部导航、情景式导航、辅助导航。

① 全局导航

全局导航是面向整个产品的导航形式，通常位于系统的整体框架中，实现在所有页面中可见、可操作。所以全局导航也只是对产品的核心、关键功能和部分即时功能开放。

例如信息框架中的一、二级的信息，或者消息、用户管理这类即时、强管理的内容。

② 局部导航

局部导航是全局导航的补充，对于复杂的产品，局部导航非常有必要，避免全局导航变得臃肿复杂，有利于信息逐级有序地展开。

③ 情景式导航

情景式导航又称为上下文导航，指的是根据当前场景或者内容产生的信息链接关系。例如文章内的超链接，或者是标题信息等，点击可以跳转新的网页、下载文件或指定某个对象等。情景导航中可以承载产品外部的内容链接，不必完全是本产品中的内容。

④ 辅助导航

辅助导航包括网站地图，网站索引，网站指南等辅助类型的导航。

4. 搜索系统

搜索系统解决的是大容量、高密度信息的定位问题。大到全产品范围内的搜索，小到当前列表搜索，基本成了产品中的必备功能。即使有些产品中搜索功能，用户的使用频率不高，也是需要配备的，方便用户的不时之需。

「搜索」系统对外呈现或许是一个带着图标的输入框，甚至只是一个图标。但是操作则是一个多种状态的融合的交互过程，包括了输入前、输入中、搜索结果展示等内容。系统比较复杂，大家可以去找一些专门的文章学习，也可以看一下我之前的文章：

如何做好搜索设计？我总结了3个原则！ 搜索设计看似简单，展现形式上只有一个输入框和搜索按钮就可以了，但是里面隐藏了很多交互细节。

阅读文章 >

小结

以上就是信息架构的 4 大组成系统。信息架构的最终目标是为了让用户能够更快速地获取信息。在实际应用过程中，可以根据产品类型，用户群体做出内容取舍。

值得注意的是，信息架构最重要的标准，不是“整个过程一共需要多少步骤”，而是“用户是否认为每一个步骤都是合理的”，以及“当前的步骤是否自然地延续了上一个步骤中的任务”。

五、信息架构的影响因素 信息架构是为产品和用户服务的，因此信息架构的影响因素主要是来自于这两个方面。

1. 产品视角 ① 产品目标及定位

同类型产品的目标、定位、用户群体并不是完全相同的，在各自的细分领域形成了各自的差异化优势。这些都会直接和间接地影响产品的信息架构。

例如国内 3 大电商平台的主导航基本一致，但也不是完全相同，大家可以体会和思考下其中的差别。

② 产品类型

上面不少案例提及了 B 端和 C 端产品，由于产品类型、适配终端、产品目标等方面的影响，信息架构有着比较明显的差异。同样都是 C 端产品，购物类产品重搜索与推荐，金融证券类产品则是重功能导向，界面看似一致的，但是信息架构中组织系统、搜索系统背后的逻辑也存在较大差异。

③ 产品复杂度

简单产品的信息架构也会比较简单，或许线性的组织结构就可以搭建起核心业务的信息架构，例如 QQ 邮箱。

复杂产品的信息架构会运用多种组织结构方式，相关的标签系统、导航系统、搜索系统都会加强。例如云类产品的标签系统，既要考虑整体的一致性，又要明确各个产品间的差别。搜索功能也不仅限于产品功能，还会拓展到活动优惠、帮助文档等内容，让用户搜索得更彻底。

2. 用户视角 ① 用户需求

产品不能一味的只考虑自己的产品目标，还要考虑用户的接受程度。就好比舞台上高雅的古典歌剧，只顾展示自己的专业能力，而底下观众根本听不懂唱的内容，必然无法引起观众兴趣。

如果不重视用户需求，产品设计时，只顾着各种高级能力输出、各种复杂的产品流程，但是从没有考虑用户是否需要这样的产品，带来的结果就是信息架构的无序扩张、内容庞杂、过程混乱，最终成为产品体系的「自嗨」。

② 用户认知能力

不同的用户之间认知能力有很大的差别，需要面向目标客户群体完成信息架构。

例如之前做过门店后台管理系统改版设计，通过前期调研发现，店员们年龄偏大、学历不高，老版本的信息架构虽然足够的大而全，但是核心功能并不凸显，用户操作流程也被拉长。因此在改版设计时，信息架构做了精简，优先聚焦打造用户核心任务，减少信息的复杂度。

六、信息架构的设计原则 将信息架构抽离出来，其实包括了组织体系、展示形式和操作体验 3 个环节。相应的也会有 3 个设计原则。

1. 延展性

产品是不断成长迭代的，信息架构需要具有兼容性和弹性，可以适应多个层级的扩展或精简，保证一定迭代周期内的架构稳定。频繁变动的信息架构必然会带来产品的研发成本提高，并且增加用户的学习成本。

2. 易学性

信息架构需要有一套准确的分类标准，能够指导后续架构的优化迭代，也可以便于用户理解和学习。细分下来包含了逻辑性和一致性两个方面。逻辑性则体现在信息之间的关联关系，实现用户链路的准确、高效。一致性体现在分类方式、分类结构等方面，便于用户认知。

3. 易用性

上文提到过，信息架构的的广度和深度在一定程度上决定了操作体验。设计时要做好信息架构的平衡性，避免只是从业务角度出发，出现十几个一级导航菜单并存的局面。

写在最后 信息架构是个复杂的系统，并不是设计师个人的工作，也不应该从零开始构建。而是在产品功能架构或者产品规格清单基础上，从用户需求和场景出发，梳理出来的符合用户体验逻辑的产品骨架。

信息架构直接决定了后续产品设计的组织脉络，因此准确有效的信息架构是产品战略落地过程中重要的一环。设计师需要拥有相关的知识和能力，才能在设计工作中产出合理的设计方案。

信息架构内容很多，文章是笔者个人的观点，难免存在不足之处，欢迎大家交流指正。

欢迎关注作者微信公众号：「子牧UXD」

本文从消息通知的基本知识、消息通知渠道、让用户再开启通知权限的方法、提高消息触达率的小技巧等4个章节，帮你掌握消息推送设计。更多消息通知设计干货：产品设计干货！5种消息通知设计的优缺点分析编者按：产品设计中常见的消息通知有哪些类型？

本文从消息通知的基本知识、消息通知渠道、让用户再开启通知权限的方法、提高消息触达率的小技巧等4个章节，帮你掌握消息 推送设计 。

更多消息 通知设计 干货：

产品设计干货！5种消息通知设计的优缺点分析 编者按：产品设计中常见的消息通知有哪些类型？

阅读文章 >

前言 通知是产品中极其重要的一部分，它能快速将内容的状态及变化通过不同的方式传达给用户，以便用户在收到信息后根据所传递的内容及时做出应对策略。

在这里，有一个很现实的问题，很多产品喜欢一股脑的把有效的/无效的、重要的/不重要的、用户想知道的/不想知道的等所有信息通通推送给用户。那么，你的推送渠道真的用对了吗？是否做了信息优先级区分？推送时间段是否有效？站在用户角度，下面这些场景你肯定碰到过：

手机屏幕总是频繁弹出信息，接二连三的震动、提示音让你一怒之下卸载了一些不太常用的APP； 桌面图标99+、主页的消息入口99+、进入消息分类还是99+，清理起来非常麻烦，还不如关闭几个分类通知，少一个也能缓口气； 一天少看了几个小视频，好不容易节省出来的流量被通知无情的消耗，还不如关闭系统通知权限来得快； 每隔一段时间，都要在手机短信中回复一大堆TD（退订），想吐的感觉；

在频繁地打扰下，用户关闭了一个个通知权限、甚至一度卸载 APP。不难看出，好的消息通知能巧妙的将用户求留住（部分用户利用通知就能保持对微信、QQ 的控制欲），做的不好就会起到负面作用、失去了消息通知的初衷，这里面最需要把控就是推送的一个“度”。

用户可能因为一条走心的推送而转化、也可能因为被打扰而放弃使用，站在设计角度，需尽可能打造让用户更喜欢的通知系统。那么，对于不同的业务需求及使用场景，又该如何差异化的进行消息推送，笔者通过本文进行分析总结，与大家一起了解。

一、消息通知的基本知识 1. 什么是消息通知

消息通知是产品提供的一项服务，能够及时将产品的期待或内容的变化、根据其等级权重合理的通过不同渠道及时同步给用户，常见的如互动提醒、老用户召回、活动拉新、产品更新或帮助提醒等，通过站内红点、弹窗、短信、邮件等方式与用户进行信息交换。

2. 消息推送的目的

用户层面，方便及时获取到想要知道的信息、以及对信息交换的控制权。例如：用户发布一条新的短视频想要对评论/点赞及时掌控、给心上人发了信息想在第一时间看到回复...等，产品也是借此用户对内容的控制欲，利用消息推送提升用户的使用体验。

产品层面，通过主动推送想让用户知道的信息，以达到新/老用户转化的目的。例如：通过手机短信形式发放优惠券对老用户召回、应用内通知或桌面推送对用户拉新...等，以此提高产品收益，获取更大的商业价值。

3. 通知设计的基本原则

首先，一个好的消息系统首先需要将消息内容设计的全面，以便用户通过消息通知能准确无误的了解到对应内容；

其次，消息的触达方式需合理有效，必须提供便捷的操作入口以供用户及时反馈；

另外，为了避免过于打扰用户，需选择合理的推送渠道，提高用户触达概率及反馈效率。

二、消息通知渠道 消息通知渠道分为应用内通知应用外通知。应用内通知主要来源于消息中心或系统主动触发的弹窗来体现，而应用外通知包括桌面图标红点、手机短信、电子邮件、push、公众号信息（需绑定）等渠道推送。

1. 应用内通知

① 消息功能入口

消息功能入口提示也称为红点提示，主要有底部 Tad 栏、首页右上角、个人中心右上角三种形式。当有新的通知出现时，对应图标的右上角会出现小红点提示，清晰明了，关于小红点设计，之前这篇文章有详细说明：

用6大章节，帮你完整掌握界面中的小红点设计 UI设计中最常见的小红点该如何设计？

阅读文章 >

红点提示的用户触达率较高，但需要用户在登录状态下才能查看，比如订单状态变化、用户与用户/产品之间的互动消息、产品活动通知等。

② 消息列表

当产品的消息类型较多时，点击消息功能入口即可跳转至二级分类列表。与上述相比，消息列表的内容则更加清晰，通过第一次消息入口功能的引导触发，这里的用户触达率将成倍增加。

③ 弹窗通知

以弹窗的形式覆盖在页面内容顶层，阻碍用户的当前操作并迫使用户对弹窗做出决策，可以是系统主动弹出或用户手动触发，对用户的干扰极大。

弹窗通知最大的优势在于会 100%被用户看到，无法忽略，否则将不能进行其他操作，很适合产品的一些重要事件提醒，例如应用升级、活动通知、优惠券引流等。

④ Toast 通知

Toast 通知是用户在操作之后给出的即时反馈，与当前页面内容关联性极强，但不会中断用户的操作，出现的时间很短，一般持续 3 秒后自动消失，对用户的干扰也比较小。

需要注意的是，Toast 容易在用户不注意的情况下被遗漏，所以适合用于操作后不影响大局、且不可二次操作、不可逆转的轻量提示，例如删除成功、提交成功等。

2. 应用外推送

① 桌面小红点

小红点通常以圆点+数字的形式出现在图标右上角，用来提示应用内的未读消息数量，进入应用查看或清除后小红点则会消失。桌面小红点有一个必备前提，需要同时开启设备和应用内的通知权限方能接收提醒通知。

在部分应用中，桌面小红点具有较大的价值，能对用户产生积极的影响，使用频率得到进一定的提升。例如：社交类应用中的私信、评论、点赞等；商家端的咨询信息、下单提醒等，用户在看到后都会有强烈的点击欲望，对一些数据的提升起到推动作用。

② PUSH 推送

PUSH 推送通知常见于设备顶部横幅（几秒后消失）、通知中心以及锁屏后的中部区域，用户可从卡片中的内容获取信息类型及重要程度，用以决策是否需要立即打开。

这种推送方式，用户几乎很难忽略，不处理的话会长时间浮于屏幕之上，非常适合价值及时效性较高的消息通知。除视觉提醒之外，还可通过听觉触达用户，例如支付号、微信的收款信息等，不过依然要同时开启设备和应用内的通知权限。

③ 手机短信

短信推送是大家很熟悉的通知渠道了，毕竟现在都是用手机注册账号，手机号获取难度几乎为“0”，常见的有验证码短信（用户请求）、营销短信（产品推送）两种：

验证码类似“一问一答”的互动，没有什么特别的玩法；

营销类短信对于拉取新用户、老用户召回、节日/活动促销能起到不可替代作用，产品可通过短信发送图片、文字以及超链接，内容的时效性、用户的触达率都相对较高。

着重说明一点，因为短信通知的成本较高，在使用之前需要足够的思考分析，细分用户群体做到精准投放，避免所花费的成本与产生的价值不成正比。另外，如果需要放超链接，那么短信内容一定要有足够的说服力及吸引力，总是被用户当做诈骗短信删除、举报的话还不如不放。

为了减少对用户的打扰，让产品更人性化，一般会在短信结尾提供 TD（退订）提示，用户回复即可取消后续的推送，但是否真的取消成功，这就得看产品了(¬◡¬)...

④ 电子邮件

电子邮件推送方式使用的并不多，一方面需要产品有 web 端服务，纯粹的移动端 APP 邮件推送不会有什么效果；另一方面，绝大多数的用户登录电子邮箱并不频繁，还容易被用户一键清理或误删。

电子邮件唯一的好处就是用户可通过超链接直达内容出处，相比 APP 应用，免去了下载等一系列操作，还可以长时间滞留，便于用户随时查看或添加星标，处理时间段选择较为灵活，很适合 web 端服务。针对一些商业化的邮件推送，也需要花费一定的经济成本。

产品获取用户邮箱地址的难度较大（邮箱账号除外），不难理解，使用手机号一键登录、验证码登录、第三方账号登录远比邮箱地址登录要方便的多。除此之外，还可以通过个人设置的添加邮箱、问卷调查的邮箱地址预留来获取，不过这就要看用户的主动意愿了。

⑤ 公众号消息

公众号背靠社交应用，普及程度及用户触达率是极高的，不过这需要产品利用部分业务、活动为导向，引导用户关注公众号后方能接收到消息通知。

目前公众号只能向用户发送符合部分场景要求的服务通知，例如刷卡通知、物流轨迹变化、商品购买等。如果预算足够的话，还可以购买公众号列表、内容详情页、朋友圈等产品广告位进行特定用户群体推送，无需用户关注也可以看到并进行转化。

三、让用户再开启通知权限 用户一旦关闭通知权限，对产品来说无疑是一个损失，这意味着没有消息通知的推动，用户的使用频率以及与产品之间的互动显然会减少（就连夫妻之间都需要时常互动与沟通交流，何况对于有选择余地的产品），时间长了，用户转投其他产品的“怀抱”也不是不可能。

有没有想过，用户只是关闭通知权限而已，并没有卸载 APP，真的就没办法了吗？是不是该做点什么...

1. 寻找关闭原因

用户之所以还未卸载 APP，说明还有价值，归根结底，关闭通知权限的原因都是因为消息的“狂轰乱炸”带来的无尽骚扰，几乎没有例外，而产品还会添上一把火，用户再次打开 APP 时无底线的催促用户再度开启，耗尽用户最后一点耐心后，或许再也没有机会了。

这个时候，设计师考虑的不是频繁提醒用户开启，而是用户关闭通知的真正原因（“狂轰乱炸”只是概括），细化各种可能性，然后从中找出机会点，但凡有所改进都值得试一试，毕竟相比什么都不做不会更糟。这么解释似乎毫无说服力，下面举个例子：

当产品中的某项免费服务突然有一天开始收费了，但受到了大多数用户的抵触，这个时候你该怎么做，是无视用户诉求继续收费、还是恢复到之前的免费？这并不是一个选择题，继续收费会导致大量用户流失、恢复免费可能连维持运营成本都难，所以不经思索的选择草草收场、连下下策都算不上。用户抵触的原因可能收费过高或是与实际价值不符，有没有想过利用限时折扣、附加其他增值服务（成本较小）或者组合捆绑销售也不失为一种策略。

那么，到底该如何做既能愉快的发送消息通知、还能能挽回用户的心呢？

2. 引导二次开启

用户关闭通知权限，并非没有需求，最典型的就是在某宝、某东加了满满一“车”商品等待降价，然后抱怨消息通知太吵关掉了通知权限，最后就是无法收到折扣通知、还把问题怪在了 APP 身上，着实太冤。用户只要还有需求，通知权限就还有被重新开启的机会。

① 损失厌恶/利益引诱

首先，我们需要找出对应的价值点，利用优秀的文案给予用户思考的余地，用户每多思考一会，结果都有可能发生改变。

人们都讨厌失去，对于损失的不可控很难接受，在引导用户开启通知权限时，需要强调不开启会失去什么，毕竟面对“得到”和“失去”时，损失更加让人难以忍受，例如物流产品告诉用户“未开启通知，将错过重要的快递信息”。还可以通过激励等进行利益引诱，如“开启后能及时获取红包卡券、折扣通知”等，并提供快捷通道，促使用户重新开启通知权限。

② 消息分类/分别处理

每种类型的通知都不可能符合所有用户的“胃口”，针对社交、电商类产品，可将通知类型分类处理，用户希望接收哪种类型的消息单独开启即可。

例如支付宝将消息拆分为多个类型；京东还增加了午休免打扰设置，开启后在 12：30-13：30 不会收到任何消息提醒；微信群过多、消息太吵时，开启免打扰又担心错过重要人的信息，于是微信在去年上线了开启群消息免打扰后、可设置群内 4 个人的消息正常通知，算是比较人性化的设计了。

③ 提供关闭/关不彻底

部分产品提供了关闭消息通知功能，但又关不彻底，这是产品基于妥协的基础上，依然在低频推送消息的“流氓”玩法，与用户完全关闭相比，已经算是不错的结果了。

常见于 PC 客户端，就像很多软件的插件一样，不管怎么关，总是无法彻底关闭，甚至还将开启操作伪装成其他内容引导用户误触；手机短信推送也会有这种情况，用户回复过“退订”后依然会收到相关短信。

这种方式需谨慎使用，在用户关闭通知后，需通过后续推送内容的质量、频率试探用户底线，然后逐渐提升，切不可无视用户操作。

四、提高消息触达率的小技巧 1. 减少重复通知

反复推送相同的内容只会让用户更加反感，回复退订、卸载应用都可能在这一刻发生。

很明显，消息发出后，如果用户的触达率较高就没必要再次推送。反之触达率较低，重复推送会让用户有种被催促、胁迫的感觉，适得其反，触达率低有没有可能是文案不够友好、表达不够清晰或者吸引力不够？即便同一件事情，也尽量使用不同的表达方式，如何想办法重新引起用户的关注才是关键点。

2. 言语得当、避免误会

中华文字博大精深，且有 56 个民族，其性格习惯各异，特别在利用当前社会热点、媒介进行的营销推送时，尽可能规避掉敏感信息，如地域/民族歧视、性暗示等。

3. 细分受众群体

很多时候，消息推送太少无法满足产品目标、太多则会惹恼用户导致通知权限被彻底关闭，所以不仅要考虑消息推送频率，更重要的是对受众群体进行分类、分别推送，不要每次都一股脑的将消息发给所有用户，当然，能做到千人千面（成本大）则会更好。

4. 内容清晰简洁

没有用户愿意在不明所以的情况下来看长篇大论的内容，需确保消息内容简单直接、清晰易懂，并符合用户认知习惯，还得保持友好的语气以及富有创造力的品牌形象。

处于营销目的时，可利用感兴趣的事件/事物勾起用户的点击欲望，例如网络热词、时下热点等，笔者虽然并不提倡“标题党”，但不得不说，很多标题党都能起到不错的效果。

5. 提供“下一步”入口

消息通知需要一个有效操作入口，并且在消息内容中有对应的指向，点击应用内通知切换 APP 界面、应用外推送链接跳转至 web 页，从始至终都需要为用户提供一个查看更多内容或参与的有效途径。

五、结语 消息通知设计的主要目的是在正确的时间、以正确的方式将内容呈现给用户，并提高产品的转化率，不管用户愿不愿意接受，这始终都是一个呈现信息的不错途径。

本文主要总结了消息的通知渠道、常见问题处理、提升用户触达率的方法，以帮助新手设计师快速掌握完整的消息系统。或许最终的结果事与愿违，但不能否认其魔力，需要做好的是确保消息内容质量、对应的受众群体及合理的推送渠道，相信总有一种方式适合你产品。

欢迎关注作者微信公众号：「能量眼球」