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

↑点击上方蓝字,加个关注吧~↑今天老冰给大家分享一个移动端图片浏览的交互方式这个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

相关推荐

  • 面试被问Axure水平?菜鸟这样学,快速做出能拿去面试的原型

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。面试者如果带一份好的标准的产品原型作品,会加分不少。那么一份能拿去面试的原型,长什么样呢?(以下是6周axure实战班同学作品)1、原型里,会梳理产品的功能流程2、标准的低保真原型3、清晰、明确、可读性强的原型注释如果你也想做出能拿去面试的原型图想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没...

    2018-04-20
  • 不会Sketch的设计师将要被淘汰!

    这  是 一 本 让 我 废 寝 忘 食 的 书前几天小花闲来无事逛知乎被一篇名为《写一本书出版是怎样一种体验?》的问答吸引了目光,里面有一位作者黄方闻详细的介绍了他的第一本书《动静之美——Sketch移动UI与交互动效设计详解》筹备历程。Sketch这款软件在UI设计上确实有着无可比拟的优势,很多大公司都在用sketch工作,再不会Sketch会被淘汰掉。目前用sketch跟ps的人数比越来越接近了。Sketch因其强大的功能以及极低...

    2018-03-02
  • 良好的用户体验不一定是品牌成功的关键

    一项针对品牌魅力的新研究表明,良好的用户体验不一定是成功的关键,因为品牌完整性受损可能会超越公众的看法。 这是对四个市场10,000名消费者的在线调查的结果。这项研究从认知、目的、诚信、慷慨,勇气和交付的六个维度检查了知名品牌。分析表明,与消费者的动态关系是短暂的受欢迎,还是长期的忠诚之间存在的真正区别。乐高式最具实力的品牌,一直让顾客感到满意。相反,FIFA被评为得分最低的品牌。另外,苹果在美国排在前十位,在英国排在第十六位。尽管其创...

    2018-02-26
  • 纽约大学交互设计研究生

    恭喜马同学收到纽约大学(NYU)Interactive Telecommunications 研究生offerOFFER展示:学生作品展示:作品集要求:CREATIVE PORTFOLIOSubmission of a creative portfolio is optional due to the diversity of applicant backgrounds. Portfolio materials need not be ...

    2018-03-09
  • 如何利用人工智能提升用户体验?

    如果你现在在科技领域工作,那你对人工智能(AI)或用户体验(UX)肯定不陌生了。随着人工智能的不断进步,人工智能越来越不局限在开发者或数据科学家的领域。作为设计师/技术爱好者/企业家/创业者,开始或继续思考我们目前使用的设备是很重要的。为了改善生活,我们不应该局限于现状。我们应该从每件事物中寻找灵感,并把生活看做一个界面。Airbnb当你想到人工智能时,你第一个联想到的不只是出租房间或公寓。随着人工智能和数据驱动文化的发展,Airbnb...

    2018-02-24
  • 交互设计 | 面向“交互领域”的能力转型

    点击上方“蓝色字体”,即可关注公众号文章来源:http://www.zcool.com.cn/article/ZNjM3MDAw.html(  站酷  )文章作者:千夜Ryan_Vision( 授权发布 )立足于交互设计及用户体验的角度谈一谈我的观点,希望对你有帮助。版权声明版权属于原作者,其内容归原作者所有如需转载请联系原创作者往期回顾APP UI结构-用户引导&提示UI设计师们还不重视闪屏设计?设计师的职场习惯如何让你的设计更精致-...

    2018-03-28
  • 2018用户体验设计趋势,你知道吗?

    设计师总再盼望未来 - 在整个工作流中我们重复相同的事情。最后,困扰设计师往往是围绕着一个简单的问题:我们如何才能提高用户的体验?为了解决这个题,Figma采访了18位设计师,让他们来来预测2018用户体验设计趋势。1.可用性第一,个性化第二“我真的希望2018年设计师们将可用性设计铭记在心。我们不要在基本元素上使用超浅灰色,我们做得每一个像素动画不应该只是因为它看起来不错,我们不应该让用户难以理解内容,因为我们是设计师。”2.设计师要...

    2018-01-31
  • 圆享——交互设计(1)

    · 品牌形象 · 艺术活动 · 平面设计 ·· 视频多媒体 · 交互设计 ·· Branding · Events · Graphic ·· Vedio · Interaction ·ANIMA iki《ANIMA iki》 获得过第五届“流明奖项”(Lumen Prize),一个巨大的发光悬浮球体。创造沉浸式、有魅力的体验,通过运动、纹理、灯光和声音来探索艺术装置本身与其周边的关系。该球体能够发光,是整个房间里唯一的光源,吸引着游客进...

    2018-04-25
  • Sketch入门教程,教你4步打造完美投影

    经常逛Dribbble,Behance还有很多外国设计网站的小伙们应该都会发现,流行了一阵子的扁平化风都带有一个很清爽的投影(diffused drop shadow)。比如像这样的这样的还有这样小伙伴们有没有自己尝试过去做呢?会不会觉得很简单?确实,使用Sketch的小伙伴儿们应该都知道,Sketch添加投影的方法超级简单,旁边Shadows按钮一点击,就添加了一个投影。但有个问题是,Sketch的投影不是很好控制,容易做出这种四周黑...

    2018-04-16
  • KY技术招聘详情 | 心理领域互联网公司KnowYourself

    如果对【KY内容中心】、【研发中心】、【市场品牌商务】、【运营、创意、用研】、【人事】等更多岗位感兴趣,请查看今天的其他几条推送内容。KY技术部,是KY的技术支持部门。我们通过各种技术手段,提升大家使用KY产品的体验,并为各种创意提供实现支持。我们希望能够以各种技术的优化,能让大家更精准的匹配到适合自己的朋友,能够找到合适的咨询师,能够与KY的交互中找到真正的自己,玩得意犹未尽。本次我们招聘需求详情如下:· 测试工程师 ·工作内容:1....

    2018-03-18