2017 Material Design完整中文版:第六章节《模式》 第四部分

用户头像
亚洲/学生/9年前/152浏览
2017 Material Design完整中文版:第六章节《模式》 第四部分
用户头像
D27_

【站酷首发】10大章79小节重译!半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制,全文将分为N篇文章陆续发布。

十三、权限(Permissions)  

权限请求应简单明了,易于理解。


应用应该说明每个权限请求的必要性。在此可以通过功能名称或提供解释的方法进行说明。


用户需要在应用中完成某个操作时会发送运行时权限(Runtime permissions)请求。


被拒绝的权限应提供反馈和选项。


权限类型

请求前提示(Educate before asking)

预先请求(Ask up-front)

使用场景中请求(Ask in context)

使用场景中补充说明(Educate in context)

提供即时帮助(Provide an immediate benefit)

只请求相关联的权限(Only ask for relevant permissions)


2b8d596ac642a8012193a38f9bf4.jpg

 

- 用法  

权限组

权限被分为九组,其中允许用户通过一次操作授予全部权限。例如,授权联系人(Contacts)后能够查看和编辑联系人。


权限 描述
日历(Calendar
)
管理日历
相机(Camera
)
拍照和录像
联系人(Contacts) 管理联系人
位置(Location) 当前的设备位置
麦克风(Microphone) 录制声音
电话(Phone) 拨号和管理电话
传感器(Body Sensors) 心率及类似数据
短信服务(SMS) 发送和查看短信
存储(Storage) 访问照片、媒体和文件


暗指许可  

从用户操作可以看出其行为目的,比如:

  • 拍照

  • 选择一个联系人

  • 开始呼叫或发送信息

在以上这些例子中,你不难看出用户的行为清晰的表明了他们的目的,所以不需要相关授权操作。


开发者: Intents and Intent Filters


- 运行时权限  

应用可以在安装后的任何时间里请求访问权限或使用设备功能。当用户需要在应用中执行某项操作时,比如使用摄像头,应用会在此时请求该权限。


在任何应用安装后,用户可以随时在Android设置中允许或拒绝任何权限。


9f18596ac652a8012193a312386a.jpg

案例:一个应用的权限请求


请求模式  

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

9c8c596ac65da8012193a3552588.jpg

紧要的权限应预先请求。次要的权限可以在场景中请求。

对于那些意图表述不清晰的权限提供有关该权限的提示和帮助。无论在开始之前或是在使用场景中。


50cb596ac66aa8012193a3e09138.jpg

请求前提示

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


4424596ac679a8012193a3e2cf00.jpg

预先请求

在首次登陆后只请求重要、突出的权限。

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


4a1e596ac685a8012193a37be0d6.jpg

使用场景中请求

等待功能调用权限请求。

当用户想使用某个功能时,他更有可能会去允许该功能相关的权限。


8c06596ac693a8012193a34153ed.jpg

使用场景中补充说明

通过对权限解释,能够帮助预知用户需求以及提高权限的理解能力。


06e4596ac6cda8012193a3f67365.jpg

提供即时帮助

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


0e1a596ac6e9a8012193a3eba907.jpg

只请求相关联的权限

当一个功能需要多个权限许可的时候,那么一次性向用户请求完这些权限。


- 拒绝权限请求  

每当权限被拒后都需要提供反馈。因为拒绝某权限请求可能意味着阻止了某个功能按预期运作,所以,无论何时权限被拒后都需要向用户解释。


以下两种情况允许拒绝权限请求:

  • 用户主动拒接权限请求

  • 用户之前拒接该权限请求的时候选择了“不再询问”


ff82596ac6f6a8012193a3d985a6.jpg

图为snackbar中显示需要音频的使用权限。


关键性的权限

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

111b596ac702a8012193a3113bb8.jpg

图中屏幕显示应用正常运行所需权限,下面附带跳转至设置的链接。


   

 

十四、滚动(Scrolling techniques)  

滚动涉及到内容如何滚动以及滚动与应用栏(app bar)之间的关联。


下面这些模式对内容需要滚动的距离,如何设置弹性空间的大小,及什么时候固定某个元素不动进行了详细的描述。


