交互学堂
专注分享专业知识

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

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




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


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


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



主界面交互分析


内容列表



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


点击右上角更多

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

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


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


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


底栏交互分析


位置与距离

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



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

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


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



分享

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



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




更多

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


图片浏览交互分析


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


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


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

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


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


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




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




– END –


 欢迎将文章分享到朋友圈 

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

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




            往期回顾            








未经允许不得转载:IAMUE » 移动端图片阅读—交互设计分析