今天要分享的，是后台和社群里几乎每天都有人问的交互文档该怎么写的问题。不只是想要往交互设计师方向发展的新手，还有工作中要负责交互问题的产品经理、设计师，都对它存在大量的疑问。所以我们在今天这篇分享里完成一次深入的扫盲。

今天要分享的，是后台和社群里几乎每天都有人问的 交互文档 该怎么写的问题。不只是想要往 交互设计 师方向发展的新手，还有工作中要负责交互问题的产品经理、 设计师 ，都对它存在大量的疑问。

所以我们在今天这篇分享里完成一次深入的扫盲。

[link 用一份大厂级的完整交互文档案例，帮你深入学习交互细节 – 优设网 – 学设计上优设 (uisdc.com) ]

一、交互文档的基本认识 1. 交互文档是什么

交互文档，是一份用来解释项目交互方式、内容、规则的说明文档，也叫 DRD ( Design Requirement Document )。

在过去的分享中，我们有解释过，B 端项目会包含大量的交互内容，需要前期绘制交互原型来展示和确认交互方案。

如果是比较简单的小型项目，或成熟产品的小迭代，那么这样的连线图确实就足以表达交互的意图和方案了，写太多注释文字反而会画蛇添足提高观看者的认知成本。

但是，如果项目和展示的流程内容，逻辑非常复杂，包含非常多的选项和状态，那么单靠原型和连线是绝对不够的，添加更多的图文说明就变得非常有必要了。

同时在团队协作场景中，就需要将这些内容制作成一份规范的 “文档”，用来进行统一的展示、备份、归档。

所以做交互光靠画交互原型是不够的，“文档” 就成为必要的输出成果。

2. 它和产品文档的区别

在产品侧（非开发），文档就有好几类：

商业需求文档：BRD，Business Requirement Document 市场需求文档：MRD，Market Requirement Document 产品需求文档：PRD，Product Requirement Document 交互说明文档：DRD，Design Requirement Document 设计规范文档：DGD，Design Guidline Document

BRD 和 MRD 是一个产品经理行业内部也在反复科普讨论的东西，和我们没多大关系可以暂时忽略。设计规范文档 DGD 大家应该也有概念，比较容易辨识，也不需要在这里强调。

而产品需求文档 PRD，是和交互文档最撞脸的文档类型。它们的文档规格、样式几乎一致，还包含大量界限模糊、相互交叉的内容范畴，会对新手的理解造成很大的不便。

要理解产品文档和交互文档的核心差异，就得从他们各自的工作职能说起，产品经理的主要产出是解释产品要做的功能和逻辑，所有的原型和连线的目标都是为了解释功能本身。

部分产品经理会 “顺带” 在这个基础上增加交互的元素，以及相关的说明。这恰恰是问题的关键所在，因为产品经理制作产品原型的过程是可以覆盖一部分交互信息的，所以很多设计师也天真的认为交互内容是应该由产品来出的。

这当中一定要关注里面的 “顺带”，因为一份有效的 PRD 主旨一定不是以交互为核心的，在面对需要大量图例、连线、方案、解释的交互问题下面，产品经理往往选择直接跳过，只把功能描述清楚，剩下的就交给交互设计师还是 UI 设计师来完成具体的交互方案。

所以，交互文档就是在产品文档的基础上，进行交互内容的补充，专注于解释项目的交互内容，让设计师和前端开发可以更直观的理解后续的工作内容。

来自 UEDART 的付费文档，案例演示地址：http://vip.uedart.com/interactive.html

交互文档和产品文档是相互独立和补充的，当产品文档无法完成对产品交互的有效解释时，我们就应该选择输出独立的交互文档，来提升项目协作的效率。

二、交互文档的工具选择 1. 主流的交互文档工具说明

主流的交互文档输出有三种方式：

Axure/墨刀 导出 一般文档制作 线上 Wiki 记录 Axure 和墨刀是用来制作产品原型的软件工具，也是目前在产品经理、交互设计行业中应用最广泛的原型工具。

它的主要优势，在于可以比较方便的制作可交互的组件、连线、导出。

当然，光制作原型图并不能叫交互文档，它们还提供了比较全面的内容标注、文本记录、图形绘制的功能。

这就可以让我们完成原型绘制以后，结合页面结构的管理，添加交互文档所需的其它信息，并最终输出文件。

而在一些比较传统的行业或外包领域，使用的记录文档往往要使用 Word 或 PPT（方便开会演示或要打印）。这就要在原型完成以后，导出原型图例，并使用这些文档软件进行文字的记录和连线。

受限于 Word、PPT 的布局限制（强行分页），使用它们做交互文档是非常难受的，并且这些文档需要保存到本地，存在各种文档版本管理的问题。

所以还有另一部分也希望使用普通文档格式记录，并满足云端同步、备份、版本管理的团队，就会使用 Wiki 类的工具来制作交互文档。如语雀、飞书、Conflence、Notion 等工具。

如果只是一些比较小的项目迭代、一次性使用的交互文档，使用前两种方法都可以胜任。而真正大型、系统性的交互文档，往往都使用团队内部的 Wiki 进行创建和管理。和设计稿不同，这些使用了内部账号或需要内网访问的文档资料，是不会没事发到网上来分享的，这也是在网上找不到完整交互文档的主要原因。

2. B 端设计师的交互文档工具建议

和你们网上可以找到的大多数交互设计干货不同，我即不推荐你们使用 Axure/墨刀 来画原型，也不推荐用它们或普通文档、Wiki 的形式来输出交互文档。因为：

—— 太低效了！

产品经理和交互设计师的主要产出物就是文档，自然可以耗费比较多的精力和时间去制作原型和编写内容。而 UI 设计师的主要工作肯定是最终的视觉界面和交付，所以用最复杂的方法去制作交互文档，显然是不合理的。

同时还要提一句，Axure/墨刀 等软件用来制作一般的线框图原型，效率实在是太低了。且绝大多数情况下的页面跳转、交互都是可以忽略不做的。而且随页面增加，它的左侧导航层级、数量会非常庞大，导致查找和浏览的效率进一步降低。

在我自己的所有课程和分享中，我始终都建议直接使用你们正在用的云端 UI 设计软件直接绘制产品、交互原型并输出文档，如即时设计或 Figma。

原因包含：

速度快：能用 Axure 五分之一的时间完成所有原型绘制 可复用：做好的原型方便复用，而且可以直接在原型上完成后续设计 交互性：对于表达交互流程所需的基础跳转和动效都能满足 更自由：一些需要复杂图文结合的说明方式不再受到普通文档布局限制 比如下面这样的原型案例，就可以通过一个简单的链接快速分享出去，或者添加团队成员自由查看。

在我过去长期的实践体会中，这种方式是优势最明显，效率最高，最易懂，也符合 UI 设计师工作需要的。如果项目中有其它因素要求，你们也可以选择前面的方式输出。

任何文档的目标都是为了书面记录和让看的人更容易理解我们要表达的信息，不要被固定的方法局限住，要努力去探索适合团队当前场景的方式。

二、交互文档的制作过程 1. 文档框架结构制定

前面把基本的信息聊完了，这里就来具体讲讲交互文档应该如何进行输出。

当然，输出交互文档前需要先理解交互是什么，交互设计的具体设计内容和步骤。交互文档是对你已经设计出来的方案的书面记录，你不能在对交互一无所知的情况下强行编写文档。

交互文档制作首先要确认文档的记录内容和文档结构。

记录内容指的是你在该文档准备放哪些交互内容进去，并不是每次项目设计都要把项目所有页面和流程交互都重做一遍。

比如一次中等规模的迭代，新增几个通用的列表页面，调整了一些细节字段，增加了一个功能流程。那么文档重点记录内容肯定就是流程而不是所有页面。毕竟通用的列表页和细节更改，在产品需求评审阶段就可以完整的解释，而功能流程则不行。

如果是全新的项目，包含数十上百个页面。把所有流程、页面的交互内容全部表现出来的工作量是顶不住的，在绘制原型的过程中，你就会发现有大量的重复页面、流程和交互。所以制作文档就要有目的性的对重复的内容进行合并，以及只保留重要的页面和流程。

具体该放什么要考虑项目的实际情况，需要设计师自己评估。除此以外，标准的交互文档里面会包含背景介绍、编辑日志、文字图例、业务流程、名词解释、页面结构等等。

这些 “文绉绉” 的细节，并不是必备的，你可以根据当前场景自己决定需要加哪些。比如项目、业务背景前面的产品需求已经讲清楚了，业务流程、名词解释团队成员也都了如指掌的时候，那么这些页面模块就完全没有放的必要。

并且，基于前面对放置内容的考虑，结构的顺序并不一定要类似下方案例，完全按照产品的导航目录来走。

所以，根据一个中等规模的迭代项目，我会制定一个这样的一级文档结构。

基本信息：项目的简单信息，快速目录，参与人信息等 基本组件：涉及的相关组件展示和交互规则说明 原型一览：本次迭代涉及的所有页面原型和连线一览 流程介绍 1：流程 1 的所有页面、状态、说明展示 流程介绍 2：流程 2 的所有页面、状态、说明展示 流程介绍 3：流程 3 的所有页面、状态、说明展示 每个 1 级文档结构对应 UI 软件中的 Page 目录，力求所需的 Page 数量越少越好，而不是像 Axure 的做法一样密密麻麻的。

结构可以根据复杂程度做进一步的细分，他像写文章的大纲一样，帮助我们提前规划好后续完成文档所需的内容和工作量。

2. 关于连线和标注信息

有了结构，就要在对应的 Page 中填充内容了。其中一般的文字介绍、流程图、思维导图，只要正常输入或将导出的图例黏贴进来就可以。

而针对具体的交互内容，流程解释上，则重点处理连线和标注说明。比如下面是我自己在课程演示中的一个简单的交互流程演示案例。

在 UI 软件中，制作连线其实是很简答的事情，只要画出一个直线，再设置箭头和尾部图形、描边色彩和粗细即可。

然后，将该线段的图层放置在画布之外，起点放置在触发交互的区域之中，终点尖头则紧贴目标画布的边缘（不用特意延伸进画布内）。如果使用水平、垂直的方式连接两个画布，那就可以双击进去添加锚点制作 90 度的折角。

连线的应用是非常简单的操作，不要舍近求远通过插件或是其它的一些功能来实现。而除此之外，我在文档中添加的解释性文本主要有两种，交互事件和交互规则。

交互事件代表了连线的两个页面是如何被触发跳转的，所以我会在线段中帖一个文字卡片，解释触发的条件和交互操作是什么。

然后，就是页面或流程中的交互细则，包含两个部分，数字标签和对应文字注释。它们都是用 Auto layout 可以快速制作出来的组件，每次要做备注的时候，只要复制标签到页面上，设置对应的数值，再将右侧的文字卡片复制到页面旁边，再改上对应的数字、内容信息即可。

在设计软件中，画布的自由度极高，你想要怎么备注和添加内容都没关系，只要在内容翔实的基础上保证 —— 团队成员能看懂，就是一份优秀的交互文档。多在绘制过程中和同事沟通，优化展示的做法，可以避免很多会出现的问题，进一步加速我们的制作效率。

3. 文档的团队协作应用

将文档全部做完以后，最终就是关于交付和协作的问题了。

既然我们使用线上的 UI 软件来完成交互文档的制作，那么文件设置公开访问权限，再分享链接自然是最简单的办法。

单每次项目分享个网页链接，活着并行有好几个项目，需要其它成员自己去收藏网址，也是挺麻烦的。所以尽量充分应用软件中的团队协作功能，通关创建一个团队，添加成员，让他们自行查看当前文件目录中的交互文档。

查看过程中，团队其它成员可以通过评论的功能对交互内容进行纠错、提问、建议，方便我们进行优化改进。

通过这种简单高效的文档协作模式，我们可以非常快的完成整体交互内容的定稿，并开始后续的工作。

