向iDaily APP学交互:移动端阅读图片的四种交互方式

关于移动端阅读图片的交互方式有很多种,今天学堂君跟大家分享四种最常见的移动端图片阅读的四种交互方式。

分别是:

1、左右滑动翻页浏览

2、上下滑动阅读更多

3、下拉放大图片

4、侧划查看时间线以往信息。

下面与大家一起分析iDaily APP上,值得我们学习和借鉴的阅读图片的交互方式。

 

分析交互设计的APP名称:「iDaily · 每日环球视野」

是第一个提供超越 3000px 超高清分辨率图片的中文媒体应用,每天由中国最出色的图片编辑独家挑选,为读者奉上最高清晰度的全球视野体验。

512x512bb

APP store下载地址:https://itunes.apple.com/cn/app/idaily-mei-ri-huan-qiu-shi-ye/id488528128?mt=8

 

然后当你打开iDaily APP的时候,就好看到这样一个UI界面。

四种图片阅读交互方式

引导我们采用这样的四种移动端阅读图片的交互方式来操作idaily APP。

 

移动端最常见的第一个图片阅读交互方式:左右滑动翻页

一般情况APP向左滑翻页,滑动到最后一页的时候就没有了。

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

如下图所示:

APP左右滑动翻页

 

iDaily  APP的主界面交互设计欣赏:

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

 

大家也可以点击 iDaily  APP 主界面右上角  更多 如下图所示:

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

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

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

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

这个时候可以学习一下:

移动端最常见的第二个图片阅读交互方式:侧划查看时间线以往信息。

 

 

移动端最常见的第三个图片阅读交互方式:上滑阅读更多

交互操作流程就是,上滑一下即可出现右边这样有地图和相关资讯的界面。往下拉就恢复到左边的这个主要新闻界面。

idaily-主界面APP

 

 

移动端最常见的第四个图片阅读交互方式:下拉放大图片并自动左右滚动看详细大图

按住新闻图片下拉,就会放大图片视觉。并且会从左至右自动播放图片,播放完之后停止,当然也允许用户自己操作放大缩小查看图片细微之处。

 

idaily-主界面APP2

 

以上就是学堂君跟大家向iDaily APP学习的四种移动端阅读图片的交互方式。可以根据自己产品属性和特点来选择合适的图片阅读交互方式,让你的APP更加特色与良好的交互体验。

每天更新,
全站高品质素材免费下载!