提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
我们继续说说Material Design
布局规范
所有可操作元素最小点击区域尺寸:48dp*48dp
删格系统最小单位为8dp,一切距离、尺寸都因该是8dp的整数倍
组件规范
底部动作条
通常以列表形式出现,支持上下滚动
也可以是网格式的
按钮
重要性原则
悬浮按钮>凸起按钮>扁平按钮
最重要且随处用到的操作,建议使用悬浮按钮。信息较多时,选用凸起按钮可以有效突出重要操作,但注意纸片不要叠太多层。扁平按钮适用在简单的界面,例如对话框中。
悬浮按钮使用原则
建议只用一个悬浮按钮
悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘
悬浮按钮不能被其他元素盖住,也不能挡住其他按钮
列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项
悬浮按钮的位置不能随意摆放,可以贴着左右两边的对齐基线
其他
悬浮按钮通常触发正向的操作,添加、创建、收藏之类。不能触发负面、破坏性和不重要的操作,也不应该有数字角标
悬浮按钮尺寸:56dp*56dp/40*40dp
错误示范
卡片规范
即使在同一个列表中,卡片的内容和布局方式也可以不一样
卡片投影:Y:2、扩散:8、透明度:20
卡片统一带有2dp的圆角
卡片使用原则
同时展现多种不同内容
卡片内容之间不需要进行比较
包含了长度不确定的内容,比如评论
包含丰富的内容与操作项,比如赞、滚动条、评论
本该是列表,但文字超过3行
本该是网格,但需要展现更多文字
提示框规范
对话框包含标题、内容和操作项,点击对话框外的区域,不会关闭对话框。
通常情况,避免出现滚动条,空间不足时允许滚动,滚动条建议默认显示。
对话框中取消类操作项放在左边,引起变化的操作项放在右边。要写明操作项的具体效果,不要只写“是”和“否”。标题文字要明确,标题不要用“确定吗”这类含糊措辞。
对话框改变内容,不会提交数据,点击确定后才会发生变化。
对话框上方不能再层叠对话框。
对话框四周留白通常是24dp
分割线
列表中有头像、图片等元素时,使用内嵌分割线,左端与文字对齐
没有头像、图标等元素时,需要用通栏分割线
图片本身就起到划定区域的作用,相册列表不需要分割线
谨慎使用分割线,留白和小标题也能起到分隔作用。能用留白的地方,优先使用留白。分割线的层级高于留白。
通栏分割线的层级高于内嵌分割线
列表规范
列表有行构成,行内包含瓦片。如果列表项内容文字超过3行,请改用卡片
列表包含主操作区域和副操作区域。副操作区域位于列表右侧,其余都是主操作区域。同一个列表中,主、副操作去的内容与位置要保持一致
主操作区域与副操作区域的图标或图形元素时列表控制项,列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作
开关规范
必须所有选项保持可见时,才用Radio button(单选按钮),不然可以使用下拉菜单,节省空间
在同一个列表中有多项开关,建议使用Checkbox
单个开关项建议使用Switch
动作条规范
tab只用来展现不同类型的内容,不能当导航菜单使用。tab至少2项,至多6项,超过6项,tab需要变为滚动式,左右翻页
tab文字要显示完整,字号保持一致,不能折行,文字与图标不能混用。tab选中项一般会有选中线
抽屉导航规范
侧边栏从左侧滑出,占据整个屏幕高度,遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp(安卓原生产品大多采用侧边栏,是因为底部已经有虚拟按键)
列表较短不需要滚动时,设置和帮助反馈跟随在列表后面
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册