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

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

相关推荐

  • 初感避孕套用户体验反馈

    其实初感明白,很多朋友都徘徊在到底要不要代理初感这款产品上,很多的朋友都在问初感长的啥样的?以及初感避孕套的价格是多少?初感避孕套怎么样,好不好用?初感避孕套的效果如何?初感回头客多不多?今天我就把我自己的亲身体验分享大家!初感长啥样?下面就是初感的包装图和套子的实物图:高大上的包装盒,简便易撕的小袋子!初感的价格到底是多少呢?来看看初感安全套与市面上各大品牌的价格对比:通过这张图可以看到,初感安全套不仅比那些大品牌的安全套价格便宜,而...

    2018-02-12
  • 交互设计——绘制流程图

    在上一篇文章中了解如何寻找接触点、梳理接触点,在这篇文章中主要就是如何来绘制流程图。现在普遍对流程图的分类有四种:业务流程图、页面流程图、功能流程图、程序流程图。在这主要通过现有的APP分析来进行区分不同流程图以及如何交互设计师或者产品经理选择应该使的流程图。何为流程图在上文中讲到了流程,流程是事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的,它可以不规范,可以不固定,可以充满问题。而流程图的核心就在于如何排布事物进行的次序,...

    2018-05-06
  • sketch 44.1+汉化插件下载

    如果你喜欢UI设计如果你喜欢高效设计如果你喜欢简洁的设计最重要的,你得有个Macbook pro !Macbook pro!Macbook pro  !不要提什么macbook air,因为你是设计师,设计师,设计师。官网地址http://www.sketchcn.com/,可免费下载体验30天。  很值得购买的软件,只需要$99为什么选择 SketchSketch 是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用,所...

    2018-04-22
  • Axure RP 8 入门手册 – 第1章(下)

    第2节原型相关的文件类型芝芝:小楼老师,我不小心把软件关闭了,我编辑的文件在哪?小楼:你新建完文件没有保存吗?芝芝:我有生成HTML文件,但是好像不能用软件打开呀?小楼:看在颜值的份上,我给你讲讲吧!与Axure相关的文件有几种类型:分别是“.rp”文件、“.rplib”文件、“.rpprj”文件以及“HTML”文件。“.rp”文件:独立原型项目的源文件,这是最重要的文件,只有这个文件才能进行原型的编辑与输出。“.rpprj”文件:团队...

    2018-03-31
  • 设计中的交互设计——什么是交互设计

    上一篇我们探讨了设计的本质,结论是设计的本质是解决问题,满足人们的需要。有的朋友可能会问:工程学也是解决问题,比如造一座桥,就解决了一条河两岸的交通问题。那么设计和工程学有什么区别呢?这里我想补充一点:设计是漂亮得解决问题,即设计除了需要考虑如何为人们服务,还需要考虑以一种美观的、令人赏心悦目的方式来服务。因此,“漂亮”这个因素,也很必要。既然交互设计是设计学科里的一个分类,那么交互设计一定首先满足设计的本质:漂亮得解决问题。下面我们来...

    2018-03-13
  • 联想实习 | 手机事业部招聘交互设计实习生

    公司简介联想是一家营业额达460亿美元的《财富》世界500强公司,在全球消费、商用以及企业级创新科技领域居领先地位,为用户提供安全及高质量的产品组合和服务,当中包括个人电脑﹙经典的Think 品牌和多模式YOGA品牌﹚、工作站、服务器、存储、智能电视,以及一系列移动互联产品如智能手机﹙包括联想和摩托罗拉品牌﹚、平板电脑和应用软件等。招聘岗位手机事业部-交互设计实习生岗位描述1. 参与联想ZUI手机操作系统的交互设计;2. 参与产品的规划...

    2018-04-21
  • Axure RP 8 入门手册 – 第3章

    第3章元件功能概述第1节鼠标的操作第2节元件的使用第1节鼠标的操作麦子:老师,老师!小楼:干吗,干吗?麦子:不......小楼:呃......麦子:我想做一个页面,但是那些元件都怎么用啊?小楼:点住了拖到画布里面用呀!麦子:我知道是拖进去,但是我想要一个向左倾斜的圆形。小楼:你是仇人派来玩儿我的吗?圆形怎么倾斜?麦子:对不起,老师!少打个“椭”字。小楼:艹。在Axure中,如果需要一个椭圆形,可以放入一个矩形元件到画布中,然后,点击矩形...

    2018-04-05
  • 百度UED:运营设计那些事儿

    数十万互联网从业者的共同关注!作者:百度搜索用户体验中心 授权早读课发表,转载请注明出处。在现如今的社会中,每天都在进行着一场场没有硝烟的商战。运营设计则是至关重要的一部分。那么怎么才能做出一个好的运营设计或者一个相对比较成功的运营设计呢?我们要知道设计的目的。设计的目的是什么?设计核心在于能够让用户在有限的时间内Get最有价值的信息,找到所得,从而实现转化。知道设计的目的了,在项目中自然形成了一些思路流程。1、需求分析需求分析分为:产...

    2018-01-31
  • AXURE免费元件库分享-web

    分享个WEB端axure元件库下面是元件库地址:https://pan.baidu.com/s/1pLXHuf5

    2018-03-05
  • Sketch 49 新增交互原型能力

    看到更新弹窗蛮讶异的,完全没有见到相关消息或Beta版本,官方博客与Medium也毫无动静,太过突然,总之就是这样:“Prototyping: You can now connect Artboards with Links and Hotspot layers to create prototypes of your designs that can be viewed in Sketch Preview,Sketch Cloud,a...

    2018-03-02