赞助商
立即赞助

设计规范完全自学指南:进度指示器(附超多优秀案例)

UI设计3年前 (2021)发布 流光
3.3K 0 0

本文梳理了设计规范中进度指示的相关组件,包括分类和使用规则,还列举大量市面上优的上案例,更深一步探究对组件的使用。

基础组件

1. 组件定义

它是什?

进度指示器表示未指定的等待间或显示过程的持续间。使用活动指示器和进度条可以使人知道您的应用没有停止,并让知道要等待多长间。

那些需很时间能完的操作中,用户显示操作度的一种模式。

它什么作用?

  • 如果一个界面户在操作后,一没有反馈,户很容易就会失耐心,一个操作等待耗时超过两秒就可应此模式来展示当前进,户知道等待时间,降低焦虑,确保心确认感。
  • 反之,会引起用户负面情绪,导致直退出程序,引起疑惑,用户体验值偏低。

它使用规范是什么?

进度指示用户知正在进过程状态,例如加载应用程序,提交表单或保存更新。它们传应用程序状态并指示可用操作,例如用户是否可以离开前屏幕。个动态指示采用文或者图形指示都可以,它需要告诉用户以下几基础信息:

  • 当前操内容
  • 已经完成比例
  • 还需要多时间成
  • 是否可停止这项任
2. 使用原则

此类模需要遵从以下几原则:

  • 功能优先,进度指示器设计外观来反映流程状态,切勿视大功能。
  • 动画效,指示始终是动态,使用动画来吸引注意力并知用户活动进度。
  • 一致性,程序中一致的流程应一致的格式来展示。
3. 组建分类

载体展示方式层面

度指示器分两种,一种线性度指示器,一种圆形度指示器。应用程序中同样的场景选择一种指示器展示,比如首页的下拉刷新使用圆形度指示器,则该应用的其他下拉刷新的场景也请使用一致的圆形度指示器展示。

  • 线性进度指示器
  • 循环度指示器

设计规范完全自学指南:进度指示器(附超多优秀案例)

交互层

指示加载状态可以分为 2 ,是确定指示,是不确定指示。

  • 确定指示:加载时间量化,以检测到程完成率的情况下使用此类方式。
  • 不确定指示:记载时不可量化,法检测到进度情况下使用此类。

构成模式

1. 线性进度指示器

线性进度指示器通过可见轨道的长度来提示进度息,指标的行为取决于过程的进度是否已知。

加载进度条

加载进度条,在 iOS 系统中此类指示器的一种组件被称为 Progress Bars,即加载进度条。常规用于可确定指示,比如组件-加载进度条,常用于 h5 页面的加载。

不确线性度指示,指示沿轨迹行增或缩小表加载状态,直到加载完。

规则

  • 始终准确地报告进。线性指示器于可量的任务时,请准确地显示进,切勿为了看起来很忙而显示正确的信息。
  • 在导航栏和工栏中隐藏轨道的未填充部。默认情况下,进度条的轨迹包括填充和未填充部。当在导航栏或工栏中使用(例如表示页面加载),进度栏应配置为隐藏轨道的未填充部。
  • 可修改度条外观匹配应用。可以对踪填充指自义色调或图匹配产品品牌特性,增灵活度。

场景

载,整个页面载,通位于导航栏和工具栏的方。

设计规范完全自学指南:进度指示器(附超多优秀案例)

2. 循环进度指示器

指示沿不可见圆形轨进时针移动来显示进度。它们可以接应用于按钮或卡片等表。

在谷歌的系统中,此进指示器支持可量过程,支持可量过程。

  • 确定循环进度指示:指示过颜色填充 0-360 度不可见圆形轨。
  • 确定循环进指示器:指示器在可见轨道移时会增大和缩小。

确定循指示器—场景

载:确定循环进指示器在 iOS 系统中此类控件称为Activity Indicators(指示器),就是见的「菊转」。在执行无法量的任务(例如载或同步复杂数据)时,指示器会旋转。

设计规范完全自学指南:进度指示器(附超多优秀案例)

滑刷,在 Android 上,「滑刷」手势会显示一个圆形进指示器,指示正在刷界面。

设计规范完全自学指南:进度指示器(附超多优秀案例)

与他组件结合:圆形指示器还可在他控件,如按钮中使,代表作反馈的交互状态。

设计规范完全自学指南:进度指示器(附超多优秀案例)

不确定循环进度指示

Airbnb 首页走灯和进度条相结合,让用户在浏览 banner 时候知下张什么时候开始,用户感知预期,便于用户前内容专注。

设计规范完全自学指南:进度指示器(附超多优秀案例)

如何在产品中应用?

控件结合产品的品牌定位进行视上的整,增加情感化设计,提升用户验。现在很 app 在进度指示的控件设计上有很推陈出新的设计,给大家总结几种。

