IAMUE
↑ 点击上方蓝字，加个关注吧~ ↑
今天老冰给大家分享一个移动端图片浏览的交互方式
这个APP的阅读教程中，一共介绍了四种交互方式，左右滑动翻页浏览，上下滑动阅读更多，下拉放大图片，侧划查看时间线以往资讯。
在这里并没有介绍左滑，有人问，左右滑动不就是左滑吗？其实，并不是，当你位于第一张图片时，也就是现在左滑已经没有内容了，此时你的左滑便有了刷新的作用，不同于其他（很多app刷新都是下拉刷新），这也是值得称赞的地方，它通过自己的交互思维，产生了自己交互模式，而不是一贯的去采用别人的交互方式。
主界面交互分析
内容列表
但是设计者在设定属性时，考虑到它是一个即时类新闻资讯app，所以在更多内容的选择和筛选上，采用了时间线的方式，这样用户就可以通过选择时间来找内容。
点击右上角更多
↓
但是从另一种维度来讲，在更多内容筛选上，它没有根据新闻内容分类，对于用户来说，不便于针对性的找内容。
但是，基于产品属性的交互方式来看，它似乎就是一款随机阅读的app，有的用户并不知道自己到底需要阅读哪一类的内容，在之前，你应该遇到过这种app，它会给你兴趣选择去引导你关注一些内容，比如：音乐，电影，设计，军事，文学，等等。但它并没有这样做，它就像是一个报纸，内容每天都在更新，而且是最新的，而它的推荐内容，包含各国各地的军事，文化，风景，民俗，它是在为你提供最新的内容，而不是针对你提供喜欢的内容，它的属性优势就在于即时这两个字。
但是它还是对内容的属性划分做了分类，但这个分类不是你的选择分类，而是对自己发布的内容进行属性分类（下图分类：环境与自然）
这个分类可以点击，点完之后，将进入到它的内容专题页，里面收集了之前关于它的所有内容，这个也是比较有意思的，它也是另一种筛选，依旧采用时间线的方式，只不过内容更加垂直。
底栏交互分析
位置与距离
在底栏，我们会发现左下角很意思（距离我4193.25km）
它代表着事情发生地点距离你所在位置之间的距离，而在其后有个小图标显示［4新闻］，则代表着在这个位置附近发生4个新闻。这个设计特别人性化，往往我们在看新闻，看资讯，看到说叙利亚又打仗了，欧洲哪个国家又恐怖袭击了，美洲哪个风景美了，对于这些地点，听完之后，感觉我们是有的，但是对于这些地点依旧保持着陌生，还记得前几年有个地方叫海地，当时那里发生了一场非常大的地震，大家应该有印象吧，恕我无知，我到现在都不知道海地具体在哪个位置，而在这个app的交互上，距离的设定，刚好弥补了这方面的缺陷，它会让你感觉到有一种亲近感，这个事情正在发生，距离我有多少公里，这种感觉更加真实，无论远近，它在告诉我们，这件事真的发生过，而并非只是在电视上一扫而过。
这个距离按钮，当然也可以点击，点击之后看到的和下划动作是一样的，也就是本篇文章的更多内容。
但是不同的是，它会将这篇文章的很多关键词筛选出来，而且提供关于它的百科服务，刚才所谈到的地点距离，也将以地图的形式出现，点击地图可以看到更详尽的地理内容，甚至包括路名，附近小镇的名字，都可以看到。
分享
分享的环节加入了保存图片，其他与一般app没有太大的区别。
但是在点入底部关键词的百科文章中，这个分享就不太一样了，可能因为是文本的关系，可以直接分享至邮箱，而且加入了修改文本字体大小的设计。
更多
这里的更多并不是内容的延展，而是功能的延展，它根据用户以往的数据和之前发布过的内容，进行了一个整合，为用户推荐一些画册，app，知识汇总，大部分都是免费的，这个功能有点像是一个百科推荐，内容繁杂。但是它摆放的位置较为尴尬（在文章右下角），用户容易识别失误，误以为这是查看更多内容的按钮。
图片浏览交互分析
下滑动作动效（查看图片）
↓
我们会发现一个问题，这明明是张横图，为什么点开之后不是以翻转页面来查看呢，而是需要摇晃手机要来看呢？ 首先我们来看一下翻转之后的主图是什么样子的。
由于尺寸的问题，横版之后的图片两端会有黑色留白，显得十分尴尬，而且如果一直点击都翻转看图的话，交互来说也比较繁琐，较为鸡肋。
采用这种以竖屏来看横图的方式，通过陀螺仪的移动，来查看左右横图，给整张图片增加了镜头感，仿佛用户就是在用手机在拍摄。
这个app设计看似简单，但是其中很多交互都可以参考，在去年iPhoneX推出之后，没有了home键，手指的交互就变的尤其重要，包括现在的三星，对手指交互也十分看重，所以我们在思考视觉的同时，也要考虑交互方式，交互看似简单，但是其作用远远大于视觉体验，好视觉可以欺骗你的眼睛，坏交互却骗不了你的大脑。
今天分析的交互来自于：iDaily，一个新闻资讯类的阅读app
今天的分享就到这里，看完这篇文章之后，把你想说的话写在留言板里吧，老冰看到会一一回复。
– END –
欢迎将文章分享到朋友圈
内容原创，如需转载请在公众号内回复“转载”
获取素材请回复：笔刷/模板/设计手册/赐我英文字体/赐我好图/RM笔刷/中文字体
▽ 往期回顾 ▽
