Material Design设计指南整理(五)

这次整理的是官方文档中的模式部分,相比于之前介绍的控件,这部分更加综合。

同样的,我按照自己的理解将模式部分分为四组:

  1. 导航
  2. 手势
  3. 系统
  4. 其他

一、导航

导航部分主要内容有:导航设计的基本原则和方法、单个导航模式、多个导航模式的组合、导航的切换形式。

导航应该是直观的,可预测的,不管是新用户还是老用户,都能顺利地在你的应用中移动。在这个过程中,图像、操作、内容等结合在一起对用户进行引导。通过分组明确不同内容之间的关系,突出重要的信息,并适当使用动效引导用户进行探索。

1. 定义导航

在导航设计之前,应该对导航进行定义,哪些流程是最重要的,哪些流程是用户使用频率最高的,不同流程之间的优先级是怎么样的。具体可以按照以下四个步骤:
1)列出任务清单:将用户最常用的任务列出来



2)区分优先级:根据重要程度对任务进行分类



3)梳理流程:以优先级高的任务为主,梳理任务的流程

4)细分任务:对流程中一些较复杂的任务进行细分

这里要提一下应用中可以出现的层级关系
1)主页:应用的入口。
2)父子关系:高的层级是父级,低的层级是子级,父子级关系是相对关系。
3)同胞关系:相同的层级之间称为同胞关系。
4)集合:具有同一个父级的多个子级的集合
5)导航:从父级到子级或者从子级到父级的移动
6)链接:从应用内某一个页面直接跳转到另一个页面,或者直接跳转到别的应用中。

2. 单个导航模式

这里提到的导航模式有:嵌入式导航、标签、底部导航栏、抽屉式导航(简单的、多级的)、手势导航

  • 嵌入式导航
    一个最典型的例子是计算器,所有的操作和显示都内容都放在同一个页面。该导航适用于结构相对单一,包含大量操作的应用。
  • 标签
    标签在之前的控件中已经讲过,主要用于两种情况:一是一个父级之下有多个子级视图;二是有多个同胞视图。能够方便地在不同视图之间切换。
  • 底部导航栏
    底部导航栏与标签类似,可以在不同视图之间切换,但更适合于有多个父级视图的情况,因为其主要是用于最高层级之间的导航。
  • 抽屉式导航
    抽屉式导航一般是隐藏的,点击左上角的图标才会弹出。适用于界面空间不足,但又需要同时展示多个导航目标的情况。但也可以不完全隐藏,而是最小化附在左边。



    在桌面端,侧边导航一般是固定在屏幕上的,这时可以支持多个层级的导航,哟多种形式,如下图所示:


  • 手势导航
    手势导航指利用手势对页面进行切换或者放大缩小等来导航,比如在日历应用中,点击月份之后会放大并显示该月份的所有日期。
3. 多个导航模式的组合

内容式导航、标签与抽屉式导航的结合

内容式导航是指,以抽屉式或者标签作为第一层导航,然后下一级导航位于内容之中,可以点击内容中的相应部分达到应用中的不同地方。

标签与抽屉式导航的结合是一个较为常用的组合,因为这两者不像底部导航和标签那样容易在切换时发生混乱,而且可以同时使用与移动端和电脑端。


4. 导航的切换

在导航的过程中不可避免地需要在不同的页面直接切换,切换的效果应该尽可能自然,符合用户的心理预期并反映页面直接的关系。

  • 从父级到子级
    一般来讲,接受点击之后,子级应该上升,然后展开,返回时反之。这样视线可以很自然地从父级过渡到子级,也能明确表明该子级和父级的关系。
  • 同胞之间
    同胞之间切换时没有高度变化的,一般是通过左右切换来表示。

这一部分配合动效来看更容易理解,点击这里可以查看官方的演示。

二、手势

手势可以分为两部分,一是触发动作,即你的手指在屏幕上做了什么;二是触发行为,即针对特定的动作发生的响应。同一个触发动作在不同的环境中的触发行为是不一样的,一个触发行为可以是由多种不同的触发动作引起的。

1、触发动作有14种
  • 单击:一根手指按住,抬起(例:选择)
    双击:一根手指按住,抬起,一根手指按住,抬起(例:放大)
    长按:一根手指按住,等待,抬起(例:选择一个列表项)


    左:单击 中:双击 右:长按
  • 轻滑:一根手指按住,移动,抬起(例:滚动)
    双击拖动:一根手指按住,抬起,一根手指按住,移动,抬起(例:放大查看)
    长按拖动:一根手指按住,等待,移动,抬起(例:选择并移动)

