组件创新阿里把进度条装进Tab里,一个组件解决3大用户痛点

产品: 遨虾猎人: 大鱼大鱼吖观众: 7.4k人 时间: 2025-12-03

遨虾

与「遨虾」有关的细节还有 1查看全部

我也有新发现 我要投稿
阿里把进度条装进Tab里,一个组件解决3大用户痛点阿里把进度条装进Tab里,一个组件解决3大用户痛点

细节描述

大鱼大鱼吖: 当传统轮播点遇上 AI Agent,会碰撞出什么样的火花?阿里遨虾给出了一个让人眼前一亮的答案——一种少见,但用起来却无比顺手的轮播方式。 统的页面指示器(那几个不起眼的小圆点)消失了,取而代之的是位于图片上方或下方的一排文本标签(Tab)。这些标签不仅仅是静态文字,它们的背景融合了进度条(Progress Bar)的设计。当轮播图展示第一张内容时,对应的Tab不仅高亮,其背景会随着时间流逝像水流一样慢慢填满。这种「Tab+进度条」的合体,让用户不再面对抽象的符号(圆点),而是直接看到了具象的分类名称。它既展示了当前位置,又预告了剩余时间,还剧透了后续内容。 这个设计解决了传统轮播的三大痛点。首先,它让用户看得见全局——不用数小圆点,一眼就知道有哪些内容分类;其次,它让用户感知得到进度——进度条的流动给人一种时间可控的感觉,不会产生焦虑;最后,它让用户操作更主动——想看什么直接点,不用等轮播慢慢转。

9.534人评分
收藏 3
分享细节海报

发表评论 为下方 8 条评论点赞,解锁好运彩蛋

{{ moreBtnTxt }}

你可能还爱看

告别灰蒙蒙遮罩!这个App把功能介绍做成了「舞台表演」
⁠Into Wallet

引导设计告别灰蒙蒙遮罩!这个App把功能介绍做成了「舞台表演」

猎人 - 龙爪槐守望者9.0

如何让功能引导既能抓住用户注意力,又不会显得突兀和廉价?大部分App的功能引导确实存在这样的通病——要么是轮播图信息传达不够聚焦,要么用半透明蒙层盖住,只用箭头图标文字高亮需...

查看详情

#功能引导#情境式引导#格式塔

小宇宙APP:动效加载如何增强感知体验?
小宇宙

动效小宇宙APP:动效加载如何增强感知体验?

猎人 - Monster9.8

小宇宙APP 在用户点击「关注(订阅)」标签时,采用动效逐一展示订阅内容,显著增强了加载的感知体验。这种设计不仅让信息呈现更为流畅,也有效避免了突兀的感觉,让用户在等待时不再...

查看详情

#Tab#加载#动效

拍短视频总卡不准点?Instagram是如何解决这个设计难题的
Instagram

可视化设计拍短视频总卡不准点?Instagram是如何解决这个设计难题的

猎人 - 张老三9.0

为什么我们能轻松规划一小时的工作,却常常搞不定一段 15 秒的视频时长?答案不在于我们缺乏时间观念,而在于我们的大脑是否获得了足够直观的「掌控感」。在 Instagram R...

查看详情

#可视化#可视化反馈#所见即所得