理解material design
承接着上一篇Material Design 的笔记,打算从宏观的角度来看看Material design,这种趋势演变的由来,以及通过其与ios的比较的不同来更好的理解MD。
UI设计趋势
先让我们从宏观上看一下UI设计的整体趋势,UI设计发展到现在大体经过了3个阶段:
拟物(Skeuomorphism)
这个阶段典型的代表就是ios7之前的UI界面,按钮通常都是突出的,文本框都是凹进去的,这和现实生活中的场景较为符合,同用户的心里模型一致。
再比如说ios7之前的ibooks拟真书架,和playground都有着浓郁的现实写实。
同样的
扁平(Flat Design)
ios7被很多人称之为扁平化设计,扁平化设计从某种程度上来说是认为人们在一段时间的适应后,应该能够接受较为简洁的UI界面表达方式了。 为了凸显UI是为了内容服务的,扁平化的设计将原先的复杂阴影全部都去除,比如仅用文字表示按钮,但是这也让很多人表示疑惑,纠结某个文字是否是按钮。 失去了阴影的按钮,似乎对于用户来说不是那么好辨别。
这么看来,似乎还有很多人并未完全做好接受这种新式设计的方式
- 拟物像扁平的过度,是一种渐进式的设计(Progressive design),随着用户对产品的熟悉程度的增加而对界面逐渐进行简化改良。
近似扁平(Almost Flat Design)
可以说Material Design是寻求扁平和拟物的平衡点的一个代表,他既有扁平化的简洁,也拥有拟物的阴影。通过阴影来表示层级关系,是否可点击, 同时点击按钮的时候也会有波纹产生,凸起的按钮在被点击的时候也会增大阴影,给人一种靠近你的感觉。 这些让用户能更好的理解界面。
肤色设计(Complexion Reduction)
好吧Complexion Reduciton的翻译可能有点怪怪的,现在我还没找到一个比较合适或者比较官方的翻译。 但是就字面意思来看,这种设计风格其实想要表达的是一种近乎融合隐形的设计。
这是最近才流行起来的一种APP设计趋势,以提倡做减法为目的, 典型的例子就是最新更新的Airbnb,Instagram,Uber以及被认为是这种风格鼻祖的Medium的界面,这几个APP的都有着相似的界面,都以最简单的配色,更大更突出的字体,大面积的留白,好辨识的app logo 以及更简化的图标来呈现。给人一种似乎更加贴近线框图的感觉。
严格来说,个人感觉这种设计应该归为扁平化设计一类。
什么是Material Design
Material Design其实一直是在尝试回答一个问题:UI到底是由什么做成的。
Google在介绍MD的时候,提到了以下三个原则:
- Material 是一种比喻(Material is the metaphor)
- 鲜明,形象,深思熟虑(Bold, graphic, intentional)
- 有意义的动画效果(Motion provides meaning)
MD是基于真实世界纸张的一种UI介质。 通过模拟真实世界纸张的表现,拉近用户使用过程中的熟悉感。 比如纸张的阴影。Google也一直将MD的Paper称之为magical Paper,意思就好似,MD的纸张介质源于真实世界高于真实世界的,因为在MD里面,纸张有着真实世界的厚度,可以通过阴影来展现纸张的位置,纸张之间互不可穿过,是三维的,但又可以无缝拼接,拆分,变形(比如长方形变成圆形),不能弯曲折叠。
为ios和Android设计的不同。
在任何一个平台上设计,都要熟悉这个平台的规范,就好比入乡随俗,不然就会水土不服。
层级(Surfaces&depth)
- ios: 用毛玻璃(blur effect)的效果来表达层级的深浅.
- Android : 通过阴影高度来表达层级深浅。
交互&动效(Interaction & Motion)
- Material Design:点击反馈。当你去点击凸起的按钮的时候,按钮会自动“升高”,表示靠近你的手指,这种有“磁力”的表现方式同一般的点击效果有所不同。
- ios:通过改变颜色等方式表示已点击
字体设计(Typography)
Android: Roboto
ios:San Fransisco
dp 以及用一倍图设计(Use density-independent pixels (dp) and design in vector at 1x)
Andriod:在安卓系统中,统一的衡量单位是dp/dip(density-independent pixel),相当于ios上的points。dp是一个虚拟的概念,是在程序运行色时候计算出来的。同ios的points一样,主要是为了统一各个不同设备分辨率而设置的一个衡量单位。
基本的换算公式如下:
1dp = 1px @ 1x (1x=160dpi)
也就是说,在密度为160dpi的屏幕上,1px就相当于1dp。 以此类推,在320dpi的屏幕上,1dp=2px. 屏幕密度越大,1个dp所对应的px也就越多。 这样一来我之前列出的切图关系尺寸表就很好理解了~
Apps vs. activities
安卓的应用是一系列的“活动”–每一个活动对应app里的一个界面。 活动同”intents”有关联。
- 跨App协作
- 可以打开其他的app后返回前一个动作
举个例子,当你在设计一个消息app的时候,发送照片是一个很普遍的功能, 你可能第一个想到的是去设计一个相机界面,或者是一个照片编辑器, 但其实你不需要重新设计这些, 用户可以直接调用他们已安装的app来完成这些任务。
系统返回键(The system back button)
系统返回键同最上面的App界面的返回键不同,界面最上面的返回键只能带你返回该app的上一层级,而系统返回键可以带你返回上一个app,或者主界面。
同时要注意的是Andriod右上角返回键旁边的文字表示当前页面和ios返回键旁边的文字表示上一层页面不一样。
动作
左右滑动: 同ios不同,Andriod水平滑动可以用来切换tabs。在tabs以外,左右滑动可以用来删除项目,或者呼出抽屉导航栏。。而ios的从左至右的滑动时返回上一界面。
长按: 在andriod上,长按可以用作选择,然后拖动,或者什么反应也没有。 由于长按是一个隐藏的动作,因此可以少用。
通过Material Design 展示你的品牌
Material Design总让人担心有同质化的倾向,相同的视觉风格,容易让人不知道究竟是在哪个App里面。 于是如何通过MD来传达出你的品牌,是另外一个需要思考的问题。
Logo
一个品牌的Logo可能是最具识别度的一个标识,因此将Logo融入到UI中去是加深品牌印象的一种方式。
- 将Logo成为UI的元素之一
- 不要让Logo影响到你的交互(例如,不要在Fab键上放Logo图标)
- 可以通过适当调节Logo来让其融入你的交互,增强体验(比方说,将Logo从大变小)
在字体上下功夫 (Play to type)
我们知道在Material design上,roboto是默认字体, 但是这并不是说他就是你的App上的唯一的字体了。 好的字体应该是可以传达并加深你的品牌印象。
- 你可以在Material design系统上使用任意字体
- 为你的品牌建议一个合理的字体系统,然后遵循。
- 通过大小以及层级来找到最适合你品牌的需求
- 遵循MD规范里的基线规则。
选择颜色 (color correct)
颜色是传递你品牌的一个重要元素,比如当你想到淘宝的时候,会是橙色,微信的时候是绿色一样。 如果你为你的品牌建立起了一个强有力的视觉系统,那就尽量保持一致。
- 使用自己品牌的配色
- 通过对比制造层级,然用户注意到重要的信息/按钮
图片的使用(picture your pages)
注意照片同其他元素的统一性 如果使用不同格式的照片,注意可以通过字体或网格将这些照片统一起来。 保持一种统一的布局。
- 在使用图片的时候,思考这些图片的使用目的。是起到传递信息的目的,还是装饰等其他目的。试着将这些想要传递的信息归纳出来。
- 思考你的视觉系统在产品中是如何运行的。是否其多样性以及风格性是保持统一的, 图片,图标,以及插图是否都看上去是属于统一范畴的。
语言的使用(Raise your voice)
品牌文字的使用也是贯穿于整个app的,如果你的产品是要传达出一种关爱感的,那么不要让你的语言看上去像是机器人。
- 使用用户说的话
- 在如何引导用户使用你的产品的时候,尽可能的展示而不要用说的方式来告诉用户如何使用 。
- 不要使用利于,或者太过时髦的语言,这样会让用户感到困惑。
使用有意义的动效(Go deep & move with meaning)
交互的方式也是传递你品牌的一种方式。用户会在潜移默化中将一些动效同你的产品联系起来。 使用独特的有意义的动效
- 使用强有力的动效帮助你增强你的品牌体验
- 让最常用的交互变得简单易懂
- 将交互和动效系统化,在你的产品中制造出统一性。
我是个不喜欢翻译的人。。。因为。。。水平不到家,逐字逐句对照着翻译,让我常常词穷,只能将自己理解的内容半消化后整合记录给大家看。 因此,还是建议大家有时间去看看原文,才能更加深入的理解Material design。
参考资料
Graphical User Interface as a Reflection of the Real World: Shadows and Elevation
Complexion Reduction: A New Trend In Mobile Design
好吧,我一个多月没码字是因为六月底出去浪啦~,去了至今为止到达过的最遥远的地方,挪威~,这不是我的选择是公司的选择,我的选择是在挪威多呆了两天玩耍了一番,结果发现,天气不好,嘛都看不见,不如回家。
做长途飞机就好比是被关在狭窄的小黑屋里十几个小时,然后神志不清,筋脉曲张的到达一个地方,结果在那连吃了N顿香肠后,产生对祖国美食无比的渴望,然后发现在那连一碗小馄饨也难求T.T,哭着在小火车上细数我泱泱中华大地的美食,以求望梅止渴。
Anyway,完美的旅行还是要天时地利人和呀~
图为挪威的某处不知名的森林~~