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

↑  点击上方蓝字,加个关注吧~ ↑话题:阅读类产品的交互设计该怎么做?本文共1285字25图,预计阅读时间: 4分钟阅读体验阅读类的产品交互核心所有阅读类产品围绕的产品核心是:阅读体验好的阅读体验会让用户感到熟悉性,由于用户习惯长久的累积,对于阅读产品的使用逻辑,在用户脑海中已经有了一个基础的操作定位。在阅读体验中,不同习惯的交互动作设计所带来体验也不同,通过分析阅读产品中的交互方式,来解剖其交互中设计逻辑。阅读方式我们参考了三款阅读...

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


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

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

本文共1285字25图,预计阅读时间: 4分钟阅读类产品中的交互设计逻辑分析


 阅读体验 


阅读类的产品交互核心


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

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

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

                          

 阅读方式 


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

01.左右翻页

交互动作:左右滑动

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


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

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


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



02.上下浏览

交互动作:上下滑动

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


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


03.自动阅读


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

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



 菜单功能交互 


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

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

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


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

QQ阅读


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

当当云阅读

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

网易蜗牛读书


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

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



功能分析:目录查询


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

最佳交互:左侧边栏弹窗

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

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

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



功能分析:进度调整


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

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

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

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

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



功能分析:书签与笔记


「 笔记 」


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

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

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

「 书签 」


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


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



功能分析:视觉设置


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


基础的视觉设置有哪些?

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

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

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

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

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


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

QQ阅读

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

网易蜗牛读书

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

当当云阅读


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

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

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



 总结 


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




- END -


 欢迎将文章分享到朋友圈 

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

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

 字体 

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

 ▽            上上上周精选            ▽ 


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

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

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

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


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


原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35386/

(0)
交互精选交互精选
上一篇 2018-02-27
下一篇 2018-02-27

