大数跨境
0
0

带你走进 Ant Design 世界

带你走进 Ant Design 世界 云顶云
2020-12-07
0
导读:好的软件产品需要好的产品设计思想和设计体系指导。本文分享云顶云产品研发中心所倡导的 Ant Design方法,并阐述我们对于产品设计的思考与坚守。

“ 企业级产品设计体系

创造高效愉悦的工作体验”


01

Ant Design 背景


Ant Design 是 15年初建立的。当时蚂蚁金服的中台需求非常之多,但支持的前端和设计非常得少,基本上 1000 个系统对 10 个设计师这样的规模。所以就想到用一个统一的 UI资产(组件库)来提升效能,从而赋能合作伙伴,来间接支持更多应用。

2018年,在首届蚂蚁体验科技大会,Ant Design设计负责人”它山”描述了设计体系的优越性。并在当天,蚂蚁金服体验技术部UED对外正式发布了 Ant Design 3.0,正式将 Ant Design 从 UI 组件库的概念升级至面向企业级的设计体系。



02


设计体系


设计体系是一个具包容性且充满生命力的东西。包容性指的是从组件库到设计语言到设计方法等所有和产品设计相关的方面。而生命力指的是非静态的内容,而是可以应对不断变化的环境,是一个不断进化的过程。


第一层级:组件库

界面中所有被复用的组件。比如按钮、文本框、标签页等,指导设计师及开发高效开展工作。


第二层级:设计语言

设计语言是将产品塑造得独特且风格统一的一套法则。组件库仅仅提供了对同一类元素的约束,缺少不同类元素之间的联系。而通过设计语言,可以明确元素之间的结构关系。


第三层级:设计体系

设计体系包含设计目的、设计原则、组件库、样式指南等。它是构建设计语言和设计模式的底层基础。


02


设计的原子性


网页设计师 Brad Frost 从化学受到到启发:原子结合在一起,形成分子,进一步结合形成生物体。由此诞生原子设计概念,之后慢慢由其概念引发出来的各种设计系统也日益成熟。



03


Ant Design 版本迭代


1.0 到 2.0

组件能力的不断优化和整合,同时增加模式,从单一组件库逐步成为国内领先的设计体系。


2.0 到3.0

引入「自然」这个价值观,在字体、排版、icon 等多个视觉层面做了重大调整,同时也启动「人机自然交互」的研究,从单一的视觉自然升级到交互自然;对外正式推出 ETCG 的概念,并发布 Ant Design Pro。


3.0 到4.0

增加了暗色主题和无边框组件,将ETCG升级为 ETCG 2.0。底层静水深流,探索设计深度:确定「每个人都追求快乐工作」这一基本假定,作为体系的原点。在此之上,衍生出 4 个设计价值观:自然、确定性、意义感、生长性。顶部百花齐放,融合设计广度:生长出更多设计资产和设计策略。设计资产提高研发的效率和一致性,让产品更好看;而设计策略让用户目标更加专注,让人机交互更加紧密,让产品更加好用。


04


Ant Design ETCGG理念

功能范例(Example)
指设计要实现的功能及示例。

模板(Templates)

模板基于业务的抽象,目的是帮助不同设计师保持设计的一致性。可以指引页面如何设计,比如典型的列表页,由高级搜索和表格组成。今年在模板的基础之上又做了一层更大的精进,做了抽象和规范衍生出了模板组件。总结了四表一局(列表页、表格页、图表、表单以及布局)构成了大家对系统的抽象。它覆盖了大部分中后台系统、可以满足80% 以上企业级产品的业务诉求。

组件(Components)

Ant Design 最早和大家见面的内容,五年的时间里面有了很多数量上和质量上的精进,同时创造了非常多的社会价值。

抽象(Global Styles)
用变量化的方式进行了约束和管控,它可以做什么?

比如你今天不喜欢蓝色,想要橙色,你只要一行编码就让组件库发生了焕然一新的变化。

交互规则(Guides)

指的是人和机如何进行互动交互的过程。



05


Ant Design价值观


感知自然

视觉要素(布局、色彩、插画、图标等)是最主要界面设计,应充分摄取自然界规律,从而降低用户认知成本,带来真实流畅的感受。


行为自然

