2017 Material Design完整中文版:第六章节《模式》 第四部分
【站酷首发】10大章79小节重译!半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制,全文将分为N篇文章陆续发布。
权限请求应简单明了,易于理解。
应用应该说明每个权限请求的必要性。在此可以通过功能名称或提供解释的方法进行说明。
用户需要在应用中完成某个操作时会发送运行时权限(Runtime permissions)请求。
被拒绝的权限应提供反馈和选项。
权限类型
请求前提示(Educate before asking)
预先请求(Ask up-front)
使用场景中请求(Ask in context)
使用场景中补充说明(Educate in context)
提供即时帮助(Provide an immediate benefit)
只请求相关联的权限(Only ask for relevant permissions)

权限组
权限被分为九组,其中允许用户通过一次操作授予全部权限。例如,授权联系人(Contacts)后能够查看和编辑联系人。
| 权限 | 描述 |
| 日历(Calendar ) |
管理日历 |
| 相机(Camera ) |
拍照和录像 |
| 联系人(Contacts) | 管理联系人 |
| 位置(Location) | 当前的设备位置 |
| 麦克风(Microphone) | 录制声音 |
| 电话(Phone) | 拨号和管理电话 |
| 传感器(Body Sensors) | 心率及类似数据 |
| 短信服务(SMS) | 发送和查看短信 |
| 存储(Storage) | 访问照片、媒体和文件 |
从用户操作可以看出其行为目的,比如:
拍照
选择一个联系人
开始呼叫或发送信息
在以上这些例子中,你不难看出用户的行为清晰的表明了他们的目的,所以不需要相关授权操作。
开发者: Intents and Intent Filters
应用可以在安装后的任何时间里请求访问权限或使用设备功能。当用户需要在应用中执行某项操作时,比如使用摄像头,应用会在此时请求该权限。
在任何应用安装后,用户可以随时在Android设置中允许或拒绝任何权限。

案例:一个应用的权限请求
你的权限设定取决于你请求的权限类型的清晰度和重要性。以下模式为向用户介绍权限提供不同的方法。

紧要的权限应预先请求。次要的权限可以在场景中请求。
对于那些意图表述不清晰的权限提供有关该权限的提示和帮助。无论在开始之前或是在使用场景中。

请求前提示
如果你的应用有启动页,那么最好用它来介绍你的应用可以做什么以及有哪些需要用户许可的权限。

预先请求
在首次登陆后只请求重要、突出的权限。
因为用户期望一个消息应用应请求短信服务(SMS)权限,所以将请求权限放在首次登陆后才有意义。

使用场景中请求
等待功能调用权限请求。
当用户想使用某个功能时,他更有可能会去允许该功能相关的权限。

使用场景中补充说明
通过对权限解释,能够帮助预知用户需求以及提高权限的理解能力。

提供即时帮助
及时提供用户的帮助,令用户更易接受权限许可。

只请求相关联的权限
当一个功能需要多个权限许可的时候,那么一次性向用户请求完这些权限。
每当权限被拒后都需要提供反馈。因为拒绝某权限请求可能意味着阻止了某个功能按预期运作,所以,无论何时权限被拒后都需要向用户解释。
以下两种情况允许拒绝权限请求:
用户主动拒接权限请求
用户之前拒接该权限请求的时候选择了“不再询问”

图为snackbar中显示需要音频的使用权限。
关键性的权限
因为关键权限被拒导致应用无法运行的情况,你需要向用户解释原因并要求其必须允许该权限才能保证应用正常运行,顺带提供设置按钮方便用户跳转设置权限。

图中屏幕显示应用正常运行所需权限,下面附带跳转至设置的链接。
滚动涉及到内容如何滚动以及滚动与应用栏(app bar)之间的关联。
下面这些模式对内容需要滚动的距离,如何设置弹性空间的大小,及什么时候固定某个元素不动进行了详细的描述。
状态栏(Status bar)
工具栏(Toolbar)
Tab/搜索栏(Tab bar/search bar)
弹性空间(Flexible space)