- 应用栏可滚动区域 App bar scrollable regions  

状态栏(Status bar)

工具栏(Toolbar)

Tab/搜索栏(Tab bar/search bar)

弹性空间(Flexible space)


5e0a596ac765a8012193a3dbf65e.jpg

 

- 应用栏可滚动区域  

在设计滚动行为的时候需要考虑应用栏中包含的四个主要区域(称为块(blocks)),因为这些一起构建了整个滚动的结构:

  • 状态栏

  • 工具栏

  • Tab/搜索栏

  • 弹性空间:空间会随图片或应用栏展开来变化尺寸


024a596ac78da8012193a398e16e.jpg

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


86e0596ac7a4a8012193a3ea12d5.jpg

案例:状态栏,导航栏,Tab/搜索栏,和弹性空间


- 行为  

标准的应用栏

尺寸:

移动端上标准应用栏高是56dp,在大屏下高是64dp。


应用栏有两种滚动方式:

  • 当用户向上滚动内容时应用栏会跟随其移离屏幕,用户往回滚动内容时应用栏也会返回屏幕。

  • 当内容往下滚动时,应用栏会保持固定在顶部。


e769596ac7bba8012193a326b48a.jpg

标准应用栏

状态栏高:24dp

工具栏高:56dp / 64dp


e8d1596ac7d6a8012193a31af816.jpg

滚动期间工具栏离屏动效


应用栏和Tab

标准的应用栏中包括以下组件:工具栏,Tab栏,或弹性空间。


Tab具有以下任一特征:

  • 当工具栏移离屏幕时,Tab栏将固定在顶部。

  • 当内容向下滚动时,应用栏将固定在顶部。

  • 在内容向上滚动至工具栏移离屏幕及tab栏已固定在顶部的情况下,往回滚动内容时tab栏会跟随往回移动,当标签栏完全移动后工具栏会立马返回。


0d3d596ac7e5a8012193a3f67a8e.jpg

状态栏,工具栏和tab栏

状态栏高:24dp

工具栏高:56dp / 64dp

tab栏高:48dp


c2e4596ac810a8012193a351eee4.jpg

图中动效:当工具栏移离屏幕时,tab栏立即固定不动。


弹性空间

应用栏是有弹性的,所以它能够伸展以容纳更大的图像或排版。想要使应用栏能够伸展,需要添加弹性空间块。


弹性空间的表现方法:

  • 随着用户往上滚动内容,弹性空间会随之收缩,并在收缩至只剩工具栏时停止缩小,此时标题文本大小已经缩小为20sp。如果用户朝相反方向回滚,弹性空间和标题文本会再次伸展。

  • 在整个应用栏滚离屏幕的情况下,当用户往回滚动,工具栏会返回并固定在顶部。如果用户一直往回滚动内容,弹性空间和标题文本会随之伸展。


a206596ac8e9a8012193a396e062.jpg

状态栏,工具栏和弹性空间

状态栏高:24dp

工具栏高:56dp / 64dp


e6fc596ac8fba8012193a3a9ea01.jpg

内容滚动期间的弹性空间动效


弹性空间与图像 Flexible space with image

使用弹性空间来容纳应用栏中不同比例的图像。


在这个例子中,图像宽高比为4:3。当内容向上滚动时会把图像朝同一方向推移,同时弹性空间收缩。在整个运动变化结束时,图像会快速渐变成主颜色并停止滚动。


bd3d596ac909a8012193a38eae90.jpg

状态栏,工具栏和弹性空间

状态栏高:24dp

工具栏高:56dp / 64dp


52b5596ac91da8012193a3bd748d.jpg

内容滚动期间的弹性空间和图像动效


弹性空间与内容的叠盖 Flexible space with overlapping content

内容能够叠盖在应用栏上。


在此,应用栏有两种滚动方式:

  • 应用栏的位置最初在内容后面。当往上滚动时,应用栏的弹性空间收缩速度需要比内容快,直到内容不再叠盖在应用栏上时结束收缩。一旦应用栏结束收缩,其高度会抬高于内容之上,同时内容在其之下继续滚动。

  • 用户向上滚动内容时应用栏会跟随其移离屏幕,用户往回滚动内容时应用栏也会返回屏幕。


