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

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

相关推荐

  • 【素描Sketch】细节之处韵匠心

    ( 本宣传资料仅为要约邀请,部分图片源于网络,如有侵权请联系删除,所载全部内容仅供参考均不构成要约,一切以政府批准文件与开发商签订的《重庆市商品房买卖合同》及其附件约定为准。周边已规划及/或已建成及/或规划中及/或建设中的公共设施(包括但不限于变电站、加油站、明渠、高压线、轨道环线、商业中心、学校、公园、酒店、医院等)及规划用地,均以政府有关部门最终核准及审批文件为准。南岸区融侨半岛融侨城二期C区(营销推广名:金辉耀江府),开发商:重庆...

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

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

    2018-03-28
  • 读书会第三期:《交互设计指南》

    《交互设计指南》的作者Dan Saffer是旧金山一家产品设计资讯公司Kicker Studio的负责人,也是交互设计领域的思想先行者,经常在国际进行各种演讲活动。这本书在国内最常见的是2010年发行的第2版中译本,其实它在2006年就有了第1版的英文版,它在10年前的目标读者群是设计行业的资深者,现在很适合交互设计师入门通读。交互设计的4种方法从2003年至2010年常见的交互设计方法论共有4种:以用户为中心的设计、以活动为中心的设计...

    2018-04-20
  • 超好看APP交互设计~

    设计APP,不是简单的把界面绘制好,漂亮的色彩搭配、可爱、卡通或者扁平化的图标设计等等。如今的移动APP界面设计,更要追求有趣与实用的完美结合。今天,小编分享来自印度的设计师Joney vino的超好看APP交互设计作品。第一款是APP交互设计是关于免费试驾APP的选车界面与整个选车的流程。整个过程就是把选车类型、日期、人数等功能元素在流畅的界面转换场景当中完成。追求一气呵成。很不错的免费试驾体验。第二个APP交互设计当中的有趣、创意与...

    2018-03-03
  • 版权大战后,用户体验将成音乐平台的制胜关键

    自2015年起,国家版权局叫停“独家”版权到今年腾讯、阿里和网易云三家主流音乐APP达成史上最深度版权互授,这场版权之争终于尘埃落定,期间还穿插发生了运营8年的多米音乐停运事件,版权大战背后确实有很多难言之痛,而面向未来,已经叫实了的“后版权时代”,各家APP用什么get到我的点?当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Get Over ItEagles - Hell Freezes Over (Live)一、用户体验...

    2018-03-24
  • 用户体验“大不同”,合作伙伴分享会

    2018年3月15日,“用户体验“大不同”,合作伙伴分享会”在福建省科威技术发展有限公司举行。虽然屋外下了很大的雨,但也没能减小屋里同行朋友们的热情。分享会一开始,惠普华南区业务开发经理李浩泉就以十分轻松幽默的氛围,将与会者带入状态。随后介绍了页宽产品的主要特点,并对惠普A3页宽复合机作了产品推介。惠普新一代A3智能复合机页宽产品的主要特点是:最新技术(集激光/喷墨优势于一身)高速(40ppm~80ppm输出速度)经济(购买/使用/维护...

    2018-03-17
  • 从地方性视角谈民宿的定位(二): 找到有趣而唯一的内核

    ▲点击关注我们,挖掘土壤的内涵近些年来,随着旅游的快速发展尤其是大众旅游市场的迅速兴起,旅游与地方的关系引发越来越多的关注和讨论。“地方性”一方面作为旅游目的地吸引力的内核被重视,另一方面又因其趋于淡化而引起对地方可持续发展的担忧和对旅游发展的批判。▋什么是“地方性”?事实上,地方性不是绝对的现实,而是话语与知识生产的过程。全球化进程必将是均质化与地方性凸显相互伴生的过程。虽然在全球化背景下,旅游产业的发展由于多种要素的作用,会带来社会...

    2018-03-10
  • 两个交互设计鸿沟-评估与执行

    译者 / 熊猫小生校对 / 不器作者 /Kathryn Whitenton前言:通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑...

    2018-03-28
  • 金蝶首席用户体验官对“用户体验”的思考

    “也曾经有人要我用一句话来描述清楚什么是用户体验,我说,不好意思,我一句话描述不出来,你给我半个小时。”金蝶公司首席用户体验官钟承东这样回答。产品人,你是否也曾这样认真地思考过:用户体验究竟是什么?你又需要要花掉多少时间多少语言,来组织出一个满意明确的答案?我们渴望的用户体验是什么样子?相信每个人都憧憬这样的用户体验,使用精心设计的产品,有如诗如画的视感,有如沐春风的触感,有余音绕梁的听感,甚至会精细到照顾用户的嗅觉和味觉,接触和使用产...

    2018-04-04
  • 微信Axure原型练习和资源分享

    “我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

    2018-03-10