我喝了 Material Design 这碗鸡汤

作者: 求愚 | 来源:发表于2015-12-24 12:39 被阅读2881次

    断断续续的看了一个月,终于啃完了 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 轴,如图。

    Merry Christmas

    原文链接

    相关文章

      网友评论

      • hybefortis:在国内来讲,MD风格可能会增加运营难度,对广告要求高。。
        话说国内广告观感太差了。
        求愚:@echohanyu 没接触过国内实战环境 谢谢分享
      • 2b0d1b3008fc:VB吧
        求愚:@勤劳的小蚂蚁 😊
        2b0d1b3008fc:NB《牛逼》 @野子Joey …喜欢
        求愚:@勤劳的小蚂蚁 ?
      • 8d3a7b7aac21:我已经成为强粉了
        求愚:@良山 😄
      • lan6_8:🌼
      • __Berial___:好文,赞一个。另外文中的 Sketch 超链接多了个s。
        求愚:@__Berial___ thx~~~ 谢谢
      • 波妞的:非常实用,年初就拿到了资料,各种忙到现在还没有通读规范:sleepy:
      • GeekBug:写得不错,作为Android Dev,我非常喜欢MD
      • 低调的廷哥:一年多以前我就开始接触了,个人感觉真的特别棒
        求愚:@低调的廷哥 👍
      • 6987e84be3ba:我是一名UI设计师。
        md在国内而言,
        尤其是很多创业型公司,
        很难做到的。
        6987e84be3ba: @野子Joey 慢慢来吧,有实力的公司,都会出md规范的UI。
        求愚:@天天天天天天 可以往这个方向发展~ 做一点总比不做好
      • 食梦兽:图标库是个好东西
      • 1672623b8aab:非常不错,一直准备看material design,但是却没有开始,把作者的这个当成导读先看看页不粗
        求愚:@南宫北风 thx
      • NickEyes:对这个话题感兴趣,mark

      本文标题:我喝了 Material Design 这碗鸡汤

      本文链接:https://www.haomeiwen.com/subject/slrvhttx.html