引导有门道！Yep!教你用动效阐释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的版本，我们会在设计和用户体验上继续提升改进。如果你也喜欢动效，不妨来看看。

APP是如何凤凰涅磐的？下面的文章不容错过！

同样是LBS，FourSquare是这样重设计的：
《涅磐重生！我们是如何重新设计FOURSQUARE的》

工具型APP Todoist的设计之道：
《UI设计实战！知名时间管理软件TODOIST的改版历程》

从图标开始重生，Spotify的重生之路：
《小图标大学问！我是如何设计著名音乐软件SPOTIFY里的图标》

原文地址：medium
优设网翻译：@陈子木
【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量78万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：