左:轻滑 中:双击拖动 右:长按拖动
  • 张开:两根手指按住,相背移动,抬起(例:放大)
    关闭:两根手指按住,相向移动,抬起(例:缩小)
    旋转:两根手指按住,绕着一个中心转动,抬起(例:旋转地图)
左:张开 中:关闭 右:旋转
  • 双指单击:两根手指按住,抬起(例:缩小)
    双指轻滑:两根手指按住,移动,抬起(例:选择多个项目)
左:双指单击 右:双指轻滑
  • 双指双击:两根手指按住,抬起,两个手指按住,抬起(例:缩小)
    双指长按:两根手指按住,等待,抬起(例:很少使用)
    双指长按拖动:两根手指按住,等待,移动,抬起(例:选择并移动)
左:双指双击 中:双指长按 右:双指长按拖动
2、对应的触发行为如下:


看的不是很请清楚,可以直接看官方文档,点此查看

详细介绍一下三种触发动作及其触发行为:拖拽(drag)、轻滑(swipe)、快速滑动(fling),三者速度依次加快。拖拽一般有一个目标物体,操作较为精确,在手指没放开时,可以将物体拖回原处。轻滑速度比拖拽快一点,没有特定的目标,轻滑的速度加大到一定程度就是快速滑动,同样是没有特定目标,但是一般滑动目标超过一个阈值之后就不能滑回原位。
1)滚动:三种手势都可以滚动内容,只是速度上有所不同。内容应该跟手指滑动的速度保持一致,给用户一种内容是随着指尖在动的感觉。
2)滚动显示:随滚动一起发生,向上滚动时导航栏或者工具栏等会自动消失,反方向时则再次显示出来。
3)平移:一般用于没有边界的内容,或者内容超过屏幕尺寸,像大的图片,地图等。拖拽是平移是最常用的,轻滑和快速滑动也可以使用,但是会根据速度平移一段较大的距离。
4)移除:手势的方向与滚动方向相反,一般是水平的,三种手势都可以使用,只要移动距离超过某个阈值就会生效。
5)刷新:可以通过在当前页面边缘使用该手势,一般来说,上下滑动会刷新当前页面内容,左右滑动会出现新的页面或者其他被隐藏的内容。另外,如果当前页面已经是同级的可切换的最前面或者最后面的页面了,这时候滑动可能会带来层级的变化,比如回到上一级,或者进入下一级。
6)打开菜单:一般是拖拽引起的,在菜单或者拾取器中拖动,会不断打开并关闭下级菜单,拖拽停止时,选中的选项高亮显示。
7)倾斜:主要用于3D的内容中,像立体的地图,与拖拽结合,两根手指,可以360度查看地图。

3、补充
  • 滑动刷新
    1)滑动刷新用于更新当前内容,但最好还应该可以自动更新。
    2)手势作用的位置位于屏幕上部或者下部,刷新之后出现的指示器应该位于新内容出现的区域,水平居中。
    3)滑动刷新不能用于抽屉式导航、主页控件、平面式内容,如下图。


  • 滚动
    设计滚动行为时,应该考虑好当前页面的布局。包括状态栏、工具栏、标签栏/搜索栏、自由空间等。那些控件应该固定住,哪些控件应该随着滚动移出界面,当自由空间中是卡片式的或者含有图片,应该如何变化,都是需要考虑的。这里并没有绝对的规定,根据实际情况设计即可。点击这里可以查看谷歌官方提供的一些例子。
  • 选择
    选择多个物体时,可以通过长按或者双指点击激活,此时不要抬起手指,而是顺着你要选择的物体拖动,从开始项拖动到结尾项,这样就可以方便地选择多个物体,特别使用于图像的选择。选择之后可以点击其中某项取消其选中状态。
    选择文字时,长按或者双击选中某个区域,此时如果有相应的操作,应该显示在选中区域的附近,以下拉菜单的形式呈现。可以通过控制文字选择区域两端的选择器对内容进行调整,也可以重新选择。

三、系统

包括空状态、错误、通知、权限、设置

1、空状态