自然的人机交互行为可以帮助用户决策、减少操作。同时辅以行为分析、人工智能、传感器、元数据等策略,提供主动式服务,可以节约用户脑力和体力。


结果的意义

明确目标,即时反馈。洞悉工作目标,根据使用流程拆解明确的子目标,让每个交互行为都围绕着主目标的达成;为每个行为,辅以恰当、即时的反馈,让用户对操作结果了然于胸。此外,可通过情感化设计,适度安抚用户负面情感,强化用户正面情感。


过程的意义

调整不同场景下的工作难度,让功能适时适地触发,以匹配用户能力;巧用简化,不分散用户注意力,让用户专注于任务达成,而非界面。让当下的工作既不过于简单,亦不过于复杂,挑战适中,并随着用户能力的成长提出更高的挑战,能让用户持续沉浸在工作中,获得富有成就感的工作体验。


设计者确定

通过探索设计规律、模块化设计思路,来为设计者提供足够精简的设计规则、组件、模式等,赋能设计者、降低合作混乱。

    1. 保持克制:做最有价值的产品功能打磨,并用尽可能少的设计元素将其表达

    2. 面向对象的方法:增强界面设计的灵活性和可维护性,例如:色值换算、间距排版

    3. 模块化设计:将复杂或者重复出现的局部封装成模块,提供有限接口与其他模块互动,减少系统的复杂度以及增加可维护性


用户确定

用户日常工作是通过诸多企业级产品的协同来完成的,除了考虑单一产品的设计一致性,更应当在跨产品、跨终端、跨系统间保持良好的确定性。一致的外观和交互,保持面向用户的熟悉感,能提升易学性,降低认知和操作成本,提升工作效率。


价值连接

产品的增长依赖于用户的群体扩大和深度使用,而用户的成长又依赖于产品功能的壮大。设计者应建立系统设计思维,洞悉产品功能的价值,探索用户在不同场景下的需求,在价值和需求间建立连接。让产品价值被发现,帮助用户建立更有效、更高效的工作方式。


人机共生

产品功能和用户需求的更多连接,让人机互动更加紧密,用户和系统共生。产品设计时,不应将用户和系统独立开来,应作为一个动态发展的共同体来思考,确保其足够的灵活、包容,充满生命力。



06


为什么要用 Ant Design


宏观角度说设计规范作为基础的设计中台,代表着在互联网公司的中台战略发展大方向下,B端平台型产品模块化组件化的最直观的表达。

微观角度说设计中台是企业提人效,促协同,把握优质的用户体验的的重要组成部分,设计规范的建立过程可以锻炼抽象思维能力的同时,更塑造了适应 B 端平台产品的「全局观」和设计过程中的模块化思维及产品化的设计方法。使得设计团队的产出更产品化,甚至商业化。


about me


产品设计师 鲁班


90 后新生代设计师代表,计算机科班出身,从事软件产品设计 7 年,青涩寡言的外表下蕴藏着对于产品美学、交互体验的深刻洞察与独立思考。从 PC 网站到移动应用,再到小程序,对于每一种产品载体的特点和表现力都有深入的理解和见解,善于帮助客户、产品经理去改善产品的设计,让产品更有温度、更有感知、更有体验感


about us


云顶云产品研发中心


云顶云产品研发中心聚焦于新教育科技与泛地产领域,拥有华北区域领先的云计算产品研发经验和技术积累,擅长高品质系统的设计与研发,并借助 DevOps、敏捷研发、精益研发、微服务、云原生等先进产品研发理念、方法论、技术体系,为客户更快、更好的交付所需的产品。

【声明】内容源于网络
0
0
云顶云
天津云顶云科技有限公司创建于2013年,是国内首批专注于云计算与大数据的服务提供商,致力于为企业客户提供优质的转型上云咨询、规划、培训、实施全方位解决方案,同时提供云运维托管等一站式上云服务。
内容 115
粉丝 0
认证用户
云顶云 天津云顶云科技有限公司 天津云顶云科技有限公司创建于2013年,是国内首批专注于云计算与大数据的服务提供商,致力于为企业客户提供优质的转型上云咨询、规划、培训、实施全方位解决方案,同时提供云运维托管等一站式上云服务。
总阅读37
粉丝0
内容115