在此交互中,应用栏中不包含tab栏(tab栏不出现在此情况之下)。


fbce596ac92ba8012193a37b1a8e.jpg

弹性空间

状态栏高:24dp

工具栏高:56dp / 64dp


fbd2596ac940a8012193a3fa8fd5.jpg

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


116d596ac950a8012193a3e2d6d8.jpg

Z轴图解,侧视图


   

 

十五、搜索(Search)  

搜索能够帮助用户快速查找应用内容。


搜索能够帮助用户在一个信息量大的应用里面找到内容。


搜索选项

语音搜索

搜索建议

自动补全


搜索类型

固定搜索(Persistent search)

可扩展搜索(Expandable search)


f173596ac97da8012193a340078e.jpg

 

- 应用内搜索  

搜索能够帮助用户在一个信息量大的应用里面找到内容。


基本搜索包含以下步骤:

  • 开始搜索文本字段

  • 输入和提交查询

  • 展示搜索结果


另外,提供以下方法可以增强用户搜索体验:

  • 语音搜索

  • 在输入时提供基于用户近期历史搜索记录的搜索建议

  • 使用你的应用数据自动匹配、补全用户输入的信息


应用内搜索主要有两种模式,分别为:固定搜索和可扩展搜索。


固定搜索

当搜索是你应用的主要功能时使用固定搜索。


行为:

搜索文本字段嵌入搜索框中,时刻准备接收用户输入。用户也可以轻按麦克风icon启动语音搜索。


当搜索框获取焦点时,搜索字段展开显示历史搜索建议。同时,如果必要的话屏幕键盘也会出现。


选择任一搜索建议提交。轻按返回(up)按钮搜索框失去焦点,搜索建议和屏幕键盘消失。


9c40596ac99ea8012193a30b2223.jpg

固定搜索框


e8e9596ac9b0a8012193a3466c5b.jpg

搜索文本字段:已获取焦点


当用户开始输入时,历史搜索建议会转变为对用户输入信息自动补全的搜索建议。其中根据用户输入,系统会自动筛选、排序出最接近用户需要的查询信息。选择任一搜索建议或按下回车键提交查询。


轻按“X”可清除搜索框内的查询信息。


显示搜索结果时,搜索框仍然是可见的,但默认框内不会获取焦点。为了能够展示更多的搜索结果,屏幕键盘会消失。


搜索结果被格式化为卡片(card)的形式展示,原因是为了匹配搜索框的样式以及适应不同的搜索结果类型。


d87f596ac9c3a8012193a3a2922a.jpg

自动补全


dbd8596ac9d1a8012193a3571a42.jpg

搜索结果


可扩展搜索

当搜索不是你应用的主要功能时使用可扩展搜索。


行为:

只在工具栏中显示一个放大镜的icon,而不是显示整个搜索框。


轻按搜索(放大镜)icon,工具栏会发生变化:工具栏中的其他元素消失并显示搜索文本字段。如果支持语音搜索的话,麦克风icon也会出现。


搜索文本字段出现后会自动获取焦点,如果必要的话屏幕键盘也会显示,同时历史搜索建议也会出现在工具栏下方。最后用户可选择任一搜索建议提交查询。


轻按返回按钮可关闭搜索以及恢复工具栏最初样貌。


2195596ac9e0a8012193a32d64ac.jpg

可扩展搜索


86a0596ac9efa8012193a310475d.jpg

搜索文本字段:已获取焦点


当用户开始输入时,历史搜索建议会转变为对用户输入信息自动补全的搜索建议。其中根据用户输入,系统会自动筛选、排序出最接近用户需要的查询信息。选择任一搜索建议或按下回车键提交查询。


轻按“X”可清除搜索框内的查询信息。


显示搜索结果时,搜索框仍然是可见的,但默认框内不会获取焦点。为了能够展示更多的搜索结果,屏幕键盘会消失。


搜索结果被格式化为卡片(card)的形式展示并在工具栏下方的页面中显示。


af46596aca01a8012193a35de375.jpg

自动补全


ebe6596aca19a8012193a37eea0e.jpg

搜索结果


   

 

