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表单设计

其他

可视化

动效