微信热点

阅读类产品中的交互设计逻辑分析

0
登录或者登记去做吧。

↑  点击上方蓝字,加个关注吧~ ↑


话题:阅读类产品的交互设计该怎么做?

本文共1285字25图,预计阅读时间: 4分钟


 阅读体验 


阅读类的产品交互核心


所有阅读类产品围绕的产品核心是:阅读体验

好的阅读体验会让用户感到熟悉性,由于用户习惯长久的累积,对于阅读产品的使用逻辑,在用户脑海中已经有了一个基础的操作定位。在阅读体验中,不同习惯的交互动作设计所带来体验也不同,通过分析阅读产品中的交互方式,来解剖其交互中设计逻辑。

                          

 阅读方式 


我们参考了三款阅读产品,根据产品的不同交互动作与习惯,将阅读方式分为两类:

01.左右翻页

交互动作:左右滑动

左右翻页是最常用的阅读方式之一,其方式来源于仿真,模拟真实读书时的动作,通过左右滑动屏幕点击特定区域,来切换一整屏阅读内容。


QQ阅读的左右翻页做了拟真效果,使阅读时的拟真效果更佳,增加了设计的情感化。




02.上下浏览

交互动作:上下滑动

上下滑动阅读的浏览方式和翻页不同,它将一篇文章完整的展示在屏幕内,用户浏览时只需上下滑动阅读即可。这种阅读方式是最常见的浏览内容方式,它适用于所有产品类型的内容浏览。



03.自动阅读


自动阅读适用于长时间的阅读,且用户阅读时全神贯注,相对来说不够方便,它容易被许多元素打乱节奏,适用于安静的环境,用户全神贯注的阅读内容。



 菜单功能交互 


用户在阅读过程,会产生阅读功能需求,于是功能的诞生满足了用户更好的阅读体验,根据已有产品分析,在阅读中的功能大致分为以下四种:

功能的载体是菜单栏,菜单的设计是阅读时的辅助项,它承载了用户在阅读中所产生的大部分需求,通过菜单栏的功能调试,使用户的体验更佳。


QQ阅读


当当云阅读

网易蜗牛读书


菜单栏的交互很简单,设计师在界面中间设立了一个触碰区域,当手指触击区域时,菜单功能会自动在界面中弹出,再次触击会自动收回。



功能分析:目录查询


目录是传统阅读中的重要组成,它是对作品内容的一个缩略,一是方便用户的预览,二是用户可以快捷的跳转章节。

最佳交互:左侧边栏弹窗

在设计中,要避免跳转界面,界面的改变或跳转,会让用户感觉产生心理上的步骤和视觉上的跳跃,这种情况的最佳避免方法就是采用同一界面中的弹窗设计,它会让用户感觉一直停留在同一个界面中,在体验上更加方便。

当当云目录显示单章文字数量



功能分析:进度调整


用户可以调整单章节或全部的进度,来快速跳转,进度调整的设计有两个优点:

第一种是位置感:用户可以根据进度的推进来判断,这本书阅读了多少,还剩下多少。

第二种是记忆点:用户在使用产品时,会出现各种各样的情况,假如APP突然崩溃退出,或忘记存储书签(大部分都有自动记忆功能,不排除意外),阅读进度的记忆点会让用户对位置有一个大致的判断,并可以拖拉进度条来快速跳转。

当当云阅读进度跳转会显示字数和字眼



功能分析:书签与笔记


「 笔记 」


用户在浏览过程中对文章内容记录,可以写出即时读后感,设计关键词:即时,快捷,方便。

在交互上,手指长按选中文字的动作会弹出一个选项框,提示动作选项有复制,剪切,全选,阅读类产品则扩展了对于这个动作选项进行了功能扩展。

「 书签 」


书签的功能是为了记录文章阅读的位置,当当云阅读的阅读方式是左右翻页,在交互中,上下滑动的交互便成了空白,当当云阅读设计一个动作,用户下滑添加书签,再次重复动作则删除书签,非常方便。




功能分析:视觉设置


阅读的视觉设置是非常重要的功能,用户可以根据自己的阅读需求,来调整视觉设置,提高用户自身的个性化体验。


基础的视觉设置有哪些?

文字设置:字间距,字大小,字体

风格色彩:背景色彩与风格

阅读方式:可以调整阅读模式,左右翻页或上下滑动

明暗设置:调整亮度,夜间模式或白天模式。


QQ阅读

网易蜗牛读书

当当云阅读


QQ阅读的夜间模式按钮设计的情感化非常好,它在界面右上方做了一个拉绳,模拟灯的开关,用户可以便捷的调换明暗模式。



 总结 


阅读类产品的设计从仿真到结合,都是为了让用户使用产品时体验更佳,不同的是,它在视觉设置中给了很大的空间供用户去选择,用户可以根据自己的个人喜好和生理习惯去调试界面,在做类似产品时,以上的内容可以参考很多设计和功能,希望有所帮助。




- END -


 欢迎将文章分享到朋友圈 

 内容原创,如若转载,请回复转载授权 

 获取素材请回复:笔刷/模板/设计手册/赐我英文字体/赐我好图/RM笔刷/中文 

 字体 

 ▽            上上上周精选            ▽ 




为了更好的用户体验,谷歌拿出了“大棒”与“胡萝卜”
UI交互设计只需掌握这3点