在设计滚动行为的时候需要考虑应用栏中包含的四个主要区域(称为块(blocks)),因为这些一起构建了整个滚动的结构:
状态栏
工具栏
Tab/搜索栏
弹性空间:空间会随图片或应用栏展开来变化尺寸

应用栏组件包含:状态栏,导航栏,Tab/搜索栏,和弹性空间

案例:状态栏,导航栏,Tab/搜索栏,和弹性空间
标准的应用栏
尺寸:
移动端上标准应用栏高是56dp,在大屏下高是64dp。
应用栏有两种滚动方式:
当用户向上滚动内容时应用栏会跟随其移离屏幕,用户往回滚动内容时应用栏也会返回屏幕。
当内容往下滚动时,应用栏会保持固定在顶部。

标准应用栏
状态栏高:24dp
工具栏高:56dp / 64dp

滚动期间工具栏离屏动效
应用栏和Tab
标准的应用栏中包括以下组件:工具栏,Tab栏,或弹性空间。
Tab具有以下任一特征:
当工具栏移离屏幕时,Tab栏将固定在顶部。
当内容向下滚动时,应用栏将固定在顶部。
在内容向上滚动至工具栏移离屏幕及tab栏已固定在顶部的情况下,往回滚动内容时tab栏会跟随往回移动,当标签栏完全移动后工具栏会立马返回。

状态栏,工具栏和tab栏
状态栏高:24dp
工具栏高:56dp / 64dp
tab栏高:48dp

图中动效:当工具栏移离屏幕时,tab栏立即固定不动。
弹性空间
应用栏是有弹性的,所以它能够伸展以容纳更大的图像或排版。想要使应用栏能够伸展,需要添加弹性空间块。
弹性空间的表现方法:
随着用户往上滚动内容,弹性空间会随之收缩,并在收缩至只剩工具栏时停止缩小,此时标题文本大小已经缩小为20sp。如果用户朝相反方向回滚,弹性空间和标题文本会再次伸展。
在整个应用栏滚离屏幕的情况下,当用户往回滚动,工具栏会返回并固定在顶部。如果用户一直往回滚动内容,弹性空间和标题文本会随之伸展。

状态栏,工具栏和弹性空间
状态栏高:24dp
工具栏高:56dp / 64dp

内容滚动期间的弹性空间动效
弹性空间与图像 Flexible space with image
使用弹性空间来容纳应用栏中不同比例的图像。
在这个例子中,图像宽高比为4:3。当内容向上滚动时会把图像朝同一方向推移,同时弹性空间收缩。在整个运动变化结束时,图像会快速渐变成主颜色并停止滚动。

状态栏,工具栏和弹性空间
状态栏高:24dp
工具栏高:56dp / 64dp

内容滚动期间的弹性空间和图像动效
弹性空间与内容的叠盖 Flexible space with overlapping content
内容能够叠盖在应用栏上。
在此,应用栏有两种滚动方式:
应用栏的位置最初在内容后面。当往上滚动时,应用栏的弹性空间收缩速度需要比内容快,直到内容不再叠盖在应用栏上时结束收缩。一旦应用栏结束收缩,其高度会抬高于内容之上,同时内容在其之下继续滚动。
用户向上滚动内容时应用栏会跟随其移离屏幕,用户往回滚动内容时应用栏也会返回屏幕。
在此交互中,应用栏中不包含tab栏(tab栏不出现在此情况之下)。

弹性空间
状态栏高:24dp
工具栏高:56dp / 64dp

滚动期间弹性空间和叠盖内容的动效

Z轴图解,侧视图
搜索能够帮助用户快速查找应用内容。
搜索能够帮助用户在一个信息量大的应用里面找到内容。
搜索选项
搜索建议
自动补全
搜索类型
固定搜索(Persistent search)
可扩展搜索(Expandable search)