空状态指的是应用中应该有内容的地方目前是空的,比如空的播放列表、空的搜索结果等,这里讨论的是正常情况下的空白状态,系统错误导致的空白请看下面的“错误”。
1)显示空白状态
大部分空白状态的页面会出现一张图片以及一些说明文字,图片应该是不可交互的,因此应该与背景有一定的差异,但是又不能太突出,最好与应用有某些关联。文字也应该具有这些特性,并使用积极的语气。
2)避免空白状态
对空白状态最好的方式是避免,有三种形式,一是默认提供一些内容,比如阅读软件可以默认添加几本书,同时允许用户删除。尽可能提供一些个性化的内容,或者提供一些普适的,大众认可的。二是提供指导信息,让用户明白现在的情况,并提供一些可以执行的操作。要保证指导信息足够简洁,而且能够跳过。三是展现最佳的匹配内容,特别是在搜索时,如果没有找到结果,应该提供最佳的匹配内容。需要注意的是,要写明白这个是最佳匹配而不是用户的搜索结果,避免用户以为程序发生错误。

2、错误

错误指的是应用不能完成一些指定的操作,可能是用户输入错误的指示,也可能是应用或者系统本身出现问题。

  • 用户输入错误
    应尽可能优化用户输入机制,减少用户输入错误的发生。一旦出现错误,应清晰地表明错误的原因并提供解决方案。但是,最根本的方法还是尽量减少用户输入,可以提供选择的尽量提供选择,可以自动获取尽量自动获取。
    1)在未输入时,显示提示信息,输入后,实时检测,出现错误时在下方显示错误信息。
    2)如果有错误信息,提交按钮为不可用。如果不能实时检测,在提交之后发现错误的,应该在最上方显示错误信息,并写明错误位置。尽量保留其他正确的内容。
  • 应用/系统错误
    应用或者系统的错误与用户操作无关,当错误发生时,应该提供状态指示器,表明应用当前的情况(是否已经恢复),不用每个错误都弹出窗口提示。
    比较普遍的错误有加载错误、连接错误等,此时应该允许用户执行其他可行的操作,尽可能保留之前的内容。不要提供没用的信息,比如已经检测到目前网络状态不可用,就不要提供类似于“再试一次”,“重新连接”的操作。
  • 不兼容
    不兼容指的是用户的请求是合理的,应用也是正常的,但是该请求和应用当前的状态不兼容。比如用户想要联网,但是目前是飞行模式,用户想要拍照,但是目前摄像头被禁用。解决方式是告诉用户发生了什么,并提供操作连接,或者请求用户授权。
3、通知

通知用于提醒用户跟你的应用相关的信息,由于通知有较大的干扰性,所以尽量控制出现的频率,不要通知那些不需要用户参与的,也不要通知跟用户当前正在使用的应用相关的。用户应该可以对通知进行相关设置。
1)通知的优先级



不同的优先级决定了通知出现的方式,从表中可以看出,重要的通知一般包括与其他人的联系,时间上比较紧急的,对用户的行为有即时的影响等。反之,与联系其他人无关的、时间上不紧急的,不要求用户尽快处理的通知的重要性较低。除此之外,谷歌还要求对通知的内容进行归类,便于系统分辨。



2)相同类型的多个通知应该合在一起,通知栏可以通过手势张开或者下拉展开详细信息。通知可以附上一些操作,应该是与通知内容密切相关的,可以让用户快速完成任务的,一般不要超过三个。
3)通知上一般包括有图标、标题、二级文字、时间戳。在状态栏上展示的图标应该遵循系统图标的设计原则,但是要有一定的区分度。
4)用户可以对通知进行多种操作,可以点击打开应用或者详细窗口,或者左右滑动移除。有一种通知较为特殊,是表示当前正在进行的任务,比如下载情况,音乐播放器等,这时一般不能左右滑动移除。用户不可以直接对通知进行排序的,系统会自动根据通知的类型,时间,以及是否有特殊标记进行排序。

5)有一些通知的内容涉及隐私,用户可能不希望被直接看到,可以设置为在用户解锁时才能看到,或者只是提醒说有未读信息,但不显示出任何有关的信息。
6)有一种特殊的通知,称为探出性通知,像来电通知、闹钟、电量不足等。这种通知一般是优先级很高的,不会像正常通知那样展现一小段时间后就隐藏。

4、权限

1)权限被分为9个组,每个组代表一系列的权限,方便应用请求。比如相机的权限,可以允许拍照和拍视频,具体分组如下:



2)如果该操作是用户明确想要执行的,就不用请求权限,比如用户直接打开相机,那就可以直接进行相关操作而不用权限。
3)请求权限可以在应用启动时或者第一次打开时出现,也可以在使用过程中才出现,可以使用以下模式帮助选择时机和方式。



