Meterial design与Ant design规范对比分析

价值观及目标

小结:在设计价值观和目标上,二者基本是一致的。本质上都是遵循自然,简洁快速的设计理念。

设计原则

小结:这两个规范虽然目录不大相同,但大致都是从布局,导航,视觉,交互模式,动效等方面展开介绍的。 Material design开篇大篇幅介绍了物质环境、材料研究、起重机、光与影等理论知识,也说明Material design更侧重于动效流畅,模拟自然的感官体验;Ant design则更侧重于功能模块操作的简单快速。

设计原则-布局

共同点:二者布局均采用栅格化体系,间距原则均以四八原则为标准。

设计原则—导航

小结:二者虽然都是在讲导航,但是侧重点明显不同, Material design以APP为例,侧重于导航的内在逻辑关系及不同关系的搭建过渡。Ant design则轻量的给出几种常见导航的设计参考方案,一笔带过。

设计原则—视觉(颜色)

小结:视觉以颜色为例,二者都提供了详细的基础色板, Material design在不同使用场景剖析更细致。

设计原则—交互模式

小结:二者都是讲交互,但侧重点不同。

设计原则—动效

小结:Material design动效版块从动力学,物质学等深层理论基础开始介绍,到具体的案例分析,细致到展开折叠等微交互的毫秒级,非常细腻详尽,提供了编舞的具体操作模式,给出可扩展的定制化方案,在动效这块的规范的定义上,个人感觉,Material design规范要明显优于Ant design。

组件库

二者都提供了较健全的组件库及开发代码。(这块在设计师看来差不多,具体分析需要开发专家来定义)

总结

共同点:

 1、在设计价值观和目标上,二者基本是一致的。

2、交互设计也都崇尚极简,自然,均遵循交互设计七大定律;

 3、Ui规范上二者均采用栅格化体系,间距原则均以四八原则为标准。 

4、都提供了较健全的组件库及开发代码。(这块在设计师看来差不多,具体分析需要开发专家来定义) 

差异: 

1、Material design可以说是UE/UI 中非常优秀的教科书,体量要比ant的大十几倍,内容也更细致丰富,从最底层物质,自然等原理的解释,到抽象到实际案例中不同场景的各种不同UI及交互方案,细致到像素和毫秒级的设计准则,她不仅告诉我们如何设计,还会细致的讲解为何这么设计。蚂蚁金服则更简练,就告诉你就比着做就可以,有的也给出几种选择,但相对较少。

 2、Material design示例主要以移动端为例介绍,支持跨平台适配,遵循移动先行的设计法则。国外的PC端产品案例基本也都符合这个设计原则,产品功能核心化,去繁就简。Ant design示例主要以PC端为主,部分适配跨平台,但不完善。目前国内web端产品,设计理念偏向于大而全,对于页面丰富度有一定的要求。 

3、学习成本上, Material design打开特别慢,有时候一个页面打开要四五分钟,体量本身又比较大,真正能熟悉并且精通,需要付出更高的学习成本。Ant design规范官方文档,轻量、加载页面快,学习成本较低。 

在交互及UI设计的角度,二者没有本质区别,不是非此即彼的关系,在千变万化的设计过程中宜相互结合,取长补短。 

以上是作者个人对两大设计规范的粗略理解,分享给各位,一家之言,还请多多指教!



由于本人第一次发文,对编辑器还不大会用,文字内容多为截图,如需文档,可私信发我邮箱账号,我会一一回复。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,988评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,710评论 2 59
  • 本篇分析对比是基于各自官网最新的Material design与iOS Human Interface Gu...
    Hugo___阅读 5,845评论 3 26
  • 狼者,群动之族。目标既定之,群起而攻之。头狼令之初,群狼就其位,欲动先静,欲行先止,各施其职,将...
    52108b91eaa8阅读 565评论 0 0
  • 我来北京的第一年,也是我毕业后的第一个春节,因为和父母赌气故意没有买回老家的车票,骗他们说买不到票所以不回去。 一...
    晚安亲爱的阅读 474评论 0 0