一、亮点概述
这是设计师 @raul_dronca 在 X 上发布了一个利用 iPhone 灵动岛显示阅读进度的交互方案。
用户在浏览一篇长内容时，页面处于顶部，灵动岛保持默认的药丸形态，不做任何额外显示。当用户开始向下滚动页面，灵动岛从药丸形态过渡为一个进度条，进度条右侧显示当前阅读位置对应的百分比数字。滚到页面中部，进度条填充到一半，继续向下滚动，进度条持续增长，直到页面到达底部，进度条填满，右侧出现一个绿色的勾号图标。如果用户向上回滚页面，进度条会随之缩短，百分比数字同步减小，直到页面回到顶部，灵动岛恢复成最初的药丸形态。
这个设计方案，没有用到弹窗，没有浮层控件，进度信息完全依附在灵动岛的位置上。滚动触发显示，停止滚动后进度条保持当前状态，回到顶部则一切复原。
二、设计拆解
1. 用灵动岛承载进度，不占用内容区域
传统的阅读进度指示通常是出现在页面右侧的滚动条、页面顶部的进度条、或者浮动在页面边缘的百分比数字。这些方案都不得不在内容区域的边缘或内部划出一块单独的空间来放置进度信息，尤其在手机屏幕上，任何出现的额外元素，都会和正文内容争夺注意力。
而目前这个方案，换了一个思路——把进度信息放在了灵动岛上。灵动岛位于屏幕顶部居中的位置，在用户阅读内容时，这块区域同样也处于视线范围之外，用户的注意力集中在屏幕中部和下方的正文区域。进度条不会干扰阅读，但当用户想要了解自己读到哪里时，抬眼就能看到进度信息。进度信息和阅读内容在空间上完全分离，一个在屏幕顶部的硬件区域，一个在屏幕中下方的内容区域，互不干扰。
