移动端图片阅读—交互设计分析

↑点击上方蓝字,加个关注吧~↑今天老冰给大家分享一个移动端图片浏览的交互方式这个APP的阅读教程中,一共介绍了四种交互方式,左右滑动翻页浏览,上下滑动阅读更多,下拉放大图片,侧划查看时间线以往资讯。在这里并没有介绍左滑,有人问,左右滑动不就是左滑吗?其实,并不是,当你位于第一张图片时,也就是现在左滑已经没有内容了,此时你的左滑便有了刷新的作用,不同于其他(很多app刷新都是下拉刷新),这也是值得称赞的地方,它通过自己的交互思维,产生了自...

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

移动端图片阅读—交互设计分析



移动端图片阅读—交互设计分析


今天老冰给大家分享一个移动端图片浏览的交互方式


这个APP的阅读教程中,一共介绍了四种交互方式,左右滑动翻页浏览,上下滑动阅读更多,下拉放大图片,侧划查看时间线以往资讯。


移动端图片阅读—交互设计分析

在这里并没有介绍左滑,有人问,左右滑动不就是左滑吗?其实,并不是,当你位于第一张图片时,也就是现在左滑已经没有内容了,此时你的左滑便有了刷新的作用,不同于其他(很多app刷新都是下拉刷新),这也是值得称赞的地方,它通过自己的交互思维,产生了自己交互模式,而不是一贯的去采用别人的交互方式。


移动端图片阅读—交互设计分析

移动端图片阅读—交互设计分析


主界面交互分析


内容列表


移动端图片阅读—交互设计分析


但是设计者在设定属性时,考虑到它是一个即时类新闻资讯app,所以在更多内容的选择和筛选上,采用了时间线的方式,这样用户就可以通过选择时间来找内容。


点击右上角更多

移动端图片阅读—交互设计分析

但是从另一种维度来讲,在更多内容筛选上,它没有根据新闻内容分类,对于用户来说,不便于针对性的找内容。

但是,基于产品属性的交互方式来看,它似乎就是一款随机阅读的app,有的用户并不知道自己到底需要阅读哪一类的内容,在之前,你应该遇到过这种app,它会给你兴趣选择去引导你关注一些内容,比如:音乐,电影,设计,军事,文学,等等。但它并没有这样做,它就像是一个报纸,内容每天都在更新,而且是最新的,而它的推荐内容,包含各国各地的军事,文化,风景,民俗,它是在为你提供最新的内容,而不是针对你提供喜欢的内容,它的属性优势就在于即时这两个字。


但是它还是对内容的属性划分做了分类,但这个分类不是你的选择分类,而是对自己发布的内容进行属性分类(下图分类:环境与自然)


移动端图片阅读—交互设计分析

这个分类可以点击,点完之后,将进入到它的内容专题页,里面收集了之前关于它的所有内容,这个也是比较有意思的,它也是另一种筛选,依旧采用时间线的方式,只不过内容更加垂直。


移动端图片阅读—交互设计分析

移动端图片阅读—交互设计分析

底栏交互分析


位置与距离

在底栏,我们会发现左下角很意思(距离我4193.25km)


移动端图片阅读—交互设计分析


它代表着事情发生地点距离你所在位置之间的距离,而在其后有个小图标显示[4新闻],则代表着在这个位置附近发生4个新闻。这个设计特别人性化,往往我们在看新闻,看资讯,看到说叙利亚又打仗了,欧洲哪个国家又恐怖袭击了,美洲哪个风景美了,对于这些地点,听完之后,感觉我们是有的,但是对于这些地点依旧保持着陌生,还记得前几年有个地方叫海地,当时那里发生了一场非常大的地震,大家应该有印象吧,恕我无知,我到现在都不知道海地具体在哪个位置,而在这个app的交互上,距离的设定,刚好弥补了这方面的缺陷,它会让你感觉到有一种亲近感,这个事情正在发生,距离我有多少公里,这种感觉更加真实,无论远近,它在告诉我们,这件事真的发生过,而并非只是在电视上一扫而过。

这个距离按钮,当然也可以点击,点击之后看到的和下划动作是一样的,也就是本篇文章的更多内容。


移动端图片阅读—交互设计分析

但是不同的是,它会将这篇文章的很多关键词筛选出来,而且提供关于它的百科服务,刚才所谈到的地点距离,也将以地图的形式出现,点击地图可以看到更详尽的地理内容,甚至包括路名,附近小镇的名字,都可以看到。


移动端图片阅读—交互设计分析


分享