再回到前面的话题，我们是 UI 设计师，不是全职交互设计。原型文档输出完了，下一步可是要做视觉界面的，所以交互文档就可以不用管了嘛？

交互文档的最佳状态是 —— **应用最终界面图例解释交互内容**。

也就是当我们把所有页面内容设计完成后，强烈建议将界面的展示和交互文档进行整合。除了前端和产品可以看到最终的交互落地效果外（有时候最终设计和前面的交互不一致），还可以直接通过这个文档查看界面数值标注，而不用往返于交互和设计文档来回切换，这才能让文档作用最大化。

四、结尾 以上就是关于交互文档的相关解释，下一篇，我们会聚焦在和表单有关的交互干货分享。想要看的同学记得在留言中发出来。

我们下篇再贱～

欢迎关注作者的微信公众号：「超人的电话亭」

本文从理论、优秀产品案例、如何运用到B端产品3个方面，深度解析「美即适用」效应。在打造一个产品时，不仅仅需要考虑它的好用与功能价值，同时也应当考虑产品在美感方面的设计，一个美观的设计会影响用户观感。本文将探索美即适用效应以及对产品的影响，希望对你有所启发。

本文从理论、优秀产品案例、如何运用到 B端产品 3个方面，深度解析「 美即适用 」效应。

[link 超全！B端通用界面设计法则全方位科普！ – 优设网 – 学设计上优设 (uisdc.com) ]

在打造一个产品时，不仅仅需要考虑它的好用与功能价值，同时也应当考虑产品在美感方面的设计，一个美观的设计会影响用户观感。本文将探索美即适用效应以及对产品的影响，希望对你有所启发。

为什么会有设计师的存在，人们通常认为美观的设计更为实用。

美即适用效应你或许听说过，可能不知道在哪里听说的，这篇文章我会和你一起探索美即适用效应以及对产品的影响。

一、背景 为什么会说到这个话题，是因为前段时间在公司内部组织了体验分享会，会后固定的吐槽时间，一产品部门的产品经理指责设计部门的界面效果不好看，他提到了美即适用原则。我还是想自己应该深入了解一下这个效应，一方面扩充自己的知识库，另一方面也想积累更多案例。

二、理论介绍 “美即适用效应”法则是指一种心理感应现象：人们认为美好的设计更好用。直到现在我们大多数人也都会认为长得好看就是有优势。

许多实验证实了这个效应，而且设计的认可度、使用情况和性能都受到了这个效应的深刻影响。

美即适用效应最早是在人机交互领域于 1995 年进行研究。

日立设计中心的研究员 Masaaki Kurosu 和 Kaori Kashimura 测试了 26 种 ATM 的 UI，要求 252 名研究参与者对每种设计的易用性进行评分使用以及美学吸引力。

他们发现，参与者的审美吸引力等级与感知的易用性之间的关联要强于参与者的审美吸引力等级与实际易用性之间的关联。

Kurosu 和 Kashimura 得出的结论是，即使尝试评估系统的基本功能，用户也会受到任何给定界面的美观的强烈影响。

表观可用性的决定因素对真实可用性的影响系数大多在 0.000-0.310 之间，而界⾯美观度这个数据达到了 0.589。

美观的设计会在人们的大脑中产生积极的反响，并使他们相信该设计实际上会更好。 当产品或服务的设计在美学上令人愉悦时，人们会容忍忽略较小的可用性问题。 外观美观的设计可以掩盖可用性问题，并防止在可用性测试过程中发现问题。 三、优秀的产品案例 简洁的浏览器产品：

过去的手机浏览器继承了 pc 端的浏览器特点，大而全+密密麻麻的各种入口，再加上各种广告，简直是噩梦。但在当时的年代，除了 Safari 之外，所有手机的浏览器不管是自带的还是第三方的都是这样的主页，毫无美感和可用性而言。

最开始打破规则是夸克浏览器，在 2016 年推出的夸克浏览器，进入首页之后非常简洁，体现了简洁之美，跟其他繁复的浏览器主页相比是一股清新脱俗。靠着简洁界面风格的产品力，收获了稳定的用户量。这就是美即适用的最佳案例。

四、B 端 web 产品如何运用美即适用效应 B 端产品的视觉设计最常见的设计优化点是视觉降噪、工作台设计、表格表单设计。做好了这几部分的内容模块设计，B 端界面的视觉效果就能提升一个档次了，可以让我们的产品在一众 B 端产品中脱颖而出美即适用。

针对功能庞大、逻辑复杂的产品，我们要怎么去解决当前存在的问题？改动影响面是否超出预期？通常采用三步走的方法，即问题收集、整理分类、系统分析的方法。通常整理出来的问题分为交互与视觉两大块内容，本次重点介绍视觉内容。

B 端常见的视觉问题主要是设计风格陈旧、页面信息层级不明确、视觉元素规范不统一等。针对设计风格陈旧和视觉元素规范不统一的问题需要具体产品具体分析，对于页面信息层级不明确的问题则可以通过视觉降噪的方式优化。

1. 视觉降噪 视觉降噪的一个大的核心点就是优化信息展示。

① 减少色彩

B 端界面内容和操作相对较多，颜色过于丰富的界面会对使用者造成视觉精神压力，可以通过减少界面中色彩的方式进行视觉降噪。

在 1.0 版本中存在视觉混乱、视觉层级不清晰等情况，用户在理解层面上存在一定的负担；其中列表视图是用户使用场景最多的一个场景视图。我们通过减少色彩的设计手法对界面进行了视觉降噪。

② 优化信息展示

在 1.0 版本中，看板视图的视觉表达并不是很清晰，内容过多，整体视觉信息层级较弱，容易带给用户杂乱的视觉体验。

在 2.0 改版中我们将字段进行了优先级分类，字段名称和内容则按照上下结构的方式进行展示，从一定程度上为用户做了视觉排序。

2. 工作台优化 工作台通常都是 B 端产品的门户页面，是流量最大、涉及用户角色最多的模块，并且页面功能高度聚合，可以说是 B 端产品里面最重要的页面。在设计上，工作台对整个系统的角色就是一个能帮助用户快速掌握工作进展、进入工作状态的导航页面。工作台设计的好坏直接影响到使用者对产品的第一印象。

① 工作台常见功能

统计业务数据

用户根据业务数据查看工作进度。不同的用户身份在使用目标上有所不同，比如管理者角色，会根据业务数据调整战略决策、安排下属的工作内容；执行者会根据自己的完成进度来安排近期的工作内容，识别工作优先级。

聚合高频常用功能

常用功能又称快捷功能，是指使用者工作中最常用的几个功能选项。

查看待办事项

待办事项跟业务数据都有查看工作进度的作用，两者的不同点在于业务数据是以业务指标为基准明确工作进度，待办事项是以数量这个维度来分析和查看。

明晰细分业务

B 端产品的业务属性会在工作台有所体现。比如：汇易联，它的产品定位在于帮助企业全流程管控各类费用支出。它们出现在工作台上，除了帮助用户快速开展工作，减少细钻外，还能够帮助用户识别产品的业务属性。

高效获取业务信息

为了方便使用者快速查看，有部分内容需要展示在工作台。比如：汇易联的单据动态功能，就是在帮助用户快速查看自己提交的单据最新动态，无需点开其他页面，在工作台就能快速读取。

② 工作台基本构成

业务数据&工作进度：一般以数据可视化的形式出现，用于告知用户工作进度 待办事项：告知用户当前、当周的任务排期 快捷功能&常用功能：快速开展工作或快速跳转至常用页面，无需在导航上一步步下钻，节省时间，提高效率。

消息通知：一般包含系统消息、业务进展、功能信息三类。系统信息包含功能迭代和产品更新；业务最新进展包含最新业务数据更新；功能信息：包含业务流转进度和上下级提交审核和被审核的进展。可根据重要程度选择是否展示在工作台。

个人信息：当身份识别为核心功能时时出现，比如使用不同角色的账号登陆天猫店铺工作台，对应的功能是不同的，有时同一个账户兼职两种身份，为了识别身份需要展示个人信息；但是在强业务属性工作台（理赔与续签）时无需出现，因为在账号登录时就已经识别了账号权限，展示具体业务的内容。所以还需具体情况具体分析。

新手引导&帮助中心：当用户首次登录时，新手引导负责向用户介绍业务模块及对应功能，用户可以「一键跳过」，但当用户需要的时候，必须有一个「入口」方便快速找到。当用户从新手转化为常用用户时，新手引导也就切换成为了帮助中心。

③ 待办事项模块参考

待办事项通常以列表的形式展示，主要是告知用户当前角色岗位的待办内容的数量和内容，方便用户快速掌握信息并直达任务处理。

由于 B 端行业业务的差异，不同类型的产品所聚焦的业务目标不同，所以在工作台中的待办事项模块有差异，项目管理类产品突出于各个环节的协作，会将待办事项区分很明细，而通用产品的待办事项模块则突出事件的处理状态与内容。

在设计待办事项模块的时候首先应该分析需要达到的业务目标，并且在此基础上进行竞品分析借鉴，明确需要重点突出什么信息，弱化什么信息。然后才是使用视觉设计能力进行美化包装。以下这三种形式可参考：

④ 业务数据模块参考

数据看板在工作台上占有“一席之地”，想做好工作台上的数据模块，AntV、ECharts 是国内可视化组件库中的佼佼者。虽然它们“看着不咋地”，但是核心功能点是很“精致好用”的，经得起推敲。我们可以借鉴功能框架，在此基础上优化视觉，不仅节省设计时间，还有效提升开发实现的效率，开发再也不会说实现不了了。

业务数据在设计上需要做到突出业务目标，视觉上要减少色彩，色彩控制在 4 个颜色之内，太多的色彩无法突出重点，使界面视觉效果显得凌乱。以下形式可参考：

⑤ 常用功能模块参考

工作台中的常用功能是作为快捷操作形式存在，点击后直接进入功能页面而无需从导航层级点击进入，提升了操作效率，聚焦了功能。

设计上一般使用 icon+文字的形式展示，功能 icon 承载了表现产品视觉品牌质感的责任，我们根据 B 端产品的业务属性去设计。icon 有两种设计手法，一种是浅色底+深色 icon，另一种是深色底+反白 icon，无论使用哪种方法切记颜色不宜超过四种。

⑥ 消息通知

消息通知根据产品类型决定是否需要展示在工作台。若需展示在工作台，可参考网页类产品的新闻中心设计，根据消息属性和通知优先级进行分类展示。

3. 表格页面优化 表格作为组织整理数据的结构化展示载体，可以高效的向用户展示数据信息，是 B 端产品中出现最高频的模块之一。

用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等复杂操作、对比数据的差异与变化。好的表格信息展示设计，应当是能够辅助用户高效便捷的实现以上场景中的诉求。

表格设计中最重要的问题就是如何更好展示表格信息以及更好让用户获取想要的信息，需要做到三点：疏密适度、高效扫视、精简克制。

① 疏密适度

常见的表格信息包含文本、标签、状态样式、关键信息 Icon 等。表格单元格是信息填充的基本单元，行高和列宽的定义决定了表格信息的疏密程度，进而决定了表格给用户的直观感受。

定义合理的表格行高

文字行高可以设定为字号的 1.2~1.8 倍，文字与分割线间距离可以设定为字号的 1~1.5 倍。

根据用户场景的不同，来选择倍数，需保证系统内使用统一的倍数。例如，针对用户快速浏览获取大量数据场景时，可以选择 1.2 倍作为模数，列表更为紧凑，同样扫视范围内，可获取更多信息。

可加入用户自定义行高的功能，覆盖用户角色多样性。比如个人视力的原因，有些用户喜欢表格行高值大一些，看起来舒适透气，便于阅读。产品为了让不同用户都能获得较好的体验，可以考虑把表格疏密度的设置开放给用户，设置紧凑、标准、宽松三种行高。

灵活扩展的横向空间

