谷歌Material Design设计规范

谷歌Material Design设计规范

其它优秀文章推荐:

电商字体、商业海报字体如何选择?

你真的会做“运动、健身”宣传海报吗?

海报如何改稿? 海报设计案例讲解

如何制作宠物海报?

“秦、墨” 字体标志设计解析 – 第三集

如何快速入门字体设计?

Photoshop简单操作表现出“光”与“影”

海报设计总是套模板,该如何快速解决?

 

前言,了解 Android 之父一安迪鲁宣

Android和ios这两个系统是目前在市场上受众最广知名度最高的手机操作系统,尽管苹果是一家市值破万亿美元的科技巨头,但根据数据显示安卓手机在全球市场占比达85%。
提到 Android,我们不得不去聊一聊 Android之父艾迪·鲁宾,我想大部分人都知道苹果之父乔布斯,但很少有人知道 Android之父安迪·鲁宾,业内很多人认为安迪鲁宾和乔布斯应该是平起平坐的,因为他是 Android的创始人,所以我认为我们应该了解一下他的故事!

谷歌Material Design设计规范

安迪鲁宾的奋斗史

1、1989年进入苹果公司,成为一名开发者,当时安迪·鲁宾还很年轻,当时苹果公司也是基本以技术为主,主要是产品设计师( products design)为核心。

2、1990年开发出智能手机操作系统 Magic Cap。产品太超前,风口没到,鲁宾最终失业了。

3、1999年鲁宾和几个合伙人共同成立 Danger,并开发出北美第一款广受关注的智能手机:T- Mobile Sidekick.2008年被微软收购。

4、2003年鲁宾出走 Danger成立安卓,打算研发一款对所有软件开发者开放的移动平台。2005年,谷歌以5000万美元的价格收购安卓,他担任 Google移动平台副总裁,2008年10月,安卓才正式发布。

5、2015年再次创业,成立智能硬件企业 Essential,并在2017年,推出首款产品 Essential phone,这款手机曾让罗永浩对盛赞不已。

巨人都有着此起彼伏的人生,其实也有人说,鲁宾跳槽后是根据iOS创建的安卓,但不管事情到底如何,乔布斯和安迪·鲁宾都算移动互联网时代代表性的人物。

小知识:安卓系统发布是08年10月,而OS系统发布是07年1月发布,比安卓早一年多。

Android的由来

关于 Android这个名字有一个很有趣的故事,据说当时安迪·鲁宾在微软工作时,研究了一个机器人,有轮子可以遥控有个照相机可以拍摄公司场景,不幸的是后来机器人被黑客黑掉了,被微软安全部门发现后,机器人就被干掉了!由此可见安迪·鲁宾对机器人的喜好程度,他把他的最大爱好寄托给了他所亲自打造的系统,所以才有了后来的 Android。包括安卓4.0之前的字体Drod和4.0之后的字体 Roboto翻译过来都是机器人的意思。

谷歌Material Design设计规范

设计转折 Android5.0 Lollipop

2014年10月15日,谷歌发布全新 Android操作系统,就是 Android50 Lollipop。

谷歌Material Design设计规范

为什么要说 Android5.是设计转折,因为5.0系统发布之后在设计上有一个非常重大的改变,通过对比图可以看岀,5.0之前的设计语言是拟物化,5.0之后开始往扁平化设计,这一趋势借鉴的是苹果在2013年发布的OS7所使用的扁平化设计趋势。

谷歌Material Design设计规范

 

重要的是在2014年的 Google/O上推出了 Material Design,MD设计语言并不是简单的扁平设计,而是种注重卡片式设计、纸张的模拟、使用了强烈对比色彩的设计风格。目标是创建一种优秀的设计原则和科学技术融合的可能性( Create)、并给不同平台带来一致性的体验(uniy)、并且可以在规范的基础上突出设计者自己的品牌性( Customize),这种风格形成了独一无二的 Material Design。

Material Desian介绍

