第5篇从设计语言到数字语言——全新材料设计

#Digital Design

2018.06.29

0 LIKE

911 VIEW

메일 공유
https://stories.amorepacific.com/zh/%e7%ac%ac5%e7%af%87-%e4%bb%8e%e8%ae%be%e8%ae%a1%e8%af%ad%e8%a8%80%e5%88%b0%e6%95%b0%e5%ad%97%e8%af%ad%e8%a8%80%e5%85%a8%e6%96%b0%e6%9d%90%e6%96%99

材料设计（Material Design）是谷歌2014年发布的设计语言。每家公司都有自己的设计理念或政策，但谷歌的这一发布却具有举足轻重的意义。苹果公司在乔布斯逝世后，推出了将拟物化设计（skeuomorphism）转向扁平化设计（Flat）的成果，但对设计语言本身却一言不发。更早之前，微软推出Metro设计语言并发表了官方声明，但众所周知，因Window8的失败却未能大显身手。

iOS的拟物化设计与扁平化设计

Metro UI
采用Metro UI界面的Window8

在此之前，谷歌在设计上并未获得好评。想想以前的谷歌搜索页面或Gmail网页就不难看出。比起基于拟物化设计这一超强设计理念的iPhone，设计对于安卓来说，只不过是展现技术的工具，因此它们的设计既别扭又丑陋，更让人摸不着头脑。但是自从发布材料设计语言后，谷歌的设计有了规范化的理念，从而扭转差评，成功获得好评。

谷歌Logo变迁史

材料设计基本概念与结构

在此回顾一下设计语言的发展历程与变迁。拟物化设计一词源于希腊语中的"skeuos"（意为器具或工具）和"morphe"（意为形状），指的是模仿实物形状的装饰。模仿时钟、收音机或机械开关等形状，是一种友好地展示虚拟数字界面的方法。此为长期以来的数字界面设计核心思路。

模仿收音机的用户界面

然而，由像素（点）组成的画面所具有的物理限制，即便呈现的很完美，也无法使其走出模仿这一界限。这与不把贴上木纹纸的家具视为实木家具一样道理。再加之，开发与展示方式比想象中复杂，因此大家对拟物化设计适合数字化展示议论纷纷。

还模仿拉长的线条……不必了吧！

就在此刻，崇尚现代主义与极简主义的"扁平化设计"风格登场。扁平化设计去除如同现实的质感、阴影、透视等与功能无关的装饰元素，在平面上由色彩、平面和字体排印组成。这被视为最适合平面屏幕的方式，而且苹果公司从iOS7开始宣布了面向扁平化设计的大转型。当时因为已然熟悉的体验，一度引发了热议，但很快走向了扁平化。

iPhone计算器应用的变迁史

然而，过度的极简主义又引发了冲突。在审美上的过度投入，促使信息领域和按键等作用各不同的个体之间造成了视觉混乱。过度单纯、简洁的风格，造成了很多设计的相似度过高。正因为此，"材料设计"增加了"纸"与"光"相互反应的效果。画面中的个体如同"纸张"具有层次，可从视觉上明确分辨出相互关系。结合现实世界里纸张的隐喻，近似拟物化的设计理念。

材料设计语言开发花絮

安卓崇尚开放性，而非iOS的封闭性。得益于此，除三星、LG等大型制造商之外，连中小企业也能生产出数百万台智能手机。可是这却给设计师与开发者带来了所谓最佳化的考验。安卓从早期开始强调的适应性（Adaptivity），应该也是材料设计的必备思路。它的优势在于只要遵守他们所制定的规则，就能保持设计质量的均一性，还能给各种设备仪器提供一贯的体验。

今年5月，谷歌在一年一度的开发者年会"谷歌I/O大会"上发布了材料设计的几项更新。此次更新的亮点是面向"适应性设计系统（Adaptable design system）"的转变。设计师与开发者之间的合作在所有环节中至关重要，因此最大课题是如何缩短彼此之间的差距，以便完美体现设计意图。全新材料设计的目的在于帮助他们更密切的沟通与合作。与此同时，还公开设计资源和源代码，并推出能够将其轻松应用的各种工具。谷歌还宣称这会帮助人们减少不必要的努力与时间浪费，把精力集中到要生产的产品本质上。下面就让我们了解一下材料设计有哪些新变化。

1. 材料主题编辑器（Material Theme Editor）