通过对表格固定位置与列宽的调整，扩大表格数据空间，使信息不拥挤，空间更透气，保证横向扫视易读性。

设计师需要根据表格承载内容定义表格的列宽，应包含最大/最小/默认列宽的定义以及使用规则。我推荐的一个规则是：

规则 1：当相对列少「浏览器宽度-页面其他模块; 全部列的默认宽度和」，则各个列自动等比拉伸，撑满屏幕；

规则 2：当相对列多「浏览器宽度-页面其他模块; 全部列的默认宽度和」，则出横向滚动条，每列宽度为默认宽。

另外需注意最小值设定时应避免信息展示出现「对联式表格」。对联式表格最大的问题在于，一屏内展示的行数有限，当用户纵向对比数据时，需往复滚动多次，记忆压力大；横向扫视时，阅读视线不能一直保持左右横向预览，而是不停上下左右切换，使用体验不佳。

a. 高效扫视

无论是在表格中明确的定位数据，还是顺序阅读，高效扫视都是 B 端用户一个很重要的诉求，我们在设计表格时可尝试一些有效手段提升用户浏览获取信息的效率。

对齐方式：表格设计中最基本的对齐准则是文字左对齐，符合从左到右的阅读习惯；数据数字类信息右对齐，方便对比数据大小。

② 去除视觉噪音，强调对比

谨慎使用斑马色

斑马线即隔行变色。它能让行间界限更为明显，横向查看数据时避免看错行。但由于与分割线的作用类似，起到的作用有限，可针对不同场景酌情考虑是否使用。比如在不同类型的数据计算结果时可使用不同底色进行区分，可以更加区分不同类型的数据。而对同一类数据而言，谨慎使用斑马色区分，分割线的区分作用已经足够明显，再加上表格行的悬浮状态，能够更加强化横向视觉引导。

精简克制

a. 适当隐藏信息

表格中有些数据指标是综合维度的，这些信息虽然能起到辅助用户理解数据的作用，但全部展示出来，会让表格显得臃肿反而降低了可读性，此时可考虑将这些信息隐藏起来，把触发显示的决定权交给用户，也更符合用户逐级查看信息的场景。

例如，某些有父子层级关系的数据，可以通过主子折叠表将子信息默认隐藏，用户根据需要，去展开查看详细的子信息。

b. 设定折行与截断规则

B 端业务的数据信息复杂多样，信息内容的长度高度是多样且不可控的，很多内容会超出我们限定的最大列宽，最大列高，我们应当给出折行与截断原则去约束内容的展示。

折行截断原则设定时要根据场景进行细分，如日期时间等固定格式内容，在用户拖动列宽后文字应折行而非截断展示，避免影响用户理解。

还有一部分业务特定标题内容，前面 N 多个字可能都是一致的，这时候如果简单的截断，用户就需要逐一 Hover 才能找到定位到要找的数据。因而折行与截断原则，我们建议是给出三种：单行截断、双行截断以及自适应截断，根据具体业务情景选择。

总结 设计师能够将一个界面做的好看，这是一个设计师最基本的能力,时刻都不能放弃对美的事物的追求，设计师应该都是有种强迫症，看到不好的事物应该想着如何用自己的设计能力将它变得更好。视觉设计就是一种很好的解决不完美的事物的手段。

以上的三种设计手法希望能够帮助大家在工作中设计出漂亮的界面。

前段时间英伟达发布了 40 系列显卡，极致的性能让 C4D 玩家大呼过瘾，但高昂的价格也让人望而却步。大部分设计师购买显卡，都是为了带动 C4D 和 OC，作为 3D 设计的老牌工具，C4D 确实成为很多人的学习首选。但正版近 2 万的售价和苛刻的硬件要求，也让越来越多的人开始选用 3D 设计新秀神器：Blend...

前段时间英伟达发布了 40 系列显卡，极致的性能让 C4D 玩家大呼过瘾，但高昂的价格也让人望而却步。

大部分设计师购买显卡，都是为了带动 C4D 和 OC，作为 3D 设计的老牌工具，C4D 确实成为很多人的学习首选。但正版近 2 万的售价和苛刻的硬件要求，也让越来越多的人开始选用 3D 设计新秀神器：Blender。

对普通的 UI 和视觉 设计师 而言，Blender 无疑更适合作为 3D 设计的工具：

多平台通用：Mac/Windows 双平台，Mac 用户无需额外购买主机 轻量化免费：对硬件要求低，安装包仅 230M，创作的作品可自由商用 3D 创作功能强大：绝大部分 3D 设计需求，都能通过 Blender 实现 渲染速度更快：Blender 自带渲染器速度很快，适合快速出图 当然，相比 C4D，Blender 的缺点是教程较少，遇到一个难题，有可能耗费一下午才能找到答案。

现在这个问题的系统解决方案来了！

优设联合京东高级视觉设计师小毅，耗费大半年的时间精力，打磨出这一套可能是目前性价比最高的 Blender 零基础直播课程！

课程原价 599 元， 限时特惠价 499 元

移动端扫码即可报名，网页端右戳报名 ? https://pro.uisdc.com/detail/p_633117b3e4b0eca59c35b9d0/6

循序渐进，零基础也能轻松上手！ 3D 设计看似复杂，但只要掌握了正确完整的学习流程，也可以在短时间内快速上手。而一个拥有多年 3D 创作经验的设计师，无疑是你学习路上的绝佳帮手。

在课程设置上，Blender 系统直播课会从软件基础开始，帮你快速熟悉界面后，从一个小元素入手，用简单轻松的方式，创作出你的第一套 3D 作品，相信我，那一刻的成就感会让你有百倍信心跟完这门课！

之后课程逐步进阶，从中型场景到大型场景，每一步都增加了难度，但又控制在可接受的范围内，帮你实现 从零基础到 Blender 3D 创作达人的平滑过渡。

为了让你的基础更牢固，老师还额外录制了价值百元的 Blender 基础课，报名即送！

更详细的课程安排，可以看这份大纲：

有问必答，保姆级课程服务 无需再担心问题一直找不到答案了。参加课程后，遇到任何问题，老师和助教都会在群里解答。而且你的每一份作业，只要按时完成，都会在课程周期内得到老师的点评建议，不用担心自己在原地踏步，在这套课里，你的进步，我们帮你看见。

课程学习案例

首屈一指的小毅老师 与别的 3D 课老师不同，小毅老师作为现任的京东高级视觉设计师，承接过多次大型电商大促级别的视觉项目设计，成功落地多款上亿流量的设计项目，拥有一线实战和电商 3D 设计经验。聪明的人知道这意味着什么：他教给你的东西，是真正能落地成为作品集，去面试大厂的。

老师作品：

想跟着他一起学习 Blender，掌握 3D 创作的方法，今晚秒杀价就别错过啦

课程原价 599 元， 限时特惠价 499 元

移动端扫码即可报名，网页端右戳报名 ? https://pro.uisdc.com/detail/p_633117b3e4b0eca59c35b9d0/6

今天要分享的，是后台和社群里几乎每天都有人问的交互文档该怎么写的问题。不只是想要往交互设计师方向发展的新手，还有工作中要负责交互问题的产品经理、设计师，都对它存在大量的疑问。所以我们在今天这篇分享里完成一次深入的扫盲。

今天要分享的，是后台和社群里几乎每天都有人问的 交互文档 该怎么写的问题。不只是想要往 交互设计 师方向发展的新手，还有工作中要负责交互问题的产品经理、 设计师 ，都对它存在大量的疑问。

所以我们在今天这篇分享里完成一次深入的扫盲。

[link 用一份大厂级的完整交互文档案例，帮你深入学习交互细节 – 优设网 – 学设计上优设 (uisdc.com) ]

一、交互文档的基本认识 1. 交互文档是什么

交互文档，是一份用来解释项目交互方式、内容、规则的说明文档，也叫 DRD ( Design Requirement Document )。

在过去的分享中，我们有解释过，B 端项目会包含大量的交互内容，需要前期绘制交互原型来展示和确认交互方案。

如果是比较简单的小型项目，或成熟产品的小迭代，那么这样的连线图确实就足以表达交互的意图和方案了，写太多注释文字反而会画蛇添足提高观看者的认知成本。

但是，如果项目和展示的流程内容，逻辑非常复杂，包含非常多的选项和状态，那么单靠原型和连线是绝对不够的，添加更多的图文说明就变得非常有必要了。

同时在团队协作场景中，就需要将这些内容制作成一份规范的 “文档”，用来进行统一的展示、备份、归档。

所以做交互光靠画交互原型是不够的，“文档” 就成为必要的输出成果。

2. 它和产品文档的区别

在产品侧（非开发），文档就有好几类：

商业需求文档：BRD，Business Requirement Document 市场需求文档：MRD，Market Requirement Document 产品需求文档：PRD，Product Requirement Document 交互说明文档：DRD，Design Requirement Document 设计规范文档：DGD，Design Guidline Document

BRD 和 MRD 是一个产品经理行业内部也在反复科普讨论的东西，和我们没多大关系可以暂时忽略。设计规范文档 DGD 大家应该也有概念，比较容易辨识，也不需要在这里强调。

而产品需求文档 PRD，是和交互文档最撞脸的文档类型。它们的文档规格、样式几乎一致，还包含大量界限模糊、相互交叉的内容范畴，会对新手的理解造成很大的不便。

要理解产品文档和交互文档的核心差异，就得从他们各自的工作职能说起，产品经理的主要产出是解释产品要做的功能和逻辑，所有的原型和连线的目标都是为了解释功能本身。

部分产品经理会 “顺带” 在这个基础上增加交互的元素，以及相关的说明。这恰恰是问题的关键所在，因为产品经理制作产品原型的过程是可以覆盖一部分交互信息的，所以很多设计师也天真的认为交互内容是应该由产品来出的。

这当中一定要关注里面的 “顺带”，因为一份有效的 PRD 主旨一定不是以交互为核心的，在面对需要大量图例、连线、方案、解释的交互问题下面，产品经理往往选择直接跳过，只把功能描述清楚，剩下的就交给交互设计师还是 UI 设计师来完成具体的交互方案。

所以，交互文档就是在产品文档的基础上，进行交互内容的补充，专注于解释项目的交互内容，让设计师和前端开发可以更直观的理解后续的工作内容。

来自 UEDART 的付费文档，案例演示地址：http://vip.uedart.com/interactive.html

交互文档和产品文档是相互独立和补充的，当产品文档无法完成对产品交互的有效解释时，我们就应该选择输出独立的交互文档，来提升项目协作的效率。

二、交互文档的工具选择 1. 主流的交互文档工具说明

主流的交互文档输出有三种方式：

Axure/墨刀 导出 一般文档制作 线上 Wiki 记录 Axure 和墨刀是用来制作产品原型的软件工具，也是目前在产品经理、交互设计行业中应用最广泛的原型工具。

它的主要优势，在于可以比较方便的制作可交互的组件、连线、导出。

当然，光制作原型图并不能叫交互文档，它们还提供了比较全面的内容标注、文本记录、图形绘制的功能。

这就可以让我们完成原型绘制以后，结合页面结构的管理，添加交互文档所需的其它信息，并最终输出文件。

而在一些比较传统的行业或外包领域，使用的记录文档往往要使用 Word 或 PPT（方便开会演示或要打印）。这就要在原型完成以后，导出原型图例，并使用这些文档软件进行文字的记录和连线。

受限于 Word、PPT 的布局限制（强行分页），使用它们做交互文档是非常难受的，并且这些文档需要保存到本地，存在各种文档版本管理的问题。

所以还有另一部分也希望使用普通文档格式记录，并满足云端同步、备份、版本管理的团队，就会使用 Wiki 类的工具来制作交互文档。如语雀、飞书、Conflence、Notion 等工具。

