Ant Design 的核心模型 PVPPT

前言

Ant Design 是什么？

为什么叫做 Ant ？和蚂蚁金服的 Ant 同名，是第一层解释，也是广为人知的一个版本。但据玉伯和勺子事后回忆，除了这个意思，当时取这个名字还有另外一层期许：Ant = Art and Technology。一个艺术和技术交织的设计体系，一种感性和理性交织的设计理念。

为什么叫做 Design ？造一个永不过时的轮子。作为在中国最爱造轮子的一群前端团队，深切明白一个道理：前端技术体系很容易过时，同时设计风格也会淘汰，而好的设计体系可以更好存活下去。一旦你有了一套稳定的设计体系，当新的技术栈和设计风格来临时，你可以快速复制、迭代和演进。

——《Ant Design 1.0 背后的故事：把艺术变成技术》

Ant Design 从诞生的第一天开始，就不把自己局限在一个 UI 组件库。从 1.0 的「一个 UI 设计语言」，再到 3.0 的「服务企业级产品的设计体系」，我们做了很多的思考和行动，不断拓宽  Ant Design 的内涵和实践。

为什么要提出核心模型

在一次内部会议中，

林外说：Ant Design 已经做 4 年了。玉伯立马纠正：Ant Design 才做了 4 年，刚刚起步，我们起码要做 30 年。

作为立志做一个 30 年的设计体系，光依靠一两代人的努力是远远不够。我们希望建立内在的核心模型，能总结 Ant Design 的内核，并指引一代又一代的 Ant Designers 去迭代、去进化。

此外，今天的 Ant Design 远远不止一个 UI 组件库，我们诞生可视化资产（AntV）、插画资产（海兔），以及体验设计、增长设计、品牌设计等各种策略；同时，在可预见的未来，我们也将会涉及工业设计、运营设计等工作范畴。随着业务复杂性和人员复合性的不断增加，我们希望建立内在的核心模型，去诠释和融合新生力量，去构建一个紧密联系的体系，而不是一味的堆砌。

找到 Ant Design 的思考原点，衍生出我们的价值取向，泛化原则和模式来解决一再出现的问题，并通过工具化和团队不断放大效能、赋能生态。让每个 Ant Designer 都有一颗心，有一张图，打好一场仗。

Ant Design 的核心模型是什么？

Ant Design 的核心模型是 PVPPT。

• Premis 设计假定：设计思考的原点，所有理论和实践的根基。
• Value 设计价值观：进行取舍的起点，是高度抽象。eg：客户第一
• Principe 设计原则：价值观衍生出的若干判断标准，容易被普通员工学习和记忆。eg：不拿客户一分一毫；三大纪律、八项注意。
• Pattern 设计模式：常见问题的一般解决方案。eg：客户在公开、重大场合赠与礼品，如何处理？应该先收下，不要驳面子，但事后退回礼品并向公司报备情况。
• Tool 设计工具：落实理念并提升效率。eg：提供一整套的客户第一的提示、报备、监控等功能的系统，小白也能落实客户第一。

映射到 Ant Design 4.0 ，可以用一张大图解释：

Postulate 假定：每个人都追求快乐工作

是假定，不是假设

Hypothesis VS Postulate

Hypothesis：在常规语境中，通常用作提出一个提前结论，后续通过实验/实践来证明这个结论是对或者错的。这是一切的终点。

Postulate：一切体系基于这个假定之上，源于这个假定。是直接被我们相信的，不需要被证明，同时可以被普遍接受。这是一切的起点。

每个人都追求快乐工作。

• 在体系中的定位：这句话是所有理论的起点，还是所有体系要去证明的终点？我觉得是前者，是我们的价值信仰，而不是我们要用实践去证明的假设。类比：光速在真空中不变，是狭义相对论的起点之一。
• 现有成果的适配：「每个人都追求快乐工作」如果是我们要去证明的事情，就是无法完成的一句话，我无法知道每个人的想法 & 很多人都不工作。如何是 Hypothesis 的话，更应该改成「快乐工作的人占大多数」等。

「每个人都追求快乐工作」是我们所有事情的起点，而非我们要去论证的终点。所以，我建议 Postulate（偏学术）/Premise/Presume（偏口语）/Assumption 取一个；同时，中文统一改成假定，而假设。

假定的灵感来源：

假定是这个体系的根基和最基础的设定，不需要被证明。寻找人机交互中，但是假定是有一定的灵感来源：

• 灵感 1：人是偷懒的，尽可能节省脑力和体力。 快
• 灵感 2：人想通过工具连接更大的载体，实现自我价值，造就超我，并在这个过程中体验到过程的快乐（心流）。 乐
• 灵感 3：人类的进化速度远远赶不上数字世界的发展速度，差距越来越大，但是人却还在不断追求全知全能。 追求

• • 在近 200 年，人类的注意力、感知认知能力、时间都没有本质提升，比如：短时记忆 7+2 的数字；但是短短 70 年，数字世界发展能力成千上万倍提升。有限的人类意图和接近无限的系统能力之间的差距会越来越大。
  • 庄子说：吾生也有涯，而知也无涯，以有涯随无涯，殆矣。
  • 必须找到更加自然的人机触发方式，让人类的意图和系统的能力在合适的时机、合适的场景触发，而不是一味的强占屏幕，以及用户的注意力。

