我喝了 Material Design 这碗鸡汤

断断续续的看了一个月,终于啃完了 Material Design 这个奉为最新设计趋势的圣经。从不屑,到好奇,再到揣摩其中的思想并尝试总结规律。最后不得不承认,歌的牛设师 [下文简称古巨基] 绝对是业界良心。其严谨的逻辑和分享的精神正是作为一个互联网从业人员所必须具备的素质。通过参照这个手册,普通人也可以做出符合用户体验的设计。

开篇古巨基提出了三个准则:

  1. Material is a metaphor,设计时联想现实生活中的卡片
  2. Bold, graphic, intentional,大胆运用颜色和图片
  3. Motions provides meaning,不做没意义的动效

这三个准则我理解即为:拟物,个性,简约。

拟物:最好的设计能唤起人类的共鸣,即 visceral reflection, 因此要留意日常生活中一举一动,培养一颗发现美的眼睛。我觉得仔细盯着一幅画观察细节或者买个好耳机听好歌的细节可以培养我这方面的能力。

个性:咩有个性的设计师一定不是个好艺术家。看过很多被称为艺术家的作品,而后发现他们的作品是不能够用理性来评判优劣的,甚至可能都看不出其想表达的意义和感情。然而这就是艺术品。都说设计是理性的,艺术是感性的。想更接近艺术一步吗,show your characteristics!

简约:设计界经典语录 less is more. 大道至简。越来越感受到这句话的深刻意义。自己写前端代码时总想着能用最酷炫的效果,最花哨的样式,结果总是忽略了产品的目的本身。往往越复杂的网站看起来越朴素,越有内涵的人打扮越随意。然而老祖宗早已看穿了这一切。

接下来,什么是 Material?

大家可以把 Material 想象成一个放在真实环境中的卡片。在真实世界中一般有两种光源,点光源和环境光。前者有投射方向,光线比较聚集强烈,好比太阳照到人身上会产生特定方向的阴影, 如图。

Shadow cast by key light

后者类似LED日光灯,光比较分散柔和,只会产生泛泛阴影之感,如图。

Shadow cast by ambient light

我们的一切设计就存在这个3D的环境当中,为了方便测量,古巨基给这个环境指定了 x, y, z 轴,如图。

3D space with x, y, and z axes
3D space with x, y, and z axes

长宽分别是 x, y 轴,深度是 z 轴。这三个轴都是无尽头的,考虑到界面在虚拟世界中理论上是可以无限延展的。这里对测量单位进行一下解释。古巨基们发明了一个晦涩的单位 dp. 如果这个环境 [手机分辨率] 是 160 dpi, 那么你设计稿的 1px 就是 1dp. 否则,请参照如下公式:*px = dp ( dpi / 160 ). 数学不好的孩纸请默默的拭去眼角不经意流出的翔。

Material Design 的另外一个特色是其模块化思想。设计之前,先做好基础准备。

  1. Color
  2. Icons
  3. Imagery
  4. Typography
  5. Writing

Color: 确定自己的主调色板,三个同色系的主色调加一个强调色。不同功能字体的颜色 [标题,正文,解释文字],不同状态下的颜色 [inactive, active, disabled]. 使用设计软件保存下这些颜色,便于设计时直接调用。

Icons: 选择简单,不言自明的 icons. 作者一般直接使用 阿里巴巴图标库Google 图标库。确保你选的图标属于同一风格即可,如果能完全符合 MD 的要求那更真真是极好的了。

Imagery:这一点作者个人觉得比较困难, 需要有很好的素材库。否则只能请技术高超的摄影师和后期进行原创操作。对于小的设计团队而言成本很高。不过统一自己的图片的风格还是需要牢记的。

Typography:古巨基推荐使用 Roboto 字体,不同类型的文字大小也一一限定了,可以直接照搬或者用设计软件将它们全部保存为模板,便于重复使用。

Writing:简洁,易懂,不装逼。尽量将能删去的文字全部删去,然后请不相关领域的用户进行测试,看看他们是否有理解上的障碍。最后如果你要做国际化的软件,用词一定不能装逼 [俗语],否则很大一部分软件语言非母语者会有理解上的障碍,多下几个国外软件你就懂。

正式开始设计时,参展 Layout 部分进行布局,可以通过 Google 下载尺寸模板。各类 Components 的样式也可以直接使用,网上各类不同的资源。作者是 MAC 用户,设计界面一般使用 Sketch, Sketch App Sources 是我最长使用的网站,里面有各类丰富的模板。交互细节方面请参照 Pattern 模块,制定一个统一的标准是最重要的,避免不同的设计师和开发者采用自己个人的偏好,导致产品细节处不一致。

设计完成后,可以参照 Usability 模块进行可用性测试。个人觉得古巨基的要求是相当相当高的,大部分 App 都难以满足其所有要求。但可以把其当做一个评判标准,满分100分,老师您能给我打几分?

作者进行可用性测试时一般使用五个标准:

  1. Affordance,功能是否实现
  2. Signifier,用户是否理解
  3. Matching,理解是否容易
  4. Consistence,理解是否一致
  5. Feedback,错误理解是否能纠正,正确理解是否能强化

如果上述五点要求全部能够满足,我相信这个应用已经可以称之为一个易用的应用了。

当然 Material Design 并不是万能的,实践时更应该结合实际情况。产品的主要发布平台是什么,Android or iOS. 如果是 Android,当然可以完全匹配。IOS 就需要适当平衡 Google 的样式风格和 iOS 的样式风格。如果是网站,我还是很推荐 MD 风格的,Google 旗下的网站真的用起来 so easy 啊。只有一点作者个人持保留观点,就是 MD 的 Subheader [收缩侧边栏导航]. 我是尽可能避免使用这一特性。即使使用了侧边栏导航,也尽可能使其 permanent rather than temporary OR transfer primary functions outside to be tabs nav. 实在不喜欢犹抱琵琶半遮面的感觉,每次看脸都得先把面罩取了,真是麻烦。

最后,也建议 Developers 抽空也去看一下 Material Design Instruction, 可以极大的降低以后您和设计妹子 [or 汉纸] 之间的沟通成本,一段美好的姻 [gay] 缘也许能就此产生呢。

当然,纸上得来终觉浅,绝知此事要躬行。放假抽空设计一个基于 MD 的 Handhold device 的移动端购物网站作为锻炼. I really like the floating button idea. It is super easy and straightforward.

Last but not least, may 简书 and every 简友 life be filled with joy and may each new day bring you moments to cherish. Happy Christmas.

Merry Christmas

原文链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容