搜索能够帮助用户在一个信息量大的应用里面找到内容。
基本搜索包含以下步骤:
开始搜索文本字段
输入和提交查询
展示搜索结果
另外,提供以下方法可以增强用户搜索体验:
语音搜索
在输入时提供基于用户近期历史搜索记录的搜索建议
使用你的应用数据自动匹配、补全用户输入的信息
应用内搜索主要有两种模式,分别为:固定搜索和可扩展搜索。
固定搜索
当搜索是你应用的主要功能时使用固定搜索。
行为:
搜索文本字段嵌入搜索框中,时刻准备接收用户输入。用户也可以轻按麦克风icon启动语音搜索。
当搜索框获取焦点时,搜索字段展开显示历史搜索建议。同时,如果必要的话屏幕键盘也会出现。
选择任一搜索建议提交。轻按返回(up)按钮搜索框失去焦点,搜索建议和屏幕键盘消失。

固定搜索框

搜索文本字段:已获取焦点
当用户开始输入时,历史搜索建议会转变为对用户输入信息自动补全的搜索建议。其中根据用户输入,系统会自动筛选、排序出最接近用户需要的查询信息。选择任一搜索建议或按下回车键提交查询。
轻按“X”可清除搜索框内的查询信息。
显示搜索结果时,搜索框仍然是可见的,但默认框内不会获取焦点。为了能够展示更多的搜索结果,屏幕键盘会消失。
搜索结果被格式化为卡片(card)的形式展示,原因是为了匹配搜索框的样式以及适应不同的搜索结果类型。

自动补全

搜索结果
可扩展搜索
当搜索不是你应用的主要功能时使用可扩展搜索。
行为:
只在工具栏中显示一个放大镜的icon,而不是显示整个搜索框。
轻按搜索(放大镜)icon,工具栏会发生变化:工具栏中的其他元素消失并显示搜索文本字段。如果支持语音搜索的话,麦克风icon也会出现。
搜索文本字段出现后会自动获取焦点,如果必要的话屏幕键盘也会显示,同时历史搜索建议也会出现在工具栏下方。最后用户可选择任一搜索建议提交查询。
轻按返回按钮可关闭搜索以及恢复工具栏最初样貌。

可扩展搜索

搜索文本字段:已获取焦点
当用户开始输入时,历史搜索建议会转变为对用户输入信息自动补全的搜索建议。其中根据用户输入,系统会自动筛选、排序出最接近用户需要的查询信息。选择任一搜索建议或按下回车键提交查询。
轻按“X”可清除搜索框内的查询信息。
显示搜索结果时,搜索框仍然是可见的,但默认框内不会获取焦点。为了能够展示更多的搜索结果,屏幕键盘会消失。
搜索结果被格式化为卡片(card)的形式展示并在工具栏下方的页面中显示。

自动补全

搜索结果
用户可以通过手势和视觉提示来进行选择。
复选框表示已完成,比如核对列表项目。
文本选择通过文字高亮的视觉效果表示已选择。
选择类型
列表选择
文本选择
选择手势
在同一地方保持长按、轻按或鼠标按下一段时间。
两指轻按(仅限触摸屏)

选择的手势
选择数据的全局手势包括在同一地方保持长按、轻按或鼠标按下一段时间。在触摸屏中两指轻按也能触发选择。
复选框(建议在桌面端使用)
复选框(或其他自定义类型)仅作为表示已完成之用,比如核对列表项目。
复选框行为:
当悬停在某个列表项目时显示该项目的复选框。
在选择一个项目后,显示所有剩余项目的复选框。
列表项目中应避免长时间显示复选框。
项目选择允许用户选择特定的项目。
选择项目
在触摸设备上可以通过轻按一段时间去触发选择。
可以通过取消选择全部项目或执行某个工具栏中的事件退出选择。

