Google I/O Material Design 思考和笔记

从扁平化说起
一开始的扁平化风格,完全抛弃了阴影和材质表现等等视觉上的细节。

当扁平化普及到设备上时,又有人反思:是不是太扁平了?一切都仿佛变成了色块加文字。哪个是按钮?哪个不是?哪些是重要的信息?哪些不是?当扁平化的风格让信息层级也扁平化,影响了「信息的正确沟通」这个最终目的时,我们知道这样的扁平化已经跳得太远。

===数字纸===

从苹果发布 iphone 那年开始,设计界就开始发明适合触摸时代的新材料,我们姑且称之为“数字纸”。从某种意义上,也可以理解为如何我们是如何看待手机UI的。

WebOS (Palm) 将程序视为卡片,将程序的多任务界面表述为扑克式的横向排列和抽拉。

iOS(1-6):手机是百变盒子。UI突出于屏幕。

Android(~Kitkat):手机是小电脑。UI是什么没想过。

Windows Phone:手机就是手机。UI在屏幕表面。

iOS7:手机是观察异世界的魔镜。UI在另一个空间。

用景深和视差来表达图层之间的距离感,因为空间距离足够远,所以 iOS7里面没有阴影,只保留了分割线
注:只是在返回手势所切换的上下页面之间,苹果仍保留了页面阴影,因为它们足够的“近”,同属于程序内部。

Android L:手机是装着漂浮小纸片,有玻璃盖子的盒子。UI在盒子内部。

===纸张隐喻===
我们设想一种材料,它可以承载信息,信息的更换可用同一材料的更换来实现。让我们测试石板、碑材、竹简、印章、动物皮、布帛……最后发现,如果从简洁的角度考察,纸张是最优秀的载体。因为它足够薄,薄到似乎只有信息本身。而裁剪成固定尺寸并相互叠加又是最经济有效的信息存储结构。
但是纸张要通过怎样的形式转化到虚拟世界中呢?

纸张隐喻 起源于 触摸杂志的UI将会发生何种有趣的变化

但屏幕并非纸张的物理实体,单纯模仿传统纸张材质的视觉样式,比如微博客户端APP、南方周末APP 之类的并不能说有什么设计思想。

所谓纸张隐喻,是指内容切换如何利用纸张的物理特性,翻页早就过时了,应该在叠加、覆盖、抽拉、翻转这些纸与纸的关系中寻找适合触摸时代的设计语言。

所谓的 Material,并非纸/毛玻璃/皮革/木头,而是一种在现实中不存在的”magical material”
或者说是这些飘来飘去的纸片,尺度和手机是一样的;有别于 iOS 7,material 认为屏幕不是看另一个世界的窗口。
阴影和层级、纸张拼贴变形与响应式设计、浮动按钮、触摸波纹这几项是对纸张性质的新阐发
用阴影的深度来表达层级

Material 的纸张经常小于整个内容界面,并作为内容界面的构件。而构件可以拼贴、分解和相互运动。

伸缩变形,从而构成适用多个屏幕的响应式设计
当屏幕大小,也即背景层大小发生变化,而内容纸张的卡片形式却可以表现为相对固定的外观。
纸张作为内容信息的载体和隐喻,可以通过印刷时代的手段——排版,来保持内容的一致性。不同屏幕的纸张都有同样的网格系统,并居左对齐。

响应式设计

浮动按钮
浮动按钮是下层纸张卡片的变形,贴在上层纸张上来提供“更多操作”的入口。

触摸波纹
波纹的样式则为触摸的时间和压力做出图形反馈
按钮不再是一个下沉的“实体”,而仅仅是一个“表面”,其后的上升并不符合常见逻辑。纸张的触摸被赋予了全新的物理性质。

===最后的思考和总结===

当你在设计、开发 app 的时候,你眼中的手机是什么?它遵循什么样的物理特性 和 视觉特性 =》世界观。

模糊和不一致性,导致即使漂亮的界面同样会失去吸引力,因为信息和逻辑的混乱,就像以前的 Android 应用那样。