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 条评论
登录 后参与评论

相关文章

来自专栏前端萌媛的成长之路

SEO

2972
来自专栏数据小魔方

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

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

3327
来自专栏ThoughtWorks

TW洞见 | 可视化你的足迹

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

38512
来自专栏iOSDevLog

ARKit by Example - 第1部分:AR立方体

这篇第一篇文章将使用ARKit创建一个非常简单的hello world AR应用程序。最后,我们将能够在增强的世界中定位3D立方体,并使用我们的iOS设备移动它...

1183
来自专栏FreeBuf

极客DIY:制作一款属于自己的街机

还记得那些给人带来乐趣的街机吗?你是不是也想拥有一款属于自己的街机呢?如果你有想法,那么就请看看我们的极客大神是如何DIY属于自己的街机的吧,相信你会大呼过瘾的...

5626
来自专栏LET

可视化之AQICN

2015
来自专栏小白课代表

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

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

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

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

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

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

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

2349
来自专栏Sorrower的专栏

GPU编程(二): GPU架构了解一下!

http://html.rhhz.net/tis/html/20150101.htm# http://hustcat.github.io/gpu-archit...

6542

扫码关注云+社区

领取腾讯云代金券