十六、选择(Selection)  

用户可以通过手势和视觉提示来进行选择。


复选框表示已完成,比如核对列表项目。

文本选择通过文字高亮的视觉效果表示已选择。


选择类型

列表选择

文本选择


选择手势

  • 在同一地方保持长按、轻按或鼠标按下一段时间。

  • 两指轻按(仅限触摸屏)


0997596acb26a8012193a3c4fe6c.jpg


- 用法  

选择的手势

选择数据的全局手势包括在同一地方保持长按、轻按或鼠标按下一段时间。在触摸屏中两指轻按也能触发选择。


复选框(建议在桌面端使用)

复选框(或其他自定义类型)仅作为表示已完成之用,比如核对列表项目。


复选框行为:

  • 当悬停在某个列表项目时显示该项目的复选框。

  • 在选择一个项目后,显示所有剩余项目的复选框。


列表项目中应避免长时间显示复选框。

 

- 项目选择  

项目选择允许用户选择特定的项目。


选择项目

在触摸设备上可以通过轻按一段时间去触发选择。


可以通过取消选择全部项目或执行某个工具栏中的事件退出选择。


0ec9596acb54a8012193a3f9d50b.jpg

在触摸设备上可以通过轻按一段时间去触发选择。


选择和取消选择

通过点击项目进行选择或取消选择。


通过长按并拖拽光标的方式选择多个项目。


ace4596acb75a8012193a39f4085.jpg

项目选择和取消选择。


1419596acb8ca8012193a3e0838a.jpg

用户可以通过长按+拖拽的方式选择多个项目。


桌面端

在桌面端上,光标悬停在某个项目上时会显示复选标记框,这表示可被点击选择。

3337596acbada8012193a3059ac1.jpg

在桌面端上,用户可以通过点击并拖动光标迅速勾选多个复选框的方式快速选择多个项目。


表示被选择

通过显示复选标记和背景交叠(scrim overlapping)被勾选项目(或相关头像)的方式来表示项目被选择。

3c00596acbdfa8012193a3119bf5.jpg

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


09f8596acbf6a8012193a3752214.jpg

使用小而简洁的复选标记来减少被遮挡的内容。


- 选择文本  

一段文字高亮显示表示该段文字已被选择。


在移动端上,被选择的文本首、尾会出现选择手柄。在选择文本区域的上方会出现一个下拉菜单(其中包含文本相关的操作),该菜单不会与选择区域重叠。


调整已选择文本

已选择的文本可以通过以下方式进行调整:

  • 一直拖动选择文本

  • 拖动选择手柄进行扩展或缩减选择范围

  • 反复轻按(或点击)已选择部分进行不断扩展(将会在单个文字,段落或所有文本中切换选择)

  • 键盘快捷键(见表格)


键盘快捷键 作用
Shift+左/右箭头 逐个字符选择
Shift+上/下箭头 逐行选择
Ctrl/Command+A 全选

文本选择的键盘快捷键。


文本的选择手柄

6bf9596acc0ca8012193a37c3858.jpg

案例:文本的选择手柄


2d22596acc1aa8012193a33bf134.jpg

案例:文本的选择手柄


颜色和对比度

使用你色板中的主色作为表示文本已被选择的视觉元素的颜色。


被选择文本的颜色应与背景颜色对比明显,使用户清晰易辨。其中,被选择文本可通过以下视觉元素进行反馈:文本轮廓,文本处理,动效或复选标记icon。


有关颜色对比度的信息请到此处查阅 webaim.org (或者参考 颜色对比度分析)。


47b9596acc3ea8012193a31bf6a7.jpg

  • 文本选择的颜色

  • 文本

  • 背景


e5f4596acc53a8012193a38d22f8.jpg

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


文本选择-浅色主题

085f596acc5ca8012193a3d1fd5a.jpg

文本选择-浅色主题


文本选择-暗色主题

d662596acc65a8012193a34053c8.jpg

文本选择-暗色主题


文本选择工具栏

文本选择区域上方会出现一个浮动工具栏,其主要提供用户以下操作:剪切、复制、粘贴及更多。当用户点选“更多”icon时,工具栏会立马折叠成一个二级菜单并显示其他附加的操作。


