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

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

遨虾

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

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

细节描述

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

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

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

{{ moreBtnTxt }}

你可能还爱看

为什么淘宝和抖音抛弃了传统标题栏?
淘宝

提高转化为什么淘宝和抖音抛弃了传统标题栏?

猎人 - 龙爪槐守望者9.6

在移动端界面设计中,标题栏是一个重要组件,通常位于屏幕顶部,用于显示页面标题和提供返回功能。但随着用户对界面操作日益熟悉,标题栏上的标题常常显得多余——用户打开页面时往往能一...

查看详情

#提高转化#标题栏#电商

轮播图还能这样玩?Spotify设计团队的创意大揭秘!
Spotify

设计彩蛋轮播图还能这样玩?Spotify设计团队的创意大揭秘!

猎人 - 龙爪槐守望者8.7

Spotify 设计团队对细节的重视,往往能让用户耳目一新。比如,他们将设计团队博客网站轮播图设计成了音乐播放控制的样式。这种巧妙的设计,不仅让网站的轮播图变得与众不同,更是...

查看详情

#Spotify#情怀#视觉

Dia浏览器如何打破界面设计常规,实现自然流畅的视觉过渡?
Dia浏览器

视觉设计Dia浏览器如何打破界面设计常规,实现自然流畅的视觉过渡?

猎人 - 龙爪槐守望者6.5

每天我们都要用浏览器中浏览海量网页,你有没有想过多页签、地址栏、工具栏这三块叠在浏览器上的组件还有设计优化的空间?Dia 浏览器的巧妙设计打破了这一僵局。在选中某个Tab后,...

查看详情

#Tab#多页签#沉浸式设计