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

《谷歌设计规范--博森创想分享.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Materialdesign设计规范核心思想材质与空间准则动画颜色文字布局组件Materialdesign核心思想把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。材质和空间Materialdesign中，最重要的信息载体就是魔法纸片。纸片层叠、合并、分离，拥有现实中的厚度、惯性和反馈，同时拥有液体的一些特性，能够自由伸展变形。纸片的魔法特性，真实纸片所不具备的能力：纸片可以伸缩、改变形状纸片

2、变形时可以裁剪内容，比如纸片缩小时，内容大小不变，而是隐藏超出部分多张纸片可以拼接成一张一张纸片可以分裂成多张纸片可以在任何位置凭空出现魔法纸片有些效果是禁止的：一项操作不能同时触发两张纸片的反馈层叠的纸片，海拔高度不能相同纸片不能互相穿透纸片不能弯折纸片不能产生透视，必须平行于屏幕材质和空间Materialdesign引入了z轴的概念，z轴垂直于屏幕，用来表现元素的层叠关系。z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。这里有一个前提，所有的元素的厚度都是1dp。所有元素都有默认的海拔高度

3、，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。准则动画动画要贴近真实世界√加速减速的过程×忽然开始，忽然停止动画水波反馈所有可点击的元素都应该有这样的反馈效果动画转场动画动画细节动画颜色主色和辅色颜色其余颜色黑色：[87%普通文字][54%减淡文字][26%禁用状态/提示文字][12%分隔线]白色：[100%普通文字][70%减淡文字][30%禁用状态/提示文字][12%分隔线]小图标黑色：[54%正常状态][26%禁用状态]小图标白色：[

4、100%正常状态][30%禁用状态]文字文字字号常用字号：12sp小字提示14sp（桌面端13sp）正文/按钮文字16sp（桌面端15sp）小标题20spAppbar文字24sp大标题34sp/45sp/56sp/112sp超大号文字长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。文字行距45sp行距48sp34sp行距40sp24sp行距32sp15sp和16sp行距28sp或24sp13sp和14sp行距24sp或20sp布局所有可操作元素最小点击区域尺寸：48dpX48

5、dp。栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。顶部状态栏高度：24dpAppbar最小高度：56dp底部导航栏高度：48dp悬浮按钮尺寸：56x56dp/40x40dp用户头像尺寸：64x64dp/40x40dp小图标点击区域：48x48dp侧边抽屉到屏幕右边的距离：56dp卡片间距：8dp分隔线上下留白：7，8dp大多元素的留白距离：16dp屏幕左右对齐基线：16dp文字左侧对齐基线（带头像）：72dp许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。遵循8

6、dp栅格很容易找到适合的尺寸与距离。组件底部动作条（Bottomsheets）列表式通常以列表形式出现，支持上下滚动组件底部动作条（Bottomsheets）网格式组件按钮（Buttons）悬浮按钮有两种尺寸：56x56dp/40x40dp组件卡片（Cards）组件卡片（Cards）卡片统一带有2dp的圆角。在以下情况考虑使用卡片：同时展现多种不同内容卡片内容之间不需要进行比较包含了长度不确定的内容，比如评论包含丰富的内容与操作项，比如赞、滚动条、评论本该是列表，但文字超过3行本该是网格，但需要展现更多文字

7、组件卡片（Cards）卡片最多有两块操作区域。辅助操作区至多包含两个操作项，更多操作需要使用下拉菜单。其余部分都是主操作区。组件Chips狭小空间内表现复杂信息的一个组件，比如日期、联系人选择器组件对话框（Dialogs）对话框包含标题、内容和操作项。点击对话框外的区域，不会关闭对话框。组件对话框（Dialogs）通常情况，避免出现滚动条。空间不足时允许滚动，滚动条建议默认显示。组件对话框（Dialogs）对话框中，取消类操作项放在左边，引起变化的操作项放在右边。要写明操作项的具体效果，不要只写“是”和“否

8、”。标题文字要明确，即使不读正文内容也能知道在干什么，标题不要用“确定吗”这样的含糊措辞。组件对话框（Dialogs）在对话框中改变内容，不会提交数据，点击确定后，才会发生变化。对话框上方不能再层叠对话框。组件对话框（Dialogs）还有一种简易对话框，不带操作项。点击列表内容触发相应操作，并关闭对话框。点击简易对话框外面，对话框会关闭，操作取消。组件对话框（Dialogs）对话框可以是全屏式的，全屏对话框上方可