如果只是一些比较小的项目迭代、一次性使用的交互文档，使用前两种方法都可以胜任。而真正大型、系统性的交互文档，往往都使用团队内部的 Wiki 进行创建和管理。和设计稿不同，这些使用了内部账号或需要内网访问的文档资料，是不会没事发到网上来分享的，这也是在网上找不到完整交互文档的主要原因。

2. B 端设计师的交互文档工具建议

和你们网上可以找到的大多数交互设计干货不同，我即不推荐你们使用 Axure/墨刀 来画原型，也不推荐用它们或普通文档、Wiki 的形式来输出交互文档。因为：

—— 太低效了！

产品经理和交互设计师的主要产出物就是文档，自然可以耗费比较多的精力和时间去制作原型和编写内容。而 UI 设计师的主要工作肯定是最终的视觉界面和交付，所以用最复杂的方法去制作交互文档，显然是不合理的。

同时还要提一句，Axure/墨刀 等软件用来制作一般的线框图原型，效率实在是太低了。且绝大多数情况下的页面跳转、交互都是可以忽略不做的。而且随页面增加，它的左侧导航层级、数量会非常庞大，导致查找和浏览的效率进一步降低。

在我自己的所有课程和分享中，我始终都建议直接使用你们正在用的云端 UI 设计软件直接绘制产品、交互原型并输出文档，如即时设计或 Figma。

原因包含：

速度快：能用 Axure 五分之一的时间完成所有原型绘制 可复用：做好的原型方便复用，而且可以直接在原型上完成后续设计 交互性：对于表达交互流程所需的基础跳转和动效都能满足 更自由：一些需要复杂图文结合的说明方式不再受到普通文档布局限制 比如下面这样的原型案例，就可以通过一个简单的链接快速分享出去，或者添加团队成员自由查看。

在我过去长期的实践体会中，这种方式是优势最明显，效率最高，最易懂，也符合 UI 设计师工作需要的。如果项目中有其它因素要求，你们也可以选择前面的方式输出。

任何文档的目标都是为了书面记录和让看的人更容易理解我们要表达的信息，不要被固定的方法局限住，要努力去探索适合团队当前场景的方式。

二、交互文档的制作过程 1. 文档框架结构制定

前面把基本的信息聊完了，这里就来具体讲讲交互文档应该如何进行输出。

当然，输出交互文档前需要先理解交互是什么，交互设计的具体设计内容和步骤。交互文档是对你已经设计出来的方案的书面记录，你不能在对交互一无所知的情况下强行编写文档。

交互文档制作首先要确认文档的记录内容和文档结构。

记录内容指的是你在该文档准备放哪些交互内容进去，并不是每次项目设计都要把项目所有页面和流程交互都重做一遍。

比如一次中等规模的迭代，新增几个通用的列表页面，调整了一些细节字段，增加了一个功能流程。那么文档重点记录内容肯定就是流程而不是所有页面。毕竟通用的列表页和细节更改，在产品需求评审阶段就可以完整的解释，而功能流程则不行。

如果是全新的项目，包含数十上百个页面。把所有流程、页面的交互内容全部表现出来的工作量是顶不住的，在绘制原型的过程中，你就会发现有大量的重复页面、流程和交互。所以制作文档就要有目的性的对重复的内容进行合并，以及只保留重要的页面和流程。

具体该放什么要考虑项目的实际情况，需要设计师自己评估。除此以外，标准的交互文档里面会包含背景介绍、编辑日志、文字图例、业务流程、名词解释、页面结构等等。

这些 “文绉绉” 的细节，并不是必备的，你可以根据当前场景自己决定需要加哪些。比如项目、业务背景前面的产品需求已经讲清楚了，业务流程、名词解释团队成员也都了如指掌的时候，那么这些页面模块就完全没有放的必要。

并且，基于前面对放置内容的考虑，结构的顺序并不一定要类似下方案例，完全按照产品的导航目录来走。

所以，根据一个中等规模的迭代项目，我会制定一个这样的一级文档结构。

基本信息：项目的简单信息，快速目录，参与人信息等 基本组件：涉及的相关组件展示和交互规则说明 原型一览：本次迭代涉及的所有页面原型和连线一览 流程介绍 1：流程 1 的所有页面、状态、说明展示 流程介绍 2：流程 2 的所有页面、状态、说明展示 流程介绍 3：流程 3 的所有页面、状态、说明展示 每个 1 级文档结构对应 UI 软件中的 Page 目录，力求所需的 Page 数量越少越好，而不是像 Axure 的做法一样密密麻麻的。

结构可以根据复杂程度做进一步的细分，他像写文章的大纲一样，帮助我们提前规划好后续完成文档所需的内容和工作量。

2. 关于连线和标注信息

有了结构，就要在对应的 Page 中填充内容了。其中一般的文字介绍、流程图、思维导图，只要正常输入或将导出的图例黏贴进来就可以。

而针对具体的交互内容，流程解释上，则重点处理连线和标注说明。比如下面是我自己在课程演示中的一个简单的交互流程演示案例。

在 UI 软件中，制作连线其实是很简答的事情，只要画出一个直线，再设置箭头和尾部图形、描边色彩和粗细即可。

然后，将该线段的图层放置在画布之外，起点放置在触发交互的区域之中，终点尖头则紧贴目标画布的边缘（不用特意延伸进画布内）。如果使用水平、垂直的方式连接两个画布，那就可以双击进去添加锚点制作 90 度的折角。

连线的应用是非常简单的操作，不要舍近求远通过插件或是其它的一些功能来实现。而除此之外，我在文档中添加的解释性文本主要有两种，交互事件和交互规则。

交互事件代表了连线的两个页面是如何被触发跳转的，所以我会在线段中帖一个文字卡片，解释触发的条件和交互操作是什么。

然后，就是页面或流程中的交互细则，包含两个部分，数字标签和对应文字注释。它们都是用 Auto layout 可以快速制作出来的组件，每次要做备注的时候，只要复制标签到页面上，设置对应的数值，再将右侧的文字卡片复制到页面旁边，再改上对应的数字、内容信息即可。

在设计软件中，画布的自由度极高，你想要怎么备注和添加内容都没关系，只要在内容翔实的基础上保证 —— 团队成员能看懂，就是一份优秀的交互文档。多在绘制过程中和同事沟通，优化展示的做法，可以避免很多会出现的问题，进一步加速我们的制作效率。

3. 文档的团队协作应用

将文档全部做完以后，最终就是关于交付和协作的问题了。

既然我们使用线上的 UI 软件来完成交互文档的制作，那么文件设置公开访问权限，再分享链接自然是最简单的办法。

单每次项目分享个网页链接，活着并行有好几个项目，需要其它成员自己去收藏网址，也是挺麻烦的。所以尽量充分应用软件中的团队协作功能，通关创建一个团队，添加成员，让他们自行查看当前文件目录中的交互文档。

查看过程中，团队其它成员可以通过评论的功能对交互内容进行纠错、提问、建议，方便我们进行优化改进。

通过这种简单高效的文档协作模式，我们可以非常快的完成整体交互内容的定稿，并开始后续的工作。

再回到前面的话题，我们是 UI 设计师，不是全职交互设计。原型文档输出完了，下一步可是要做视觉界面的，所以交互文档就可以不用管了嘛？

交互文档的最佳状态是 —— **应用最终界面图例解释交互内容**。

也就是当我们把所有页面内容设计完成后，强烈建议将界面的展示和交互文档进行整合。除了前端和产品可以看到最终的交互落地效果外（有时候最终设计和前面的交互不一致），还可以直接通过这个文档查看界面数值标注，而不用往返于交互和设计文档来回切换，这才能让文档作用最大化。

四、结尾 以上就是关于交互文档的相关解释，下一篇，我们会聚焦在和表单有关的交互干货分享。想要看的同学记得在留言中发出来。

我们下篇再贱～

欢迎关注作者的微信公众号：「超人的电话亭」

本文从理论、优秀产品案例、如何运用到B端产品3个方面，深度解析「美即适用」效应。在打造一个产品时，不仅仅需要考虑它的好用与功能价值，同时也应当考虑产品在美感方面的设计，一个美观的设计会影响用户观感。本文将探索美即适用效应以及对产品的影响，希望对你有所启发。

本文从理论、优秀产品案例、如何运用到 B端产品 3个方面，深度解析「 美即适用 」效应。

[link 超全！B端通用界面设计法则全方位科普！ – 优设网 – 学设计上优设 (uisdc.com) ]

在打造一个产品时，不仅仅需要考虑它的好用与功能价值，同时也应当考虑产品在美感方面的设计，一个美观的设计会影响用户观感。本文将探索美即适用效应以及对产品的影响，希望对你有所启发。

为什么会有设计师的存在，人们通常认为美观的设计更为实用。

美即适用效应你或许听说过，可能不知道在哪里听说的，这篇文章我会和你一起探索美即适用效应以及对产品的影响。

一、背景 为什么会说到这个话题，是因为前段时间在公司内部组织了体验分享会，会后固定的吐槽时间，一产品部门的产品经理指责设计部门的界面效果不好看，他提到了美即适用原则。我还是想自己应该深入了解一下这个效应，一方面扩充自己的知识库，另一方面也想积累更多案例。

二、理论介绍 “美即适用效应”法则是指一种心理感应现象：人们认为美好的设计更好用。直到现在我们大多数人也都会认为长得好看就是有优势。

许多实验证实了这个效应，而且设计的认可度、使用情况和性能都受到了这个效应的深刻影响。

美即适用效应最早是在人机交互领域于 1995 年进行研究。

日立设计中心的研究员 Masaaki Kurosu 和 Kaori Kashimura 测试了 26 种 ATM 的 UI，要求 252 名研究参与者对每种设计的易用性进行评分使用以及美学吸引力。

他们发现，参与者的审美吸引力等级与感知的易用性之间的关联要强于参与者的审美吸引力等级与实际易用性之间的关联。

Kurosu 和 Kashimura 得出的结论是，即使尝试评估系统的基本功能，用户也会受到任何给定界面的美观的强烈影响。

表观可用性的决定因素对真实可用性的影响系数大多在 0.000-0.310 之间，而界⾯美观度这个数据达到了 0.589。

美观的设计会在人们的大脑中产生积极的反响，并使他们相信该设计实际上会更好。 当产品或服务的设计在美学上令人愉悦时，人们会容忍忽略较小的可用性问题。 外观美观的设计可以掩盖可用性问题，并防止在可用性测试过程中发现问题。 三、优秀的产品案例 简洁的浏览器产品：

过去的手机浏览器继承了 pc 端的浏览器特点，大而全+密密麻麻的各种入口，再加上各种广告，简直是噩梦。但在当时的年代，除了 Safari 之外，所有手机的浏览器不管是自带的还是第三方的都是这样的主页，毫无美感和可用性而言。

最开始打破规则是夸克浏览器，在 2016 年推出的夸克浏览器，进入首页之后非常简洁，体现了简洁之美，跟其他繁复的浏览器主页相比是一股清新脱俗。靠着简洁界面风格的产品力，收获了稳定的用户量。这就是美即适用的最佳案例。

四、B 端 web 产品如何运用美即适用效应 B 端产品的视觉设计最常见的设计优化点是视觉降噪、工作台设计、表格表单设计。做好了这几部分的内容模块设计，B 端界面的视觉效果就能提升一个档次了，可以让我们的产品在一众 B 端产品中脱颖而出美即适用。

针对功能庞大、逻辑复杂的产品，我们要怎么去解决当前存在的问题？改动影响面是否超出预期？通常采用三步走的方法，即问题收集、整理分类、系统分析的方法。通常整理出来的问题分为交互与视觉两大块内容，本次重点介绍视觉内容。

B 端常见的视觉问题主要是设计风格陈旧、页面信息层级不明确、视觉元素规范不统一等。针对设计风格陈旧和视觉元素规范不统一的问题需要具体产品具体分析，对于页面信息层级不明确的问题则可以通过视觉降噪的方式优化。

