android md 颜色,安卓MD(Material Design)规范

Md规范是一种设计风格,并不特指规范。是一种模拟纸张的手法。

一、核心思想

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

01、五大原则

1、材料隐喻

受物理世界及其物理纹理材质的启发,包括它们如何让反射光线和投射阴影。材料表面进行重新构想,加入纸张和墨水的特性。

2、大胆夸张

以印刷设计方法,排版、网格、空间、比例、颜色和图像为指导,创造出让用户沉浸在精心设计的视觉层级、视觉意义以及视觉聚焦中。

3、动效表意

通过微妙的反馈和平滑的过渡来使动效保持一定的连续性。随着元素出现在屏幕上,它们在环境中转换和重组,相互作用产生新的变化。

4、灵活

系统旨在实现品牌传达。他集成了一个自定义代码库,可以使组件、插件和设计元素无缝的链接和灵活的运行。

5、 跨平台

使用跨平台管理,其中包括android、ios、flutter和web,方便设计师跨平台维护ui组件。

02、设计目标

创造:我们希望创造一种新的视觉设计语言,能够遵循优秀设计的经典定则,同时还伴有创新理念和新的科技

统一:我们希望创造一种独一无二的底层系统,在这个系统的基础智商,构建跨平台和超越设备尺寸的统一体验

定制:通过Material的视觉语言的延伸,为创新和品牌表达提供统一灵活的设计规范。

二、材质与空间

01、材质

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

这些是纸片的魔法特性,真实纸片所不具备的能力:

1、纸片可以伸缩,改变形状

2、纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分

3、多张纸片可以拼接成一张

4、一张纸片可以分裂成多张

5、纸片可以在任何位置凭空出现

不过,魔法纸片有些效果是禁止的:

1、一项操作不能同时触发两站纸片的反馈

2、层叠的纸片,高度不能相同

3、纸片不能互相穿透

4、纸片不能弯折

5、纸片不能产生透视,必须平行于屏幕

02、空间

Material Design引入了Z轴的概念:

Z轴垂直于屏幕,用来表现元素的叠层关系。Z值越高,元素离界面底层越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。

03、动效

Material Design重视动画效果,它反复强调一点:

动画不只是装饰,他有含义,能表达元素、界面之间的关系,具备功能上的作用。

动画要贴近真实世界,就要重视easing。物理世界中的运动和变化都是有加速和减速的过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing,要先考虑它在现实世界中的运动规律。

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

1、通过过渡动画,表达界面之间的空间与层级关系,并且跨界面传递信息。

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

3、多个相似元素,动画的设计要有先后次序,起到引导视线的作用。

4、相似元素的运动,要符合统一的规律。

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

四、色彩规范

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

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

3、小面积需要高亮显示的地方使用辅助色。

4、其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现(包括图标和分割线)

五、图标

1、桌面图标尺寸是48dp*48dp。桌面图标建议模仿显示中的折纸效果,通过扁平色彩表现空间和光影。

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

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

六、图标

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

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

3、Android L可以从图片中提取主色,运用在其他UI元素上。

七、文字

1、英文

英文字体使用Roboto

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

2、中文

中文字体使用Noto

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

常用字号:

1、12sp小字提示

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

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

4、20sp Appbar文字

5、24sp大标题

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

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

八、布局

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

删格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整倍数。

顶部状态栏高度:24dp

Appbar最小高度:56dp

底部导航栏高度:48dp

用户头像尺寸:64*64dp/40*40dp

小图标点击区域:48*48dp

侧边抽屉到屏幕右边的距离:56dp

卡片间距:8dp

分割线上下留白:8dp

大多元素的留白距离:16dp

屏幕左右对齐基线:16dp

文字左侧对齐基线:72dp

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536550.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mariadb修改root密码

2019独角兽企业重金招聘Python工程师标准>>> 默认情况下,新安装的 mariadb 的密码为空,在shell终端直接输入 mysql 就能登陆数据库。 如果是刚安装第一次使用,请使用 mysql_secure_installation 命令初始化。 # mysql_secure_inst…

【译】Googler如何解决编程问题

本文是Google工程师Steve Merritt的一篇博客,向大家介绍他自己和身边的同事解决编程问题的方法。 原文地址:blog.usejournal.com/how-a-googl… 在本文中,我将完整的向你介绍一种解决编程问题的策略,这个策略是我在日常工作中一直…

自学html和css,学习HTML和CSS的5大理由

描述人们学习HTML和CSS最常见的原因是开始从事web开发。但并不是只有web开发人员才要学习HTML和CSS的核心技术。作为一个网络用户,你需要你掌握的相关技术很多,但下面有5个你无法拒绝学习HTML和CSS的理由。1、轻松制作卡通动画Web上的动画很多年来都是使…

html 左侧 树形菜单,vue左侧菜单,树形图递归实现代码

学习vue有一段时间了,最近使用vue做了一套后台管理系统,左侧菜单需求是这样的,可以多层,数据由后台传递。也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享。效果图如下所示:先说…

Node.js的基本使用3

koa(扩展知识, 建议学习) koa是express超集(进阶版)前后端分离和耦合概念介绍 面向过程 -》 面向对象 --》 面向服务数据库 Node.js mongodb(bson json的超集) 分类: 关系型数据库: MySql非关系型数据库: MongoDB Mong…

Flutter的滚动以及sliver约束

