初识MaterialDesign设计规范(精简版)设计达人

Android和iOS这两个系统是目前在市场上受众最广知名度最高的手机操作系统,尽管苹果是一家市值破万亿美元的科技巨头,但根据数据显示安卓手机在全球市场占比达85%。

提到Android,我们不得不去聊一聊Android之父艾迪鲁宾,我想大部分人都知道苹果之父乔布斯,但很少有人知道Android之父安迪鲁宾,业内很多人认为安迪鲁宾和乔布斯应该是平起平坐的,因为他是Android的创始人,所以我认为我们应该了解一下他的故事!

安迪鲁宾的奋斗史

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

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

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

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

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

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

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

设计转折Android5.0Lollipop

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

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

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

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

MaterialDesign

01.MaterialDesign核心思想

把物理世界的体验带进屏幕,去掉现实中的杂质和随机性,保留其最原始最纯浄的形态、空间关系、変

化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

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

三大原则

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

Z轴与投影

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

不同投影大小区别

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

界面中各个组件的海拔高度对照

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

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

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

动画效果原则一

MaterialDesign重视动画效过。

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

easing

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

动画效果原则二

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

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

现实当中的弧线运动轨迹运用到材料设计中

常见的三种曲线

动画时长

在移动设备上的长动画大约是300-500ms,短动画大概是150-200ms。过长的动画让人感觉迟钝,过短的动画让人觉得难以看明白。

动画效果原则三

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

one

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

two

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

three

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

four

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

five

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

常用的8个动效事件

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

小知识:

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

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

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

实际内容以安卓为准,我只不过在网上看到并写下的个人理解。

Appar背景使用主色,状态栏背景使用深一级的主色或20%透明度的纯黑。

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

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

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

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

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

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

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

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

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

描述具体事物,优先使用照片。然后可以考虑使用插画。

MaterialDesign设计中,图片上的文字,需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%40%之间,浅色的遮罩透明度在40%60%之间。

AndroidL可以自动从图片中提取主色,运用在其他UI元素上。

这是Android5.0Lollipop之后系统支持的一个功能,比如下面音乐播放界面,系统会自动提取专辑封面颜色并运用在UI元素上。

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

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

Noto有7种字重:Thin,Light、DemiLight、Regular、MediumsBold和Black。

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

常用字号:

12sp小字提示

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

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

20spAppbar文字

24sp大标题

34sp/45sp/56sp/112sp超大号文字

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

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

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

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

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

底部动作条

通常以列表形式出现,支持上下滚动。当你点一一个按钮,他会从底部展开一个列表,这个列表并不会占据整个屏幕,通常会占据屏幕一半或者五分之三这样一个大小,并且支持上下滚动。

按钮

按钮分为悬浮按钮、凸起按钮、扁平按钮。

按钮重要性如下递增:最重要且随处用到的操作,建议使用悬浮按钮。信息较多时,选用凸起按钮可以

有效突出重要操作,但注意纸片不要叠太多层。扁平按钮适合用在简单的界面,例如对话框中。

使用悬浮按钮要遵循以下规则:

1.建议只用一个悬浮按钮;

2.悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘;

3.悬浮按钮不能被其他元素盖住,也不能挡住其他按钮;

4.列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项;

5.悬浮按钮的位置不能随意摆放,可以贴着左右两边的对齐基线。

悬浮按钮有两种尺寸:56dpx56dp/40dpx40dpo悬浮按钮通常触发正向的操作,添加、创建、收藏

之类。不能触发负面、破坏性或不重要的操作,也不应该有数字角标。下图就是悬浮按钮的错误使用:

卡片

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

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

分割线

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

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

列表

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

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

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

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

开关

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

动作条

tab只用来展现不同类型的内容,不能当导航菜单使用。tab至少2项,至多6项。而超出6项,tab需要变为滚动式,左右翻页。

tab文字要显示完整,字号保持一致,不能折行,文字与图标不能混用。

