写在前面

本文仅从项目实战中「设计」的角度谈两个框架的比较。

了解左边请点击👉Ant Design

了解右边请点击👉Element UI

概括介绍

AntD对企业级开发更为友好，他们的野心是想制定中后台开发的优秀标准;
Element对使用Vue的纯后台场景更友好.

Element 从github的更新来看，目标定位就比较聚焦Vue，散发着工科生一心一意搞技术的气质。

尽管antD称自己为设计语言，但我认为antD算重新定义设计语言，它和Material Design不同，后者是个真·设计语言，可以放到教科书里作为理论样板的存在。antD更像接地气的《从入门到精通：老司机带你实战项目开发》—— 讲了一些设计规范和交互原则，但是更多的是将这些理论融入UI框架中启发产品经理，开发，设计，做的是一件举一反三的事。

在效率为王的年代，antD这个精神是很牛批的。

据说antD的产生背景本就是阿里体系众多中后台的产品业务，1000个项目对应10个设计师。

框架和我

那些年我为什么用框架

• 提升效率是最明显的，作为一个菜菜鸡，不用再考虑粒子级的基础建设，而是抽出精力来直面业务交互，和产品开发相爱相杀。。
• 框架指导设计
  • 一般般的框架：我用过还行，你用得上就用吧？
  • 好的框架：在这种类似的场景下，我们这么做的，你要不要试试看？
  • 卓越的框架：用了我，你就会变强。

ElementUI 我认为是好的框架，antD 我认为将会是卓越的框架

框架解决基础交互

一个举例：按钮的四种状态。normal/hover/actived/disabled ，一个框架应当是规定了尺寸和样式，以及 尺寸*样式 之后每一种的四个状态。

antD的按钮 5种样式 * 3种尺寸

Element的按钮 5种样式 4种尺寸 6种颜色

从这一点上，可以看出antD和Element立足本就不同。

antD强调按钮选择有限，你必须在页面需求上精简——到底什么是重要，什么是次要。即便犯错也要让你正确的犯错。不会让产品的核心问题被外表掩盖。

Element用颜色指导了传统后台同一页面大量操作的策略之一：不同的颜色表示不同的操作类型。
确实是行之有效的策略，相信这也是不少传统后台撸得很爽的一个因素。

输入框/下拉框/选择框/卡片/气泡/标签页……. 有了框架就不用重头造轮子。

从设计效率看antD和ElementUI

• sketch源文件

antD更为全面，有心思给产品，设计减负，不过在版本的公开程度上感觉官方也很纠结，是放出一个设计系统文件，还是给到样式就足够？———— 各种取舍是非常难做的，于是眼见他们搞出了一套library/symbol 平台，语雀。

什么是创新的本质：解决之前没有解决的问题。

Element主要是设计规范指导，看看就行，不下载逮着官网的组件看也可以。（还可以右键审查元素查看细节）

• 周边生态

antD提供了kitchen这样的sketh插件，协同了语雀这样的文档协作平台，可以联动iconfont账号载入对应项目icon。提供标准的色卡填色功能，以及十分便捷的基础图表生成。蓝湖作为产品设计协同平台虽然并不和antD强绑定关联，但是生态圈逐步闭环，体验逐渐上头。

Element 在这方面，比起antD这个花枝招展的头牌，表现得就像晚上只会修电脑的弟弟。

• 团队协作

antD 提供了良好的Axure/Figma/墨刀组件/xiaopiu 原型组件，给产品经理插上了神笔马良的翅膀……如果有了antD还不能好好地表达自己的基本想法和产品思路，我觉得这个产品可以喂猪了。

Element 目前仅提供Axure。

总结

• 用什么先看技术选型，虽然有不少技术会为了antD这套设计语言去学react。
• 任何一个引起关注的框架本身就是一份值得学习的设计作品，换句话说，「设计系统」是一个必备能力，但这种能力可能和写代码要求的架构能力没区别，各种分组命名方式，嵌套规范让人头大。多看多使用优秀的「设计系统」对本身能力是有正面作用的。
• 粒子化设计思维（类似程序开发中的原子化思想）将成为全栈设计师的关键能力之一。
• antD全方面在企业级中后台开发中胜过Element。真是基建决定的，并非品牌调性。
• 考虑到原型——设计——代码阶段的一站式统一，目前除了antD，我也不知道哪一家做得更好（如果再考虑到其生态对设计和产品的友好协作……能打败antD的只有antD？

本文遵循「 署名-非商业性使用-相同方式共享 4.0 国际 」协议
本文链接：https://tonightleftyou.github.io/2019/07/15/Compare_antD_with_elementUI/