1. 视觉降噪 视觉降噪的一个大的核心点就是优化信息展示。

① 减少色彩

B 端界面内容和操作相对较多，颜色过于丰富的界面会对使用者造成视觉精神压力，可以通过减少界面中色彩的方式进行视觉降噪。

在 1.0 版本中存在视觉混乱、视觉层级不清晰等情况，用户在理解层面上存在一定的负担；其中列表视图是用户使用场景最多的一个场景视图。我们通过减少色彩的设计手法对界面进行了视觉降噪。

② 优化信息展示

在 1.0 版本中，看板视图的视觉表达并不是很清晰，内容过多，整体视觉信息层级较弱，容易带给用户杂乱的视觉体验。

在 2.0 改版中我们将字段进行了优先级分类，字段名称和内容则按照上下结构的方式进行展示，从一定程度上为用户做了视觉排序。

2. 工作台优化 工作台通常都是 B 端产品的门户页面，是流量最大、涉及用户角色最多的模块，并且页面功能高度聚合，可以说是 B 端产品里面最重要的页面。在设计上，工作台对整个系统的角色就是一个能帮助用户快速掌握工作进展、进入工作状态的导航页面。工作台设计的好坏直接影响到使用者对产品的第一印象。

① 工作台常见功能

统计业务数据

用户根据业务数据查看工作进度。不同的用户身份在使用目标上有所不同，比如管理者角色，会根据业务数据调整战略决策、安排下属的工作内容；执行者会根据自己的完成进度来安排近期的工作内容，识别工作优先级。

聚合高频常用功能

常用功能又称快捷功能，是指使用者工作中最常用的几个功能选项。

查看待办事项

待办事项跟业务数据都有查看工作进度的作用，两者的不同点在于业务数据是以业务指标为基准明确工作进度，待办事项是以数量这个维度来分析和查看。

明晰细分业务

B 端产品的业务属性会在工作台有所体现。比如：汇易联，它的产品定位在于帮助企业全流程管控各类费用支出。它们出现在工作台上，除了帮助用户快速开展工作，减少细钻外，还能够帮助用户识别产品的业务属性。

高效获取业务信息

为了方便使用者快速查看，有部分内容需要展示在工作台。比如：汇易联的单据动态功能，就是在帮助用户快速查看自己提交的单据最新动态，无需点开其他页面，在工作台就能快速读取。

② 工作台基本构成

业务数据&工作进度：一般以数据可视化的形式出现，用于告知用户工作进度 待办事项：告知用户当前、当周的任务排期 快捷功能&常用功能：快速开展工作或快速跳转至常用页面，无需在导航上一步步下钻，节省时间，提高效率。

消息通知：一般包含系统消息、业务进展、功能信息三类。系统信息包含功能迭代和产品更新；业务最新进展包含最新业务数据更新；功能信息：包含业务流转进度和上下级提交审核和被审核的进展。可根据重要程度选择是否展示在工作台。

个人信息：当身份识别为核心功能时时出现，比如使用不同角色的账号登陆天猫店铺工作台，对应的功能是不同的，有时同一个账户兼职两种身份，为了识别身份需要展示个人信息；但是在强业务属性工作台（理赔与续签）时无需出现，因为在账号登录时就已经识别了账号权限，展示具体业务的内容。所以还需具体情况具体分析。

新手引导&帮助中心：当用户首次登录时，新手引导负责向用户介绍业务模块及对应功能，用户可以「一键跳过」，但当用户需要的时候，必须有一个「入口」方便快速找到。当用户从新手转化为常用用户时，新手引导也就切换成为了帮助中心。

③ 待办事项模块参考

待办事项通常以列表的形式展示，主要是告知用户当前角色岗位的待办内容的数量和内容，方便用户快速掌握信息并直达任务处理。

由于 B 端行业业务的差异，不同类型的产品所聚焦的业务目标不同，所以在工作台中的待办事项模块有差异，项目管理类产品突出于各个环节的协作，会将待办事项区分很明细，而通用产品的待办事项模块则突出事件的处理状态与内容。

在设计待办事项模块的时候首先应该分析需要达到的业务目标，并且在此基础上进行竞品分析借鉴，明确需要重点突出什么信息，弱化什么信息。然后才是使用视觉设计能力进行美化包装。以下这三种形式可参考：

④ 业务数据模块参考

数据看板在工作台上占有“一席之地”，想做好工作台上的数据模块，AntV、ECharts 是国内可视化组件库中的佼佼者。虽然它们“看着不咋地”，但是核心功能点是很“精致好用”的，经得起推敲。我们可以借鉴功能框架，在此基础上优化视觉，不仅节省设计时间，还有效提升开发实现的效率，开发再也不会说实现不了了。

业务数据在设计上需要做到突出业务目标，视觉上要减少色彩，色彩控制在 4 个颜色之内，太多的色彩无法突出重点，使界面视觉效果显得凌乱。以下形式可参考：

⑤ 常用功能模块参考

工作台中的常用功能是作为快捷操作形式存在，点击后直接进入功能页面而无需从导航层级点击进入，提升了操作效率，聚焦了功能。

设计上一般使用 icon+文字的形式展示，功能 icon 承载了表现产品视觉品牌质感的责任，我们根据 B 端产品的业务属性去设计。icon 有两种设计手法，一种是浅色底+深色 icon，另一种是深色底+反白 icon，无论使用哪种方法切记颜色不宜超过四种。

⑥ 消息通知

消息通知根据产品类型决定是否需要展示在工作台。若需展示在工作台，可参考网页类产品的新闻中心设计，根据消息属性和通知优先级进行分类展示。

3. 表格页面优化 表格作为组织整理数据的结构化展示载体，可以高效的向用户展示数据信息，是 B 端产品中出现最高频的模块之一。

用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等复杂操作、对比数据的差异与变化。好的表格信息展示设计，应当是能够辅助用户高效便捷的实现以上场景中的诉求。

表格设计中最重要的问题就是如何更好展示表格信息以及更好让用户获取想要的信息，需要做到三点：疏密适度、高效扫视、精简克制。

① 疏密适度

常见的表格信息包含文本、标签、状态样式、关键信息 Icon 等。表格单元格是信息填充的基本单元，行高和列宽的定义决定了表格信息的疏密程度，进而决定了表格给用户的直观感受。

定义合理的表格行高

文字行高可以设定为字号的 1.2~1.8 倍，文字与分割线间距离可以设定为字号的 1~1.5 倍。

根据用户场景的不同，来选择倍数，需保证系统内使用统一的倍数。例如，针对用户快速浏览获取大量数据场景时，可以选择 1.2 倍作为模数，列表更为紧凑，同样扫视范围内，可获取更多信息。

可加入用户自定义行高的功能，覆盖用户角色多样性。比如个人视力的原因，有些用户喜欢表格行高值大一些，看起来舒适透气，便于阅读。产品为了让不同用户都能获得较好的体验，可以考虑把表格疏密度的设置开放给用户，设置紧凑、标准、宽松三种行高。

灵活扩展的横向空间

通过对表格固定位置与列宽的调整，扩大表格数据空间，使信息不拥挤，空间更透气，保证横向扫视易读性。

设计师需要根据表格承载内容定义表格的列宽，应包含最大/最小/默认列宽的定义以及使用规则。我推荐的一个规则是：

规则 1：当相对列少「浏览器宽度-页面其他模块; 全部列的默认宽度和」，则各个列自动等比拉伸，撑满屏幕；

规则 2：当相对列多「浏览器宽度-页面其他模块; 全部列的默认宽度和」，则出横向滚动条，每列宽度为默认宽。

另外需注意最小值设定时应避免信息展示出现「对联式表格」。对联式表格最大的问题在于，一屏内展示的行数有限，当用户纵向对比数据时，需往复滚动多次，记忆压力大；横向扫视时，阅读视线不能一直保持左右横向预览，而是不停上下左右切换，使用体验不佳。

a. 高效扫视

无论是在表格中明确的定位数据，还是顺序阅读，高效扫视都是 B 端用户一个很重要的诉求，我们在设计表格时可尝试一些有效手段提升用户浏览获取信息的效率。

对齐方式：表格设计中最基本的对齐准则是文字左对齐，符合从左到右的阅读习惯；数据数字类信息右对齐，方便对比数据大小。

② 去除视觉噪音，强调对比

谨慎使用斑马色

斑马线即隔行变色。它能让行间界限更为明显，横向查看数据时避免看错行。但由于与分割线的作用类似，起到的作用有限，可针对不同场景酌情考虑是否使用。比如在不同类型的数据计算结果时可使用不同底色进行区分，可以更加区分不同类型的数据。而对同一类数据而言，谨慎使用斑马色区分，分割线的区分作用已经足够明显，再加上表格行的悬浮状态，能够更加强化横向视觉引导。

精简克制

a. 适当隐藏信息

表格中有些数据指标是综合维度的，这些信息虽然能起到辅助用户理解数据的作用，但全部展示出来，会让表格显得臃肿反而降低了可读性，此时可考虑将这些信息隐藏起来，把触发显示的决定权交给用户，也更符合用户逐级查看信息的场景。

例如，某些有父子层级关系的数据，可以通过主子折叠表将子信息默认隐藏，用户根据需要，去展开查看详细的子信息。

b. 设定折行与截断规则

B 端业务的数据信息复杂多样，信息内容的长度高度是多样且不可控的，很多内容会超出我们限定的最大列宽，最大列高，我们应当给出折行与截断原则去约束内容的展示。

折行截断原则设定时要根据场景进行细分，如日期时间等固定格式内容，在用户拖动列宽后文字应折行而非截断展示，避免影响用户理解。

还有一部分业务特定标题内容，前面 N 多个字可能都是一致的，这时候如果简单的截断，用户就需要逐一 Hover 才能找到定位到要找的数据。因而折行与截断原则，我们建议是给出三种：单行截断、双行截断以及自适应截断，根据具体业务情景选择。

总结 设计师能够将一个界面做的好看，这是一个设计师最基本的能力,时刻都不能放弃对美的事物的追求，设计师应该都是有种强迫症，看到不好的事物应该想着如何用自己的设计能力将它变得更好。视觉设计就是一种很好的解决不完美的事物的手段。

以上的三种设计手法希望能够帮助大家在工作中设计出漂亮的界面。

前段时间英伟达发布了 40 系列显卡，极致的性能让 C4D 玩家大呼过瘾，但高昂的价格也让人望而却步。大部分设计师购买显卡，都是为了带动 C4D 和 OC，作为 3D 设计的老牌工具，C4D 确实成为很多人的学习首选。但正版近 2 万的售价和苛刻的硬件要求，也让越来越多的人开始选用 3D 设计新秀神器：Blend...

前段时间英伟达发布了 40 系列显卡，极致的性能让 C4D 玩家大呼过瘾，但高昂的价格也让人望而却步。

大部分设计师购买显卡，都是为了带动 C4D 和 OC，作为 3D 设计的老牌工具，C4D 确实成为很多人的学习首选。但正版近 2 万的售价和苛刻的硬件要求，也让越来越多的人开始选用 3D 设计新秀神器：Blender。

对普通的 UI 和视觉 设计师 而言，Blender 无疑更适合作为 3D 设计的工具：

多平台通用：Mac/Windows 双平台，Mac 用户无需额外购买主机 轻量化免费：对硬件要求低，安装包仅 230M，创作的作品可自由商用 3D 创作功能强大：绝大部分 3D 设计需求，都能通过 Blender 实现 渲染速度更快：Blender 自带渲染器速度很快，适合快速出图 当然，相比 C4D，Blender 的缺点是教程较少，遇到一个难题，有可能耗费一下午才能找到答案。

现在这个问题的系统解决方案来了！

优设联合京东高级视觉设计师小毅，耗费大半年的时间精力，打磨出这一套可能是目前性价比最高的 Blender 零基础直播课程！

课程原价 599 元， 限时特惠价 499 元