分享的环节加入了保存图片,其他与一般app没有太大的区别。


移动端图片阅读—交互设计分析


但是在点入底部关键词的百科文章中,这个分享就不太一样了,可能因为是文本的关系,可以直接分享至邮箱,而且加入了修改文本字体大小的设计。


移动端图片阅读—交互设计分析



更多

这里的更多并不是内容的延展,而是功能的延展,它根据用户以往的数据和之前发布过的内容,进行了一个整合,为用户推荐一些画册,app,知识汇总,大部分都是免费的,这个功能有点像是一个百科推荐,内容繁杂。但是它摆放的位置较为尴尬(在文章右下角),用户容易识别失误,误以为这是查看更多内容的按钮。


移动端图片阅读—交互设计分析

移动端图片阅读—交互设计分析

图片浏览交互分析


下滑动作动效(查看图片)


移动端图片阅读—交互设计分析

我们会发现一个问题,这明明是张横图,为什么点开之后不是以翻转页面来查看呢,而是需要摇晃手机要来看呢? 首先我们来看一下翻转之后的主图是什么样子的。


移动端图片阅读—交互设计分析

由于尺寸的问题,横版之后的图片两端会有黑色留白,显得十分尴尬,而且如果一直点击都翻转看图的话,交互来说也比较繁琐,较为鸡肋。

采用这种以竖屏来看横图的方式,通过陀螺仪的移动,来查看左右横图,给整张图片增加了镜头感,仿佛用户就是在用手机在拍摄。

移动端图片阅读—交互设计分析


这个app设计看似简单,但是其中很多交互都可以参考,在去年iPhoneX推出之后,没有了home键,手指的交互就变的尤其重要,包括现在的三星,对手指交互也十分看重,所以我们在思考视觉的同时,也要考虑交互方式,交互看似简单,但是其作用远远大于视觉体验,好视觉可以欺骗你的眼睛,坏交互却骗不了你的大脑。


移动端图片阅读—交互设计分析

今天分析的交互来自于:iDaily,一个新闻资讯类的阅读app


移动端图片阅读—交互设计分析



今天的分享就到这里,看完这篇文章之后,把你想说的话写在留言板里吧,老冰看到会一一回复。




- END -


 欢迎将文章分享到朋友圈 

 内容原创,如需转载请在公众号内回复“转载” 

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


移动端图片阅读—交互设计分析


            往期回顾            



移动端图片阅读—交互设计分析


移动端图片阅读—交互设计分析

移动端图片阅读—交互设计分析





移动端图片阅读—交互设计分析

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

(0)
交互精选交互精选
上一篇 2018-01-30
下一篇 2018-01-30

