«

理解material design

承接着上一篇Material Design 的笔记,打算从宏观的角度来看看Material design,这种趋势演变的由来,以及通过其与ios的比较的不同来更好的理解MD。

UI设计趋势

先让我们从宏观上看一下UI设计的整体趋势,UI设计发展到现在大体经过了3个阶段:

拟物(Skeuomorphism)

这个阶段典型的代表就是ios7之前的UI界面,按钮通常都是突出的,文本框都是凹进去的,这和现实生活中的场景较为符合,同用户的心里模型一致。

再比如说ios7之前的ibooks拟真书架,和playground都有着浓郁的现实写实。

同样的

扁平(Flat Design)

ios7被很多人称之为扁平化设计,扁平化设计从某种程度上来说是认为人们在一段时间的适应后,应该能够接受较为简洁的UI界面表达方式了。 为了凸显UI是为了内容服务的,扁平化的设计将原先的复杂阴影全部都去除,比如仅用文字表示按钮,但是这也让很多人表示疑惑,纠结某个文字是否是按钮。 失去了阴影的按钮,似乎对于用户来说不是那么好辨别。

这么看来,似乎还有很多人并未完全做好接受这种新式设计的方式

近似扁平(Almost Flat Design)

可以说Material Design是寻求扁平和拟物的平衡点的一个代表,他既有扁平化的简洁,也拥有拟物的阴影。通过阴影来表示层级关系,是否可点击, 同时点击按钮的时候也会有波纹产生,凸起的按钮在被点击的时候也会增大阴影,给人一种靠近你的感觉。 这些让用户能更好的理解界面。

肤色设计(Complexion Reduction)

好吧Complexion Reduciton的翻译可能有点怪怪的,现在我还没找到一个比较合适或者比较官方的翻译。 但是就字面意思来看,这种设计风格其实想要表达的是一种近乎融合隐形的设计。

这是最近才流行起来的一种APP设计趋势,以提倡做减法为目的, 典型的例子就是最新更新的Airbnb,Instagram,Uber以及被认为是这种风格鼻祖的Medium的界面,这几个APP的都有着相似的界面,都以最简单的配色更大更突出的字体大面积的留白好辨识的app logo 以及更简化的图标来呈现。给人一种似乎更加贴近线框图的感觉。

严格来说,个人感觉这种设计应该归为扁平化设计一类。

什么是Material Design

Material Design其实一直是在尝试回答一个问题:UI到底是由什么做成的。

Google在介绍MD的时候,提到了以下三个原则:

MD是基于真实世界纸张的一种UI介质。 通过模拟真实世界纸张的表现,拉近用户使用过程中的熟悉感。 比如纸张的阴影。Google也一直将MD的Paper称之为magical Paper,意思就好似,MD的纸张介质源于真实世界高于真实世界的,因为在MD里面,纸张有着真实世界的厚度,可以通过阴影来展现纸张的位置,纸张之间互不可穿过,是三维的,但又可以无缝拼接,拆分,变形(比如长方形变成圆形),不能弯曲折叠。

为ios和Android设计的不同。

在任何一个平台上设计,都要熟悉这个平台的规范,就好比入乡随俗,不然就会水土不服。

层级(Surfaces&depth)

交互&动效(Interaction & Motion)

字体设计(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来完成这些任务。

系统返回键(The system back button)

系统返回键同最上面的App界面的返回键不同,界面最上面的返回键只能带你返回该app的上一层级,而系统返回键可以带你返回上一个app,或者主界面。

同时要注意的是Andriod右上角返回键旁边的文字表示当前页面和ios返回键旁边的文字表示上一层页面不一样。

动作

左右滑动: 同ios不同,Andriod水平滑动可以用来切换tabs。在tabs以外,左右滑动可以用来删除项目,或者呼出抽屉导航栏。。而ios的从左至右的滑动时返回上一界面。

长按: 在andriod上,长按可以用作选择,然后拖动,或者什么反应也没有。 由于长按是一个隐藏的动作,因此可以少用。

通过Material Design 展示你的品牌

Material Design总让人担心有同质化的倾向,相同的视觉风格,容易让人不知道究竟是在哪个App里面。 于是如何通过MD来传达出你的品牌,是另外一个需要思考的问题。

一个品牌的Logo可能是最具识别度的一个标识,因此将Logo融入到UI中去是加深品牌印象的一种方式。

在字体上下功夫 (Play to type)

我们知道在Material design上,roboto是默认字体, 但是这并不是说他就是你的App上的唯一的字体了。 好的字体应该是可以传达并加深你的品牌印象。

选择颜色 (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

Design from ios to android

Expressing brand in material


好吧,我一个多月没码字是因为六月底出去浪啦~,去了至今为止到达过的最遥远的地方,挪威~,这不是我的选择是公司的选择,我的选择是在挪威多呆了两天玩耍了一番,结果发现,天气不好,嘛都看不见,不如回家。

做长途飞机就好比是被关在狭窄的小黑屋里十几个小时,然后神志不清,筋脉曲张的到达一个地方,结果在那连吃了N顿香肠后,产生对祖国美食无比的渴望,然后发现在那连一碗小馄饨也难求T.T,哭着在小火车上细数我泱泱中华大地的美食,以求望梅止渴。

Anyway,完美的旅行还是要天时地利人和呀~

图为挪威的某处不知名的森林~~

Share Comment on Twitter