移动端扫码即可报名，网页端右戳报名 ? https://pro.uisdc.com/detail/p_633117b3e4b0eca59c35b9d0/6

循序渐进，零基础也能轻松上手！ 3D 设计看似复杂，但只要掌握了正确完整的学习流程，也可以在短时间内快速上手。而一个拥有多年 3D 创作经验的设计师，无疑是你学习路上的绝佳帮手。

在课程设置上，Blender 系统直播课会从软件基础开始，帮你快速熟悉界面后，从一个小元素入手，用简单轻松的方式，创作出你的第一套 3D 作品，相信我，那一刻的成就感会让你有百倍信心跟完这门课！

之后课程逐步进阶，从中型场景到大型场景，每一步都增加了难度，但又控制在可接受的范围内，帮你实现 从零基础到 Blender 3D 创作达人的平滑过渡。

为了让你的基础更牢固，老师还额外录制了价值百元的 Blender 基础课，报名即送！

更详细的课程安排，可以看这份大纲：

有问必答，保姆级课程服务 无需再担心问题一直找不到答案了。参加课程后，遇到任何问题，老师和助教都会在群里解答。而且你的每一份作业，只要按时完成，都会在课程周期内得到老师的点评建议，不用担心自己在原地踏步，在这套课里，你的进步，我们帮你看见。

课程学习案例

首屈一指的小毅老师 与别的 3D 课老师不同，小毅老师作为现任的京东高级视觉设计师，承接过多次大型电商大促级别的视觉项目设计，成功落地多款上亿流量的设计项目，拥有一线实战和电商 3D 设计经验。聪明的人知道这意味着什么：他教给你的东西，是真正能落地成为作品集，去面试大厂的。

老师作品：

想跟着他一起学习 Blender，掌握 3D 创作的方法，今晚秒杀价就别错过啦

课程原价 599 元， 限时特惠价 499 元

移动端扫码即可报名，网页端右戳报名 ? https://pro.uisdc.com/detail/p_633117b3e4b0eca59c35b9d0/6

Hello~大家好，我是优设插画实战营的讲师@Asen-阿森 ​很多朋友对于配色总觉得棘手，不知道通过什么样的练习方式能够提高色感，那我就推荐大家可以试试速涂的方式来锻炼配色，顺便还能提升自己对造型和细节的刻画能力。在坚持画了 100 张速涂之后，我 get 到了这 4 点配色小技巧：配色被说不好看？高手这160...

Hello~大家好，我是优设插画实战营的讲师 @Asen-阿森 ​

很多朋友对于配色总觉得棘手，不知道通过什么样的练习方式能够提高色感，那我就推荐大家可以试试速涂的方式来锻炼 配色 ，顺便还能提升自己对造型和细节的刻画能力。

在坚持画了 100 张 速涂 之后，我 get 到了这 4 点配色小技巧：

配色被说不好看？高手这160种配色方案直接拿去用！ 颜色可以在很大程度上影响一件设计作品的调性和美观性，要想抓准一件设计作品的调性，选择一个合适的色彩搭配组合尤为关键，为此，葱爷花两天时间整理了 19 大设计调性，多达 160 种配色方案，赶紧收藏起来以备不时之需吧。

阅读文章 >

一、颜色丰富的技巧：利用色相变化 一部分朋友在刚开始画速涂的时候，会遇到一个问题“如何让照片画得看起来不像照片”，这很有可能就跟颜色有关系。

一开始速涂时，我们无法将照片的颜色转化成脑内想要的颜色，就会无脑抄照片或者直接吸照片的颜色，很容易出现颜色单调的问题。

而画面之所以产生了单调的感觉，是因为选色的时候只调整明度和饱和度，这样很难实现丰富的颜色变化。

首先要让色相产生变化。色相有对比的时候，画面自然就会看起来颜色丰富。

尽管很多照片素材本就是五彩缤纷的，当我们把色相彻底拉开的时候，确实能让画面中的颜色变多，但是颜色丰富不等于画面中出现非常多的颜色。多则乱，我们可以在色相有变化的基础上通过明度和饱和度的对比来丰富颜色。

所以想要让颜色丰富，就要在色相中找到变化，而非单纯的只调明度和饱和度，要让画面颜色有“跳跃感”，有变化。

用上面这些色彩组，来具体解释说明一下：

因此我画的这幅「露下新荷」速涂作品，也让色相产生了变化，画出来的荷叶会更有层次感。

接下来我们再大胆一点，在色相变化很大的基础上，让饱和度也完全对比开。

很多朋友也喜欢高级灰配色，高级灰它“高级”在哪，是因为削弱明度对比，且颜色的饱和度低，画面的颜色依旧很丰富，色相有变化。

我们可以把这种方式简单粗暴的理解为，在同样的黑白关系下（明度相同时），选择不同色相的颜色来进行替换，从而达到颜色丰富的效果。

tips：加入冷暖色，色相也产生会变化哦

同时我们要知道，任何一种颜色都是有冷暖倾向的，并没有绝对的意义上的冷暖颜色。红色分冷红暖红，绿色也分冷绿和暖绿。在选色的时候可以有意识地在颜色中，根据整体色调加入冷暖倾向。

二、颜色通透的技巧：利用明度&饱和度的对比 我们从一些照片中就能总结出“通透感”的共性，比如颜色整体的明度更接近于高阶区域，高阶色调的照片整体都会偏亮亮的，明度的数值在 0-33 之间（参数只是大概），比较亮丽；

又或者局部看起来透亮，是因为有饱和度及明度的对比，如同前面讲的冷暖有对比，饱和度明度也要有对比。

三、主观用色的技巧：观察客观色 主观色的前提是先学会观察客观色，利用速涂这种练习方式，从画面中看到越来越多的颜色，可以吸色但不能无脑吸色。弄明白照片中出现的颜色都是什么目的，怎么产生的。

当你观察到的客观色不局限于苹果是红色的、叶子是绿色的，而是你能发现红苹果的底部有桌面的反光色，绿叶子的表面的浅色是墙体的颜色，就代表能看到丰富的颜色，再逐渐进入到半主观色的阶段。

也就是能利用观察到的这些颜色，知道他们出现的目的，在自己的作品中就能够将这种类似的颜色效果画出来。

最后随着速涂练习的增加，你 get 到的颜色搭配组合也越多，就可以尝试从改变画面冷暖、背景颜色等这种简单的地方主观给照片改颜色。

花几分钟时间提炼照片带来的情绪，色彩情绪，明确大关系之后再开始刻画小细节，所有的局部小细节都要在包含在大的色彩关系之下。

一定要时时刻刻考虑最开始定好的冷暖色调（避免颜色过多多杂让画面看起来很碎，或者乱，或者不和谐）。

另外光对画面的颜色影响很大，有些光源色会把固有色本色覆盖掉，在没有光过多干扰下，固有色很稳定。

不断加入光之后，固有色开始发生改变（光的覆盖性），尤其是浅色的物体非常容易受周围环境色的影响。照片画多了之后，逐渐能预见光对固有色的影响而产生的变化，进而自己也会更熟练的运用主观色。

比如下面这两张，一张设定为暖色调并强化光感，营造了温馨的场景；另一张则直接改变照片的颜色，把光源色完全变成红色，其他物体的固有色受光源色的影响很大。

还有一种主观色的方法是利用现成的作品提取色卡，对照片重新进行颜色规划，这个时候我们就要打破固有色的观念，我们画的是颜色，而不是“物体”。

刚开始画速涂的时候，尽量用色块或者明显的笔触感来概括物体的颜色，而不是用笔刷磨或者糊颜色。例如下面这 4 张的物体轮廓不利索，导致细节不够或者笔触糊在一起让颜色脏脏的。

四、懒人配色的技巧 1. 相邻色搭配

在色轮上任意取一个颜色，让它与它左右两边的颜色进行组合，在色相上变化不大，基本是互相包含的关系，这种配色方式想要更丰富，就需要配合着调整明度和饱和度进行搭配。这种搭配方式不容易出错，但同时也更保守一些。

以下为相邻色搭配的作品。

2. 互补色或对比色搭配

在色环上任取一个颜色，再加上它正对面的颜色进行组合，比如黄紫。这种颜色搭配更难，因为互补色是完全不包含对方的颜色，一般都需要再加过一些过渡色让两者更和谐。当然也不排除某些作品中为了表现强烈的视觉冲击力所以会减少过渡色的面积，很强烈的对比，画面也会更活泼。

以下是采用互补色搭配的作品。

3. 三色或四色搭配

这两种方式都是在色环上直接用三角形，或者四边形取 3 或 4 种颜色（色系）。这种方法本身在色相上就已经足够丰富了，且颜色间既相互包容，又独立分明，只要控制好颜色面积，就更容易产生对比性、丰富性以及呼应性。

以下为三色和四色搭配的作品。

对于颜色来说，勇敢试错，才能试对，才能得到更多好看的并且是自己之前从未发现过的 色彩搭配 。

最后我想说的是从来都没有不好看的颜色，只有放错位置的颜色，并且对于新手来说绝大多数也并非是颜色的锅，跟造型结构、构图、甚至对元素及画面的简化概括有很大关系。

以下是一些我日常速涂作品，也都用以上所讲的内容进行配色。

UI设计中最常见的小红点该如何设计？本文从小红点的前世今生、设计要素、应用场景、提升价值的技巧等6个方面，帮你完整掌握。看似简单烦人的小红点提示，原来还有这么多设计细节！

UI设计 中最常见的小红点该如何设计？本文从小红点的前世今生、设计要素、应用场景、提升价值的技巧等6个方面，帮你完整掌握。

看似简单烦人的小红点提示，原来还有这么多设计细节！ 你是否遇到这种场景，打开一个APP想赶紧用呢，结果满屏“小红点”提醒，强迫症的你必须咬咬牙把它们先消掉，才能舒心的正常使用。

阅读文章 >

前言

你是否在打开 QQ、微信后，看到满屏的小红点，在强迫症的趋势下必须把它们全部消掉才感觉到能正常使用，针对社交类型的产品，我们也许愿意一一点开、逐个消除，但对非社交产品来说，很多小红点一无是处，点开纯属浪费时间、不消掉着实看着不舒服。

现实世界中存在两种人，一种是不管应用中有多少小红点都能做到“不管不问”，有需要时就点开对应的一项，对其他的直接无视；另一种是不把小红点处理干净就会原地“爆炸”的人，这就好比一觉醒来，发现脸上长了几颗痘，不挤掉浑身难受。

在笔者看来，小红点不管是为了消除而消除、还是为了将用户吸引到某处，这都是在利用设计手段为产品带来价值。作为设计师，需要思考的是如果降低或打消用户被小红点支配的恐惧、用户是否会跟随小红点的指示而产生转化，今天就来跟大家一起唠唠。

一、小红点的前世今生 1. 用户会“喜欢”小红点吗？

“强迫症”是指人们天生的对事/物的不对称、不和谐产生厌烦心理，并且打心底想要去消除这些“错误”，小红点正是利用了这一人性的弱点而成为了一把营销人手中利器。

那么用户真的会“喜欢”小红点吗？稍微查看一些资料就不难发现，大部分都是教我们“如何消除小红点”的内容，以至于很多应用被迫上线的“一键消除”操作。另外，据公开资料显示，在用户卸载 APP 的原因统计中，“消息提醒”名列前茅，这其中，小红点定然有着莫大的功劳。

事实证明，用户对小红点真的喜欢不起来，可有没有想过，一旦没了小红点，朋友发来的微信消息不能及时看到、爱人发来的短信没无法第一时间回应、钉钉上领导发来的工作任务都没能按时完成、线上购物的快递包裹被人直到顺走了才想起去找、等待打折购买的商品也跟你无缘……。无巧不成书，当自己没有碰到损失就想不到小红点还有用处。

