• Material Design 设计规范总结(2)


    本文是Material Design设计规范总结的第二部分,是进行UI设计与前端开发的必备参考资料。

    八、布局

    (1)所有可操作元素最小点击区域尺寸:48dp X 48dp。

    (2)栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。

    以下是一些常见的尺寸与距离:

    顶部状态栏高度:24dp

    Appbar最小高度:56dp

    底部导航栏高度:48dp

    悬浮按钮尺寸:56x56dp/40x40dp

    用户头像尺寸:64x64dp/40x40dp

    小图标点击区域:48x48dp

    侧边抽屉到屏幕右边的距离:56dp

    卡片间距:8dp

    分隔线上下留白:8dp

    大多元素的留白距离:16dp

    屏幕左右对齐基线:16dp

    文字左侧对齐基线:72dp

    (3)另外注意56dp这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按56的整数倍来设计。

    (4)还有非常多规范,不详细列举,遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多,距离与尺寸要相应增大。

    九、组件

    1.底部弹框(Bottom Sheets)

    通常以列表形式出现,支持上下滚动;也可以是网格式的。

    2.按钮(Buttons)

    按钮分为悬浮按钮、凸起按钮和扁平按钮3种。重要性依次递减。

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

    使用悬浮按钮要遵循以下规则:

    (1)建议只用一个悬浮按钮

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

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

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

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

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

    3.卡片(Cards)

    即使在同一个列表中,卡片的内容和布局方式也可以不一样。卡片统一带有2dp的圆角。

    在以下情况考虑使用卡片:

    (1)同时展现多种不同内容

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

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

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

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

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

    卡片最多有两块操作区域。辅助操作区至多包含两个操作项,更多操作需要使用下拉菜单。其余部分都是主操作区。

    4.芯片(Chips)

    狭小空间内表现复杂信息的一个组件,比如日期、联系人选择器。

    5.对话框(Dialogs)

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

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

    (3)对话框中,取消类操作项放在左边,引起变化的操作项放在右边。要写明操作项的具体效果,不要只写“是”和“否”。标题文字要明确,即使不读正文内容也能知道在干什么,标题不要用“确定吗”这样的含糊措辞。

    (4)在对话框中改变内容,不会提交数据,点击确定后,才会发生变化。对话框上方不能再层叠对话框。

    (5)还有一种简易对话框,不带操作项。点击列表内容触发相应操作,并关闭对话框。点击简易对话框外面,对话框会关闭,操作取消。

    (6)对话框可以是全屏式的,全屏对话框上方可以再层叠对话框。左图是一个普通界面,其中的任何改动立即生效。右图是全屏对话框,其中任何改动,要点击保存后才生效,点击X取消。

    (7)全屏对话框右上角的操作项,可以是诸如保存、发送、添加、分享、更新、创建之类的操作,不要使用完成、OK、关闭这样的含糊措辞。

    (8)只有必填项都填了,右上角的操作项才变为可点击状态。

    (9)内容发生了改变,点左上角的X,需要有个确认对话框,提示是否忽略修改。内容没有发生改变,点左上角的X,直接退出全屏对话框。

    (10)对话框的四周留白比较大,通常是24dp。

    6.分隔线(Dividers)

    (1)内嵌分隔线:列表中有头像、图片等元素时,使用内嵌分隔线,左端与文字对齐。

    (2)通栏分隔线:没有头像、图标等元素时,需要用通栏分隔线。

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

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

    (5)通栏分隔线的层级高于内嵌分隔线。

    7.网格(Grids)

    (1)网格由单元格构成,单元格中的瓦片(图片)用来承载内容。

    (2)瓦片(图片)可以横跨多个单元格。

    (3)瓦片(图片)包含主操作区和副操作区,副操作区的位置可以在上下左右4个角落。在同一个网格中,主、副操作区的内容与位置要保持一致。两者的操作都应该直接生效,不能触发菜单。

    (4)网格只能垂直滚动。单个瓦片(图片)不支持滑动手势,也不鼓励使用拖放操作。

    (5)网格中的单元格间距是2dp或8dp。

    8.列表(Lists)

    (1)列表由行构成,行内包含瓦片(图片)。如果列表项内容文字超过3行,请改用卡片。如果列表项的主要区别在于图片,请改用网格。

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

    (3)在同一个列表中,滑动手势操作保持一致。

    (4)主操作区与副操作区的图标或图形元素是列表控制项,列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作,也可以包含快捷键提示、二级菜单等提示信息。

    9.菜单(Menus)

    (1)顺序固定的菜单,操作频繁的选项放在上面。顺序可变的菜单,可以把之前用过的选项排在前面,动态排序。菜单尽量不要超过2级。

    (2)当前不可用的选项要显示出来,让用户知道在特定条件可以触发这些操作。

    (3)菜单原地展开,盖住当前选项,当前选项应该成为菜单的第一项。

    (4)菜单的当前选项,始终与当前选项水平对齐。

    (5)靠近屏幕边缘时,位置可适当错开。

    (6)菜单过长时,需要显示滚动条。

    (7)菜单从当前选项固定位置展开,不要跟随点击位置改变。

    (8)菜单到上下留出8dp距离。

    10.选择器(Pickers)

    日期和时间选择器是固定组件,在小屏幕设备中,通常以对话框形式展现。

    11.进度条与动作(Progress & activity)

    (1)线形进度条只出现在纸片的边缘。

    (2)环形进度条也分时间已知和时间未知两种。

    (3)环形进度条可以用在悬浮按钮上。

    (4)加载详细信息时,也可以使用进度条。

    (5)下拉刷新的动画比较特殊,列表不动,出现一张带有环形进度条的纸片。

    12.滑块(Sliders)

    (1)滑块左右两边可以放置图标,或是可编辑文本框。

    (2)非连续的滑块,需要标出具体数值。

    13.警示框(Snackbars & toasts)

    (1)Snackbars至多包含一个操作项,不能包含图标。不能出现一个以上的Snackbars。

    (2)Snackbars在移动设备上,出现在底部。在PC上,应该悬浮在屏幕左下角。

    (3)不一定要用户响应的提示,可以使用Snackbars。非常重要的提示,必须用户来决定的,应该用对话框。

    (4)Snackbars不能遮挡住悬浮按钮,悬浮按钮要上移让出位置。

    (5)Snackbars的留白比较大,24dp。

    (6)toasts和Snackbars类似,样式和位置可以自定义,建议遵循Snackbars的规则设计。

    14.小标题(Subheaders)

    (1)小标题是列表或网格中的特殊瓦片(元素),描述列表内容的分类、排序等信息。

    (2)滚动时,如果列表较长,小标题会固定在顶部,直到下一个小标题将它顶上去。

    (3)存在浮动按钮时,小标题要让出位置,与文字对齐。

    15.开关&复选框(Switches & Checkbox)

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

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

    (3)单个开关项建议使用Switch。

    16.切换标签(Tabs)

    (1)tab只用来展现不同类型的内容,不能当导航菜单使用。tab至少2项,至多6项。

    (2)超出6项,tab需要变为滚动式,左右翻页。

    (3)tab文字要显示完整,字号保持一致,不能折行,文字与图标不能混用。

    (4)tab选中项的下划线高度是2dp。

    17.文本字段(Text fields)

    (1)简单一根横线就能代表输入框,可以带图标。

    (2)激活状态和错误状态,横线的宽度变为2dp,颜色改变。

    (3)输入框点击区域高度至少48dp,但横线并不在点击区域的底部,还有8dp距离。

    (4)输入框提示文字,可以在输入内容后,缩小停留在输入框左上角,整个点击区域增高,提示文字也是点击区域的一部分。

    (5)通栏输入框是没有横线的,这种情况下通常有分隔线将输入框隔开。

    (6)右下角可以加入字数统计。字数统计不要默认显示,字数接近上限时再显示出来。

    (7)通栏输入框也可以有字数统计,单行的字数统计显示在同一行右侧。

    (8)错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。

    (9)字数限制与错误提示都会使点击区域增高。

    (10)同时有多个输入框错误时,顶部要有一个全局的错误提示。

    (11)输入框尽量带有自动补全功能。

    18.提示(Tooltips)

    (1)提示只用在小图标上,文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。

    (2)上图是错误例子。提示不能包含富文本,不需要三角箭头。

    (3)触摸提示(左)和鼠标提示(右)的尺寸是不同的,背景都带有90%的透明度。

    19.侧边抽屉(Navigation drawer)

    (1)侧边抽屉从左侧滑出,占据整个屏幕高度,遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。

    (2)侧边抽屉支持滚动。如果内容过长,设置和帮助反馈可以固定在底部。抽屉收起时,会保留之前的滚动位置。

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

    十、设置界面

    (1)设置和帮助反馈通常放在侧边抽屉中。如果没有侧边抽屉,则放在Appbar的下拉菜单底部。

    (2)设置界面只能包含设置项;诸如关于、反馈之类的界面,入口应该放在其他地方。

    (3)设置项使用通栏分隔线来分组。7项以下不必分组。如果某项独立一组,考虑把它放在顶部(重要)或放在底部的“其他”一栏中(不重要)。设置项较多时尝试合并,比如把两个相关的勾选项合并成一个多选项。设置项非常多时,使用子界面。

    十一、易用性

    1.无障碍设计

    (1)material design很重视用户的广度,应该尽量照顾到残障人士的体验。设计时考虑以下使用场景:

    没有声音

    没有色彩

    手机开启了高对比度模式

    手机画面放大

    没有视觉信息,使用屏幕阅读器

    只能通过语音控制

    以上多项结合

    (2)并注意以下问题:

    无鼠标、纯键盘操作。鼠标悬停显示信息,也要通过其他方式展现。

    考虑大字号情况下的使用体验。

    不要只通过颜色表达某些信息。

    音频信息也要提供文字或其他视觉呈现。

    为图片和视频提供备用的文字信息。

    2.本地化

    为阿拉伯语、希伯来语、波斯语用户设计相反的界面,他们的书写和阅读习惯是从右到左的。

    原文链接:https://www.jianshu.com/p/b42fe05ccaae

  • 相关阅读:
    ASP.NET Core MVC Razor小记
    ASP.NET Core引入第三方日志框架及简单实现日志策略配置
    test
    记录一个Windows explorer进程卡死的处理,有关于“MicrosoftWindows.Client.CBS_cw5n1h2txyewy”的,已解决!
    Windows版本sed工具
    相同xml批量创建替换脚本.sh
    springboot1.x apollo 更改属性值不起作用。 ConfigurationProperties
    jmeter固定定时器
    jmeter函数助手参数化
    jmeter循环控制器
  • 原文地址:https://www.cnblogs.com/twodog/p/12135637.html
Copyright © 2020-2023  润新知