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

↑  点击上方蓝字,加个关注吧~ ↑话题:阅读类产品的交互设计该怎么做?本文共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

相关推荐

  • VR/AR开发程序中直接搜索Sketchfab的3D素材 / Vive Pro 如何买更省钱?/ Vulkan拥有直接内存分配器

    从今天起试试这个新形式,把重点的资讯提炼后合并成一条,欲知详情就摁紧二维码跳转阅读啦。我们依然尽量让这些从外媒翻译过来的信息以最合适的中文翻译方法论润饰和(或)修改后放在这里。有什么好想法新想法告诉我们!【Sketchfab推出新API,3D内容“搜索引擎”可植入VR/AR应用中】Sketchfab今天推出了最新的 Download API(下载API),允许应用开发者直接把Sketchfab内容导入他们的3D、VR和AR软件,这样就无...

    2018-03-21
  • 交互设计篇-如何处理需求

    如何处理需求,是产品经理的基本功,不管是来自老板还是客户的,亦或来自企业内部(运营、业务)及产品本身的发展,产品经理都需要把需求的收集、分析、管理做到有效进行。一、需求收集用户调研运用场景:产品规划初期或者遇到重大版本迭代,需要重新架构设计时,将会进行用户问卷、用户访谈的方式去挖掘用户的真实需求。基本方法:用户问卷-定量研究的方法,问卷问题一般为15个左右,包含用户基础资料信息(包括年龄、收入、教育水平等人口统计学范畴信息)和主观性的信...

    2018-05-06
  • Facebook的用户体验评判规则

    Facebook的产品设计五维情感精准定位——设计对受众定位清晰,符合该设计目标用户群的使用体验。亲和力——所有交互元素的设计上,用户对信息沟通顺畅,感觉似有人一般的亲和感。分享——承载对Facebook连接、自由、生活的文化认同。留恋度——给人超出想象的空间,让人留恋往返,对产品期待更多,得到二次访问。易用反馈及时——在交互过程中,用户的操作能够在屏幕上及时得到反馈效果,帮助用户提高效率。方位清晰——清晰的知道自己在那里,退路在那里,...

    2018-03-25
  • 《用户体验可视化指南》视频讲书(1)

    我们选择了人民邮电出版社2018年出版的《用户体验可视化指南》作为第一本,带着大家啃书。原因是这本书真的非 常 好,好到可以成为用户体验设计和研究领域的大辞典了。作者引经据典,却因为篇幅受限,很多没有详细展开。不知前因后果的读者,因此会错过很多有意思的观点。所以UXREN为你详细拆解《用户体验可视化指南》,每次10-20分钟,3首歌曲的时间,日积月累,透彻理解经典书籍。第1期: 前言《用户体验可视化》前言部分,介绍了为什么会提出共线图(...

    2018-03-27
  • 从用户体验的视角评析《CSR赛车》手游

    我最近一直在玩《CSR赛车(CSR Racing)》和《CSR赛车:经典(CSR Classics)》,在近期的游戏中我发现,Natural Motion在该系列的核心玩法、货币体系、社交机制和盈利模式中都引入了许多新的花样和用户体验功能,这些新元素的加入为游戏的某些方面带来了更好、更流畅的玩家体验。CSR系列专为手游玩家设计,会话时间极短(10-15秒),玩家们可以在忙碌的间隙进行一场快速竞赛,这是一个非常好的设计。在《CSR赛车》中...

    2018-03-07
  • 交互设计面试官想了解什么,你知道吗?

    丝路视觉新朋友可点击上方蓝字关注年后又是一波跳槽季,对于即将走出校园的小伙伴来说,春招也马上要开始了。今天推荐的这篇文章包含了校招过程中的所有技巧和秘籍,绝对良心面经。已有一些工作经历、现在想跳槽的朋友们也可以参考一下,不仅可以为准备的面试答案查缺补漏,也可以给心中留一个底。与面试官进行的交谈,每一句话都会影响面试官对你的判断,因此每次讲话都力求向面试官证明你是合适的人选,如果他无法从你身上获取到有效信息,自然会将你淘汰。然而很多同学在...

    2018-02-03
  • UED建筑品谈 | 昭君博物馆:土木轮回

    📌编辑 | F.项目竣工的下午,一片低黑的云朵重重地飘盖过来,浓烈的阳光穿过云缝狠狠地砸在了和周围土地一样色质的“夯土”表面上,一派陌上苍歌的景象。新的“土木”谦虚地溶嵌在大地之上,迥异的材料体验感却反而没有让建筑消失,熟悉得甚至可以忘记的“土”和“木”。体验变得几分陌生,他们与大地一同构建了令人难忘的场所。这让我想到几米漫画书里的句子:“……看不见的,看见了;遗忘的,记住了。”——曹晓昕主创建筑师曹晓昕中国建筑设计院有限公司副总建筑师...

    2018-02-02
  • 『设计|交互设计』2018年交互设计趋势解析

    本文转载自:设计前沿2018年交互设计趋势解析2018视觉趋势Pantone 2018流行色:紫外光色Pantone 官方翻译为「紫外光色」,紫外光色是强烈挑动思绪与深思的紫色调,传达独创性、创造力及前瞻性思维,为我们指向未来。彩通:18-3838 紫外光色颜色代码:#5f4b8bRGB:R 95,G 75,B 139CMYK:C 71,M 73,Y 7,K 8从2017年下半年开始,紫色配色的作品开始很多,所以2018年这个色也是一个...

    2018-04-25
  • 【招募】图书管理员、UI交互设计、手机软件开发,快来报名!!

    ↗点击上方“海淀教堂”关注我们📖海淀教堂为丰富教牧同工的阅读生活,正在建立图书馆,欢迎有图书馆管理或工作经验并有感动的弟兄姊妹积极参与此项事工。报名地点:三楼侍奉室边瑞霞同工 18514656724💻因事工需要,海淀堂网络组现招募UI交互设计,手机软件开发等技术义工,欢迎有相关恩赐的弟兄姊妹咨询报名。报名地点:三楼侍奉室李维萧同工 17600071627欢迎有感动的弟兄姊妹们参与进来!等待您的加入呢!耶稣爱你!名关注这里Address:...

    2018-04-15
  • 福睿斯幸福号春运列车的背后:营销回归用户体验

    爆竹声中辞旧岁,品牌送暖入屠苏。一年一度的春节,不仅是万家团圆的时刻,也是品牌们“秀肌肉”,送暖消费者的黄金期。每到这时,煽情、怀旧、调侃、明星、红包、互动……各大品牌总会使出浑身解数以俘获消费者“芳心”。而今年最暖的,莫过于福睿斯推出的“幸福号春运列车”。今年春节期间,长安福特福睿斯联手凤凰网、12306客户端、高铁杂志《旅伴》等平台,在1月30日至3月31日期间联手为春节回家的朋友打造往返于成都—上海的“福睿斯幸福号”专属列车(D3...

    2018-03-29