企业级产品设计体系AntDesign是蚂蚁集团体经过大量项目实践和总结,逐步打磨出的产品。随着这两年B端产品的逐渐白热化越来越多的用户对更好的用户体验有了进一步的要求

Ant Design

作为一款专为国内产研设团队量身打造的在线协同工具,设计师可在Pixso资源社区直接预览使用Ant Design。在进行设计操作时也可直接拖拽使用Ant Design任意组件,大大提升设计创作及迭代的效率,并且所有资源都能共享到团队,实现快速复用。

Ant Design是什么

Ant Design是蚂蚁集团推出的企业级设计系统。经历了4个版本的升级,Ant Design提炼出 "自然"、"确定性"、"意义感" 和 "生长性" 四大设计价值观,通过模块化解决方案,降低冗余的生产成本,致力于让设计者专注于更好的用户体验、基于 Ant Design 提供的设计指引创造出美观、易用的产品界面。

Ant Design是什么

Ant Design设计价值观

为减少用户不必要的认知成本、提升设计者的设计效率,在设计价值观的坚持上,Ant Design有四点与众不同:

Ant Design

  • 自然

Ant Design认为应适时加入听觉、触觉等感知通道,创造更丰富自然的产品体验。同时辅以行为分析、人工智能、传感器、元数据等策略,帮助用户决策、减少操作,让人机交互行为更自然。

  • 确定性

Ant Design为设计者提供足够精简的设计规则、组件、模式等,降低设计者的合作门槛。以创建外观、交互一致的产品为导向,提升产品的易学性,降低用户认知和操作的成本。

  • 意义感

在"自然"和"确定"之上,兼顾用户的人性需求,为工作过程创造富有意义感的人机交互。

  • 生长性

设计者应用发展的眼光做设计,让产品功能和用户需求产生更多连接,让人机互动更加紧密、用户和系统共生。

生长性

以色彩系统为例,基于 "自然" 的价值观,一般设计师会根据经验来定色板,但 Ant Design通过对自然场景的抽象捕捉,结合蚂蚁的技术基因,形成了特有的12色。通过大量的观察,捕捉不同色彩在自然光下的变化规律,借助美术中素描的思路,对12个颜色进行了进一步的衍生。

生长性

基于以上4个设计价值观,Ant Design为具体的设计问题提供了向导和专业的设计解决方案。早在2015年,Ant Design就已在蚂蚁集团中后台产品线中迅速推广,对接功能囊括资金、运维、研发、安全、风控、效能管理、渠道管理等,800+维持蚂蚁集团前台业务快速、高效、安全、稳定运行的模块。

蚂蚁金融科技

Ant Design为面向金融机构深度定制行业云计算服务的蚂蚁金融云,实现高效高质的产品搭建流程。

Ant Design的独特优势

基于人们对企业级产品的固有印象,Ant Design是一套综合考虑了人的本能情感、围绕4个设计价值观螺旋式发展的企业级设计系统。对比其他设计系统,Ant Design在企业级产品页面设计中拥有以下优势:

Ant Design的独特优势

1. 在布局设计上,Ant Design视空间布局为体系化视觉设计的起点,基于动态、体系化的角度,秩序之美的原则,为设计者构筑具备理性之美的布局空间创造条件。

2. 在组件设计上,Ant Design为Web应用提供了65+的基础 UI 组件,设计师可以在统一的UI资产(组件库)中提升效能,从而把重点项目直接支持好。

3. 在设计模式上,Ant Design针对企业级产品反复出现的设计问题,给出了一般性的解决方案,实现跨应用交互一致性的有效融合,并通过模板文档,总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器几类页面的典型解决方案,帮助广大设计者可以快速开始构建界面。

可以看出,Ant Design不但追求用户的使用体验,还追求设计者和开发者的使用体验,如此一套感人的企业级产品设计系统,现在在Pixso就能直接使用,致力于赋能B端产品设计师打造出温暖人心的企业级产品~

如何在Pixso使用Ant Design

  • 使用方法一:

1. 进入编辑界面

    编辑界面

    2. 点击 "资源" ,选择深色/浅色版的 "Ant Design",即可拖拽使用。

    Ant Design
    • 使用方法二:

    1. 进入"Pixso资源社区"

      Pixso资源社区

      2. 选择深色/浅色版的 "Ant Design",点击复制,复制成功后点击打开文档即可使用。

      选择深色/浅色版的 Ant Design

      Pixso中,我们把Ant Design模板组件一键导入社区资源,设计师甚至是产品同学,可以直接拖拽使用。通过建立团队组件库,来配置里面的内容,从生产源头保证设计内容的规范性和一致性。同时,这些配置生成后,可以直接导出代码配置,提供给前端使用,进一步保证从设计到前端之间的无缝衔接。还在等什么,赶快打开Pixso来使用Ant Design设计体系吧!