工作和快乐的悖论

弗洛伊德说：工作和爱，使人快乐的秘密。

生产类活动（工作和学习）：占据人生的一半时间。是当代人，绕不开的活动。

工作能让人处于高挑战、高技巧的状态下，且专注、深富创造力，现在工作成为一种技术性展现天分和创造力。

但是现实情况，工作并不快乐，心流也并不多

历史上两大悖论，得到解决：

• 1.亚里士多德：空闲即自由。工作缺乏挑战，缺乏天分和创造力。但，各种科技的突破使工作不再被视为牛马即可胜任的体力工作，而成为一种技术性以及展现天分与创造力的活动。
• 2.工作环境恶劣，环境不人道。Done

数字世界中，工作和快乐特有矛盾

• 偏见：工作是强制的，限制人类的自由。无法实现我们的目标，为老板工作，让我们觉得没有意义。
• 数字世界迭代的光速，和人类进化的龟速之间的矛盾。但在数字世界的人机交互中，过于冗余的信息，让人分心。过多信息/过多功能，强占用户的注意力，分散用户目标。

每个人都追求快乐工作。

Values 价值观

假定和价值观

基于假定，就很容易衍生对应的价值观。

• 每个人：可以分成用户和设计者
• 工作：描述 Ant Design 业务范围
• 快乐：分成快+乐，并分别推导出

Natural 自然

系统和用户的限制

• 通过场景化，动态调整系统显示或者显示哪些功能
• 通过注意力，用户可以时刻调整哪些是显性，哪些隐性。显性和隐形的区别，就是耗能是否超过阈值；而注意力就是为不同的目标和意识注入能量，从而将它变得显性或者隐性。

数字世界中，矛盾的解法

不是所有的人机交互都是显性进行的。通过提供显式和隐式服务，满足用户显性和隐性的需求。

• 隐隐，不随机的随机算法
• 显显，抖音的三次出现；二维码扫一扫，付款码
• 显隐，根据不同地理位置，显示不同的音量，产生立体感。（从显显来的）；语雀的分享。
• 隐显，键盘输入法

人机自然交互：节省用户脑力和体力，让合适的功能在合适的场景触发；让用户专注于任务，而非界面，从而产生心流。

案例和方法

方法：

• 函数矩阵
• 和 Growing 保持一致，就是让更多有价值的事情被发现，让更多行为串联。

Certain 确定性

设计者的快——确定：绝大部分数字产品，都是分工合作的产物。而人越多，团队合作的熵就会变高，这是一切低效的来源。尽可能少的功能，尽可能简单易学的规则，尽可能模块化的方案，让所有人都在一个思维频道推理出同样的方案，这能明显降低合作熵。

用户的快——确定：一致性的方案，降低学习成本。有利于用户在系统内，系统外快速学习和操作，是效率保障，有效降低学习熵。

高效的来源：

• 抽象性：设计规则的抽象和可推理：根据信息密度和操作推理的图表；反馈的不同力度。
• 引导性：开箱即用的设计资产，人人都是设计师。新增两类资产：可视化资产（AntV），插画资产（海兔）。

案例和方法

保持用户端的一致性。

• 视觉一致性：不同资产之间的搭配直接的和谐。

• icon（问号❓和感叹号❗️）和颜色（红色和橙色）

• 交互一致性：

• • 输入框不同的，暗示输入长度。

• 文案一致性：

• • 确定和取消。

Meaningful 意义感

Meaningful：have meaningful

• having a serious, important, or useful quality or purpose.

“making our lives rich and meaningful”

• communicating something that is not directly expressed.

“meaningful glances and repressed passion”

有意义感的人机交互行为：

• 统一明确的目标：形成一个个明确的子目标，并助力主目标的完成，让每个子活动都有深意。

• • 语雀：帮助他进行知识沉淀，提升协作效率。
  • eg：错误的反馈，以及引导用户动作走向下个动作。

• 全情投入的过程：让每个子目标都通畅、全情投入的完成，如非必要，绝不耗散用户的精力。

• • 让用户的能力匹配挑战，让过程有反馈，让用户沉浸在心流体验中。没有冗余的信息和功能侵入用户大脑，迫使用户不得不调整注意力，处理危机，从而导致既定目标无法完成。
  • eg：开会，让大家聚精会神，降低设计熵；或者，让人呼呼大睡。这两件都是有意义的。产生 心流。

案例和方法

缺少

Growing 生长性：让产品价值被发现；让人机互动更频繁。

Growing

adjective

UK  /ˈɡrəʊ.ɪŋ/ US  /ˈɡroʊ.ɪŋ/

increasing in size or quantity

Growing 理解成生长：产品越来越多的价值和意义，被用户发现和使用；从而，产品和用户的行为不断加强，生长成一个有机整体。这是重点。

