谷歌设计规范--博森创想分享

单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,*,Footer Text,*,Material design,设计规范,核心思想,材质与空间,准则,动画,颜色,文字,布局,组件,Material design,核心思想,把物理世界的体验带进屏幕。,去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。,材质,和空间,Material design,中，最重要的信息载体就是魔法纸片。纸片层叠、合并、分离，拥有现实中的厚度、惯性和反馈，同时拥有液体的一些特性，能够自由伸展变形。,纸片的魔法特性，真实纸片所不具备的能力：,纸片可以伸缩、改变形状,纸片变形时可以裁剪内容，比如纸片缩小时，内容大小不变，而是隐藏超出部分,多张纸片可以拼接成一张,一张纸片可以分裂成多张,纸片可以在任何位置凭空出现,魔法纸片有些效果是禁止的：,一项操作不能同时触发两张纸片的反馈,层叠的纸片，海拔高度不能相同,纸片不能互相穿透,纸片不能弯折,纸片不能产生透视，必须平行于屏幕,材质和,空间,Material design,引入了,z,轴的概念，,z,轴垂直于屏幕，用来表现元素的层叠关系。,z,值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。这里有一个前提，所有的元素的厚度都是,1dp,。,所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。,准则,动画,动画要贴近真实世界,加速减速的过程,忽然开始，忽然停止,动画,水波反馈,所有可点击的元素都应该有这样的反馈效果,动画,转场动画,动画,细节动画,颜色,主色和辅色,颜色,其余颜色,黑色：,87%,普通文字, 54%,减淡文字, 26%,禁用状态,/,提示文字, 12%,分隔线,白色：,100%,普通文字, 70%,减淡文字, 30%,禁用状态,/,提示文字, 12%,分隔线,小图标,黑色：,54%,正常状态, 26%,禁用状态,小图标,白色：,100%,正常状态, 30%,禁用状态,文字,文字字号,常用字号：,12sp,小字提示,14sp,（桌面端,13sp,） 正文,/,按钮文字,16sp,（桌面端,15sp,） 小标题,20sp Appbar,文字,24sp,大标题,34sp/45sp/56sp/112sp,超大号文字,长篇幅正文，每行建议,60,字符（英文）左右。短文本，建议每行,30,字符（英文）左右。,文字,行距,45sp,行距,48sp,3,4sp,行距,40sp,2,4sp,行距,32sp,1,5sp,和,16sp,行距,28sp,或,24sp,1,3sp,和,14sp,行距,24sp,或,20sp,布局,所有可操作元素最小点击区域尺寸：,48dp X 48dp,。,栅格系统的最小单位是,8dp,，一切距离、尺寸都应该是,8dp,的整数倍。,顶部状态栏高度：,24dp,Appbar,最小高度：,56dp,底部导航栏高度：,48dp,悬浮按钮尺寸：,56x56dp/40x40dp,用户头像尺寸：,64x64dp/40x40dp,小图标点击区域：,48x48dp,侧边抽屉到屏幕右边的距离：,56dp,卡片间距：,8dp,分隔线上下留白：,7,，,8dp,大多元素的留白距离：,16dp,屏幕左右对齐基线：,16dp,文字左侧对齐基线（带头像）：,72dp,许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按,56,的整数倍来设计。,遵循,8dp,栅格很容易找到适合的尺寸与距离。,组件,底部动作条（,Bottom sheets,）列表式,通常以列表形式出现，支持上下滚动,组件,底部动作条（,Bottom sheets,）网格式,组件,按钮（,Buttons,）,悬浮按钮有两种尺寸：,56x56dp/40x40dp,组件,卡片（,Cards,）,组件,卡片（,Cards,）,卡片统一带有,2dp,的圆角。,在以下情况考虑使用卡片：,同时展现多种不同内容,卡片内容之间不需要进行比较,包含了长度不确定的内容，比如评论,包含丰富的内容与操作项，比如赞、滚动条、评论,本该是列表，但文字超过,3,行,本该是网格，但需要展现更多文字,组件,卡片（,Cards,）,卡片最多有两块操作区域。辅助操作区至多包含两个操作项，,更多操作需要使用下拉菜单。其余部分都是主操作区。,组件,Chips,狭小空间内表现复杂信息的一个组件，比如日期、联系人选择器,组件,对话框（,Dialogs,）,对话框包含标题、内容和操作项。,点击对话框外的区域，不会关闭对话框。,组件,对话框（,Dialogs,）,通常情况，避免出现滚动条。空间不足时允许滚动，滚动条建议默认显示。,组件,对话框（,Dialogs,）,对话框中，,取消类操作项放在左边，引起变化的操作项放在右边。,要写明操作项的具体效果，不要只写“是”和“否”。,标题文字要明确，即使不读正文内容也能知道在干什么，标题不要用“确定吗”这样的含糊措辞。,组件,对话框（,Dialogs,）,在对话框中改变内容，不会提交数据，点击确定后，才会发生变化。,对话框上方不能再层叠对话框。,组件,对话框（,Dialogs,）,还有一种简易对话框，不带操作项。,点击列表内容触发相应操作，并关闭对话框。,点击简易对话框外面，对话框会关闭，操作取消。,组件,对话框（,Dialogs,）,对话框可以是全屏式的，全屏对话框上方可以再层叠对话框。左图是一个普通界面，其中的任何改动立即生效。右图是全屏对话框，其中任何改动，要点击保存后才生效，点击,X,取消。,全屏对话框右上角的操作项，可以是诸如保存、发送、添加、分享、更新、创建之类的操作，不要使用完成、,OK,、关闭这样的含糊措辞。,只有必填项都填了，右上角的操作项才变为可点击状态。,内容发生了改变，点左上角的,X,，需要有个确认对话框，提示是否忽略修改。内容没有发生改变，点左上角的,X,，直接退出全屏对话框。,组件,对话框（,Dialogs,）,对话框的四周留白比较大，通常是,24dp,。,组件,分隔线（Dividers）,列表中有头像、图片等元素时，使用内嵌分隔线，左端与文字对齐。,组件,分隔线（Dividers）,没有头像、图标等元素时，需要用通栏分隔线。,组件,分隔线（Dividers）,图片本身就起到划定区域的作用，相册列表不需要分隔线。,组件,分隔线（Dividers）,谨慎使用分隔线，留白和小标题也能起到分隔作用。能用留白的地方，优先使用留白。分隔线的层级高于留白。,组件,分隔线（Dividers）,通栏分隔线的层级高于内嵌分隔线。,组件,格子（,Grids,）,网格由单元格构成，单元格中的瓦片用来承载内容。,组件,格子（,Grids,）,瓦片可以横跨多个单元格。,组件,格子（,Grids,）,瓦片包含主操作区和副操作区，副操作区的位置可以在上下左右,4,个角落。在同一个网格中，主、副操作区的内容与位置要保持一致。两者的操作都应该直接生效，不能触发菜单。,网格只能垂直滚动。单个瓦片不支持滑动手势，也不鼓励使用拖放操作。,网格中的单元格间距是,2dp,或,8dp,。,组件,Lists,列表由行构成，行内包含瓦片。如果列表项内容文字超过,3,行，请改用卡片。如果列表项的主要区别在于图片，请改用网格。,组件,Lists,列表包含主操作区与副操作区。副操作区位于列表右侧，其余都是主操作区。在同一个列表中，主、副操作区的内容与位置要保持一致。,（通话记录）,组件,Lists,在同一个列表中，滑动手势操作保持一致。,组件,菜单（,Menus,）,顺序固定的菜单，操作频繁的选项放在上面。顺序可变的菜单，可以把之前用过的选项排在前面，动态排序。菜单尽量不要超过,2,级。,组件,菜单（,Menus,）,当前不可用的选项要显示出来，让用户知道在特定条件可以触发这些操作。,组件,菜单（,Menus,）,菜单原地展开，盖住当前选项，当前选项应该成为菜单的第一项。,组件,菜单（,Menus,）,菜单的当前选项，始终与当前选项水平对齐。,组件,菜单（,Menus,）,靠近屏幕边缘时，位置可适当错开。,组件,菜单（,Menus,）,菜单从当前选项固定位置展开，不要跟随点击位置改变。,点击位置,展开位置,组件,菜单（,Menus,）,菜单到上下留出,8dp,距离。,组件,日期和时间选择器（,Pickers,）,日期和时间选择器是固定组件，在小屏幕设备中，通常以对话框形式展现。,组件,进度条（,Progress & activity,）,线形进度条只出现在纸片的边缘。,组件,进度条（,Progress & activity,）,环形进度条也分时间已知和时间未知两种。,组件,进度条（,Progress & activity,）,环形进度条可以用在悬浮按钮上。,组件,进度条（,Progress & activity,）,加载详细信息时，也可以使用进度条。,组件,进度条（,Progress & activity,）,下拉刷新的动画比较特殊，列表不动，出现一张带有环形进度条的纸片。,组件,滑块（,Sliders,）,滑块左右两边可以放置图标。,或是可编辑文本框。,组件,滑块（,Sliders,）,非连续的滑块，需要标出具体数值。,组件,滑块（,Sliders,）,非连续的滑块，需要标出具体数值。,组件,反馈弹窗和提示弹窗（,Snackbars & toasts,）,反馈弹窗至多包含一个操作项，不能包含图标。不能出现一个以上的反馈。,反馈弹窗在移动设备上，出现在底部。在,PC,上，应该悬浮在屏幕左下角。,组件,反馈弹窗和提示弹窗（,Snackbars & toasts,）,不一定要用户响应的提示，可以使用反馈弹窗。非常重要的提示，必须用户来决定的，应该用对话框。,组件,反馈弹窗和提示弹窗（,Snackbars & toasts,）,反馈弹窗不能遮挡住悬浮按钮，悬浮按钮要上移让出位置。,组件,反馈弹窗和提示弹窗（,Snackbars & toasts,）,反馈弹窗的留白比较大，,24dp,。,组件,反馈弹窗和提示弹窗（,Snackbars & toasts,）,提示弹窗和反馈弹窗类似，样式和位置可以自定义，建议遵循反馈的规则设计。,组件,小标题（,Subheaders,）,小标题是列表或网格中的特殊瓦片，描述列表内容的分类、排序等信息。,组件,小标题（,Subheaders,）,滚动时，如果列表较长，小标题会固定在顶部，直到下一个小标题将它顶上去。,组件,小标题（,Subheaders,）,存在浮动按钮时，小标题要让出位置，与文字对齐。,组件,开关（,Switches,）,必须所有选项保持可见时，才用,Radio button,。不然可以使用下拉菜单，节省空间。,在同一个列表中有多项开关，建议使用,Checkbox,。,单个开关项建议使用,Switch,。,组件,标签（,Tabs,）,超出,时,，,tab,需要变为滚动式，左右翻页。,组件,标签（,Tabs,）,tab,文字要显示完整，字号保持一致，不能折行，文字与图标不能混用。,tab,选中项的下划线高度是,2dp,。,组件,输入框（,Text fields,）,简单一根横线就能代表输入框，可以带图标。,组件,输入框（,Text fields,）,激活状态和错误状态，横线的宽度变为,2dp,，颜色改变。,组件,输入框（,Text fields,）,输入框点击区域高度至少,48dp,，但横线并不在点击区域的底部，还有,8dp,距离。,组件,输入框（,Text fields,）,输入框提示文字，可以在输入内容后，缩小停留在输入框左上角。,组件,输入框（,Text fields,）,整个点击区域增高，提示文字也是点击区域的一部分。,组件,输入框（,Text fields,）,整个点击区域增高，提示文字也是点击区域的一部分。,组件,输入框（,Text fields,）,右下角可以加入字数统计。字数统计不要默认显示，字数接近上限时再显示出来。,组件,输入框（,Text fields,）,通栏输入框也可以有字数统计，单行的字数统计显示在同一行右侧。,组件,输入框（,Text fields,）,错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。,组件,输入框（,Text fields,）,字数限制与错误提示都会使点击区域增高。,组件,输入框（,Text fields,）,同时有多个输入框错误时，顶部要有一个全局的错误提示。,组件,输入框（,Text fields,）,输入框尽量带有自动补全功能。,组件,提示（,Tooltips,）,提示只用在小图标上，文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。,组件,提示（,Tooltips,）,上图是错误例子。提示不能包含富文本，不需要三角箭头。,触摸提示（上）和鼠标提示（下）的尺寸是不同的，背景都带有,90%,的透明度。,组件,侧边抽屉（,Navigation drawer,）,边抽屉从左侧滑出，占据整个屏幕高度，遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧,56dp,。,组件,侧边抽屉（,Navigation drawer,）,侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。,组件,侧边抽屉（,Navigation drawer,）,列表较短不需要滚动时，设置和帮助反馈跟随在列表后面。,