相关推荐

  • 交互设计毕业的小哥哥小姐姐都在做什么?

    Rania Svoronou作品Written In Sand | Interactive InstallationWalk Me | Internet of ThingsSound Clock | Internet of Things with IntelWhere Were You Last Night? | Art Intervention试听课开始啦,欢迎大家预约平面设计交互设计产品设计三大专业体验课开始啦,带着你的作品集,我们...

    2018-04-30
  • 【专访】全美交互设计No.1:卡内基梅隆的实验性字体设计课程

    卡内基梅隆设计学院美国最Top交互设计专业辛向阳老师毕业于此此学校的毕业生大多会输出到硅谷顶级的互联网公司:google\facebook等今期为大家推荐一位学生的学习心得周于阡Bettina Chou过去4年在卡内基梅隆大学,给了我许多机会学习各种各样的设计,不管是UX/UI, 传媒设计或课外作品,我都希望作品能给观众带来欢乐。我认为任何经验都能发出灵感,所以总是在吸收新东西。现在我正在:念村上春树写的 “Absolutely On ...

    2018-03-28
  • 12家公司2018春招开启,内推进行中!20W高薪岗位面向18/19届!

    春招现已全面开启cherry整理了春招开启以来还可以内推的公司请大家仔细浏览遇到心仪公司把握住机会不要错过拿到offer才是要紧事注:以下所有公司均可通过互联派内推,后台回复【内推】即可获得内推方式!可内推公司公司:今日头条面向人群:2018届&2019届工作地点:北京、上海、深圳、武汉职位分类:研发类产品类运营类市场类职能类网申时间:2月12日起网申地址:https://job.toutiao.com/2018/公司:蚂蚁金服面向人群...

    2018-03-03
  • 提升用户体验 抢占用户心智

    马云提出的新营销是连接线上线下的全新核心载体,超越单纯线上或者线下的全网营销概念。但华帝李洋认为,线上和线下只是连接用户的媒介,核心仍然是用户体验。抢占用户的心智,提升用户认知,是“新零售”的前提。打造新型厂商关系 构建全新服务体系在产品端,最初的模式是线上采用完全与线下独立的产品线,无论价格、卖点、功能配置都与线下产品区隔,线上和线下营销团队完全独立,各说各话。但随着时间的推移和互联网的蓬勃发展,这种割裂式的操作手法已经成为过去式。企...

    2018-03-29
  • 伦艺交互设计(MA)offer入手,工科出身、完全零基础的她是如何做到的

    对于零基础申请的同学来说,短时间内接触并掌握一个陌生的专业,既需要勇气,又需要决心。这是因为,科班出身的同学申请国外名校尚有难度,更何况是毫无专业基础的同学,过程中遭遇困难、挫折也可想而知。正因为申请难度大,如果能从其他同学的申请过程中吸取成功经验,规避问题,少走弯路,必然会有利于未来申请。本期,简清为同学们请到了拿下伦艺交互设计(Interaction Design Communication)专业offer的L同学,作为一名零基础申...

    2018-04-12
  • SketchOSM - 从现在开始丰富三维建筑地理信息吧

    SketchOSM是由出品PlaceMaker(一键三维城市)的团队最新出的一个插件,它可以让你在你设计场地的周边地区创建3D参数建筑模型。通过 SketchOSM 创建的模型数据可以直接发布到 OpenStreetMap 网站上,这是一个庞大的可自由存取和编辑的地理信息数据库,可以算是地理信息界的维基百科。之前紫天在使用 PlaceMaker 插件的时候所遇到的一个最大问题就是国内的三维建筑信息太少,有的话也非常不准确。现在有了Ske...

    2018-03-15
  • 交互设计之架构真经

    建立信息架构是交互设计师主要工作之一,是需求转向交互稿中非常重要的过程。一个架构的好坏决定这这个产品未来的命运,只有具有一个好的信息架构,才会具有一个好的产品体验。以下将从认识——前期工作——如何产出——如何判断,四个步骤来介绍信息架构。一、何为信息架构信息架构设计是对信息进行结构、组织方式以及归类的设计、好让使用者容易使用和理解的一项艺术与科学。这是比较官方的说法,简单通俗的说法就是对信息进行组织和层级分层。当我们一看到购物车这个信息...

    2018-05-01
  • 用户体验如何做到既简洁又安全?

    无可否认,这是最好的时代。移动支付如火如荼,人人只靠一部手机就能轻松走天下。但许多智能应用还没有跟上便捷的潮流,依然存在许多令用户抓狂的细节。比如当年春运抢票,逼死人的图形验证码让多少人大喊崩溃?还有,各种移动App那左等右等都等不到的短信验证码,也足以让用户“知难而退”。尤其是近些年来,随着手机取代钱包成为新一代支付手段,短信验证被大规模使用,注册APP或者付款,都绕不过短信验证这一关,但短信验证要耗时等待,还要手动输入,非常麻烦。许...

    2018-01-30
  • 「交互设计七大定律」在设计中的应用(二)

    今天给大家介绍的是:希克定律(Hick’s Law)。1、希克定律定义希克定律指的是:一个人面临的选择越多,所需要作出决定的时间就越长。用数学公式表达为:RT=a+blog2(n),其中,RT表示反应时间,a表示跟做决定无关的总时间,b表示根据对选项认知的处理时间实证衍生出的常数(这个例子对人来说约是0.155s),n表示同样可能的选项数字。比如,假设需要两秒测知警铃、了解其含义,接着假设按下五个按钮中的一个按钮,可以解决触动警铃的状况...

    2018-02-05
  • 输出专业交互设计文档清单

    原文转自:http://www.uisdc.com/export-professional-interactive-documents在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工作沟通, 还是方案评审的设计讲解,专业的交互设计师应该具备优秀的表达能力,不仅是语言方面的表达,交互文档的表达也尤其重要。交互文档是对接上下游岗位,利于协同团队工作的重要输出件。(本文会以 ...

    2018-03-25