↑ 点击上方蓝字，加个关注吧~ ↑
话题：阅读类产品的交互设计该怎么做？
本文共1285字25图，预计阅读时间： 4分钟
阅读体验
阅读类的产品交互核心
所有阅读类产品围绕的产品核心是：阅读体验
好的阅读体验会让用户感到熟悉性，由于用户习惯长久的累积，对于阅读产品的使用逻辑，在用户脑海中已经有了一个基础的操作定位。在阅读体验中，不同习惯的交互动作设计所带来体验也不同，通过分析阅读产品中的交互方式，来解剖其交互中设计逻辑。
阅读方式
我们参考了三款阅读产品，根据产品的不同交互动作与习惯，将阅读方式分为两类：
01.左右翻页
交互动作：左右滑动
左右翻页是最常用的阅读方式之一，其方式来源于仿真，模拟真实读书时的动作，通过左右滑动屏幕或点击特定区域，来切换一整屏阅读内容。
QQ阅读的左右翻页做了拟真效果，使阅读时的拟真效果更佳，增加了设计的情感化。
02.上下浏览
交互动作：上下滑动
上下滑动阅读的浏览方式和翻页不同，它将一篇文章完整的展示在屏幕内，用户浏览时只需上下滑动阅读即可。这种阅读方式是最常见的浏览内容方式，它适用于所有产品类型的内容浏览。
03.自动阅读
自动阅读适用于长时间的阅读，且用户阅读时全神贯注，相对来说不够方便，它容易被许多元素打乱节奏，适用于安静的环境，用户全神贯注的阅读内容。
菜单功能交互
用户在阅读过程，会产生阅读功能需求，于是功能的诞生满足了用户更好的阅读体验，根据已有产品分析，在阅读中的功能大致分为以下四种：
功能的载体是菜单栏，菜单的设计是阅读时的辅助项，它承载了用户在阅读中所产生的大部分需求，通过菜单栏的功能调试，使用户的体验更佳。
QQ阅读
当当云阅读
网易蜗牛读书
菜单栏的交互很简单，设计师在界面中间设立了一个触碰区域，当手指触击区域时，菜单功能会自动在界面中弹出，再次触击会自动收回。
功能分析：目录查询
目录是传统阅读中的重要组成，它是对作品内容的一个缩略，一是方便用户的预览，二是用户可以快捷的跳转章节。
最佳交互：左侧边栏弹窗
在设计中，要避免跳转界面，界面的改变或跳转，会让用户感觉产生心理上的步骤和视觉上的跳跃，这种情况的最佳避免方法就是采用同一界面中的弹窗设计，它会让用户感觉一直停留在同一个界面中，在体验上更加方便。
当当云目录显示单章文字数量
功能分析：进度调整
用户可以调整单章节或全部的进度，来快速跳转，进度调整的设计有两个优点：
第一种是位置感：用户可以根据进度的推进来判断，这本书阅读了多少，还剩下多少。
第二种是记忆点：用户在使用产品时，会出现各种各样的情况，假如APP突然崩溃退出，或忘记存储书签（大部分都有自动记忆功能，不排除意外），阅读进度的记忆点会让用户对位置有一个大致的判断，并可以拖拉进度条来快速跳转。
当当云阅读进度跳转会显示字数和字眼
功能分析：书签与笔记
「 笔记 」
用户在浏览过程中对文章内容记录，可以写出即时读后感，设计关键词：即时，快捷，方便。
在交互上，手指长按选中文字的动作会弹出一个选项框，提示动作选项有复制，剪切，全选，阅读类产品则扩展了对于这个动作选项进行了功能扩展。
「 书签 」
书签的功能是为了记录文章阅读的位置，当当云阅读的阅读方式是左右翻页，在交互中，上下滑动的交互便成了空白，当当云阅读设计一个动作，用户下滑添加书签，再次重复动作则删除书签，非常方便。
功能分析：视觉设置
阅读的视觉设置是非常重要的功能，用户可以根据自己的阅读需求，来调整视觉设置，提高用户自身的个性化体验。
基础的视觉设置有哪些？
文字设置：字间距，字大小，字体
风格色彩：背景色彩与风格
阅读方式：可以调整阅读模式，左右翻页或上下滑动
明暗设置：调整亮度，夜间模式或白天模式。
QQ阅读
网易蜗牛读书
当当云阅读
QQ阅读的夜间模式按钮设计的情感化非常好，它在界面右上方做了一个拉绳，模拟灯的开关，用户可以便捷的调换明暗模式。
总结
阅读类产品的设计从仿真到结合，都是为了让用户使用产品时体验更佳，不同的是，它在视觉设置中给了很大的空间供用户去选择，用户可以根据自己的个人喜好和生理习惯去调试界面，在做类似产品时，以上的内容可以参考很多设计和功能，希望有所帮助。
- END -
欢迎将文章分享到朋友圈
内容原创，如若转载，请回复转载授权
获取素材请回复：笔刷/模板/设计手册/赐我英文字体/赐我好图/RM笔刷/中文
字体
▽ 上上上周精选 ▽
