恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
身为设计师,实在很佩服这9个‘进度条’设计!值得收藏
0.0°
2022-11-28 原创文章 经验/观点 举报 569 2 3 0

‘进度’是APP里最常见又挺重要的模块,因为它不仅承载着了用户在时间和行为上的操作记录,更是引导用户完成各种目标的条件之一。

因此带大家看下有哪些‘进度’上的小案例,给你的工作需求、作品集提供灵感来源~


01.等待过程换成领取红包

案例简介:

在花小猪里等待司机接单时,下方会展示【领取红包】的进度条,等待时间越久,得到的红包越多越大。

解决问题

用红包来缓解用户的等待情绪,降低因等待时间过长 而「取消打车」的意愿与漏斗,促使用户继续等车

640.jpeg

创造价值:促进 订单成交率和用户好感度的提升

案例精髓总结:学会思考通过「停留时间」判断用户诉求/引导用户行为

其他思考:如果在等待过程中凌冷一俩个红包,后面师傅又临时取消订单了。此时得到的红包是否会收回?或者有使用条件


02.用进度条鼓励用户输入

案例简介:

在美团上评价某服务时,会以进度条的方式鼓励用户更多评价:根据【输入文字数量】而动态展示距离【获38积分进度】。当达到38积分后,再输入文字而无配图时,进度条的加载速度会变慢,直到用户配上图片时才能获取138积分。

解决问题:

通过进度条的变化与积分奖励提示,引导用户输入更多评价,为后续其他用户看到更多真实、可参考的评价内容。

640.gif

创造价值:促进 优质/有效评价的增长

案例精髓总结:意外的赠品/福利 可提升用户积极性 or 促进产品目标的实现

其他思考:运用了「系统状态可见性原则」:让用户知道【自己在做什么、系统在做什么、处在系统的什么位置等】,并在适当的时间内做出适当的反馈运用了


03.用残缺图形引导流程

案例简介:

在谷歌日历创建某个目标时,每到一个步骤时下方的图形都只会显示一部分。只有完成全部步骤,该图形才会完整地显示出来,引导用户创建完整内容以看到完整图形,特别地’鸡贼’。

解决问题:

通过残缺的图形勾起用户好奇心,引导用户创建完整内容以看到完整图形,减少流失,增强产品趣味性640-1.jpeg

创造价值:提升用户对产品理解和APP易用性的提升

案例精髓总结:视觉元素也能跟随进度逐步显示,慢慢勾起用户好奇心

其他思考:运用了「系统状态可见性原则」:让用户知道【自己在做什么、系统在做什么、处在系统的什么位置等】,并在适当的时间内做出适当的反馈运用了


04.可视化的等级进度

案例简介:

在腾讯视频上喜欢、守护某个爱豆,可以看到会以【女生奔跑】的动画形象来表示当前的粉丝值,将对爱豆的守护进度可视化出来,特别好玩。

解决问题:

有效地传达出粉丝对爱豆的守护心理,让用户感知当前守护进度,给用户带来惊喜并拉进之间的距离

640-5.gif

创造价值:促进 产品趣味性与用户好感度的提升

案例精髓总结: UI与动效的设计需要符合目标用户的群体特征

其他思考:

1.粉丝不知女生才有,人物形象的设计可允许男粉用户切换性别 

2.人物形象的设计与‘粉丝’没啥关系,体现不出粉丝应有’开心、疯狂、应援’等元素,更像一个健康跑步达人。更多行业案例、大厂例子、创意彩蛋,上【有蛋案例】http://youdananli.com


05.文章进度「可视化」

案例简介:

在电脑上打开boss直聘的文章链接,滑动屏幕时就会出现一个【文章进度条】,跟随用户的阅读位置而变化长度。

解决问题:

用户一眼就能知道当前的阅读进度、知道还有多久就能读完该文章,减少操作与认知负荷。


640-2.gif

创造价值:促进用户的阅读效率与观看体验的提升

案例精髓总结:当信息复杂+数量巨大时,必须给予用户清晰的分类与状态、位置指引

