组件创新提升长文完读率的秘密:东方财富的进度滚动条设计

产品: 东方财富猎人: 龙爪槐守望者投稿: ErinCC 时间: 2025-10-15

东方财富

与「东方财富」有关的细节还有 1查看全部

我也有新发现 我要投稿
提升长文完读率的秘密:东方财富的进度滚动条设计提升长文完读率的秘密:东方财富的进度滚动条设计

细节描述

龙爪槐守望者: 你有没有过这种烦恼:在手机上看长文章,以为才读了一半,结果手指一滑就到了评论区?普通的滚动条总是把广告和评论都算进去,根本没法告诉你正文到底还有多长。 打开东方财富的资讯文章,你会在右下角发现一个红色圆形气泡,里面显示着"70%"这样的数字。这个设计很聪明:它不是传统的长条形进度条,而是用百分比数字直接告诉你——文章正文还剩多少没看。最关键的是,它只统计文章正文部分的阅读进度。 看长财经文章需要专注力,精确的数字能让用户心里有底,知道还需要投入多少精力,有效减轻了面对长文时的焦虑感,便于管理阅读时间。 不要盲目使用系统默认控件,要回到场景中去思考用户的真实目标。 系统默认的滚动条计算的是整个WebView的高度,但用户的目标是「读完正文」。这就是技术思维和用户思维的区别。我们在做设计时,要像东方财富这样,把噪点(广告、评论)剥离,只给用户看他们最关心的信号。

910人评分
收藏
分享细节海报

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

{{ moreBtnTxt }}

你可能还爱看

如何改善单手操作「微信读书」时的阅读体验?
微信读书

交互手势如何改善单手操作「微信读书」时的阅读体验?

猎人 - AmberDu小白8.0

在「微信读书」的「设置」菜单列表里,可开启「点击左侧翻到下一页」的功能。通常阅读场景里,翻页的点击或滑动区域都在屏幕右侧,如果出现左手单手操作手机的情景,使用体验就会十分不便...

查看详情

#交互手势#人性化#微信读书

如何优雅地在京东读书上跨页划线?
京东读书

微交互如何优雅地在京东读书上跨页划线?

猎人 - 龙爪槐守望者9.5

你是否也曾有过这样的阅读体验?在电子书上划线时,想要跨页标记,却总是找不到翻页的位置,要么费力地翻页,要么一不小心就翻过了好几页,影响阅读的流畅性。而京东读书的“对角翻页区域...

查看详情

#京东读书#微交互#翻页

马蜂窝的照片时间线,让游记带你去远方
马蜂窝

阅读体验马蜂窝的照片时间线,让游记带你去远方

猎人 - AmberDu小白9.0

冯至说「我们走过的城市、山川, 都化成了我们的生命」。如今旅行不再只是一种放松消遣方式的选择,对很多人而言更像是生活态度的展现。在马蜂窝旅游App上写游记,时间线会以照片年历...

查看详情

#信息呈现#旅游#时间线