用户对小红点可谓是又爱又恨（表面上恨大于爱），于是产品只要将其放在某些功能入口，用户要么无视它、要么刻意消除或点进去一探究竟，不管如何，站在产品角度目的就此达成。强调一点，别因为用户不得不接受就毫无底线的干扰用户，必须要在产品需求和用户体验上做到平衡，尽量想办法降低用户的抵触心理，不要天真的以为有了第一次就有很多次，没准这就是用户最后一次使用。

2. 小红点的发展历程

在如今的移动互联网时代，各大 APP 中几乎都有小红点的身影，它已然与我们的日常生活变的密不可分。那么，这些随处可见的小红点最初到底从何而来，先来了解一下小红点的起源。

关于小红点的发源地虽然众说芸芸，但其中有一个较受大众认可的说法，那就是小红点最早来自于黑莓手机系统。2009 年，黑莓推出 9700 系列，所搭载的黑莓系统使用了带“*”号的小红点，到了 2013 年，Apple 公司注册了相关专利并在 iOS 系统中使用小红点，从此，Apple 成为最终赢家、并在 iPhone 中将小红点发扬光大。

iOS 设计指南中，在推送通知方面对小红点的使用有明确的规范说明：每个通知都包含一个应用名称、APP 图标及一条消息，通知的到来伴随着声音提示、小红点即会出现在图标的右上角。随后，Android 也采用了小红点的这种视觉表现方式，以至于后来用户逐渐习惯了这种设计，小红点也成为了各 APP 的通用设计规范。

3. UI 设计中的小红点

小红点是大家最通俗的叫法，在 UI 设计中还有一个名称叫徽标（Badge），它指的是出现在图标或文字右上角、可带有数字或文字的红色圆点，小红点的出现则意味着有新内容或待处理的信息，其目的是为入口导流，起到引导用户操作、增加点击量的作用。

4. 深度了解小红点

小红点作为消息提醒的一种方式，并不仅仅只是表面上看到的视觉设计问题，它真正是一个产品营销策略及如何调度用户注意力的问题，所以我们在设计时要有敬畏之心，切勿乱用/滥用小红点，需要在产品的长期运行中不断寻找合理的契机再伺机而为，毕竟用户体验与产品利益挂钩。

用户对不同类型产品的消息提醒，其投入的精力成本和接受程度是不一样的。例如对 QQ、微信等即时通讯类产品消息的处理效率可以说是非常高，不管是认识的还是不认识的，只要是列表中的好友发来消息，有很大的概率立即点开回复，甚至在没有小红点的情况下也会去检查会话列表，以防有什么消息被漏掉；而抖音、快手这种内容型产品明显不一样，基于产品本身就没有那么强的诉求，一旦消息过多影响内容浏览就会让用户产生反感，直至忍耐度降低，就算熟人发来消息，大多数人都没有立即打开、即时回复的欲望。

这里必须要明确一点的是：适合其他产品内容提醒的 小红点设计 、并不一定适合自己的产品。

一味追求「高打开率」的小红点设计在短期内或可满足产品需求，在用户心中，不会刻意在乎小红点的多少，真正关注的是这个提醒是否跟“我”有关，如果产品不懂得节制，仅依靠“红点”的堆积来时刻吸引用户注意力，时间一长用户就会麻木，可能直接忽略掉小红点或因为不够专注而遗漏掉与自己相关的内容。所以在设计小红点之前，需要对其有一个清晰的认识，了解小红点的属性、使用场景及设计原则，然后酌情使用。

二、用户为什么会处理小红点 1. 打破信息自身的平衡

在正常情况下，任何内容都是没有小红点的，一旦某个地方突然出现小红点则意味着信息发生了变化或出现了异常，极度破坏原本信息的平衡，用户在本能反应的驱使下可能会不由自主的点开，消除红点或者一探究竟，不管如何，小红点诱发用户点击的目标就完成了。

2. 破坏周边环境的和谐

「相似性」原理告诉我们：共同视觉元素的物体看起来更有关联性，我们倾向于将看起来相似的对象视为一组或者一个模式，例如用颜色、形状，大小，方向以及纹理等视觉元素，共同组成相近的样式。

小红点的出现就严重破坏了周边的平衡、以及画面的和谐，让其中的某个内容变得与众不同并快速引起用户重视并诱发用户的点击行为。利用此种方式达到目的的还有如底部标签栏引人注目的「发布」按钮、金刚区的某个动效 icon…

3. 给用户带来不适

具有强迫症心理的人都明白，他们喜欢追求极致的完美，对于不和谐、不对称的事物会产生厌烦心理，并且会试图去纠正这些“错误”。小红点正是利用了人们的这个弱点，通过打破原本信息平衡，给用户带来不适，让用户主动点击并消除它，业务导流的目的也就此达成。

三、小红点设计三要素 小红点的天然使命就是为用户提供明确提醒，它可以是系统强加给用户的（功能/内容更新）、也可以是用户之间被动产生（对方发来的消息）或因用户自己的主动行为产生（操作结果反馈），不管以何种形式出现，它必须符合用户固有认知以及具备很强的可视性，这里我们可以从小红点的色彩、位置、形状三个方面来了解。

1. 色彩：为什么是红色

设计师都知道，红色会有一种危险、警示的感觉，并能与其他信息形成强烈的对比，很容易引用户起注意，所以小红点使用了高亮度的红色用以吸引用户注意力，促使用户去点击。

如下图所示，在不同颜色的徽标中，你是否对小红点情有独钟？

当然，也有一些产品将其他主题色用在圆点徽标中（国外产品居多），在视觉上显得与众不同，不过这也只是在少部分场景中用到，并非都统一成了主题色，且这跟产品想传达的信息权重、用户群体及内容属性有很大的关系，如果你对这一块拿捏的不是特别准，建议不要尝试，小红点虽然很大众化、很普通，可至少不会出错。

2. 形状：圆形的优势

相较于圆形，没有任何锋利的边缘及棱角，它本身的简洁性能让界面看起来更和谐、对用户更友好，且能将视线聚焦至圆的中心点，对于凸显圆形当中的文本再合适不过了。

设想一下，如果小红点用的是三角形、矩形或其他奇奇怪怪的形状，你看到后的第一反应会是什么？

一些文本内容稍多的小红点会使用圆角矩形（长方形），通过将圆角值调到最大，依然不影响使用，不存在任何棱角的圆角矩形，用户看到后的第一感觉是近乎椭圆形。

3. 位置：唯一的右上角

大家所看到的小红点绝大多数都是在元素的右上角，前面讲到过，小红点主要用于消息提醒，所以必然要依附于某个主体信息、作为辅助提示的存在，我们把主体信息看作一个整体（物体），那么它的中心点和四角存在不同的力场，会对用户产生不同的吸引力，下面将用排除法帮你找到小红点最合适的位置。

首先，为了不影响主体信息的识别性，直接排除小红点出现在元素中心位置的可能；

其次，在尼尔森的用户阅读视线模型中说过，用户浏览信息的视觉动线是从左到右、从上到下，小红点既然是辅助信息，放在元素左上角就会喧宾夺主，不太合适；

再者，因受到重力的影响，如果小红点出现在元素的左下角、右下角，总有一种向下倾斜的感觉，明显也不合适，这就是为什么倒三角“▽”总感觉立不起来、有种要倒下的感觉，而正三角“△”却能保持平衡，具有较强的稳定性；

最后只剩下右上角，虽然笔者也无法说出放在右上角的好处，甚至同样会对画面造成一定的破坏，但与出其现其他位置相比，右上角的劣势没那么明显，不管是出于产品需求、还是视觉体验，用户的接受程度自然会高一些。

（PS：不要去玩那一套，为了证明某个观点的正确性就使劲吹嘘正面、或拼命抹黑对立面，小红点放在右上角与其说明好处，倒不如说是别无选择）

有时候，我们在元素底部也会看到类似小红点的存在，例如头像下方的 VIP 标记、右下角的性别提示（女：小红点）、用户在线状态等，这些只是信息组合的一种方式，并非小红点。需记住一定，小红点的使命是传递新的消息、引导用户点击，用户一旦操作，小红点的目的就此达成、即刻消失。

四、应用场景及视觉表现方式 很多产品都会不停的更新迭代，其功能也在不断的丰富，为了提升用户对相关内容的点击率，于是小红点就被运用在了各个业务入口。因为使用场景及内容的重要程度不同，小红点也衍生出了几种不同的形式以满足对应的使用场景，笔者在这里作出了整理归类，分别对以下三种常见的样式进行分析。

1. 纯红点

纯红点是较为常见的类型，它的出现意味着“有新的内容、新的消息”，是一种较为轻量级的提醒方式，引导用户进入更深的层级或打开特定内容，从而达到增加点击量、提升业务曝光率的目的。例如：圈子有最新动态、APP 有版本、功能有新增内容等。

2. 红点/数字组合

相较于其他方式，这算是最强的红点提醒了，这种方式由纯红点演变而来，大多使用在与社交相关的功能模块中，通过红点加数字（具体数量）的消息提醒，吸引用户注意力，辅助用户获取更多信息并快速做出判断。例如：会话列表的未读消息、系统消息通知等。

3. 红点/文字组合

常用于运营活动场景中，通过“免费、热门、新、New…”等较为热门的文案，对用户产生很大的吸引力，这也是基于大多数用户的贪小便宜心理、猎奇心理等，促使用户产生强烈的点击欲望，从而达到营销的目的。

五、提升小红点价值的小技巧 1. 确保清晰的路径导向

不管是哪种类型的应用，在投放红点之前一定要考虑清楚每个层级的合理性，让所有页面的信息层级能够串联起来，确保用户有一个清晰的路径导向。

在一些体验较差应用中，点击小红点跳转至对应的页面后、却找不到与小红点相关的内容，直接导致了信息断层，用户根本不清楚产品到底想提示什么，返回到上层页面后，小红点依旧无法消除，这时候用户只能是一脸茫然，甚至一度吐槽、产生反感。

针对初/中的设计师，如果产品的功能信息繁杂、层级很难理清，可以尝试从小红点内容的最终级页面逐渐向上一层推导，这样做便于每个页面的小红点层级关系能很好地继承起来。

2. 匹配用户价值

对于小红点的投放，不能一味的图“更多、更大、更有吸引力”这种为了投放而投放的自嗨，必须要让当前内容与用户价值相匹配，才能起到小红点真正意义上的作用。

另外，也需要注意每个页面前后信息的一致性，如果最外层的小红点用了数字统计的样式，那么下一层页面所有红点数字之和应该与外层的数字统计相等，切勿将纯红点、数字组合、文字组合混合统计在一起，避免让用户产生疑惑，如有必要，下一页面的小红点可能样式云集，那就在最上层使用纯红点就可解决这个问题。

3. 微动效的使用

因为人们天生会对动态的事物更加敏感，将这一特性运用在小红点中是吸引用户注意力的好方法。很多 APP 在金刚区图标小红点中融入了动态效果，不仅能快速吸引用户注意力，还让小红点具有情感化或趣味性、带给用户更愉悦的使用体验。

动态效果只适用于运营、推广性质的文字小红点中，如果用在纯红点、数字红点中，可能会适得其反。

4. 友好的消除方式

早在 2014 年，手机 QQ 上线小红点“拖拽爆炸”的消除方式广受好评，相较于每次都要点击跳转页面、再返回的单个消除方式既便捷又有趣味性，同时又能避免追求一键清除的便捷而造成失误的尴尬（眼尖的网友会发现，大部分社交类型的应用都没有一键清除功能）。

背后的故事！手机QQ的一键消除红点功能是怎么诞生的？ 腾讯社交用户体验设计部 YU：人类似乎天生对不对称、不和谐的事物有厌烦心理，并且想要去纠正这些“错误”，简而言之就是大家平时所说的“强迫症”。

阅读文章 >

我们见过的小红点消除方式很多都是点击即可消除，还有一些需要跳转多个页面触达最终信息才能消除，同时也有部分产品为提供更便捷的操作，增加了「一键清除」功能。