其他思考:这个虽然是用微信的浏览器加载的,但是里面的内容确是boss直聘自定义开发的。而且听说原本的设计花花绿绿的,是boss直聘的老板说改的


06.自动恢复上次阅读进度

案例简介:

在微信上查看某篇公众号文章,当你有事要返回上一页,然后又重新点击阅读文章时:

会自动加载至上次退出前的页面位置,帮助用户恢复上次的阅读进度,便于继续阅读下去,彻底解放双手。

解决问题:

免去用户重新or手动查找上次的阅读进度,减少操作与认知负荷,突显产品的个性化服务


640-3.gif

创造价值:促进 文章阅读效率与产品体验的提升

案例精髓总结:尽量减少需要用户记忆的事情/行动,提供「再认」上的解决方案

其他思考:

如何判断是重新加载or恢复阅读进度,是时间为分界点? 当离开文章小于5分钟则恢复阅读进度,大于或扥等于5分钟则重新加载。更多行业案例、大厂例子、创意彩蛋,上【有蛋案例】http://youdananli.com


07.有吉祥物的banner进度

案例简介:

腾讯动漫的banner进度条设计与品牌的吉祥物结合在一起,banner切换的时候底部的小乌鸦会跟着一起移动,特别有意思。

解决问题:

降低banner给用户的抵抗情绪,通过这种小细节提升品牌形象(特别是对于新用户来说),突显产品的个性化服务与对用户的重视程度640-4.gif

创造价值:促进 产品趣味性与用户好感度的提升 

案例精髓总结:任何页面组件/样式都可融入品牌设计 

其他思考:运用了「趣味原则」:系统不应该是冷冰冰的,应该给用户带来乐趣和温度


08.分散注意力的loading

案例简介:

王者荣耀在即将对战的loading里,左边会显示所选英雄的使用技巧,右边会显示各个队友的头像与小拳头动效。为一触即发的比赛打气加油,特别有意思

解决问题:

分散用户注意力,减少因加载过久的焦虑和抵触情绪,同时做好雨后的「战前动员」工作,增加团队配合默契


640-5.gif

创造价值:提升产品的趣味性和用户好感度

案例精髓总结:UI与动效的设计需要符合产品调性、用户特征/诉求 

其他思考:分析/检测用户当下的情绪/心理,并做出相对应的设计


09.越来越快的进度动画

案例简介:

去哪儿旅行之前的loading动画是一只行走的小骆驼,随着加载时间越长,骆驼的行走速度会越来越快,最后飞奔起来。避免过长的加载时间给用户带来焦虑情绪,缓解用户情绪

解决问题:

避免过长的加载时间给用户带来焦虑情绪,缓解用户情绪。同时通过这种小细节提升用户对产品的印象(特别是对于新用户来说)

640-6.gif

创造价值:减少页面/订单流失和用户焦虑感

案例精髓总结:用户等待时间越长,越需要合理的设计or福利 减少焦虑

其他思考:这是「时间」维度下的跟随变化而变化,可以思考自家产品是否有特定维度下的跟随变化


- END

你还见过哪些有意思的案例、彩蛋呢?欢迎发言讨论~


Powered by Froala Editor

微信公众号:有蛋案例 Youdananli.com

更新:2022-11-28

收藏

2人已收藏

和出此严

个人网站:有蛋案例 Youdananli.com

  • 22

    作品

  • 1164

    粉丝

  • 0

    关注

  • 结合案例 | 思考交互设计的价值!别再说我们只会画原型了!
  • 用户等得不耐烦?这6个技巧轻松搞定ta
  • 你会不会搞混:这3组相似的数据指标?
  • 这11个设计案例,真的很走心~
相关标签

    猜你喜欢

      2022-11-28 原创文章 经验/观点 举报 569 2 3 0

      身为设计师,实在很佩服这9个‘进度条’设计!值得收藏

      0.0°

      你确定要举报身为设计师,实在很佩服这9个‘进度条’设计!值得收藏

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年11月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录