Materialdesign设计规范讲述.ppt

设计规范 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 桌面布局模版 桌面布局模版 桌面布局模版 /downloads/Layout_Desktop_Whiteframe.ai 总 结 尽力使GUI设计更美观、统一、完善。 能力有限。 多交流沟通。 1 优设网 MATERIAL DESIGN的学习笔记 2 极客学院 Material Design 中文版 参考 /comprehensive-material-design-note /project/material-design/ 谢 谢 观 看