最近有一些时间研究 Google Material Design 的新标准, 所以也会把一些想法在接下来的 po 里面写一写.
扁平的非拟物设计语言的评论褒贬不一, 微软算是率先使用扁平化设计的公司之一了吧, 当初是为了宣传 Windows Phone 和 Windows 8, 不过谁知后来产品没卖出去多少, 扁平化的设计风格却成了现在的流行设计趋势…
iOS 紧跟着在 iOS 7 中推出了扁平 UI, 只是当时宣传的时候截图效果实在太平了, 而且配色也令人不舒服, 最后成了各个媒体和用户吐槽的重点. 嘛, 这些先暂且不提. 用户也随之对众多流行应用和网站逐渐趋于扁平化的设计表示接受, 不少人都认为, 扁平化设计去掉了无用的装饰, 例如边框和阴影, 给人高效率的感觉. 单单是这一个原因就有足够的理由放弃之前的拟物设计语言了.
另外扁平设计语言的另一特点是颜色选用几乎为纯色, 而不使用过渡, 这样做有一些已知的原因在里面, 比如, 纯色的显示效果大多数情况下都要比过渡效果好, 因为显示设备的原因. 而且大多数网站和应用的配色基本采用白色或灰色作为背景色, 这样做的好处依然是给人以高效率的感觉.
iOS 扁平化之后一段时间, 在上个月的 Google I/O 2014 中, Google 推出了 Android L (暂定代号) 的新版 OS, 暂且不提系统的版本号究竟会是 4.x 还是 5.0, Google 宣布的新的设计语言, 被称为 Material Design, 可谓是令在座的与会开发人员眼前一亮. 确实, Material Design 不同于以往 Metro 和 iOS 的扁平, 新的 Android 采用了近似扁平化的设计语言, 保留了阴影. Google 在去除了一味扁平的逻辑之后把重心放到了 UI 配色和动画函数这两个方面.
Google 有自己完整的一套标准和文档, 具体可以到 https://www.google.com/design 查看. 从动画到布局再到元素的使用, 可谓完整.
如此详尽而唯一的文档可谓一改 Google 之前设计文档杂乱的面貌, 毕竟如果乃们还记得的话, 4.x 时代的应用就连官方应用不同 team 的不同应用的设计都不同, 不少应用根本都没有按照规矩来做, 这还是 Google 自家的应用. 反倒相比之下软娘至少在一致性方面做得不错.
- 软娘也有自家 Metro 设计的一套文档可以在这里查看: Guidelines for Windows Runtime apps
实际上到现在为止扁平化的 "标准之争" 也有几年了, Google 作为后来者可谓是一点不落后, 反倒是在很多方面做的比软娘和水果更好. Polymer-Project 的出现是摆出了在网页设计方面和软娘对峙的态势. Polymer 自带的元素涵盖了几乎全部机器人用到的 Material Design. 而使用起来确实异常方便, 一个 html tag 搞定, 例如:
<google-maps></google-maps>
一行便可插入一个 Google Maps 地图, 完全不需要手动导入 API 等等, 这是一般的 framework 所无法比拟的 (可能 AngularJS 比较类似.
写到这里大概可以总结一下目前的扁平设计:
Microsoft 流:
- Metro 设计语言
- 详细的 Guidelines
- 用于自家桌面系统和手机系统
- 网页设计由设计人员自行操作
Google 流:
- Material Design 设计语言
- 一整套 Guidelines
- 用于自家手机系统以及各种应用
- 网页设计有 Polymer-Project 框架可用
水果流:
- 设计语言不明
- 设计文档不明
- 用于自家手机和桌面系统
- 网页设计由设计人员自行决定
以上就是几种流行的扁平化设计语言的对比了, 诸君更喜欢哪个? 可以在下方留言讨论.