在触摸设备上可以通过轻按一段时间去触发选择。
选择和取消选择
通过点击项目进行选择或取消选择。
通过长按并拖拽光标的方式选择多个项目。

项目选择和取消选择。

用户可以通过长按+拖拽的方式选择多个项目。
桌面端
在桌面端上,光标悬停在某个项目上时会显示复选标记框,这表示可被点击选择。

在桌面端上,用户可以通过点击并拖动光标迅速勾选多个复选框的方式快速选择多个项目。
表示被选择
通过显示复选标记和背景交叠(scrim overlapping)被勾选项目(或相关头像)的方式来表示项目被选择。

复选标记替代icons或头像表示已选择。

使用小而简洁的复选标记来减少被遮挡的内容。
一段文字高亮显示表示该段文字已被选择。
在移动端上,被选择的文本首、尾会出现选择手柄。在选择文本区域的上方会出现一个下拉菜单(其中包含文本相关的操作),该菜单不会与选择区域重叠。
调整已选择文本
一直拖动选择文本
拖动选择手柄进行扩展或缩减选择范围
反复轻按(或点击)已选择部分进行不断扩展(将会在单个文字,段落或所有文本中切换选择)
键盘快捷键(见表格)
| 键盘快捷键 | 作用 |
| Shift+左/右箭头 | 逐个字符选择 |
| Shift+上/下箭头 | 逐行选择 |
| Ctrl/Command+A | 全选 |
文本选择的键盘快捷键。
文本的选择手柄

案例:文本的选择手柄

案例:文本的选择手柄
颜色和对比度
使用你色板中的主色作为表示文本已被选择的视觉元素的颜色。
被选择文本的颜色应与背景颜色对比明显,使用户清晰易辨。其中,被选择文本可通过以下视觉元素进行反馈:文本轮廓,文本处理,动效或复选标记icon。
有关颜色对比度的信息请到此处查阅 webaim.org (或者参考 颜色对比度分析)。

文本选择的颜色
文本
背景

你可以使用你色板中的主色去定制文本选择的颜色。
文本选择-浅色主题

文本选择-浅色主题
文本选择-暗色主题

文本选择-暗色主题
文本选择工具栏
文本选择区域上方会出现一个浮动工具栏,其主要提供用户以下操作:剪切、复制、粘贴及更多。当用户点选“更多”icon时,工具栏会立马折叠成一个二级菜单并显示其他附加的操作。
浮动工具栏文本字体为Roboto Medium 14sp,(英文环境下)全部大写。

出现在选择区域上方的下拉菜单,其中包括剪切、复制、粘贴及更多操作。

更多

用户点选“更多”后,工具栏变化的过程

菜单中“更多”包括:分享、搜索和翻译

文本选择部分
下拉菜单高:44dp
下拉菜单文本上内边距(padding):12dp
下拉菜单文本下内边距:14dp
下拉菜单文本左内边距:24dp
下拉菜单中文本项之间的间距:32dp
选择文本上内边距(选择文本区块与菜单的间距):8dp
“更多”icon的右内边距:16dp
“更多”icon的左内边距:22dp
“更多”icon的上、下内边距:10dp
文本的选择手柄:22 x 22dp
应用设置可以让用户自定义应用或者服务。
在你应用导航中的“设置”标签(label)下放置应用设置。
放置位置的选择
侧边导航
工具栏菜单
设置组件
标签(labels)
次级文本
开关或复选框设置
状态

应用中的所有设置应通过“设置”标签(label)打开。不要使用其他近义词标签,如“选项”或“偏好设置”。
侧边导航的情况
如果存在侧边导航(如抽屉式导航),则设置应该放置在所有列表项之下(除了帮助和反馈)。
应用没导航的情况
设置放置在工具栏菜单的所有列表项之下(除了帮助和反馈)。

设置在抽屉式导航中的位置