Material Design是谷歌14年推出的一种全新的设计语言,其风格主要是扁平化设计,但并不单单是扁平设计,而是一种注重卡片式设计、纸张的模拟、动效比较突出、使用了强烈对比色彩的设计风格。谷歌将这种设计语言充分运用到旗下的电脑、穿戴设备、电视等可以使用 Material Design作为视觉体现的设备上,甚至 Google鼓励开发者在ios平台也使用 Material Design。这套系统也被业内人士称为足以媲美iOS系统的设计语言。

谷歌Material Design设计规范

Material Design核心思想

把物理世界的体验带进屏幕,去掉现实中的杂质和随机性,保留其最原始最纯浄的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

核心思想单纯的一句话也许会不太理解,在这里举个很简单的例子,比如MD里面卡片化设计中的卡片最开始的概念就叫魔法纸片,如何把现实中的一张纸片带进虚拟屏幕里面呢,首先去掉这张纸的杂质比如这张纸可能会褶皱,可能会损坏,可能会被揉成一团,我们把这些杂质和随机性全都去掉,做一个最原始的、最纯净的、绝对对称的、一个白色卡片,作为一个信息的载体,把物理世界所谓的物体的阴影,空间的关系、重力、惯性、运动的时候所产生的变化与过渡都搭配起来,通过虚拟世界的灵活性和信息的反馈交互还原最贴近真实的一种交互体验,比如按钮点击之后的波纹效果,卡片列表滑动后的动态跟随性等,通过这些让整个设计达到既简洁又直观,交互又丰富的一种视觉效果。

三大原则

运用比喻

谷歌认为现实世界中的材质触感是可以通过纸片的隐喻来表达,通过在设计上运用符合运动规律的动画交互、通过光影打造设计层次的关系可以创造全新的虛拟交互空间,并且这个空间是符合现实规律的。这也就是刚才核心思想提到的用纸做比喻。

谷歌Material Design设计规范

大胆、形象、目的明确

在视觉上,谷歌不仅要求生动形象,更要求设计时要确认设计的目的,摒弃仅仅为了美观而设计,强调视觉设计要为用户使用提供指引,凸现页面当下的核心功能。

谷歌Material Design设计规范

动效表意

交互动画的目的就是吸引用户的注意,表达当下页面所发生的变化井给予用户反馈,同时和对视觉要求一样,一定要有意义。

谷歌Material Design设计规范

MD设计语言一材质

Material Design中,最最最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。

谷歌Material Design设计规范

谷歌Material Design设计规范

MD设计语言一空间

Material Design引入了三维中z轴的概念,那什么是三维,三维就是X轴(左右)、Y轴(上下)、Z轴(前后)组成的立体世界,而二维就是只有X和Y轴的平面世界。人类能体验到的是四维,除了三维还有个时间的维度。回到 Material Design中,手机界面其实是一个平面二维的空间,而 Material Design通过二维的一些表达手段,比如投影、动效等构建岀了Z轴(前后)的概念。比如z轴垂直于屏幕,用来表现元素的层叠关系,z值(海拔高度)越高,元素离界面底层(水平面)越远,投影就会越重(前提是所有元素的厚度都是1dp)。

谷歌Material Design设计规范

Z轴与投影

界面中不同的板块功能使用不同的Z轴高度可以明确他们的重要性和逻辑层级关系。 Material Design为第三方开发者提供了动态且真实的投影和Z轴高度设置。

谷歌Material Design设计规范

不同投影大小区别

 

谷歌Material Design设计规范

正面、侧面解析1dp和6dp海拔高度产生出阴影大小的不同

 

谷歌Material Design设计规范界面中各个组件的海拔高度对照

 

小知识:界面中不同Z轴高度板块的投影是由编程完成的,并非切图时切出投影,这点尤其重要。

MD设计语言一动画效果

Material Design是活的,它和我们生活的世界一样,这个世界是响应的,自然的,可察觉的,有内涵的,MD是一组有力的动画设计语言,当你有一个动作,反馈立即发生,绝不需要等待,动作不再以元素移动的距离为计算基准,而是聚焦于元素移动时的速度和所需要的时间,元素的动作应该有真实的感觉,就好像在真实世界发生的一样,所有东西都不该立刻启动或立刻停下,在运动中的元素有动量和时间来控制加速和减速,元素要受到阻力的作用,移动时要按照曲线移动而非直线。