Flutter框架中有很多滚动的Widget,ListView、GridView等,这些Widget都是使用Scrollable配合Viewport来完成滚动的。我们来分析一下这个滚动效果是怎样实现的。 Scrollable在滚动中的作用 Scrollable继承自StatefulWidget,我们看一下他的State的build方法…

页面增加html,为静态页面HTML增加session功能

一般来说,只有服务器端的CGI程序(ASP、PHP、JSP)具有session会话功能,用来保存用户在网站期间(会话)的活动数据信息,而对于数量众多的静态页面(HTML)来说,只能使用客户端的cookies来保存临时活动数据,但对于cookies的操…

关于Istio 1.1,你所不知道的细节

本文整理自Istio社区成员Star在 Cloud Native Days China 2019 北京站的现场分享 第1则 主角 Istio Istio作为service mesh领域的明星项目,从2016年发布到现在热度不断攀升。 Istio & Envoy Github Star Growth 官网中Istio1.1的架构图除了数据面的Envoy和控制面…

html调用父页面的函数,js调用父框架函数与弹窗调用父页面函数的方法

调用父级中的 aaa的函数子页面中:οnclick"window.parent.frames.aaa()"父页面中:function aaa(){alert(‘bbbbb’);}----------------------------------------------frame框架里的页面要改其他同框架下的页面或父框架的页面就用parentwindow.opener引用的是window.…

读卡距离和信号强度两方面来考虑

选择物联宇手持终端机的时候,你可以参考以下几个原则:选择行业需要应用功能,能有效控制好预算。屏幕界面需要高清晰的,选用分辨率较高的能更好的支持展现。按照项目所需求的来分析,需要从读卡距离和信号强度两方面来考…

html script 放置位置,script标签应该放在HTML哪里,总结分享

几年前,有经验的程序员总是让我们将很明显,现在浏览器有了更加酷的兼容方式,这篇文章,俺将跟大家一起来学习script标签的async和defer新特性,探讨script应该放在哪里更好。页面加载方式在我们讨论当浏览器加载带有获取…

2021吉林高考26日几点可以查询成绩,2021吉林高考成绩查分时间及入口

2021吉林高考成绩查分时间及入口2021吉林高考成绩查分时间及入口,有一些高考生真的很积极,考完试当天就将答案给对好了,考试嘛,站在旁观者的角度来看总是有人欢喜有人忧。估出来分数不咋地的,整个六月就毁了。2021吉林…

easyui,layui和 vuejs 有什么区别

2019独角兽企业重金招聘Python工程师标准>>> easyui是功能强大但是有很多的组件使用功能是十分强大的,而layui是2016年才出来的前端框架,现在才更新到2.x版本还有很多的功能没有完善,也还存在一些不稳定的情况,但是lay…

广东2021高考成绩位次查询,广东一分一段表查询2021-广东省2021年一分一段统计表...

广东省高考一分一段表是同学们在填报高考志愿时的重要参考资料之一。根据一分一段表,大家不仅可以清楚地了解自己的高考成绩在全省的排名,还可以结合心仪的大学近3年在广东省的录取位次变化,判断出自己被录取的概率大概是多少。根据考试院公布…

bootstrap-select动态生成数据,设置默认选项(默认值)

bootstrap-select设置选中的属性是selected"selected",只要找出哪一项要设置为默认选项,再设置其属性selected"selected"即可,亲测有效。代码如下: var currentId $(_this).attr(data_id);//目标id&#xff…

无法显示验证码去掉html,如何去除验证码-模版风格-易通免费企业网站系统 - Powered by CmsEasy...

去除前台用户登录验证码1.修改lib/default/user_act.php 注释掉或删除55-58行修改为//if(!session::get(verify) || front::post(verify)<>session::get(verify)) {//front::flash(验证码错误&#xff01;);//return;//} 复制代码2.修改template/default/user/login.html…

webpack4打包工具

什么是webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时&#xff0c;它会递归地构建一个依赖关系图(dependency graph)&#xff0c;其中包含应用程序需要的每个模块&#xff0c;然后将所有这些模块打包成一个或多个…

通过计算机网络进行的商务活动包括,电子商务练习题及答案

“电子商务”练习题一、填空题1&#xff0e;EDI系统构成三要素包括数据标准化、(EDI软件及硬件)和(通信网络)。2.B2C电子商务模式主要有&#xff1a;门户网站、(电子零售商)、(内容提供商)、(交易经纪人)和社区服务商。3. 影响消费者网上购物的因素&#xff1a;商品特性、(商品…

PAKDD 2019 都有哪些重要看点?看这篇文章就够了!...

雷锋网 AI 科技评论按&#xff1a;亚太地区知识发现与数据挖掘国际会议&#xff08;Pacific Asia Knowledge Discovery and Data Mining&#xff0c;PAKDD&#xff09;是亚太地区数据挖掘领域的顶级国际会议&#xff0c;旨在为数据挖掘相关领域的研究者和从业者提供一个可自由 …

「javaScript-每三位插入一个逗号实现方式」

一道火了很久的面试题&#xff0c;//将以下数字从小数点前开始每三位数加一个逗号var num 1234567890.12345;复制代码相信大家写了这么久的前端代码&#xff0c;不论是培训也好&#xff0c;面试也好&#xff0c;这种题出现的频率挺高的&#xff0c;网上方法很多&#xff0c;但…