设置在工具栏菜单中的位置
设置中的选项应该是易于管理的,这些选项应有序排列并且具有可预见性。
概括描述
用户应该能够快速理解全部可用的设置选项是什么以及它们的当前值表示的意思。
如果设置中有很多个选项的话,那么用户最有可能感兴趣的选项优先级别应最高。那些不太重要的选项可以将它们群组并归为一个页面。

重要的设置选项显示在列表顶部
挑选合适的设置选项
适合于设置中的控件:
用户偏好
不常使用/访问的
大多数用户需要用到的
少数用户需要用到但不能缺少的
设置中不需要:
经常使用的操作(将这些经常用到列表项放入到工具栏中)
包含有关应用的信息,如版本号和授权信息(这些需要放入到帮助页中)
用户帐号管理(这些操作需要放入到你应用的主要流程之中,如侧边导航中)
默认值需考虑周到
设定设置中每个选项的初始值应考虑到以下几点:
大多数用户会设定的值
中性且风险小的值
电量消耗更少或调用较少的移动数据
只有在发生重要情况时才打断用户
面对设置列表中拥有很多项的情况,你可以将它们分组成多个简短的小列表。根据你应用设置面板中的设置选项总数进行整理排序。
少于7项时
不需要对其进行分组。
8到10项时
对相关联的设置选项进行分组,一般分成1至2个组并用分隔线区分。其中需要注意的是以下设置选项不能参与分组:
如果某选项很重要,将其置于顶部且不参与分组
或者将这些重要的选项按重要性排序并分组放在设置面板底部,同时组命名为“其他”。
11到15项时
对相关联的设置选项进行分组,一般分成2至4个组并用分隔线区分。其中,你可以尝试将两个相关的选项整合成一个选项。
举个例子:两个相关的复选框选项可以整合成一个多选选项。
多于16项时
对相关联的设置选项进行分组,一般分为4个组以上。这种情况不采用分隔线区分方式,而是将它们放在一个个次屏(subscreen)下进行区分。然后使用符合组的术语为次屏的标题命名。

“中断”项下的分组