材质还要能够感知周围的世界,某个元素进入屏幕的方式也要对其他元素的运动有所影响,一个元素可以推开其他元素,或者追踪它们,总之,材质运动不是随机的,所有动效背后都有其发生的原因,在动效的引导下,你将聚焦于重点的东西,而且也不会在界面跳转中迷失位置,点击时,元素的反馈也是真实的,甚至在它被追踪前。

无论你的按钮设计成很有趣的,或者设计成严肃认真的,运用MD设计,能够帮你制造岀简单、清晰、快捷、流畅的体验。

动画效果原则一

Material Design重视动画效过。

它反复强调一点:动画不只是装饰,它有含义,能表达元素、界面之间的关系,具备功能上的作用。

谷歌Material Design设计规范

easing

在现实的世界中,物体可以被重量、表面摩擦力影响很快的加速或減速。同样的,材料设计的动效,不会发生突然停止,或者突然启动,不然会显得非常的生硬或者不真实,动效都是会有一个加速度或者减速度(红色没缓动,蓝色有缓动)。

 

动画效果原则二

动画要贴近真实世界,就要重视 easing(重视动画缓动)。

物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然听追的匀速动画显得机械而不真实,考虑动画的 easing,要先考虑它在现实世界中的运动规律(例如重力,它会使一个元素沿曲线运动而非直线运动)。

 

谷歌Material Design设计规范

谷歌Material Design设计规范

谷歌Material Design设计规范

动画效果原则三

所有可点击的元素,都应该有反馈效果。通过动画,将点击的位置与所操作的元素关联起来,体现了Material design动画的功能性。

谷歌Material Design设计规范

谷歌Material Design设计规范

谷歌Material Design设计规范

MD设计语言一表意动效

one通过过渡动画,表达界面之间的空间与层级关系,并且跨界面传递信息(见下图一)。

two从父界面进入子界面,需要抬升子元素的海拔高度,并展开至整个屏幕,反之亦然(见下图二)。

three多个相似元素,动画的设计要有先后次序,起到引导视线的作用(见下图三)。

four相似元素的运动,要符合统一的规律(见下图四)。

通过图标的变化和一些细节来达到令人愉悦的效果。

谷歌Material Design设计规范 谷歌Material Design设计规范 谷歌Material Design设计规范 谷歌Material Design设计规范 谷歌Material Design设计规范 谷歌Material Design设计规范

MD设计规范 一 色彩

Material Design设计中,颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。

谷歌Material Design设计规范

小知识

上图中出现的如100、500、700、A100、A200这几个其实是安卓开发语言,比如我们调透明度为百分比,但在安卓开发需要另一种换算形式,需要用到ARGB种色彩模式,也就是RGB色彩模式附加上 Alpha(透明度)通道,常见于32位位图的存储结构。

安卓颜色ARGB依次代表透明度( alpha)、红色(red)、绿色( green)、蓝色(bue)

比如透明度( alpha)分为256阶(0-255)透明就是0阶,不透明就是256阶,如果我们给到开发一个50%透明度样式,开发就会写成A128阶(256乘以50%)

实际内容以安卓为准,我只不过在网上看到并写下的个人理解Appar背景使用主色,状态栏背景使用深一级的主色或20%透明度的纯黑。

谷歌Material Design设计规范

小面积需要高亮现实的地方使用辅助色强调。

谷歌Material Design设计规范

其他颜色通过纯黑#000000与纯白#ffffff透明度变化来展现(包括图标和分割线)而且透明度限定了几个值。

谷歌Material Design设计规范

 

至于为什么用87%还是70%,其实是MD开源规范文档里定的,并不是不能打破,这只是官方给的建议,给我们一个数据作为参考。

MD设计规范一图标

Material Design设计中,桌面图标尺寸是48dⅹ48d,桌面图标建议模仿现实中折纸效果,通过扁平色彩表现空间和光彩。注意避免以下问题:

不要给彩色元素加投影

层叠不要超过两层

折角不要放在左上角

带投影的元素要完整展现,不能被图标边缘裁剪

如果有折痕,放在图片中央,并且最多只有一条

带折叠效果的图标,表面不要有图案

不能透视、弯曲

谷歌Material Design设计规范

 