那么这个页面到底是否适合一键清除操作，还得根据实际情况而定，且看以下分析：

社交/办公类型产品（数量不可控）：不适合一键清除功能，因为任何一条好友信息都有可能对用户很重要，用户有必要单独触达、且也有耐心一一点开并详细查看，一键清除有可能导致用户误操作，造成对信息的不可控；

其他类型产品（红点少）：无需一键清除，因红点本身就较少的原因，且不是必须要打开，用户可忽略或在感兴趣之余一探究竟，单独触发消除即可；

其他类型产品（红点多）：因很多红点信息是非必要打开的，可使用一键清除功能处理庞大的推送信息，让页面瞬间清净。

（PS：以上仅供参考，虽然没有足够的数据支撑，但笔者敢说的是大部分产品都是据此而行，而且也没有任何一个产品能满足所有用户的需求）

5. 验证投放效果

在一个应用中，我们在成百上千的业务入口中挑选一部分、利用小红点作为引流方式，即便前期做了充足的准备，在用户真实的使用场景中，也有可能会不合适，这时候就需要提前做好数据埋点，通过后期对用户的点击率、转化率、层级深入程度等进行综合分析，如果未达预期，则需要做出优化调整，更改小红点投放入口或表现方式。

（PS：对于新方案的规划，基于原有方案通常会设定一个提升 20%~30%的预期值，10%是勉强能接受的最低标准，如若低于 10%，必定会再次做出优化调整）

六、常见问题及处理方式 1. 避免图标元素自带红点

小红点已成为一种内容/消息提示的标志性象征，只要被用户看到就会认为有新的内容出现，在正向的回应中还好，但如果敏感的用户刻意忽略、或者以消除红点为目的的点击行为，这都将增加用户的理解成本和操作成本，得不偿失。

我们在创作图标的过程中，需要避免图标右上角本身就自带小红点的情况出现，因为绝大多数的图标造型、元素形状/大小并非无可替代，若因特殊情况不可更改，请将右上角圆点换成除红色以外的其他颜色，这也不失为一种解决方案。

2. 小红点需克制投放

很多产品为了营销、导流等原因，将大量的小红点强加给用户，这样很容易产生极端情况，要么造成用户的厌烦心理、对产品的满意度下降、甚至卸载应用，要么用户对过多的小红点产生免疫、看到后直接忽略或为了消除而消除，最终都无法达到产品想要的结果。

在投放小红点之前，除了要分析清楚投放目的及合适的入口，还需要思考是否有其他更好的方式能代替小红点，力求发挥其最大价值，如此才不至于顾此失彼。

3. 红点内容的长度限制

针对数字/文字组合的小红点，因空间有限，需提前设定好内容的长度极限值。数字红点在 99 条内都属于实时统计，超过 99 条通常会统一成“99+的样式”；两个字符为文字红点的最佳展示方式，我们在设定上限时，一般不超过 3 个字符。

4. 主层级红点数据统计

如果次级页面的小红点数量较多且样式混搭、在主层级页面需用数字红点统计数量，那么只统计次级页面只带数字红点消息的总量即可，纯红点与文字组合的直接忽略。

5. 矩形小红点的用法

在国内的应用中，矩形小红点应该很难见到，但你可能还不知道，有很多小红点都是矩形，只不过是将圆角半径值调到最大、以障眼法的形式让用户误以为这就是这个圆形。

不要以为这样做多此一举，当内容由少变多时，小红点可自由纵向、横向延伸，非常方便。例如：红点中的“折”是圆形，当变成“折扣”时就变成了长椭圆（圆角矩形）。

6. 红色元素上的小红点

当小红点用在红色图标、图片或色块时，就会与之融合在一起，很难单独看出小红点的存在，通过给红点描边就能将其分离出来，确保在红色背景或载体中能被用户清晰的看到。

7. 添加合适的投影

除了上述所说给小红点添加描边外，使用投影效果也是突出小红点不错的方式（不适合红色背景），通过吸取红点色值、然后适当加深，让小红点有一种悬浮效果，呼之欲出。

七、结语 整体看来，小红点已成为页面导流的一种有效途径，虽然不同的应用业务入口和功能使用场景也有所不同，但其设计的本质应该是如何更高效的、友好的提醒用户，不要为了应付了事而随意投放，最终红不仅严重影响用户体验，还有可能造成用户流失。

在设计小红点之前，要考虑清楚投放的必要性、以及跟产品风格一致性的表现方式，在条件允许的情况下适当增加趣味性，这样才能让那些烦人的“小红点”真正被用户接受，对产品转化起到正向效果。

以上是笔者对小红点的相关思考与总结，希望对大家有所帮助，如有不同意见，欢迎相互交流、取长补短。

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

Hello~大家好，我是优设插画实战营的讲师@Asen-阿森 ​很多朋友对于配色总觉得棘手，不知道通过什么样的练习方式能够提高色感，那我就推荐大家可以试试速涂的方式来锻炼配色，顺便还能提升自己对造型和细节的刻画能力。在坚持画了 100 张速涂之后，我 get 到了这 4 点配色小技巧：配色被说不好看？高手这160...

Hello~大家好，我是优设插画实战营的讲师 @Asen-阿森 ​

很多朋友对于配色总觉得棘手，不知道通过什么样的练习方式能够提高色感，那我就推荐大家可以试试速涂的方式来锻炼 配色 ，顺便还能提升自己对造型和细节的刻画能力。

在坚持画了 100 张 速涂 之后，我 get 到了这 4 点配色小技巧：

配色被说不好看？高手这160种配色方案直接拿去用！ 颜色可以在很大程度上影响一件设计作品的调性和美观性，要想抓准一件设计作品的调性，选择一个合适的色彩搭配组合尤为关键，为此，葱爷花两天时间整理了 19 大设计调性，多达 160 种配色方案，赶紧收藏起来以备不时之需吧。

阅读文章 >

一、颜色丰富的技巧：利用色相变化 一部分朋友在刚开始画速涂的时候，会遇到一个问题“如何让照片画得看起来不像照片”，这很有可能就跟颜色有关系。

一开始速涂时，我们无法将照片的颜色转化成脑内想要的颜色，就会无脑抄照片或者直接吸照片的颜色，很容易出现颜色单调的问题。

而画面之所以产生了单调的感觉，是因为选色的时候只调整明度和饱和度，这样很难实现丰富的颜色变化。

首先要让色相产生变化。色相有对比的时候，画面自然就会看起来颜色丰富。

尽管很多照片素材本就是五彩缤纷的，当我们把色相彻底拉开的时候，确实能让画面中的颜色变多，但是颜色丰富不等于画面中出现非常多的颜色。多则乱，我们可以在色相有变化的基础上通过明度和饱和度的对比来丰富颜色。

所以想要让颜色丰富，就要在色相中找到变化，而非单纯的只调明度和饱和度，要让画面颜色有“跳跃感”，有变化。

用上面这些色彩组，来具体解释说明一下：

因此我画的这幅「露下新荷」速涂作品，也让色相产生了变化，画出来的荷叶会更有层次感。

接下来我们再大胆一点，在色相变化很大的基础上，让饱和度也完全对比开。

很多朋友也喜欢高级灰配色，高级灰它“高级”在哪，是因为削弱明度对比，且颜色的饱和度低，画面的颜色依旧很丰富，色相有变化。

我们可以把这种方式简单粗暴的理解为，在同样的黑白关系下（明度相同时），选择不同色相的颜色来进行替换，从而达到颜色丰富的效果。

tips：加入冷暖色，色相也产生会变化哦

同时我们要知道，任何一种颜色都是有冷暖倾向的，并没有绝对的意义上的冷暖颜色。红色分冷红暖红，绿色也分冷绿和暖绿。在选色的时候可以有意识地在颜色中，根据整体色调加入冷暖倾向。

二、颜色通透的技巧：利用明度&饱和度的对比 我们从一些照片中就能总结出“通透感”的共性，比如颜色整体的明度更接近于高阶区域，高阶色调的照片整体都会偏亮亮的，明度的数值在 0-33 之间（参数只是大概），比较亮丽；

又或者局部看起来透亮，是因为有饱和度及明度的对比，如同前面讲的冷暖有对比，饱和度明度也要有对比。

三、主观用色的技巧：观察客观色 主观色的前提是先学会观察客观色，利用速涂这种练习方式，从画面中看到越来越多的颜色，可以吸色但不能无脑吸色。弄明白照片中出现的颜色都是什么目的，怎么产生的。

当你观察到的客观色不局限于苹果是红色的、叶子是绿色的，而是你能发现红苹果的底部有桌面的反光色，绿叶子的表面的浅色是墙体的颜色，就代表能看到丰富的颜色，再逐渐进入到半主观色的阶段。

也就是能利用观察到的这些颜色，知道他们出现的目的，在自己的作品中就能够将这种类似的颜色效果画出来。

最后随着速涂练习的增加，你 get 到的颜色搭配组合也越多，就可以尝试从改变画面冷暖、背景颜色等这种简单的地方主观给照片改颜色。

花几分钟时间提炼照片带来的情绪，色彩情绪，明确大关系之后再开始刻画小细节，所有的局部小细节都要在包含在大的色彩关系之下。

一定要时时刻刻考虑最开始定好的冷暖色调（避免颜色过多多杂让画面看起来很碎，或者乱，或者不和谐）。

另外光对画面的颜色影响很大，有些光源色会把固有色本色覆盖掉，在没有光过多干扰下，固有色很稳定。

不断加入光之后，固有色开始发生改变（光的覆盖性），尤其是浅色的物体非常容易受周围环境色的影响。照片画多了之后，逐渐能预见光对固有色的影响而产生的变化，进而自己也会更熟练的运用主观色。

比如下面这两张，一张设定为暖色调并强化光感，营造了温馨的场景；另一张则直接改变照片的颜色，把光源色完全变成红色，其他物体的固有色受光源色的影响很大。

还有一种主观色的方法是利用现成的作品提取色卡，对照片重新进行颜色规划，这个时候我们就要打破固有色的观念，我们画的是颜色，而不是“物体”。

刚开始画速涂的时候，尽量用色块或者明显的笔触感来概括物体的颜色，而不是用笔刷磨或者糊颜色。例如下面这 4 张的物体轮廓不利索，导致细节不够或者笔触糊在一起让颜色脏脏的。

四、懒人配色的技巧 1. 相邻色搭配

在色轮上任意取一个颜色，让它与它左右两边的颜色进行组合，在色相上变化不大，基本是互相包含的关系，这种配色方式想要更丰富，就需要配合着调整明度和饱和度进行搭配。这种搭配方式不容易出错，但同时也更保守一些。

以下为相邻色搭配的作品。

2. 互补色或对比色搭配

在色环上任取一个颜色，再加上它正对面的颜色进行组合，比如黄紫。这种颜色搭配更难，因为互补色是完全不包含对方的颜色，一般都需要再加过一些过渡色让两者更和谐。当然也不排除某些作品中为了表现强烈的视觉冲击力所以会减少过渡色的面积，很强烈的对比，画面也会更活泼。

以下是采用互补色搭配的作品。

3. 三色或四色搭配

这两种方式都是在色环上直接用三角形，或者四边形取 3 或 4 种颜色（色系）。这种方法本身在色相上就已经足够丰富了，且颜色间既相互包容，又独立分明，只要控制好颜色面积，就更容易产生对比性、丰富性以及呼应性。

以下为三色和四色搭配的作品。

对于颜色来说，勇敢试错，才能试对，才能得到更多好看的并且是自己之前从未发现过的 色彩搭配 。

最后我想说的是从来都没有不好看的颜色，只有放错位置的颜色，并且对于新手来说绝大多数也并非是颜色的锅，跟造型结构、构图、甚至对元素及画面的简化概括有很大关系。

以下是一些我日常速涂作品，也都用以上所讲的内容进行配色。