对相关选项进行分组并放置在次屏中
标签
标签应表述简洁且易于理解。
标签需要注意:
(英文环境下)使用专有名词,且首字母大写。
将标签中最重要的文字放在首位。
避免使用消极词汇,如“不(Don't)”。改为使用中性词语,如“阻止(Block)”。
使用非人称的标签,如“通知”而不是“通知我”。例外:如果是那些必须要让用户明白意思的重要设置选项,那么使用第二人称(“你”)而不要用第一人称(“我”)。
标签需要避免事项:
避免使用通用名词(总称),如:设置、更改、编辑、修改、管理和选择。
避免重复用词。
避免使用技术性词语,除非你的目标用户能够理解。
次级文本
次级文本按实际情况添加。如果标签足够能说明白事情的话就不要添加次级文本辅助说明。

不可行
避免重复用词。
开关或复选框设置
需要精确描述的设置选项可以在标签下面添加单行说明。其中,说明应该注意以下两点:
向用户清晰传达启用该设置选项时会发生什么
避免使用和标签一样的词语

可行
说明以动词开头有助于用户理解。
需要较长篇幅解释的设置可以在子页面中添加说明。

在标签下方显示说明了开关的状态,“开启”或“关闭”。

将开关和大段说明文字放入到子页面中。
其他设置
对于那些非开关形式的设置选项,次级文本只显示当前设置选项的状态。

可行

不可行
简洁、直接、易懂。

可行

不可行
在相关语境下面表明状态细节。

可行

不可行
使用关键词准确的描述设置选项。

可行
如果用户没有设置屏幕锁,应该在次级文本中直接向用户表示“没有”。

不可行
如果没有更好的描述词,可以使用常见的缩写单词。同时你需要向用户解释清楚这个设置选项。

可行

不可行
结合用户手势,滑动屏幕手动刷新屏幕内容。
应用中有以下两种更新内容的方式:
最好的方式还是自动更新内容(使用 sync),保持应用内容的自动更新。
通过滑动手势即可滑动刷新,滑动刷新可用于列表开头,网格列表和卡片集合下按最近的内容排序方式的内容更新。
Icon
通过一个不断循环旋转的icon来表示内容正在刷新。icon具体是一个做圆周运动的弧形箭头。
位置
只允许滑动刷新手势在内容顶部或底部触发。
刷新标志默认的位置在刷新内容水平居中的地方
临界点
滑动屏幕超过一个临界点才会触发内容刷新。在滑动屏幕到触发刷新期间,刷新标志会随着滑动手势逐渐(涉及到icon的透明度、旋转速度和位置变化)出现,直到过了临界点自动旋转(触发刷新)。

滑动手势可用于列表开头,网格列表和卡片集合的内容更新触发(index 0)。
这个手势适用于那些经常需要更新的动态内容,同时更新的内容出现位置必须保持不变。这样用户就有很大机率在手势触发后看到更新的内容。
刷新标志
当刷新手势或用户操作触发后才出现刷新标志。系统自动更新不出现刷新标志。
作用
用户手动刷新后的视图会发生明显的变化,但这些变化不会明显到一般用户能够直接察觉。
举个例如,手动刷新后内容可能会被部分删除,重新排序,修改,以及插入项目内容或改变非当前视图的项目内容。
通过垂直方向的滑动手势刷新内容

滑动刷新动效
在以下几种情况下滑动刷新不可用:
侧边导航
主屏窗口小部件(widgets)
可拖移的内容

不可行
抽屉式导航(如果应用中存在)里面包含的是固定的导航选项,而不是动态内容。

不可行
主屏小部件会自动更新内容。

不可行
可拖移内容,如地图。其没有基本方向或内容来源供用户进行刷新触发。
手势定位
通常情况下,刷新手势除了可用于内容的顶部,也可用于内容的底部(比如,在聊天应用中)。
刷新标志的默认位置
刷新标志一直保持在刷新内容水平居中的地方。

可行

不可行

不可行
刷新标志活动的位置
刷新标志活动的位置在触发刷新后刷新标志会靠近更新内容顶部循环旋转的地方(表示内容正在更新)。
刷新标志活动的位置有助于调节促进布局上的视觉和谐。比如,刷新标志活动的位置刚好落在一个material的边缘或栅格线上。

刷新标志通过位移和/或缩放进入视图的同时会旋转淡入。
当刷新活动完成和新内容出现前,及用户没有离开当前视图时,刷新标志一直保持可见。

可行
在刷新活动完成前保持刷新标志在当前视图可见,这有助于为用户提供内容正在刷新的状态反馈。

不可行
当触发刷新后刷新标志循环旋转时用户滑动屏幕,刷新标志如果跟随内容上移并隐藏了内容刷新的活动状态,就有可能导致用户误解刷新活动与视图中的特定组件(如卡片)相关联,而不是作用于整个视图的内容刷新。
刷新标志的进入
当其他平面在刷新内容所处面之上时(z-space),刷新标志从其他平面下面进入(从进入时被遮挡到完全可见)。
以下情况的刷新标志尺寸会随位移而增大:
刷新内容所处面的高度高于其他平面时
通过应用栏(app bar)或溢出菜单(overflow menu)操作发起的内容更新

刷新内容所处面的高度高于其他平面时

刷新内容所处面和其他平面处于同一高度时

其他平面在刷新内容所处面之上时

通过应用栏操作发起的内容更新
临界点要求
为了防止用户不小心触发内容刷新,那么需要规定手势滑动屏幕超过一个临界点的时候才会触发刷新。关于临界点的制定可以参考以下几点:
渐入时达到100%不透明度
旋转变慢时
位移速度变慢时
超过临界点后开始内容刷新。
超过临界点后又反方向滑动超过临界点将取消刷新操作。






