tab选中项的下划线高度是2dp。

抽屉导航

侧边抽屉导航从左侧滑出,占据整个屏幕高度,遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。

列表较短不需要滚动时,设置和帮助反馈跟随在列表后面。

整理只为巩固规范思维,不作为任何用途,本文部分内容引用md设计规范文档,部分内容为个人理解。

THE END
1.图片加字用什么软件腾讯云开发者社区Fotor是一款相当专业的图片处理软件,该软件界面美观大方,给用户提供了强大的图像修片、拼图、设计工具,同时内置了海量素材,可以帮助用户轻松快捷的处理图片,功能十分强大。相信大家在生活中都看到过带有文字的图片,给图片添加上文字在线图片加字,能够对图https://cloud.tencent.com/developer/information/%E5%9B%BE%E7%89%87%E5%8A%A0%E5%AD%97%E7%94%A8%E4%BB%80%E4%B9%88%E8%BD%AF%E4%BB%B6-article
2.一分钟学会给图片加水印,从此告别付费水印!即时设计——给图片添加水印的神!使用即时设计,可以辅助设计师们完成各种在线添加水印操作,且水印格式不受限制,可以是文字形式也可以是图片形式,最重要的是完全不会影响图片原本的清晰度。接下来,本文就来为大家具体介绍一下怎样通过即时设计为图片添加水印。 https://js.design/special/article/image-watermark.html
3.照片拼图加文字软件哪个好?照片拼图可以配文字的软件分享若有字体,选中文字图层,双击修改文字内容即可。若想添加新字体,可选择左侧工具栏的“文字”,添加文字或添加新的文字素材。两种方法的图片制作完成之后,选择下载保存至本地就可以啦,是不是很方便呢,稿定设计还提供可随时拼图的app手机端,感兴趣的就来稿定设计了解。https://www.gaoding.com/article/6163
4.在线图片加水印工具照片上添加文字图片加Logo一键LOGO设计添加图片 在线图片加水印工具,简单几步即可实现给JPG、PNG、ICO等图片文件进行加水印操作。 为保障您的隐私安全,您上传的文件1小时后会被自动删除 一键logo设计在线图片加水印工具,简单几步即可给照片、聊天记录、证件等图片文件加上图片水印或文字水印, 并自定义水印外观及所处位置。 https://www.yijianlogo.com/tools/jiashuiyin/
5.PS怎么添加的文字和图片一样的字体3d溜溜设计问答平台为广大设计师们提供各种PS怎么添加的文字和图片一样的字体问题解答,3d溜溜素材问答平台汇聚全球各地的设计师、名师名司、设计爱好者等设计灵感和经验,迅速为您解决PS怎么添加的文字和图片一样的字体的困惑。https://www.3d66.com/answers_relation/relation_3383212.html
6.信息技术应用能力提升工程2.0工具软件集锦觅知网_百万背景素材-免抠素材-艺术字-商用图片免费下载 编辑精选 新图速递 设计模板 PPT模板 觅知网 包图网PPT模板、背景 包图网 觅元素_设计元素的免费下载网站_免抠素材51yuansu.com 免抠元素 高清背景 QQ登录 会员制 觅元素 云文字_在线超快作图工具_在线编辑3秒出图 https://www.meipian.cn/3b1ahl50
7.在线学习平台使用指南功能介绍4:本学期课程:显示各类教学提醒信息,毕业设计提醒信息,可切换主持与面授课程列表,显示收藏的课程。提供课程相关的汇总信息,可直接点击数字,查看详细信息。 功能介绍5:布置教学活动:根据教师权限添加相关教学活动。 功能介绍6:课程形考比例:根据教师权限设置、查看、批阅相关形考比例。 https://wlxx.sou.edu.cn/2020/1019/c8624a69472/page.htm
8.java的水印相机java水印方案hochie的技术博客公司处方药品销售业务,需要在线开具处方或者手动上传处方图片,处方图片在购药使用之后需要添加已使用的水印字样,防止处方图片的重复使用。因此,需要设计一个为图片添加文字水印的Java工具类,针对这个问题,我展开了解决方案的研究。 1.1 UI设计的水印原型 二、实现方案探索 https://blog.51cto.com/u_13066/10005730
9.Qt样式表二:Qt样式表详解qt中checkbox的样式表设置可以看到,在这里设置样式表不仅很便捷而且很直观,不仅可以设置颜色,还可以使用图片,使用渐变颜色或者更改字体。在设计模式,有时无法正常显示设置好的样式表效果,不过运行程序后会正常显示的。这里是在MainWindow界面上设置了样式表,当然,也可以按照这种方法在指定的部件上添加样式表。 https://blog.csdn.net/m0_73482095/article/details/134969894
10.稿定设计怎么去水印?稿定设计无痕消除图片上文字的技巧图形图像1.首先我们需要进入到稿定设计中,然后在页面上找到【在线ps】,点击进入。 2.进入到页面中之后,直接在页面的左上角的位置点击【文件】选项,然后在子选项中选择【打开】选项。 3.随后即可打开一个文件夹页面,在页面中将找到自己需要修改文字的图片,点击该图片添加。 https://www.jb51.net/softjc/907928.html
11.如何提取图片中的文字(微信小程序)?1.其实微信小程序中很多提取文字的程序,选择其中一个示范。打开微信,切换到发现,点击微信小程序。 2.点击小程序搜索框。 3.输入图片文字识别或者提取文字等相类似文字,搜索。 4.搜索出来的许多提取文字的小程序都可以用,以图片文字识别小程序为例示范。 https://tool.a5.cn/article/show/110885.html
12.即时灵感:即时设计旗下基于人工智能的免费AI绘画工具新媒派即时灵感是由JS Design开发的一款基于人工智能的免费AI绘画工具,可根据用户的文字描述或上传的图片生成不同风格的艺术作品,旨在为个人设计师提供一个快速、便捷、有趣的创作平台。https://pidoutv.com/sites/5862.html
13.设计神器!轻松添加GIF文字特效的GIFntext优设网@短腿僵尸木:为客户录制演示GIF难免需要添加文字注释,这时候打开PS进行编辑往往会让电脑卡出天际……之前设计神器小分队就给大家推荐过一个GIF在线编辑网站——Ezgif。集在线制作、优化、压制动图,静图、视频简单处理编辑为一体,但是它有个很大的缺点是无法实时预览你的https://www.uisdc.com/add-gif-text-effects-gifntext
14.6张动图轻松玩转Canva,平面设计从未如此简单Canva是全球最大的在线平面设计平台,拥有海量免费模板,能满足海报、社交媒体、演示文稿、名片、简历制作等几十种设计需求。百种中文字体和千万版权图片等设计素材,均可供商业使用。Canva还为企业提供设计协作解决方案,致力于帮助众多中国企业提高规模设计质量和协同能力https://www.canva.cn/learn/be-a-master-of-canva/
15.StableDiffusion教程!三种方法制作文字融入图片效果好了,废话不多说,让我们看看如何制作这种文字融入图片的效果吧! 二、教程分享 01 前言及准备工作 虽说是三种方法,其实大体思路都差不多,都需要借助SD的Controlnet,只不过用到的模型不一样。 前两种方法文生图和图生图都可以,最后一种只能用图生图,我这里就统一用图生图来演示吧。 https://uiiiuiii.com/aigc/1212626205.html
16.纪念册制作图片和文字怎么排版设计好看纪念册制作中图片和文字集合构成了纪念册的核心内容,一本精美的纪念册除了材质和装订方式外就是纪念册排版和设计了。那么,一本纪念册图片和文字怎么排版设计好看呢? 在纪念册制作的时候,小编认为最重要的就是,文字和图片要做好纪念册的版面设计,符合整体的纪念册设计风格,要做到美观大方。 https://www.yihaii.com/news_juhui/945.html