Blinkist 是一家总部位于德国柏林的订阅式“知识精读”应用与服务，成立于2012年，由 Holger Seim 等人创办。它将非虚构类畅销书以及部分播客/专家内容提炼成约15分钟可读可听的要点摘要（Blinks）。

Blinkist 的 iOS 版本将书籍和播客的核心观点浓缩成可读文本和可听音频的摘要，帮助用户在碎片时间里快速获取要点。同时，它还提供了 Shortcasts 等播客短内容，以及每日精选和个性化推荐功能。这款应用非常适合在通勤或运动时进行学习。用户体验方面，Blinkist 支持离线下载阅读和收听，并提供将摘要发送到 Kindle 的功能。

接下来，我们将分享在体验 Blinkist（iPhone 版 v11.3.0）后总结的一些设计亮点。

1. 加载动画

Blinkist 的加载动画充满创意，它将品牌的 logo 简化为线性图标，既展现了简洁的视觉风格，又强化了品牌的辨识度。

2. 骨架屏

Blinkist 的加载骨架屏采用了常规的骨架屏加载模式。如果你对这种常见的加载模式不太了解，可以通过 Blinkist 来学习和体验。

新手知识点：什么是骨架屏？

骨架屏（Skeleton Screen）是一种常见的加载界面设计方式，通常用于提升用户在等待内容加载时的体验。当用户打开一个应用或网页时，内容还在加载，骨架屏通过展示灰色或模糊的框架布局（通常是占位符），模拟最终内容的结构，而不是直接显示一个空白的加载动画。

骨架屏的主要优点包括：

1.提高用户体验：相比传统的加载进度条或空白页面，骨架屏让用户在等待内容加载时，可以看到页面的基本布局和结构，从而减少焦虑感和不确定性。

2.减少视觉空白：骨架屏能够有效避免用户看到空白或等待中的“空白页”，让页面加载过程看起来更流畅。

3.提升品牌感知：骨架屏的设计可以与品牌的视觉风格相契合，进一步增强品牌识别度。

通常，骨架屏会使用简单的线条、矩形框等来代表图片、文本或按钮的最终位置，加载完成后，内容会填充进这些占位符中，用户能够快速看到完整的页面。

4. 状态栏图标

下是 Blinkist 状态图标的点击交互设计，希望能为你提供灵感，启发和帮助你完成具体设计。

5. 操作引导

在 Blinkist 的 "For You" 分类下，提供了清晰的操作引导。通过手势和内容的同步变化，用户可以轻松理解通过滑动屏幕来切换卡片。同时，该设计在用色和页面结构上与下方内容样式保持一致，使用户在操作过程中能够保持专注，避免页面跳跃

当用户在滑屏查看卡片内容时，中心区域的图片会有一个明显的放大效果，这个设计即增添了页面的趣味性，同时也起到了吸引用户点击的作用。

6. 数据采集

Blinkist 在数据采集上采用了一种创新的交互方式，通过用户为推荐书籍点赞来确认其兴趣点，从而进行内容推荐。每次 Blinkist 只推荐一本书籍，这种方式极大地帮助用户保持对当前选择的专注度

7. 内容搜索

Blinkist在触发和退出搜索状态时的一组交互动效，如果你对搜索设计缺乏相应的交互积累，可以在具体设计中，应用这套交互设计方法

如果你的设计方案中，搜索结果分为多种内容类型纬度，不妨参照Blinkist的设计方法，来完成设计

8. 按钮悬停

对于页面中的重要操作按钮，Blinkist 采用了一种固定式交互设计，无论用户滚动到页面的哪个位置，这些关键按钮始终会驻留在主屏幕上，始终处于可见状态，随时准备接受用户的操作。这种设计确保了用户在浏览内容时，能够快速、方便地进行核心操作，无需额外的滑动或返回到页面顶部，从而提升了整体的操作流畅性和用户体验。同时，这种始终可见的设计也增强了页面的可访问性，使得重要功能随时可触达，减少了用户操作的复杂度。

9. 背景内容可读性

Blinkist 在某些页面状态变化的设计上，提供了一个非常值得借鉴的交互思路。在初始状态下，页面上的文字和图标都是白色的，背景为黑色，这种设计在黑色背景上表现得非常清晰。然而，当用户向上拖动页面时，黑色背景逐渐变为白色，这时，文字和图标与背景的对比度可能会变得不够鲜明，为了确保文字和图标在任何背景下都能清晰显示，Blinkist 设计了一个深色的透明背景层。这个背景层的透明度从 0 渐变到 100%，随着背景的变化，确保了白色文字和图标始终能够在最佳可读性状态下呈现。

这种设计巧妙地解决了文字与背景色的对比问题，确保了内容在页面背景色变化时始终保持高可读性。对于我们在进行类似UI设计时，这种动态背景适配方式具有重要的借鉴意义，尤其是在需要应对复杂背景或用户交互时，如何通过渐变效果和透明度的变化来优化视觉效果和提高用户体验。这种设计不仅增强了页面的美观性，还确保了信息的传达不会因为背景的改变而受到影响，是一种非常有效的视觉和功能性平衡的案例。

10.分页标识

在下面这个案例中，Blinkist 采用了一种创新的分页标识方法，区别于传统的滚动条组件来显示页面位置和进度。传统的滚动条通常通过一个滑动条来表示用户在页面中的位置，然而，Blinkist 通过数字气泡来实现这一功能，提供了一种更直观且互动性强的方式。

具体来说，Blinkist 的分页标识采用了一个由数字组成的气泡系统，气泡的位置随着用户在页面上的滑动而动态变化。每个气泡都代表一个特定的页面，通过数字标记，用户可以清晰地看到自己当前所处的页面位置以及已经完成的进度。当用户拖动页面时，数字气泡的变化不仅帮助用户快速定位当前页面，还能即时反馈已浏览内容的进度，使得整个阅读过程更加有序且易于控制。

这种设计方式相较于传统滚动条，具有显著的优势。数字气泡不仅提供了更为精准的页面定位，还能通过气泡位置的变化直观地展示用户的进度，从而增强了用户对内容的掌控感。这一创新设计为我们提供了很好的启示，尤其是在需要进行内容分页或进度展示时，如何通过简洁、直观的交互方式让用户轻松获取信息，并提升页面的互动性和可用性。

11. 滑动清除

在 Blinkist 中，如果用户想要清除或关闭正在播放的内容，可以通过一种非常简便的操作方式：只需在页面常驻的播放条上执行左滑操作，即可将其清除。这种通过页面常驻播放条的左滑操作来清除内容的设计，简化了用户操作，提高了界面整洁度，并增强了交互的直观性和流畅性。

12. 分类选择

与国内产品设计不同，Blinkist 并没有设计一个显眼的分类页面，而是将主要的分类聚合到搜索页面的首屏上。用户只需滑动分类区块，即可查看不同类别的内容。这种设计与国内产品中的金刚区有些相似，都是常驻并便于快速访问，但在交互和页面结构上却有所不同。