浮动工具栏文本字体为Roboto Medium 14sp,(英文环境下)全部大写。


3f53596acc6ea8012193a30eb1be.jpg

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


6bc6596acc77a8012193a3cfc9cc.jpg

更多


0b46596acc7fa8012193a3a5f523.jpg

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


d9b5596acc88a8012193a30bdf66.jpg

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


b666596acc92a8012193a30a94f1.jpg

文本选择部分

下拉菜单高:44dp

下拉菜单文本上内边距(padding):12dp

下拉菜单文本下内边距:14dp

下拉菜单文本左内边距:24dp

下拉菜单中文本项之间的间距:32dp

选择文本上内边距(选择文本区块与菜单的间距):8dp

“更多”icon的右内边距:16dp

“更多”icon的左内边距:22dp

“更多”icon的上、下内边距:10dp

文本的选择手柄:22 x 22dp


   

 

十七、设置(Settings)  

应用设置可以让用户自定义应用或者服务。

 

在你应用导航中的“设置”标签(label)下放置应用设置。


设置里面的控件包含着应用中涉及到用户自定义偏好的选项,其中包括那些很少使用但又不能缺少的功能。这些可自定义的选项可以从大多数用户需求出发设置,也可以站在少数用户角度为其提供自定义的选择。


放置位置的选择

侧边导航

工具栏菜单


设置组件

标签(labels)

次级文本

开关或复选框设置

状态


f439596accaaa8012193a34111e0.jpg


- 放置的位置  

应用中的所有设置应通过“设置”标签(label)打开。不要使用其他近义词标签,如“选项”或“偏好设置”。


侧边导航的情况

如果存在侧边导航(如抽屉式导航),则设置应该放置在所有列表项之下(除了帮助和反馈)。


应用没导航的情况

设置放置在工具栏菜单的所有列表项之下(除了帮助和反馈)。

fc03596accc9a8012193a3662c7e.jpg

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


aa5c596accd2a8012193a321e9c4.jpg

设置在工具栏菜单中的位置


 

- 用法  

设置中的选项应该是易于管理的,这些选项应有序排列并且具有可预见性。


概括描述

用户应该能够快速理解全部可用的设置选项是什么以及它们的当前值表示的意思。


如果设置中有很多个选项的话,那么用户最有可能感兴趣的选项优先级别应最高。那些不太重要的选项可以将它们群组并归为一个页面。


5fe9596accdba8012193a3ef553c.jpg

重要的设置选项显示在列表顶部


挑选合适的设置选项

适合于设置中的控件:

  • 用户偏好

  • 不常使用/访问的

  • 大多数用户需要用到的

  • 少数用户需要用到但不能缺少的

设置中不需要:

  • 经常使用的操作(将这些经常用到列表项放入到工具栏中)

  • 包含有关应用的信息,如版本号和授权信息(这些需要放入到帮助页中)

  • 用户帐号管理(这些操作需要放入到你应用的主要流程之中,如侧边导航中)


默认值需考虑周到

设定设置中每个选项的初始值应考虑到以下几点:

  • 大多数用户会设定的值

  • 中性且风险小的值

  • 电量消耗更少或调用较少的移动数据

  • 只有在发生重要情况时才打断用户


 

- 分组设置选项  

面对设置列表中拥有很多项的情况,你可以将它们分组成多个简短的小列表。根据你应用设置面板中的设置选项总数进行整理排序。


少于7项时

不需要对其进行分组。


8到10项时

对相关联的设置选项进行分组,一般分成1至2个组并用分隔线区分。其中需要注意的是以下设置选项不能参与分组:

  • 如果某选项很重要,将其置于顶部且不参与分组

  • 或者将这些重要的选项按重要性排序并分组放在设置面板底部,同时组命名为“其他”。


11到15项时

对相关联的设置选项进行分组,一般分成2至4个组并用分隔线区分。其中,你可以尝试将两个相关的选项整合成一个选项。

举个例子:两个相关的复选框选项可以整合成一个多选选项。


多于16项时