这是在目前数字化设计师常用的绘图工具Sketch中能够轻松适用材料设计风格并加以调整的工具。过去只是用作参考的General Compose，而这次干脆制作成了插件。基于材料设计所提出的风格，也可以很容易将自己的独特风格符号化并加以应用。改变图标形状、圆角、颜色时，不用一一去改多个图像，可一次更改。字体也是除了系统默认字体Roboto外，还能测试谷歌实现最佳化的各种字体。还有一项功能就是能够传送到稍后介绍的Gallery，简化了共享流程。之前曾有过类似的程序，而Theming作为标准工具，其功能及稳定性将会更加提高。

2. Gallery

设计师与开发、策划、PM等合作伙伴沟通的方式挺复杂。设计师若想共享设计方案，要将其转换成png或jpeg格式，再插入到PPT中或将文件压缩后用邮件发送。收件人则用回信或打电话等传统(?)方式进行沟通，可这不留痕迹或较难正确传达意见。为解决这一难题，使用Dropbox或Trello、Slack等各种共享或沟通服务，但这些终究还是额外的程序，仍存在需经由这些程序处理的麻烦。

Gallery将这些整合到谷歌云端平台。设计师将在Sketch中完成的设计立即上传到项目（project）上，其他成员就可以实时查看并评论。加之，将设计理念、设计文件、设计结果整合在一起，有利于管理历史记录。修改时，会及时反映Sketch的适用内容，因此可以不必动手管理文件版本。

3. Icons

之前提供的图标样式仅有Solid一种，现在推出了全新的5种图标样式。其实它涵盖现有的所有样式。此次不仅提供了相关指南，还按样式和功能建立了图标库。只要以搜索的方式找到所需要的图标，就能立即下载并用作设计资源。

4. New Components

App bar : Bottom

更新前的Top（上图） / 更新后的Bottom（下图）

应用栏（App bar）位于屏幕顶部一直是潜规则。智能手机也好，Windows或MAC OS也好，关闭或最小化等设置按钮也都在顶部。但在考虑到需要单手操作的移动端上，会看到导航按钮位于拇指容易到达的底部。最新材料设计允许将固定在顶部的应用栏移至底部。理论上可以接受，但少了如何解决与现有其他底部组件相冲的问题，或如何在网站、平板等不同操作环境适用的具体例子。这部分应该需要进行充分的案例研究。

Backdrop

材料设计的基本理念是由纸张形成的空间概念。顶部标题区固定在所有分层的最上方，具有稳稳抓住屏幕的作用。此次却与之相反，将顶部标题区置于最下方的Back Layer，将下面一层的内容放在Front Layer。在Back Layer添加动作与选项调整或信息，在此操作便能切换Front Layer的内容。这可以使顶部标题区具有更积极的扩展性和可变性。

Extended FAB

更新前的FAB（上图） / 更新后的Extended FAB

悬浮操作按钮（Floating Action Button，FAB）通常用来执行关键的操作。该按钮要随时立即执行，因此要在视觉上得到很好的强调，同时不能遮住底面内容。正因为此，只能使用重点颜色和图标，但往往在功能和意义传达上发生误解，因此会建议添加文字说明。

结束语

大家仍对设计风格和语言议论纷纷，有些人还批评说这让设计变成清一色，区分该做（Do）与不该做（Don't）会导致二分法的思维模式，抹杀创意。但归根结底，我认为工具，怎样用它取决于人自己。适当的跟随潮流、适当的创造，还是利用工具走近产品的本质，也许是一个选择的问题。

材料设计扩大了策划者、设计师、开发者三方之间能够通用的工具的作用。当然目前比较趋向设计师观点，但很显然的是，设计语言不再只属于设计师的范畴。如同结合不同用户的体验，数字化制造商的体验会不会整合成共同的语言？谨慎的预测了一下。

[ 参考资料 ]

- Material Design
https://material.io/

- Evolving the Google Identity
https://design.google/library/evolving-google-identity/

- What is the Point of Material Design?
https://designmodo.com/material-design/

- Build great Material Design products across platforms (Google I/O '18)
https://youtu.be/Ty6VjgVHiko

- Customize Material Components for your product (Google I/O '18)
https://youtu.be/3VUMl_l-_fI

- 设计师必懂的扁平化设计概论
http://ppss.kr/archives/80638

- M材料设计不是"更好"，而是"不同"
https://brunch.co.kr/@blackindigo-red/20

- 设计系统将取代设计工作
https://brunch.co.kr/@designforhuman/28

- 设计指南会让设计师消失？？
https://brunch.co.kr/@sangster/92

喜欢
0
推荐
0
赞赏
0
支持
0
想看后续
0

列表