引导有门道!Yep!教你用动效阐释APP运作机制 - 优设网 - UISDC

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

2014/09/29 9259评论区

animations-explaining-app-mechanics-1

编者按:动效设计可以说是目前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】

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

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/animations-explaining-app-mechanics

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里