对相关联的设置选项进行分组,一般分为4个组以上。这种情况不采用分隔线区分方式,而是将它们放在一个个次屏(subscreen)下进行区分。然后使用符合组的术语为次屏的标题命名。

9014596ace99a8012193a3dc2815.jpg

“中断”项下的分组


de07596acea3a8012193a3a33c71.jpg

对相关选项进行分组并放置在次屏中

 

- 标签(labels)和次级文本  

标签

标签应表述简洁且易于理解。


标签需要注意:

  • (英文环境下)使用专有名词,且首字母大写。

  • 将标签中最重要的文字放在首位。

  • 避免使用消极词汇,如“不(Don't)”。改为使用中性词语,如“阻止(Block)”。

  • 使用非人称的标签,如“通知”而不是“通知我”。例外:如果是那些必须要让用户明白意思的重要设置选项,那么使用第二人称(“你”)而不要用第一人称(“我”)。


标签需要避免事项:

  • 避免使用通用名词(总称),如:设置、更改、编辑、修改、管理和选择。

  • 避免重复用词。

  • 避免使用技术性词语,除非你的目标用户能够理解。


次级文本

次级文本按实际情况添加。如果标签足够能说明白事情的话就不要添加次级文本辅助说明。

59f0596acefda8012193a34305e3.jpg

不可行

避免重复用词。


开关或复选框设置

需要精确描述的设置选项可以在标签下面添加单行说明。其中,说明应该注意以下两点:

  • 向用户清晰传达启用该设置选项时会发生什么

  • 避免使用和标签一样的词语

944c596acf09a8012193a3a62ffc.jpg

可行

说明以动词开头有助于用户理解。


需要较长篇幅解释的设置可以在子页面中添加说明。

f41f596acf16a8012193a339050e.jpg

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


26e0596acf1fa8012193a3a46cf6.jpg

将开关和大段说明文字放入到子页面中。


其他设置

对于那些非开关形式的设置选项,次级文本只显示当前设置选项的状态。

82b8596acf27a8012193a3048b48.jpg

可行


fb7d596acf2ea8012193a39bfad7.jpg

不可行


- 文字表达的建议  

简洁、直接、易懂。

8ba6596acf3ca8012193a3035c3e.jpg

可行


4c77596acf43a8012193a3cbc8d1.jpg

不可行


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

48d0596acf58a8012193a3cfe1d2.jpg

可行


5ebb596acf5fa8012193a34c751f.jpg

不可行


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

e3d2596acf66a8012193a3ca6210.jpg

可行

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


6879596acf6da8012193a3d8afa3.jpg

不可行


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

63b7596acf74a8012193a30c3e5a.jpg

可行


5195596acf7ba8012193a345126f.jpg

不可行


   

 

十八、滑动刷新(Swipe to refresh)  

结合用户手势,滑动屏幕手动刷新屏幕内容。

 

应用中有以下两种更新内容的方式:

  • 最好的方式还是自动更新内容(使用 sync),保持应用内容的自动更新。

  • 通过滑动手势即可滑动刷新,滑动刷新可用于列表开头,网格列表和卡片集合下按最近的内容排序方式的内容更新。


Icon

通过一个不断循环旋转的icon来表示内容正在刷新。icon具体是一个做圆周运动的弧形箭头。


位置

  • 只允许滑动刷新手势在内容顶部或底部触发。

  • 刷新标志默认的位置在刷新内容水平居中的地方


临界点

滑动屏幕超过一个临界点才会触发内容刷新。在滑动屏幕到触发刷新期间,刷新标志会随着滑动手势逐渐(涉及到icon的透明度、旋转速度和位置变化)出现,直到过了临界点自动旋转(触发刷新)。


4a49596acf9fa8012193a3f3af8d.jpg

 

- 用法  

滑动手势可用于列表开头,网格列表和卡片集合的内容更新触发(index 0)。


这个手势适用于那些经常需要更新的动态内容,同时更新的内容出现位置必须保持不变。这样用户就有很大机率在手势触发后看到更新的内容。


刷新标志

当刷新手势或用户操作触发后才出现刷新标志。系统自动更新不出现刷新标志。


作用

用户手动刷新后的视图会发生明显的变化,但这些变化不会明显到一般用户能够直接察觉。

举个例如,手动刷新后内容可能会被部分删除,重新排序,修改,以及插入项目内容或改变非当前视图的项目内容。

Swipe to refresh layout

通过垂直方向的滑动手势刷新内容


ae12596acfd2a8012193a3c6e4e6.jpg

滑动刷新动效


在以下几种情况下滑动刷新不可用:

  • 侧边导航

  • 主屏窗口小部件(widgets)

  • 可拖移的内容


5b5b596acfdda8012193a3b2d771.jpg

不可行

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


2ed1596acfeaa8012193a36528bd.jpg

不可行

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


517e596acff5a8012193a390b9cf.jpg

不可行

可拖移内容,如地图。其没有基本方向或内容来源供用户进行刷新触发。


 

- 位置  

手势定位

通常情况下,刷新手势除了可用于内容的顶部,也可用于内容的底部(比如,在聊天应用中)。


刷新标志的默认位置

刷新标志一直保持在刷新内容水平居中的地方。

08f7596ad000a8012193a389d711.jpg

可行


02ae596ad008a8012193a32697ab.jpg

不可行


759b596ad010a8012193a370c321.jpg

不可行


刷新标志活动的位置

刷新标志活动的位置在触发刷新后刷新标志会靠近更新内容顶部循环旋转的地方(表示内容正在更新)。


刷新标志活动的位置有助于调节促进布局上的视觉和谐。比如,刷新标志活动的位置刚好落在一个material的边缘或栅格线上。


5283596ad01fa8012193a321f8fa.jpg

可行


  ff09596ad02aa8012193a340e1fa.jpg  

不可行


 

- 行为特征  

刷新标志通过位移和/或缩放进入视图的同时会旋转淡入。


当刷新活动完成和新内容出现前,及用户没有离开当前视图时,刷新标志一直保持可见。


c0c3596ad099a8012193a35afcfb.jpg

可行

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


f9be596ad0a3a8012193a375368e.jpg

不可行

当触发刷新后刷新标志循环旋转时用户滑动屏幕,刷新标志如果跟随内容上移并隐藏了内容刷新的活动状态,就有可能导致用户误解刷新活动与视图中的特定组件(如卡片)相关联,而不是作用于整个视图的内容刷新。


刷新标志的进入

当其他平面在刷新内容所处面之上时(z-space),刷新标志从其他平面下面进入(从进入时被遮挡到完全可见)。


以下情况的刷新标志尺寸会随位移而增大:

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

  • 通过应用栏(app bar)或溢出菜单(overflow menu)操作发起的内容更新


e0b3596ad0aca8012193a3437b4d.jpg

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


9181596ad0b5a8012193a3de8706.jpg

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


5ec7596ad0c0a8012193a35a9a5f.jpg

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


3cd9596ad0cba8012193a33a3d6c.jpg

通过应用栏操作发起的内容更新


临界点要求

为了防止用户不小心触发内容刷新,那么需要规定手势滑动屏幕超过一个临界点的时候才会触发刷新。关于临界点的制定可以参考以下几点:

  • 渐入时达到100%不透明度

  • 旋转变慢时

  • 位移速度变慢时


超过临界点后开始内容刷新。


超过临界点后又反方向滑动超过临界点将取消刷新操作。


1
阅读原文
|
举报
|
2
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
钱包ui模板
【新年UI图标】30个图标
手表表盘UI系列
拟物风质感写实UI卡片合集源文件
APP/小程序商业项目UI模板|99个高保真UI+79个原型
新拟态风格 UI设计组件库
【新年UI图标】礼物/活动icon
高级感金属拟物 UI设计组件库
【新年UI图标】汽车icon
科技医疗透明柜UI界面设计
新能源APP应用UIKit
UI通用设计素材1
盲盒APP UI设计
我的钱包-UI界面设计-app
户外旅行飞机情侣假日出行
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
Security Camera UI kit
【新年UI图标】旅行icon
3D渐变流体抽象矢量UI背景图
智能家居中心 简约 UI设计组件库
【新年UI图标】会员icon
【新年UI图标】体育icon
【新年UI图标】钱包icon
你可能喜欢
大家都在看
登录注册