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

Materialdesign设计规范•核心思想•材质与空间•准则•动画•颜色•文字•布局•组件Materialdesign核心思想把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。材质和空间Materialdesign中，最重要的信息载体就是魔法纸片。纸片层叠、合并、分离，拥有现实中的厚度、惯性和反馈，同时拥有液体的一些特性，能够自由伸展变形。纸片的魔法特性，真实纸片所不具备的能力：•纸片可以伸缩、改变形状•纸片变形时可以裁剪内容，比如纸片缩小时，内容大小不变，而是隐藏超出部分•多张纸片可以拼接成一张•一张纸片可以分裂成多张•纸片可以在任何位置凭空出现魔法纸片有些效果是禁止的：•一项操作不能同时触发两张纸片的反馈•层叠的纸片，海拔高度不能相同•纸片不能互相穿透•纸片不能弯折•纸片不能产生透视，必须平行于屏幕材质和空间•Materialdesign引入了z轴的概念，z轴垂直于屏幕，用来表现元素的层叠关系。z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。这里有一个前提，所有的元素的厚度都是1dp。•所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。准则动画动画要贴近真实世界√加速减速的过程×忽然开始，忽然停止动画水波反馈所有可点击的元素都应该有这样的反馈效果动画转场动画动画细节动画颜色主色和辅色颜色其余颜色黑色：[87%普通文字][54%减淡文字][26%禁用状态/提示文字][12%分隔线]白色：[100%普通文字][70%减淡文字][30%禁用状态/提示文字][12%分隔线]小图标黑色：[54%正常状态][26%禁用状态]小图标白色：[100%正常状态][30%禁用状态]文字文字字号常用字号：•12sp小字提示•14sp（桌面端13sp）正文/按钮文字•16sp（桌面端15sp）小标题•20spAppbar文字•24sp大标题•34sp/45sp/56sp/112sp超大号文字长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。文字行距•45sp行距48sp•34sp行距40sp•24sp行距32sp•15sp和16sp行距28sp或24sp•13sp和14sp行距24sp或20sp布局所有可操作元素最小点击区域尺寸：48dpX48dp。栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。•顶部状态栏高度：24dp•Appbar最小高度：56dp•底部导航栏高度：48dp•悬浮按钮尺寸：56x56dp/40x40dp•用户头像尺寸：64x64dp/40x40dp•小图标点击区域：48x48dp•侧边抽屉到屏幕右边的距离：56dp•卡片间距：8dp•分隔线上下留白：7，8dp•大多元素的留白距离：16dp•屏幕左右对齐基线：16dp•文字左侧对齐基线（带头像）：72dp许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。遵循8dp栅格很容易找到适合的尺寸与距离。组件底部动作条（Bottomsheets）列表式通常以列表形式出现，支持上下滚动组件底部动作条（Bottomsheets）网格式组件按钮（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）必须所有选项保持可见时，才用Radiobutton。不然可以使用下拉菜单，节省空间。在同一个列表中有多项开关，建议使用Checkbox。单个开关项建议使用Switch。组件标签（Tabs）超出时，tab需要变为滚动式，左右翻页。组件标签（Tabs）tab文字要显示完整，字号保持一致，不能折行，文字与图标不能混用。tab选中项的下划线高度是2dp。组件输入框（Textfields）简单一根横线就能代表输入框，可以带图标。组件输入框（Textfields）激活状态和错误状态，横线的宽度变为2dp，颜色改变。组件输入框（Textfields）输入框点击区域高度至少48dp，但横线并不在点击区域的底部，还有8dp距离。组件输入框（Textfields）输入框提示文字，可以在输入内容后，缩小停留在输入框左上角。组件输入框（Textfields）整个点击区域增高，提示文字也是点击区域的一部分。组件输入框（Textfields）整个点击区域增高，提示文字也是点击区域的一部分。组件输入框（Textfields）右下角可以加入字数统计。字数统计不要默认显示，字数接近上限时再显示出来。组件输入框（Textfields）通栏输入框也可以有字数统计，单行的字数统计显示在同一行右侧。组件输入框（Textfields）错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。组件输入框（Textfields）字数限制与错误提示都会使点击区域增高。组件输入框（Textfields）同时有多个输入框错误时，顶部要有一个全局的错误提示。组件输入框（Textfields）输入框尽量带有自动补全功能。组件提示（Tooltips）提示只用在小图标上，文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。组件提示（Tooltips）上图是错误例子。提示不能包含富文本，不需要三角箭头。触摸提示（上）和鼠标提示（下）的尺寸是不同的，背景都带有90%的透明度。组件侧边抽屉（Navigationdrawer）边抽屉从左侧滑出，占据整个屏幕高度，遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。组件侧边抽屉（Navigationdrawer）侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。组件侧边抽屉（Navigationdrawer）列表较短不需要滚动时，设置和帮