云阅读IPAD3.0设计总结交互篇

　　任务流程的简化和细化

　　云阅读iPad新版增加了本地书上传云端同步，通过这个功能，用户可以吧自己的本地书上传到多端查看，还可以资源共享，结交书友。在手机端上，这个功能已经上线有一段时间了，这次在iPad上进行了一些重设计。分析整个任务流程，大致上包含以下一些步骤：

　　iPad的空间比较大，我们首先考虑是不是可以对流程做一些简化。从数据上可以得出用户使用Wifi传书的占大多数，我们根据用户的使用情景，合并了1、2两个步骤的页面，在上传书区域着重突出了Wifi传书，当PC端开始传书该区域就会变成上传的进度列表，下面是手机端和iPad端的界面对比：

　　在云端同步页面中，我们使用了矩阵列表，以便显示更多书籍，初始状态时顶部的操作栏显示上传总数和全选按钮，在同步开始时该区域会变成进度条，显示上传的总进度。这样的状态切换比较好地节省了空间，用户也会容易理解。

　　完成了对流程主要页面的交互设计，工作还远远没有完成。结合用户在iPad上使用云阅读的场景，我们在上传书页面也添加了云同步入口。还有一些不容忽视的细节，比如整个任务流程中会出现的一些特殊状态，上传本地书的各种显示情况，都需要在交互稿中一一去定义。

　　从任务设计的角度上来说，本地书上传同步的流程并不算复杂，但是思考下来，要注意的问题还不少，除去步骤本身的优化考虑，关键页面的内容布局，特殊状态的处理等每一个小点都会影响到整个流程的使用体验。

　　给交互找点感觉

　　在交互层面，我认为，动效设计是落实情感化设计的重要环节。在介绍具体的实践之前，想回到开头的话题稍稍深入一下。我们已经知道要带来更好的体验，产品要能很好地照顾用户情绪、引导用户注意。Trevor曾提出过用户注意力与情绪的模型，帮助我们认识这其中的关键影响因素：

　　而通过恰如其份的交互动画，产品可以在需要主导的时候唤起用户的注意力，在需要保持用户专注于任务的时候，流畅操作，减少消极情绪。在云阅读iPad3.0中，我们丰富了过渡动效，并尝试了新版本引导动画，希望为你的阅读体验带来一些额外的乐趣.

　　A．明确层级线索

　　在阅读圈中，用户打开分享的文章，可以点评论头像进入他人主页，相关详情，甚至另外的文章。我们设计了一致的动画，每一个新打开的页面都会从下往上覆盖前面的页面，让人感觉像一张张的报纸盖上去，堆叠起来。通过这种方式，我们直观地让用户感受到一种层级关系，避免了用户在复杂的嵌套关系中迷失。在原型表现上，我们使用Axture制作了可交互的动画原型，让工程师在开发的过程中很方便地随时查看对照。

　　B. 连贯操作

　　在浏览阅读圈的时候，想去评论或回复是一个很常见的使用场景，我们希望这个过程能为阅读圈增加互动性，但又不要太过打断用户的浏览过程。在这里，加入了一个动画，点击更多按钮或用户评论，该条分享块会展开弹出，轻点其他区域就可以返回之前阅读圈位置，比较好地解决了这个问题。

　　C. 轻巧过渡

　　新版本中的社交分享，在选择完分享渠道后会上下翻转出分享输入页面。从水平到垂直的翻转过程，让分享输入有一种亮相的感觉。动画区分了任务阶段，也解决了前后页面高度不一过渡不平滑的尴尬，带来了一定的趣味性。这个动画我们使用AE完成动画原型的，AE完善的3D功能让效果表现变得很简单。

　　D. 营造气氛

　　第一次打开新版本，你可能会注意到我们的动画引导：春花烂漫的模糊背景上，iPad里的封面图徐徐划开，露出全新的首页，代表丰富内容和社交分享的图标从后面弹出扩散;云端同步介绍，多个设备流畅地划入，悄悄升起的一朵小云里，云同步示意图标在转圈;阅读圈介绍，Ui元素和图形元素从屏幕的顶部和底部弹上来聚拢，带出底部的登录按钮。加了动画，原来比较死板的新手引导变得更有生命力了，希望看到的你能会心一笑，感受到我们的诚意。

　　点我看iPad3.0动画引导视频

　　在这里，顺便给大家介绍一款新工具。这个跟随手指的交互动画原型是使用以下工具完成的：

　　Adobe animate CC是adobe 推出不久的交HTML5动画工具，可以加入各种动画效果、交互动作并输出网页格式的动画。作为一个还在完善中的工具，它的特点是上手简单，导出的动画格式方便查看，内置的缓动曲线和交互效果也比较丰富，能满足快速制作原型的需求。下面是我们新版本引导的设计源文件截图：

　　小结

　　 云阅读iPad3.0上线前，我们做了一些用户访谈和可用性验证，用户对于这个版本的使用感受和品牌印象如下：信息丰富、功能完善、交互操作便捷有新意、视觉简洁清新、看内容很舒适 。这与我们的设计初衷是相符的。在访谈的老用户中，有80%表示期待新版本早日上架，会第一时间更新。而上线之后的口碑也让设计的理念和预期得到了验证，下面是App Store 上的部分用户评论截图：