小知识:dp单位等于ios里面p单位,都是开发单位。

Material Design设计中,小图标尺寸为24dpx24dp,图形限制在中央20dpx20dp区域内,小图标同样有删格系统,线条、空隙尽量保持2dp宽,圆角半径2dp。特殊情况相应调整。

 

谷歌Material Design设计规范

 

优先使用 material design默认图标。设计小图标时,使用最简练的图形来表达,图形不要带空间感。

 

谷歌Material Design设计规范

小图标的颜色使用纯黑与纯白,通过透明度调整

 

谷歌Material Design设计规范

 

规范很无聊,来欣赏几个动画吧

谷歌Material Design设计规范

谷歌Material Design设计规范

谷歌Material Design设计规范

谷歌Material Design设计规范

 

MD设计规范  ——  文字

英文字体使用 Roboto,中文字体使用Noto。

Roboto有6种字重:Thin、 Light、 Regular、 Medium、Bold和 Black Noto。

有7种字重:Thin, Light、 DemiLight、 Regular、 Medium、Bold和 Black。

 

谷歌Material Design设计规范

 

小知识:Noto有个中文名字叫思源黑体,并且是一个开源免费的字体,所以小伙伴以后就不要再用微软雅黑啦。

常用字号:

12sp小字提示

14sp(桌面端13sp)正文/按钮文字

16sp(桌面端15sp)小标题

20 sp Appar文字

24sp大标题34sp/45sp/56sp/12sp超大号文字

长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。

这里只是一个字号建议,我们可以根据实际设计需求更改

MD设计规范 —— 布局

所有可操作元素最小点击区域尺寸:48dX48dp。

栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离。

谷歌Material Design设计规范

另外注意56dp这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按56的整数倍来设计。还有非常多规范,不详细列举,遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多,距离与尺寸要相应增大。

谷歌Material Design设计规范

 

卡片

即使在同一个列表中,卡片的内容和布局方式也可以不一样。且卡片统一带有2dp的圆角。

 

谷歌Material Design设计规范

 

卡片最多有两块操作区域。辅助操作区至多包含两个操作项,更多操作需要使用下拉菜单。其余部分都是主操作区。在以下情况考虑使用卡片:

同时展现多种不同内容

卡片内容之间不需要进行比较

包含了长度不确定的内容,比如评论

包含丰富的内容与操作项,比如赞、滚动条、评论

本该是列表,但文字超过3行

本该是网格,但需要展现更多文字

谷歌Material Design设计规范

分割线

列表中有头像、图片等元素时,使用内嵌分隔线,左端与文字对齐。没有头像、图标等元素时,需要用通栏分隔线。图片本身就起到划定区域的作用,相册列表不需要分隔线。

 

谷歌Material Design设计规范

 

日常设计中有时候需要谨慎使用分隔线,留白和小标题也能起到分隔作用。能用留白的地方,优先使用留白。分隔线的层级高于留白,而通栏分隔线的层级高于内嵌分隔线。

谷歌Material Design设计规范

 

列表

列表由行构成,行内包含瓦片。如果列表项内容文字超过3行,建议改用卡片。

谷歌Material Design设计规范

 

列表包含主操作区与副操作区。副操作区位于列表右侧,其余都是主操作区。在同一个列表中,主、副操作区的内容与位置要保持一致。

 

谷歌Material Design设计规范

 

在同一个列表中,滑动手势操作保持一致。

谷歌Material Design设计规范

 

主操作区与副操作区的图标或图形元素是列表控制项,列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作,也可以包含快捷键提示、二级菜单等提示信息。

 

谷歌Material Design设计规范

 

开关

必须所有选项保持可见时,才用 Radio button(单选按钮)不然可以使用下拉菜单节省空间。而同一个列表中有多项开关,建议使用 Checkbox(多选按钮)。单个开关建议使用 Switch(切换按钮)。

 

谷歌Material Design设计规范

 

文章作者:

https://www.zcool.com.cn/u/14347064

谷歌Material Design设计规范



属性标签: , , ,

欢迎留言

页面生成消耗的时间 0.424 秒,此页面一共查询了 114 次数据库!缓存时间:2020-09-30 15:03:59你的IP为:3.92.74.105