相关推荐

  • 交互设计笔记整理

    PC与手机对比使用环境pc:固定位置,干扰少,注意力集中,输入方式强大。手机:任何地方,干扰多,注意力难集中,输入方式单一。交互媒介pc:操作精准快速,桌面大显示内容多,过大屏幕会有视觉盲点。手机:手指操作,精准度低、速度慢。使用特点pc:需处理复杂任务,多任务切换,讲究效率和强互动,没有电池流量问题。手机:适合处理简单任务,多任务切换困难,适合各种姿势使用,电池流量问题严重。web与APP界面对比web是书架,内容繁多,一目了然。更直...

    微信热点 2018-04-07
  • 【原创】交互设计七大标准(7) 奥卡姆剃刀定律(简单有效原理)

    奥卡姆剃刀定律(Occam's Razor, Ockham's Razor)是由14世纪逻辑学家、圣方济各会修士奥卡姆的威廉(William of Occam,约1285年至1349年)提出。这个原理称为“如无必要,勿增实体”,即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。”▲ 奥卡姆剃刀原理如果你有两个类似的解决方案,选择最简单的。这些所提到其实就是驭繁于简。把事情变复杂...

    2018-02-22
  • 交互设计流程(一):需求分析(转自人人都是产品经理)

    本文是系列文章的第一篇,主要从业务需求、用户需求、分解关键因素三个方面来分析。一起来文章中看看吧~进入到腾讯工作后,由于处于广点通广告部门,平时的设计呈现多与业务相关,基本是以B端设计为主,对于传统交互设计的方法论有点生疏了。所以特在此整理,同时也分享给有需要的同学。该系列交互设计文章,抽取工作中需要的核心步骤,预估计有6篇,暂拟定如下内容:交互设计流程一之需求分析交互设计流程二之架构设计交互设计流程三之流程设计交互设计流程四之页面布局...

    2018-05-08
  • 用户体验与故事大王的创新火花

    嗨,亲爱的小伙伴们,2018年4月25日,我们又一同相约创新的周三,每周一次的创新工程实践如期而至。此次见面课主场是北京大学,由黄文彬老师主讲的《用户体验创新》。首先带大家了解一下黄老师。来自北京大学、南开大学、北京科技大学、西安电子科技大学、新疆大学、暨南大学、西北农林科技大学、西安交通大学、南昌大学、东北农业大学、哈尔滨工程大学等全国285所高校、九万六千多名师生共同收看了此次课程直播,其中江苏工程职业技术学院和山东财经大学参加了本...

    2018-04-25
  • 手机app开发交互设计的四大要素

    app开发中的交互设计是用户体验好坏的关键点,在开发手机app时,注重的应该是交互设计的效果。用户是交互设计的直接受益人,手机app怎样进行交互设计才能让用户舒心,在这里有四个要素需要把握。手机app开发交互设计在开发过程中是重中之重,这个环节一旦出现问题,用户的体验也会变得别扭难受。怎样进行交互设计,很多人都找不到其中的诀窍,其实只要把握四要素,一切就会变得比较简单。一、遵循平台规范的基本原则遵循平台规范的基本原则并不是说限制于设计规...

    2018-03-24
  • UI设计师扔掉PS,使用Axure是怎样一种体验?

    ——我的生活将再不会像从前那样……所以,Axure……这真的仅仅只是一个做原型的工具吗?UI设计师可以完全放弃其他工具,仅仅靠Axure完成所有工作吗?这个程序有什么优缺点呢?下面我将试着回答这些问题。最近我开始放弃Adobe Photoshop转向Axure,然后发现了它除了原型制作以外的潜能,也许我的生活将有大不同。如果有时候你不得不打开PS查看位图细节,你就会知道它到底有多慢。近年来PS功能越来越丰富,当我使用了另一个看起来明显简...

    2018-04-17
  • 场景是如何应用到交互设计的?

    我想在互联网领域,大家对“场景”这个概念并不陌生,但组成场景的关键因素有哪些?场景是如何应用到交互设计的?在工作之余,整理下相关知识,相信对大家的产品日常工作有一定的帮助,感谢大家抽出时间阅读,欢迎批评指正。1.场景的基本概念场景是指用户在一定的时间、地点等特定的情景下为了满足某种需求而触发的使用某种方法解决需求的行动画面。其关键因素包括用户、情景、需求、方法。产品的应用场景就是用户使用产品来解决需求的实际应用场景,比如上班族小张在午餐...

    2018-03-02
  • 用Axure水平菜单做导航菜单原型

    哈喽,"梯子"们好,这么多天都没有更新过Axure的教程了,理由如果是"沉迷吃鸡,无心做教程"未免也太勉强了,额......这个理由好像并不勉强啊,其实就是休息了一段时间。 好了,下面就来介绍一下这几天收集的比较多的"A技",额......Axure的技巧在浏览网页的时候,我们会经常性的点击或者鼠标悬停在"总有一款适合你"的顶部选项,这个就是顶部导航菜单。有的"梯子"就直接从元件库中拖拽一个"矩形"或者"文本标签"直接使用,如下图:其实...

    2018-03-16
  • 从用户体验到品牌形象,营销的道路有多远?

    在数字化时代,如何提升品牌形象和用户体验,是两个营销的核心问题,品牌形象塑造消费感知,用户体验决定消费忠诚。企业重要的战略资源之一是:优质化的内容。而真正做内容营销的门槛极高,唯有真正强大的IP内容,才具有引爆市场与号召市场的能力。什么是营销IP,即知识产权(Intellectual Property),大IP,本身是产业链也延伸,具有黑洞版的吸金能力,是从招牌、内容、产业链等的延伸式营销。举个目前比较火热的例子,电影《魔兽》,根据网络...

    2018-02-02
  • 预算少时间紧还要出色的用户体验?看来只有试试精益设计了!

    低成本,高效率,还能把友商比下去的用户体验——全世界老板的目标都是一样的!问题是,这现实吗?先别着急否定,也许,精益创业方法系统中的精益用户体验设计可以帮到你。是时候淘汰预先大量设计、单打独斗、各个专业团队将交付文档甩给对方这些传统的用户体验设计了——把精益创业法与用户体验(UX)设计结合起来,共同成长,互惠共存——这就是Lean UX。三原则Lean UX 从精益创业法中吸收了三个基本原则。首先,它们能帮助我们简化 UX 设计流程。我...

    2018-05-04