有两个方面的因素,一个是该请求的重要程度,一个是该请求的清晰程度。较为重要的,应该在应用一开始就请求,反之可以等到需要使用时才请求。如果该请求表述起来较为复杂,应该有相应的指导信息,反之则直接询问即可。
4)当应用需要某个权限但是被用户拒绝时,应该提供相应的反馈,提示用户当前没有权限执行操作。因为有时候并不是用户在当时拒绝,而是之前设置过诸如“不要再提醒我”“一律拒绝”等,应用应该表明权限的必要性,并提供途径方便用户去设置。
5、设置

1)设置功能应该使用“设置”作为标签,不要使用其他“选项”“参数”等,位置一般放于侧边栏导航的最下面,或者工具栏中菜单选项的最下面,不过一般位于帮助和反馈之上。
2)设置中的选项应该有较好的分类组织,符合用户的心理预期。应该让用户一眼就知道哪些设置是可用的以及每个设置当前的值是什么。
3)经常使用的操作不应该放在设置中,应该放到工具栏。与应用有关的信息像版本和注册号等也不应该放在设置中,应该放到“关于”中。与账号有关的信息也最好不要放在设置中,一般放在应用的主要界面中,比如抽屉式导航。
4)设置中的默认值应该考虑一下几个因素:大多数用户的选择、中立的或者风险最小的、使用最少电量或者最少数据的、对用户打扰最小的。
5)设置中选项有时需要分组,当选项小于等于7个时,就没必要分组了。在7个到10个,可以分成1到2个组,11个到15个分成2到4个组,16个以上则分成4个组以上。
分组时尽量让重要的设置比较容易发现,同一组的设置之间有一定的联系,而且组名也要有足够的标识性。
6)对于可以切换式的按钮,应该明确其操作结果,可以使用二级文字进行说明,说明文字较多时可以打开一个新的页面。对于其他不是切换式的,可以使用二级文字对当前选项的状态进行说明。说明文字应该清晰易懂,让用户容易接受。

四、其他

包括:启动页、图片加载、指纹认证、时间显示格式、搜索

1、启动页

应用每次启动时,难免需要等待一下,此时如果出现空白页面,从心理上会让用户觉得这个应用启动很慢。如果展示给用户其他东西,等页面加载完成再切换回去,这样用户就对等待的时间不太敏感。
启动页有两种形式,一是占位界面,是直接展现出应用加载完成之后的第一个界面的框架,让用户认为已经加载了一部分。二是品牌式的启动页,展示有关的logo或者其他元素,提高品牌的辨识度。
1)如果应用启动时间很短,对品牌展示的需求不大,就尽量使用占位界面。因为占位界面和真正的界面之间是无缝过渡的,而且也能暗示应用响应速度很快。
2)品牌展示能够很好地增强应用的品牌辨识度,需要注意的是,一般只用于直接在主页点击并启动应用。如果是从其他应用跳转过来,或者已经在后台打开过了,就不要显示该页面。

2、图片加载

图片加载的过程不是简单的透明度的变化,而是透明度、亮度、饱和度三者同时作用的结果。按过渡完成的顺序是:透明度、亮度、饱和度。
另外,在加载图片时,变化的时间可以长一点,在不同图片之间切换时,变化时间可以短一点。


3、指纹认证

指纹认证可以用于多种需要验证用户身份的场景,比如解锁、登陆、支付等,指纹认证的安全系数不如密码,在使用时,应该支持切换到另外的认证模式。指纹认证的默认窗口如下:


4、时间显示格式

1)对于一个日期点或者时间点,应该考虑一下几个问题。该时间是否是当前时间、要使用12小时制还是24小时制、要有多特别。


2)对于时间段来说,主要考虑开始和结束的时间是不是同一年,是不是都是上午或下午等。


3)还有时区的表达方式。


4)对于时间的跨度和粒度的不同,显示内容也有所不同。


5)最后是一些缩写形式。

5、搜索

如果应用中有大量的信息,同时也应该有搜索功能。有三种方式可以用于提高搜索的用户体验,一是提高语音搜索,二是根据搜索历史提供建议,三是自动完成和自动匹配用户可能要查找的东西。
搜索框有两种形式,一种是固定式的,即固定在屏幕上面,用于搜索是主要功能的应用中。另外一种是展开式的,通过点击工具栏上的放大镜来打开搜索框,用于搜索功能不是很重要的应用中。


以上就是模式部分的内容。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,219评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,363评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,933评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,020评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,400评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,640评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,896评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,597评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,327评论 1 244
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,581评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,072评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,399评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,054评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,849评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,672评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,585评论 2 270

推荐阅读更多精彩内容