教你用动效阐释APP运作机制

 

　　编者按：动效设计可以说是目前UI设计圈当中最火的趋势了，这次设计师Eugene Rudyy在Medium分享了他参与设计新版Yep!的经历，这次他讲的不是怎么设计才好看，而是怎样用动效来替代语言来告诉用户APP的运作机制。脱去华丽的外衣，动效原来还能如此精彩!

　　Yep!是什么

　　一年前开始，我开始通Yep!的创始人Roman与Alexander一同工作，他们试图让Yep!改变大家的生活。这是一款帮助人们相遇和联系的APP，他们希望Yep!所提供的服务能够让大家更轻松的约会碰头，更愉悦高效地做自己喜欢的事情。

　　比如当你打算同某个有相同爱好的人一起和咖啡，那么你可以借助Yep!来查看这个时段内周围有没有相同需求的人。之后你可以借助Yep!和他商讨细节，约定地点，然后朋友，享受接下来愉悦的时光。

　　为了完成这款APP，我和两位创始人在见面后接下来的几个月当中，要测试大量的新功能和特性，其中很多想法是前所未有的，这也是这款APP所独特的所在。现在Yep!可以在苹果的AppStore中免费下载。

　　意义非凡的动效

　　在iOS刚刚问世的时候，那些精致而有意义的动效给我留下了极为深刻的印象。动效的存在，沟通着不同的界面和功能，在交互上起到了重要的承接作用，最重要的是，它会潜移默化地为用户传递信息，构建模式，淡化硬件设备无机的一面。这些动效无需复杂的文字说明，就能告诉用户接下来要做什么。当你删除文件的时候，文件投入垃圾桶的动效就传递给用户“删除”的含义。这些，就是机器的“人性”所在。

　　随着UI设计扁平化的风潮，苹果早期所主导的“苹果式拟物化”(Skeuomorphism)正逐渐消失在大家的视野里，当时那些精致而直观的动效也被扁平化的动效设计所替代。相比早期的设计，偏平化的语境性下动效有了更多的可能性。

　　在设计之初，我们开始构建Yep!的线框图和原型的时候就清醒地意识到，Yep!必须和其他普通的社交APP不一样，它需要简约的视觉设计，并且通过交互和动效来告诉用户它的运作机制。这样的设定有两个优势：1、动效可以更为生动地告诉用户发生了什么;2、动效可以更加生动，更有益于情感的传递和程序的使用。当然，这样的设计也就意味着开发成本会更加高昂，但是最终我们还是认为这些投入是值得的。

　　在Yep!中，用户操作的基本流程是这样的：选择活动->发出请求->等待搜索结果->查看结果(寻找匹配)。发出请求之后，在之后的一个小时内，系统会持续寻找匹配的其他用户。各个阶段有不同的界面，但是借助动效的衔接，用户会感觉这是一个界面在不停地转变，非常自然。这样的设计在iOS平台上可以非常轻松的实现，也符合它的设计规范。

　　选择活动

　　在yep!的活动选择界面中，带着圆形边界的图标错落地分布在界面上，不同的活动有着不同的色彩。

　　当程序启动的时候，活动图标会依照顺时针的顺序出现在屏幕上，而Sport和Events还有二级菜单，而二级菜单的出现方式与主菜单完全一致。整个APP的配色使用的是糖果色，配上活泼的动效，可以让用户感觉更加愉悦。

　　配置请求

　　在这里出现了第一次界面切换，我们设计的动效会让用户感觉到流畅，并且让他们明白到底发生了什么。

　　下面就是动效所要呈现的流程：

　　1、在界面中选择活动

　　2、查看请求的内容并准备发布，添加地点和额外说明

　　3、发布请求

　　4、Yep!开始搜寻50公里内的区域是否有相似请求

　　5、得到结果(在下一个动画中呈现)

　　在上面的动画中，用户选择了吃饭，图标上移在地图上化作地标，这个动画非常明确的告诉用户这一活动的类型(吃饭)以及是在什么地方。当你点击OK之后，地图标记化作雷达，扫描周围50km内的用户，非常直观，不多一句话。没有多余的按钮、请求和大大小小的按钮和框图，用户只需要看着动效，就明白发生了什么。

　　用户体验的提升与错误

　　在上一版的设计中，我们的设计并非如同现在一样。当用户选择活动类型之后的第二屏，显示的是用户的名字和照片等信息，当你查看周围匹配用户的时候，也会打开相似的界面，当然你的信息也可以被他人看到。

　　这样的设计让第二屏有67%的通过率。但是，这样的设计机制运行起来并不好。许多用户在第二屏出现这个阶段就不愿意进行下去了，许多用户因此而流失，因为公开个人信息本就不符合这些用户的需求，这个环节本就是失败的。因此，我们将这些影响用户的信息和环节都清理得干干净净。

　　修改之后，新版的第二屏的通过率本身就达到了83%，用户只需要确定需求和地点，额外的选择就是添加地点和说明，随后我们只会增加一个分享按钮。从67%到83%，这是一个明显的提升。我们试图通过流程优化，将这个数字再提高一点。

　　发送请求

　　配置好请求之后，获取到匹配的用户，每个用户的底部就会有一个Yep!按钮，点击按钮之后，就会向用户发出约会请求。如同用户接受了你的请求，那么就可以发起会话聊天了。当然，请求是相互的，用户可以发出也可以接收。

　　在这个环节，我决定设计一个动效。当用户点击Yep!按钮之后，按钮会从底部向上，这一动作就非常简单的阐释了“发送”的含义。气泡运动到屏幕中间，并且告知用户请求已经发出，同时你可以点击这个位置，取消发送，非常简单。

　　收获需求

　　当你收到Yep!需求之后，就可以看到类似Facebook的聊天界面，右上方有头像和提示，用户可以点击这个地方来浏览信息，也可以左右滑动查看，符合习惯也迎合需求。

　　开发和设计工作仍然在继续，今年的夏季和秋季我们会持续改进这一APP，会发布Andorid的版本，我们会在设计和用户体验上继续提升改进。如果你也喜欢动效，不妨来看看。