资源预览内容
第1页 / 共30页
第2页 / 共30页
第3页 / 共30页
第4页 / 共30页
第5页 / 共30页
第6页 / 共30页
第7页 / 共30页
第8页 / 共30页
第9页 / 共30页
第10页 / 共30页
亲,该文档总共30页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
,设计规范,Material Disign,目录,1,简 介,2,GUI 设计规范,3,总 结,简单介绍Material Design。,实例说明Materialdesign设计规范。,总结与展望。,1,来 源,谷歌推出的全新的设计语言,应用于手机、平板电脑、台式机和“其他平台”。,2,特 点,颜色鲜艳,动画突出,干净,简约,外观更一致且更广泛,什么是 Material design,1,把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。,核 心 思 想,元 素,魔 法 纸 片,纸片层叠、合并、分离、分裂、伸缩,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。,1,2,但是纸片不能穿透、弯折、透视。,空 间,三 维,元素的厚度为1dp(设备独立像素),1,2,元素之间相互层叠,动 画,动 画,动画不只是装饰,它有含义,能表达元素、界面之间的关系,具备功能上的作用。,1,2,运动和变化都是有加速和减速过程的,要先考虑它在现实世界中的运动规律。,所有可点击的元素,都应该有这样的反馈效果。,动 画,动 画,多个相似元素,动画的设计要有先后次序,通过过渡动画,表达界面之间的空间与层级关系,选取一种主色、一种辅助色(非必需),在此基础上进行透明度、饱和度变化。,颜 色,黑色:87% 普通文字 54% 减淡文字 26% 禁用状态/提示文字 12% 分隔线 白色:100% 普通文字 70% 减淡文字 30% 禁用状态/提示文字 12% 分隔线,颜 色,桌面图标尺寸是48dp X 48dp。 模仿现实中的折纸效果,通过扁平色彩表现空间和光影。,桌 面 图 标,小图标尺寸是24dp X 24dp。 优先使用material design默认图标。,小 图 标,描述具体事物,优先使用照片。然后可以考虑使用插画。,图片的选用,英文字体使用Roboto,中文字体使用Noto。,字 体,文字排版,12sp 小字提示 14sp(桌面端13sp) 正文/按钮文字 16sp(桌面端15sp) 小标题 20sp Appbar文字 24sp 大标题 34sp/45sp/56sp/112sp 超大号文字,sp:与缩放无关的抽象像素(Scale-independent Pixel)。,1,重要性,悬浮按钮凹起按钮扁平按钮,按 钮,悬浮按钮,凸起按钮,扁平按钮(适用于对话框),悬浮按钮触发正向的操作,( 添加、创建、收藏之类。),对 话 框,对话框,1 对话框包含标题、内容和操 作项。通常点击对话框外的 区域,不会关闭对话框。,2 通常情况,避免出现滚动条。,3 取消类操作项放在左边,引 起变化的操作项放在右边,菜 单,菜单,1 顺序固定的菜单,操作频繁的选项放在上面。,2 顺序可变的菜单,可以把之前用过 的选项排在前面,动态排序。,3 菜单尽量不要超过2级。,4 当前不可用的选项要显示出来,让用户知道 在特定条件可以触发这些操作。,5 当前选项应该成为菜单的第一项。,分为环形进度条和线性进度条,进 度 条,滑 块,非连续的滑块,需要标出具体数值。,Snackbars 与 Toast,Snackbar 是一种针对操作的轻量级反馈机制 在PC上,应该悬浮在屏幕左下角。,输 入 框,简单一根横线就可以代表输入框,有或没有图标都可以。,ps:横线并不在点击区域的底部,还有8dp距离。,点击提示,提示只用在小图标上,文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。,其他工具或插件,Tab,RadioButton,Switch,桌面布局,栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。(内容过多不一一简述),Chrome os 桌面布局模版,桌面布局模版,桌面布局模版,总 结,尽力使GUI设计更美观、统一、完善。,能力有限。,多交流沟通。,1,优设网,MATERIAL DESIGN的学习笔记,2,极客学院,Material Design 中文版,参考,谢 谢 观 看,
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号