Ant Design

🐜 Ant Design 一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验。

React 使用

Ant Design of React 是一套基于 React 的企业级实现。

暂时不做学习

设计语言

简介

蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂,而且变动和并发频繁,常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容。

设计价值观

设计价值观为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者,提供评价设计好坏的内在标准,并提供有效的设计实践所遵循的规则。同时,它启示并激发了设计原则和设计模式,为具体的设计问题提供向导和一般解决方案。

自然

  • 在感知和认知中,视觉系统扮演着最重要的角色,通过提炼自然界中的客观规律并运用到界面设计中,从而创建更有层次产品体验;同时,适时加入听觉系统、触觉系统等,创建更多维、更真实的产品体验。详见视觉语言

  • 在行为的执行中,利用行为分析、人工智能、传感器等一系列方式,辅助用户有效决策、减少用户额外操作,从而节省用户脑力和体力,让人机交互行为更自然。

确定

『设计者』需要做出更好的设计决策,给予研发团队一种高确定性、低熵值的研发状态。同时,不同设计者在充分理解业务述求后,基于 Ant Design 体系都会有相同且符合当前业务特性的设计产出。

  • 保持克制: 能做,但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨,并用尽可能少的设计元素将其表达。 正如 Antoine de St.Exupery 所说:完美不在于无以复加,而在于无可删减,万事莫不如此。

  • 面向对象的方法: 探索设计规律,并将其抽象成『对象』,增强界面设计的灵活性和可维护性,同时也减少『设计者』的主观干扰,从而降低系统的不确定性。例如:色值换算、间距排版。

  • 模块化设计: 将复杂或者重复出现的局部封装成模块,提供有限接口与其他模块互动,最终全面减少系统的复杂度,进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板,节约无谓的设计且保持系统一致性,让『设计者』把创造力专注在最需要的地方。

学习

  • 设计体系

在 Ant Design 3.0 的改版中,我们汲取顶级设计体系的精华,同时结合我们自身业务特性做了大量优化。我们希望通过不断努力和打磨,成为世界级设计体系的一份子,为『用户』和『设计者』带来极致体验。如果你也想追求卓越,建议去研究这些体系。

Fiori Design

Human Interface Guidelines

Lightning Design System

Material Design

  • 推荐书籍

About Face 4: 交互设计精髓

Web界面设计

界面设计模式

写给大家看的设计书

设计心理学 I

设计心理学 III

Web表单设计

其他

可视化

动效