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

相关文章

来自专栏林德熙的博客

win2d CanvasRenderTarget vs CanvasBitmap 为何 Rendertarget 不需要 LoadAsync

最近在做离线渲染就发现了 CanvasRenderTarget 和 CanvasBitmap 不知道为什么需要 CanvasBitmap 感觉 CanvasRe...

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

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

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

3177
来自专栏哲学驱动设计

Rafy 领域实体框架 - 领域模型设计器(建模工具)设计方案

去年4月,我们为 Rafy 框架添加了领域模型设计器组件。时隔一年,谨以本文,简要说明该领域模型设计器的设计思想。 设计目标 Rafy 实体框架中以领域驱动设计...

25110
来自专栏xingoo, 一个梦想做发明家的程序员

我的AI之路 —— OCR文字识别快速体验版

还记得前一阵某小盆友拿过来一个全是图片的ppt,让我把里面的文字给抠出来(我当时很震惊!!!),随后在网上随便找了个OCR的在线文档转换软件,就给转过来了——这...

1692
来自专栏Python攻城狮

利用简书首页文章标题数据生成词云1.词云图2.推荐几个不错的词云图工具3.爬取数据,制作词云图

词云图,也叫文字云,是对文本中出现频率较高的“关键词”予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,使得浏览者只要一眼扫过文本就可领略文本的主旨。

1342
来自专栏LET

可视化之Earth NullSchool

1664
来自专栏FreeBuf

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

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

2156
来自专栏iOSDevLog

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

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

873
来自专栏SAP最佳业务实践

SAP最佳业务实践:MM–批次管理的库存物料采购(901)-4收货开票

4.6 MIGO_GR批次管理的收货 后勤 -物料管理 -库存管理 -货物移动 -收货 -对采购订单 -采购订单的收货 (MIGO) 因为采购订单,系统要求...

4127
来自专栏Sorrower的专栏

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

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

1702

扫码关注云+社区