Material Design设计指南整理(一)

最近在读谷歌的material design设计指南,根据自己的理解将其整理下来,方便之后查阅。

material design,可称为材质化设计,是谷歌创造的一种新的视觉语言,主要目标有两个,一是希望将科技创新与传统设计进行融合,从而打通物理世界和虚拟世界;二是希望能在不同的平台和设备之间构造一致的体验。这两点在整个设计规范中得到了很好的体现。

科技与设计的结合
不同平台和设备的一致体验

基本构成:

材质是核心,传统的设计准则是框架,动画是灵魂

1、 材质:

材质,是真实世界的隐喻。基于物理世界的触感,启发于纸张和墨水的表现形式,发展于科技以及想象力。
基于物理世界能让用户快速地理解其功能可用性,当然,除了物理世界的简单映射外,还创造了一些新的功能可用性,巧妙地取代了物理世界但是又没有打破其基本的规律。下面会对材质做详细的介绍。

2、设计:

传统印刷设计中的文字排版、网格、尺寸、颜色、图像等,搭建了材质化设计的基本框架。这些不只是为了好看,更重要的是能够组织信息并对用户做出引导。通过创造层级关系,获取视觉焦点,有意识地突出某些元素等,提高用户体验。

3、运动:

动态能够赋予设计更多的意义,更好地表现元素自身以及元素之间的关系,更好地提高用户的关注度,从而提升用户体验。
运动多数是由用户发起的,能够提高用户对应用的掌控感。
运动的前提是尽量不打断用户体验的持续性,特别是在变换和重新组织内容时。

材质详细介绍

从三个方面介绍:环境、物理属性、运动属性
下面的物体或者材质都是同一个意思。

1、环境

这是一个三维的空间,材质、光线、投影是这个空间最基本的东西。
在这个三维空间中,X轴水平,Y轴竖直向上,Z轴是垂直于屏幕。
光源分为两种,主光源和环境光。
主光源有一定的方向,会在物体上产生定向的阴影,环境光没有方向,会在物体四周造成较为柔和的阴影。


2、物理属性(基础的、高度、阴影、相对关系)
  • 材质的长宽可以任意设置,但是厚度不变,都为1dp。
  • 材质的形状和颜色都可以改变,以承载不同的内容,这些内容不会对材质的厚度造成影响。内容可以在材质内自由变换,行为独立于材质。
  • 材质是固体的,意味着不能穿过其他材质,不能与其他材质发生重叠,输入事件不能穿过材质,比如各种手势,只能影响位于前面的材质。
  • 高度:
    指两个物体在z轴上的距离,单位是dp,因为材质是有厚度的,所以测量是从一个材质的顶部到另一个材质的顶部。
    1)静止高度:
    或者称为默认高度。所有的物体都有静止高度。当高度发生变化后,应尽快回到静止高度。桌面端的静止高度比表格中列出的要低2dp,这样更适用于鼠标以及其他非触摸式环境。
    2)控件高度:
    控件在不同的app之间有一致的静止高度,在不同的平台和设备之间会有所不同。组件有动态补偿高度,指的是当组件响应用户的输入时,发生的高度上的改变,同样的,每种组件的动态补偿高度也是一致的。
    在输入事件完成或者取消之后,组件要回到原来的静止高度。
    3)避免干扰:
    由于动态补偿高度的存在,组件会离开原来的位置,有时会与其他组件相互干扰。这是需要避免的,思路如下:1、在组件层面上,在发生干扰之前,相应的组件移开进行避让,在事件完成后回到原位。2、在框架层面上,尽量将有可能产生干扰的组件分开,避免干扰的发生。
各个控件的静止高度
示例一
示例二
  • 阴影
    阴影取决于物体的高度,物体越高,阴影越大。反之,阴影也可以反映物体的高度,除此之外,还能表示物体之间的关系,区分不同的物体,也可以用来辨别同个物体前后的变化。需要注意一点的是,阴影是与位置紧密联系了,不要单纯为了改变阴影而改变。
    因为高度决定了阴影,而且控件都有默认的高度,因此也有了默认的阴影。控件也有动态补偿高度,相应的也有对应的阴影大小。下面是一些例子,具体可以在官方文档中查看。https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-shadows
  • 物体关系
    1、父子关系:每个物体都有一个父级,每个物体都有多个子级,子级从父级继承了其变换属性,就是说子级会跟父级一起运动。
    2、同胞关系:拥有同一个父级的称为同胞关系。
    子级在的位移受到父级的限制。物体不能插入别的父子级之中
3、运动属性(变换属性加移动属性)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容