ued吧

 找回密码
 立即注册
搜索
热搜: 交互 用研 视觉
ued吧 首页 视觉设计 查看内容

安卓MD设计规范(下)

2019-4-26 00:00| 发布者: admin| 查看: 5| 评论: 0

摘要: 我们继续说说Material Design 布局规范所有可操作元素最小点击区域尺寸:48dp*48dp删格系统最小单位为8dp,一切距离、尺寸都因该是8dp的整数倍组件规范 底部动作条通常以列表形式出现,支持上下滚动也可以是网格式的 ...

我们继续说说Material Design


布局规范

所有可操作元素最小点击区域尺寸:48dp*48dp

删格系统最小单位为8dp,一切距离、尺寸都因该是8dp的整数倍




组件规范


底部动作条

通常以列表形式出现,支持上下滚动


也可以是网格式的


按钮


重要性原则

悬浮按钮>凸起按钮>扁平按钮

最重要且随处用到的操作,建议使用悬浮按钮。信息较多时,选用凸起按钮可以有效突出重要操作,但注意纸片不要叠太多层。扁平按钮适用在简单的界面,例如对话框中。


悬浮按钮使用原则

建议只用一个悬浮按钮

悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘

悬浮按钮不能被其他元素盖住,也不能挡住其他按钮

列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项

悬浮按钮的位置不能随意摆放,可以贴着左右两边的对齐基线

Image title


其他

悬浮按钮通常触发正向的操作,添加、创建、收藏之类。不能触发负面、破坏性和不重要的操作,也不应该有数字角标

悬浮按钮尺寸:56dp*56dp/40*40dp


错误示范

Image title


卡片规范

即使在同一个列表中,卡片的内容和布局方式也可以不一样 

卡片投影:Y:2、扩散:8、透明度:20

卡片统一带有2dp的圆角


卡片使用原则

同时展现多种不同内容

卡片内容之间不需要进行比较

包含了长度不确定的内容,比如评论

包含丰富的内容与操作项,比如赞、滚动条、评论

本该是列表,但文字超过3行

本该是网格,但需要展现更多文字


提示框规范

对话框包含标题、内容和操作项,点击对话框外的区域,不会关闭对话框。

通常情况,避免出现滚动条,空间不足时允许滚动,滚动条建议默认显示。

对话框中取消类操作项放在左边,引起变化的操作项放在右边。要写明操作项的具体效果,不要只写“是”和“否”。标题文字要明确,标题不要用“确定吗”这类含糊措辞。

对话框改变内容,不会提交数据,点击确定后才会发生变化。

对话框上方不能再层叠对话框。

对话框四周留白通常是24dp


分割线

列表中有头像、图片等元素时,使用内嵌分割线,左端与文字对齐



没有头像、图标等元素时,需要用通栏分割线


图片本身就起到划定区域的作用,相册列表不需要分割线

谨慎使用分割线,留白和小标题也能起到分隔作用。能用留白的地方,优先使用留白。分割线的层级高于留白。

通栏分割线的层级高于内嵌分割线


列表规范

列表有行构成,行内包含瓦片。如果列表项内容文字超过3行,请改用卡片


列表包含主操作区域和副操作区域。副操作区域位于列表右侧,其余都是主操作区域。同一个列表中,主、副操作去的内容与位置要保持一致


主操作区域与副操作区域的图标或图形元素时列表控制项,列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作


开关规范

必须所有选项保持可见时,才用Radio button(单选按钮),不然可以使用下拉菜单,节省空间



在同一个列表中有多项开关,建议使用Checkbox



单个开关项建议使用Switch


动作条规范

tab只用来展现不同类型的内容,不能当导航菜单使用。tab至少2项,至多6项,超过6项,tab需要变为滚动式,左右翻页

Image title


tab文字要显示完整,字号保持一致,不能折行,文字与图标不能混用。tab选中项一般会有选中线


抽屉导航规范

侧边栏从左侧滑出,占据整个屏幕高度,遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp(安卓原生产品大多采用侧边栏,是因为底部已经有虚拟按键)

Image title


列表较短不需要滚动时,设置和帮助反馈跟随在列表后面

Image title



鲜花

握手

雷人

路过

鸡蛋

Archiver|手机版|小黑屋|ued吧

返回顶部