恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
安卓MD设计规范(下)
0.0°
2019-06-14 好文转载 经验/观点 原作者: 未知 举报 4950 31 13 0

我们继续说说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


Image title



更新:2019-06-14

收藏

31人已收藏

3纳秒

如果所有人都理解你,你得普通成什么样子

  • 6

    作品

  • 23

    粉丝

  • 27

    关注

  • 如何做竞品分析
  • 需求是个什么东西?
  • 苹果iOS设计规范
  • 安卓MD设计规范(上)

    猜你喜欢

      2019-06-14 好文转载 经验/观点 原作者: 未知 举报 4950 31 13 0

      安卓MD设计规范(下)

      0.0°

      你确定要举报安卓MD设计规范(下)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年04月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      13
      31
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录