什么是情感化设计?本能 – 为 – 反思。

诺曼的情感设计,认为在任何设计中,本,行为和反思这个同层面相互作,影响情绪和认知。

在和产品的交互过程中,包含了功能、性能和可用性的体验,如果在本能-视觉层给予足够吸引力和染力,那将会在行为层响用户对产品的操作,最终的目的是促使反思层的反馈是正面的,积极的情绪,愉悦。足用户需求,从而最终触发用户对产品的情绪依赖。

1. 结合吉祥物设计

作为产品品牌的推广和宣传,将产品品牌素融进去,比如吉祥物的形状,颜色,插画等。

美外

美在加载和下拉刷新中都融入了吉祥物,并且计得非常有趣。吉祥物骑着动车在送外的景和实际美外送外的景非常相似,一致的认知模型让用户对品牌印象更加深刻,也让 app 多了一趣味性。

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

飞猪旅

飞猪 app 也是运用了祥物飞猪,结合旅游场景来做有趣动画设计。

在做画的时候对物体作的把控和场景心智模的符合要求较,简单的载画呈现背后需要对产需求有深刻的解。

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

闲鱼

闲鱼品牌升级以后,也 app 的不同场景中融入了品牌形象,并且不断迭中也对形象行升级。加载的待过程的确不会让人,但如果这过程中提供动趣的设可以帮用户转移注意力,提升好感。

设计规范完全自学指南:进度指示器(附超多优秀案例)

2. 结合产品logo设计

产品的 logo 也非常适融入在活动指示的计中。简洁了的展示品牌息,加深品牌印象。

马蜂窝

马蜂窝的产品 logo 呈现线性,计运用了线性进度指示器结循环展示的动画效果来展示 logo,进度展示的同展现产品 logo,简了的凸显品牌力量。

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

大众评

大众评在设计活动指示时候,结合自身 logo 时,也将用户在使用大众评时所期望有惊喜感,融入其,使简单 logo 瞬饱满,简单有趣。

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

还有一比淘票票,京东购物,网易考拉也做得很。

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

3. 结合产品理念设计

品过自身品定位,在加载刷新组件融入,满足用户本身使用品需求目标,并品价值进强化,完美传递了品理念,另也让品显更有趣味。

饿了么

饿了么 logo 也是属于简约型,单纯母和线条结合,在下刷新和加载设计上,融入了时概念,品 logo 和时效性相结合,动画做常有趣,也生动传递了品理念。

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

网易严选

网易严选的 logo 属于文字 logo,文字表力会比图形稍微弱一点,那么结合自身产品理念展示形象的处理方式也非常好,深入人。

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

有钱

有钱通过字母 logo 和金融类的产属性「钱币」相结合,直观简约,再上画效果表现使产带来的利益惊感,展现「日进斗金」的效果,户体验分。

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

KEEP

keep 产品的加载使用一个秒表的样式来现运动 app 的特,也是让人耳目一新。

设计规范完全自学指南:进度指示器(附超多优秀案例)

设计规范完全自学指南:进度指示器(附超多优秀案例)

总结

最后总结一下以上所梳理的内容,首先是对计规范中进度指示相关组件的类和了解,以及使用规则。然后再列举了大量市面上优秀的线上案例,更深一步探究对组件的使用。

设计规范完全自学指南:进度指示器(附超多优秀案例)

欢迎关注作者的公众号:「夏」

设计规范完全自学指南:进度指示器(附超多优秀案例)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

前言 随着直播的发展,秀场直播出现了各种形式,在直播间里衍生出了越来越丰富多样的玩法,多人连麦直播则是近年来衍生出的另...
企鹅电竞
编者按:为另外一个国家的客户以及用户设计应用的时候,文化的碰撞总是免不了的。当 Tubik Studio 面对中国甲方的时候,同样...
App设计
编者按:本文网易设计师用「FishDesign企业级UI组件库」项目为例,通过在网易七鱼产品中的应用,来介绍一个企业级 UI 组件库...
B端设计
本篇文章的价值:看完之后可以独立统筹整个产品的全局设计。 做从 0 到 1 的产品时,在设计产品功能的交互流程和 UI 设计中...
ui设计
编者按:一个合格的 UI 按钮到底需要具备什么样的素质?在很多设计师眼里似乎并不是一个太大的问题的,但是在实际设计的时候...
ui设计
照片是记录生活的重要手段,在智能手机如此普及的今天,谁的手机里面又没有几百上千张照片呢?这些记录关键时刻的图片,对于...
Tubik Studio
越来越多的设计师和设计团队开始选择使用 Figma 来进行 UI 和产品设计了。 凭借着快速发展的社区和大量的第三方插件、服务以...
Figma
也许你是个新手设计师,也许你是个有着丰富开发经验的开发者,但是有需求让自己设计的网页和UI看起来更像那么一回事,至少看...
ui设计