Ant Design 的核心模型 PVPPT

前言

是什么?

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

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

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

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

Ant Design 的核心模型 PVPPT

Ant Design 的核心模型 PVPPT

为什么要提出核心模型

在一次内部会议中,

林外说: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。

设计工具 Tool

设计模式 Pattern

设计原则 Principe

设计价值观 Value

基本假设 Premise

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

映射到 Ant Design 4.0 ,可以用一张大图解释:

Ant Design 的核心模型 PVPPT

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

是假定,不是假设

Hypothesis VS Postulate

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

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

每个人都追求快乐工作。

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

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

假定的灵感来源:

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

  • 灵感 1:人是偷懒的,尽可能节省脑力和体力。
  • 灵感 2:人想通过工具连接更大的载体,实现自我价值,造就超我,并在这个过程中体验到过程的快乐(心流)。
  • 灵感 3:人类的进化速度远远赶不上数字世界的发展速度,差距越来越大,但是人却还在不断追求全知全能。 追求
    • 在近 200 年,人类的注意力、感知认知能力、时间都没有本质提升,比如:短时记忆 7+2 的数字;但是短短 70 年,数字世界发展能力成千上万倍提升。有限的人类意图和接近无限的系统能力之间的差距会越来越大。
    • 庄子说:吾生也有涯,而知也无涯,以有涯随无涯,殆矣。
    • 必须找到更加自然的人机触发方式,让人类的意图和系统的能力在合适的时机、合适的场景触发,而不是一味的强占屏幕,以及用户的注意力。

工作和快乐的悖论

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

生产类活动(工作和学习):占据人生的一半时间。是当代人,绕不开的活动。

Ant Design 的核心模型 PVPPT

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

Ant Design 的核心模型 PVPPT

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

Ant Design 的核心模型 PVPPT

历史上两大悖论,得到解决:

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

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

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

每个人都追求快乐工作。

Values 价值观

假定和价值观

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

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

Ant Design 的核心模型 PVPPT

Natural 自然

系统和用户的限制

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

Ant Design 的核心模型 PVPPTAnt Design 的核心模型 PVPPT

数字世界中,矛盾的解法

Ant Design 的核心模型 PVPPT

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

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

Ant Design 的核心模型 PVPPT

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

案例和方法

方法:

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

Certain 确定性

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

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

高效的来源:

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

案例和方法

保持用户端的一致性。

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

Ant Design 的核心模型 PVPPT

  • icon(问号❓和感叹号❗️)和颜色(红色和橙色)Ant Design 的核心模型 PVPPT
  • 交互一致性:
  • 文案一致性:
    • 确定和取消。

Meaningful 意义感

Ant Design 的核心模型 PVPPT

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

Ant Design 的核心模型 PVPPT

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

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

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

适用阶段:

  • 产品高速增长期:增量用户量不断涌入,发现产品有价值、有意义的功能。
    • eg:拉新、激活、推荐
  • 产品平稳期和初期:存量用户,不断和产品产生更多有价值、有意义的互动
    • eg:留存、参与度、商业化

案例和方法

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

四个价值观的关系

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

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

Ant Design 的核心模型 PVPPT

  • 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 工具

设计工具

文章标签: ,

0 条评论 34 次阅读

  1. 既来之,则言之。

发表评论

Top