为什么不用大家都熟悉的增长，而是生长。增长很容易把大家思维引向增加，用户数量不断增加，这是生长的一部分，但不是全部。就好比自然界里的竹子，十年可能都不增加，但短短几个月就破土而出，长成十几米高的竹子。同时，增长这个词也不合适在成熟期出现，因为这个阶段，很多产品不再增加用户数量，而竹子还在生长，甚至衰退。

生长：通过交互和连接，是让用户和系统一起成长，生长成一个更大的共生体。

适用阶段：

• 产品高速增长期：增量用户量不断涌入，发现产品有价值、有意义的功能。

• • eg：拉新、激活、推荐

• 产品平稳期和初期：存量用户，不断和产品产生更多有价值、有意义的互动

• • eg：留存、参与度、商业化

案例和方法

• 增长大图：一张活跃的，管控
• 数据指标：小样本、大样本的指标
• 函数矩阵：

四个价值观的关系

https://www.zhihu.com/question/20151696

在不同的时机，强调不同的设计价值观，有助于产品落地。

• 0-1 启动阶段：更多通过提升效率，使得产品能快速试错。核心目标：快速试错，验证产品核心需求；做 MAP 最小惊艳版本。

• • 保持克制：能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。
  • 面向对象的方法：探索设计规律，并将其抽象成「对象」，增强界面设计的灵活性和可维护性，同时也减少「设计者」的主观干扰，从而降低系统的不确定性。
  • 模块化设计：将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板，节约无谓的设计且保持系统一致性，让「设计者」把创造力专注在最需要的地方。

• 1-10 打磨阶段：不断增加和打磨功能，并探索用户和产品的互动方式。核心目标：围绕种子用户，打磨产品、提升体验。

• • 完善亮点：跟踪并做好意见反馈，做好数据分析，不断改进和提升产品体验，以获得种子用户的持续认可。让亮点成为用户选择的原因。
  • 补齐短板：补齐市场竞争中的短板能力，保障一定体验以上；同时，最好和核心能力保持关联和互动。别让缺点成为用户放弃的原因。
  • 发现互动方式：通过数据分析、定性研究，发现用户和产品的互动方式，为规模化提供基础。
  • 产品变现：启动和透传变现信息，通过折扣、试用的方式告知商业话目标。

• 10-N 增长阶段：把成功的互动方式复制给增量用户，快速规模化。核心目标：获得用户，转化变现，建立品牌，名声远播。

• • 拉新/激活/留存/推荐：将发现的行为模式快速复制，并实现规模化。
  • 品牌建设：
  • 产品变现：选择合适、精准的用户，进行付费引导。

• N 成熟阶段：存量用户和产品之间互动行为，不断增加和成长为一个更加紧密的有机整体。核心目标：活跃并维系好老用户，同时保持新用户增长，继续稳定地实现创收盈利。

• • 留存/参与度：存量用户继续发现更多产品能力，产生更多互动。
  • 产品变现：继续做好用户转换和变现工作，进一步提升营收能力。

• 0-N 的整个生命阶段：自然是每个人机互动横切面的要求。作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。我们已做了部分探索，并将追求『自然』作为我们未来持之以恒的方向。

• • 在行为的执行中，利用行为分析、人工智能、传感器、元数据等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然。
  • 在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实的产品体验。详见视觉语言

Principles 原则

设计原则：价值观衍生出的若干判断标准，容易被普通员工学习和记忆。eg：不拿客户一分一毫；三大纪律、八项注意。以下是和设计师 海纳 一起草拟的组件设计原则。

可视化图表基本原则

• 准确：从数据转化到可视表达时不歪曲，不误导，不遗漏，忠实反映数据里包含的信息。
• 有效：信息传达有重点，克制不冗余，避免信息过载，用最适量的数据-油墨比（Data-ink Ratio）[1]表达对用户最有用的信息。
• 清晰：表现方式清楚易读，具条理性，可以帮助用户快速达成目标，在最少的时间内获取更多的信息。
• 美：对数据的完美表达，合理利用视觉元素进行艺术创作，不过度修饰，给用户优雅的体验。

UI 组件

• 好的 antd 组件

• • 扩展性（开发者视角），组件需要适度可扩展，添加新能力，尤其对于新的组件，新功能坑位需要预留
  • 极简性（更小空间，更多功能；不把次要功能放在空间上，而在用户行为和时间上。组件排版和更加自如。设计师者视角），eg：分页器，以及 InputNumber
  • 一致性/确定性（用户视角）：组件间的保持一致体验，方便学习和使用;

• 好的 TechUI 区块/模板 区块感觉就像有个老师，在引导学生做题。

• • 引导性：现有区块内容不适用时，能举一反三在一定的规则下添加新内容。(公式推理)
  • 覆盖度：提供可替换元素，帮助区块覆盖该场景下 80% 业务需求。（真题覆盖）
  • 一致性/确定性：容器间的基本规则保持一致，方便学习和使用。（全部选 C）

Patterns 模式

设计模式：常见问题的一般解决方案。eg：客户在公开、重大场合赠与礼品，如何处理？应该先收下，不要驳面子，但事后退回礼品并向公司报备情况。

包含设计资产+设计策略，涉及 Object 和 Flow 两块。

Tools 工具

设计工具