了解material-design与ant-design

, ,

今天大概看了下google的material-design的guideline，感受了一番谷歌的设计美学。中文文档可以参考MDUI官方的翻译, 英文可以参考谷歌material-design官方文档

style guide 和 guideline

Style Guide

Style Guide 更侧重视觉，对设计的文字、颜色、LOGO、ICON 等设计作出规范，产出物一般称为 Guideline；使设计团队甚至开发团队理解设计理念并不是容易的事情，例如 Material Design 中 “Material” 的隐喻比较抽象，难以理解与使用。

除了谷歌的guideline, 苹果也有自己的人机交互guideline

ant-design在官网向世界顶级设计体系进行了致敬，也相信阿里的ant-design在不久的将来必然会成为像 bootstrap这样的明星项目。现在ant-design已经有将近3w的star了。

Pattern Library

Pattern Library 更侧重前端开发，对界面元素的样式进行实现，其代码可供预览使用，产出物一般称为 组件库 UI 框架等；开发者在找不到所需组件时往往自行编写样式，在没有设计稿的情况下非常容易做出与整体风格不一致的样式（所以哪怕是中台产品，大公司也无法完全依赖一个UI组件库实现所有能力）.

Material Design Guideline 属于 Style Guide，除了 Guideline 以外，Material Design 也提供了组件库的实现: Material Components 和 Material Design Lite。 阿里的 Ant Design 和前者类似，既包含设计指引又提供了 React 实现。

什么是material-design

他是谷歌的一套可以兼容PC、移动端、穿戴手表等平台的设计语言。什么是设计语言呢，就是对设计规范的基本定义。包含了设计的方方面面的规范，例如 阴影、材料、材料之间能否穿越，能否折叠、能否移动、材料内能否放置其他内容、内容能否超过材料范围、材料的海拔高度等等

在使用google产品的时候，你可以非常明显的感受到谷歌所有系列产品都采用了一种材料化的设计方案。这让用户可以感知到谷歌的品牌形象，这套规范也很具有人机交互的实用性。

总体来看，拟物化的material-design可以理解为把互联网产品的UI平面设计想象成一个桌面，桌面上可以有多个纸片，每个纸片可大、可小。也可以在z轴上有一定的高度，但有高度后需要产生阴影以表现出他的高度。

价值观/理念

  • “Material” 的隐喻 (Material is the metaphor)，随着电子屏幕的普及，“电子纸”这一材料的概念被前沿设计者们不断探索，在电子屏幕上形成了别具特色的交互体验。
  • 鲜明、形象、有意义 (Bold, graphic, intentional)，遵循基础的平面设计规范以科学地构建出用户在视觉上的感知，鲜明形象的用户界面使用户获得沉浸式交互体验。
  • 有意义的动效 (Motion provides meaning)，动效尤为重要，它可以给用户暗示和指引，从而顺其自然地知晓界面发生的交互行为。

阴影

对于每一个dp高度的材料如何设置阴影。guideline里面都给出了具体的设计软件的标准(例如sketch). 请参考资源

海拔

比如模态框的海拔肯定要高于普通的信息展示卡片

动效

material的动效学习了现实世界中物体的运动以及一些科学常识。比如物体移动速度会收到摩擦力影响逐渐减弱、创建出来的元素要展示与创建者之间的关系、材料可以有感知周围环境的能力等。

  • 动效必须是快速的
  • 动效必须简单明了

material规定了在不同场景下应该使用的动画类型，甚至具体到了使用哪种动画曲线的类型。具体参考移动

ant-design

ant-design是阿里蚂蚁金服为中台开发打造的一套设计规范guideline和组件实现。

越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验

在设计语言方面，Ant Design可能也是开了UI组件库的先河。组件的视觉、交互设计和前端的融合可谓是相当让人佩服

ant-design不仅提供了PC端的设计资源和组件库，还提供了移动端的

价值观/理念

微小，追求细节上的精益求精，用户在使用中不断发现令人惊喜的细节。
确定，用科学定义设计，用通俗的形式解读设计原则。
幸福，追求『用户』和『设计者』的幸福，流畅地完成一次次交互。

动效

ant-design的动效直接单独掕出来作为一个独立的项目了 ant-motion

组件库

单独的 Guideline 一般服务于设计师，Guldeline 要配合组件库才能为更多开发者所接受

material-design

ant-design实现

  • Ant Design of React（官方实现）
  • NG-ZORRO - Ant Design of Angular
  • vue-beauty (vue)
  • antizer (ClojureScript)
  • antd-ember
  • antue (vue)
  • vue-antd-ui - Ant Design of Vue.js 2.5.0+

refer

漫谈 Material Design & Ant Design