Human Interface Guidelines — Progress Indicators

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Progress Indicators

Human Interface Guidelines链接:Progress Indicators

不要让人们盯着静态屏幕等待您的app加载内容或执行冗长的数据处理操作。 使用 progress indicator 让人们知道你的app没有停滞,并让他们知道他们还需要等待多久。

Activity Indicators

Activity indicator 在执行不可量化的任务(例如加载或同步复杂数据)时进行旋转。 任务完成时消失。 Activity indicator是不能交互的。

Progress Indicator

使用时注意

·使用progress bars而不是activity indicators

 如果活动是可量化的,则使用 progress bar 而不是 activity indicator,以便人们可以更好地估计正在发生的事情及其需要的时间。

·保持 activity indicator 运动

人们将静态的 activity indicator 与停滞的过程联系起来。 保持 activity indicator 旋转,让用户知道一些事情正在发生。

·如果有用,请在等待任务完成时提供有用的信息

在 activity indicator 上方添加标签以提供额外的环境信息。 避免像 loading 或 authenticating 这样的含糊术语,因为它们通常不会增加任何价值。


Progress Bars

Progress Bar 为一个从左向右填充的轨迹,以显示已知持续时间的任务的进度。Progress Bar 是非交互的,尽管它们通常伴随着用于取消相关操作的按钮。

Progress Bar

使用时注意

·始终准确报告进度。

不要显示不准确的进度信息,只是为了让app看起来很忙。 只对可量化的任务使用progress bar, 否则,请使用activity indicators。

·使用progress bars展示有明确时间的任务

Progress Bar 非常适合显示任务的状态,尤其是传达任务还需要多久才能完成的时候。

·在navigation bars和toolbars中隐藏轨道的未填充部分

默认情况下,progress bar 的轨道包含已填充部分与未填充部分。 在 navigation bars 或 toolbars 中使用(例如表示页面加载)时,应设定 progress bar 隐藏轨道的未填充部分。

·考虑自定义 progress bar 的外观以匹配您的app

Progress Bar 的外观可以进行调整来匹配app的设计。 例如,您可以指定自定义色调或图像来填充轨道和填充部分。


Network Activity Indicators

在除iPhone X之外的所有设备上,当网络连接时,network activity indicator 会在屏幕顶部的状态栏中旋转。 网络连接完成后,就会消失。 这个 indicator 看起来就像一个activity indicator,并且是非交互的。

Network Activity Indicator

使用时注意

·仅当网络操作要持续超过几秒钟才显示此indicator

不要在快速网络操作时展示该的indicator,因为可能在任何人注意到它的存在或意识到它的作用之前,它就消失了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LET

可视化之AQICN

1685
来自专栏数据小魔方

是时候展现真正的技术了——让你的图表舞动起来~

最近更新的频率越来越少了,因为我个人原因,各种事情在忙,实在对不起大家,今天写一篇补偿一下~ 既然写的少了,那么以后每写一篇,都会让技术含量高一些,这样才能对得...

3137
来自专栏菩提树下的杨过

silverlight4:摄像头占用状态检测以及二种截屏方法

状态检测主要包括二个方面:是否安装了摄像头,摄像头是否被其它程序占用 视频截图有二种方法:一是直接利用CaptureSource类的CaptureImageAs...

2159
来自专栏ThoughtWorks

TW洞见 | 可视化你的足迹

今日洞见 文章作者来自ThoughtWorks:邱俊涛。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,任何媒体、网站或个...

38012
来自专栏小白课代表

小白课代表的软件目录~还有大家的需求

1933
来自专栏前端说吧

Echarts - 树图实现四个层级

我相信很多人和我一样,制作echats图标时,都会先去demo官网找相同的或者近似的效果,然后再此基础上改进成我们想要的那个。

1942
来自专栏伪君子的梦呓

用 Python 查看微信好友位置信息

0 前言 上一次是用 itchat 这个包,然后把好友的性别比例打印出来,并且弄出了饼图和柱状图,今天还是使用 itchat 这个包,不过是用来看一下微信好友...

2975
来自专栏菩提树下的杨过

Flash/Flex学习笔记(12):FMS 3.5之如何做视频实时直播

硬件条件:一个摄像头 + 一台FMS服务器即可 原理:摄像头实时采集视频源,然后推送到FMS服务器,其它客户从FMS上获取视频流。 需要做二个fla,一个用于向...

1848
来自专栏数据科学与人工智能

【数据可视化】让效率“爆表”的49个数据可视化工具

工欲善其事,必先利其器。好的工具可以大大提升你的工作效率,并获得身边人的羡慕和赞赏。今天,我们就来向小伙伴们分享一大波非常实用的工具,武装你的大脑。 ▲图表类...

3607
来自专栏小白课代表

小白课代表的软件目录~还有大家的需求

1153

扫码关注云+社区