引导有门道!Yep!教你用动效阐释APP运作机制

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

Yep!是什么

引导有门道!Yep!教你用动效阐释APP运作机制

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

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

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

意义非凡的动效

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

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

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

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

选择活动

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

引导有门道!Yep!教你用动效阐释APP运作机制

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

配置请求

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

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

1、在界面中选择活动
2、查看请求的内容并准备发布,添加地点和额外说明
3、发布请求
4、Yep!开始搜寻50公里内的区域是否有相似请求
5、得到结果(在下一个动画中呈现)

引导有门道!Yep!教你用动效阐释APP运作机制

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

用户体验的提升与错误

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

引导有门道!Yep!教你用动效阐释APP运作机制

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

引导有门道!Yep!教你用动效阐释APP运作机制

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

发送请求

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

引导有门道!Yep!教你用动效阐释APP运作机制

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

收获需求

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

引导有门道!Yep!教你用动效阐释APP运作机制

开发和设计工作仍然在继续,今年的夏季和秋季我们会持续改进这一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】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

引导有门道!Yep!教你用动效阐释APP运作机制

收藏
点赞

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。