童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

10月18日 星宿房投稿
  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的聊天界面,右上方有头像和提示,用户可以点击这个地方来浏览信息,也可以左右滑动查看,符合习惯也迎合需求。
投诉 评论 转载

等待页面优秀案例鉴赏小编推荐:随着用户体验的优秀与否逐渐成为设计的头号要务,细微之处的用户体验也开始在其中发挥重要影响,而我们今天要说的就是预加载动画的设计。长久以来,一直鲜有人关注这一领域,但如……【设计经验】图标设计初阶要先型(中)连接上文【设计经验】图标设计初阶要先型(上)2、精致的基础要素精致即精细极致。看似简单的图标其实并不是随便了事,但知道了这些基本要素你就可以完成一个合格……【设计经验】图标设计初阶要先型(下)连接上文【设计经验】图标设计初阶要先型(上)【设计经验】图标设计初阶要先型(中)【三】系列成型图标能够熟悉掌握完以上基础要素,恭喜你可以大胆……【设计经验】图标设计初阶要先型(上)UI最重要组建之一就是图标,随着扁平化设计的发展趋势,越来越注重图标的简洁与寓意表达,平面图标已占主导地位。每位设计师所处的阶段所关注的要点是不一样的,我把图标设计分为2个阶段……20个实用便捷的CSS3工具、库及实例(下)接上文:20个实用便捷的CSS3工具、库及实例(上)11。彩色CSS3动画导航在我们早期的教程中,我们向你展示了如何创建一个使用动画下拉菜单的多彩导航菜单。没有使用……Yep!教你用动效阐释APP运作机制Yep!是什么一年前开始,我开始通Yep!的创始人Roman与Alexander一同工作,他们试图让Yep!改变大家的生活。这是一款帮助人们相遇和联系的APP,他们希望Y……20个实用便捷的CSS3工具、库及实例(上)在本列表中,。我们从多位艺术家那里搜集了惊人的例子,足以证明使用CSS,一切皆有可能。我们还收集了一些关于CSS3的不可思议新功能的文章,以及一些有用的CSS库。接下来的内容会……电子商务网站设计分析首屏设计首屏(abovethefold)是指不滚动web网页屏幕就能被用户看到的画面。世界著名的网页易用性专家尼尔森曾经有报告显示,首屏以上的关注度为80。3,首屏以下的关注度仅……交互设计工具篇工欲善其事必先利器,如今交互设计的工具五花八门。基于低保真原型的两个要求:轻巧快速和易于修改。在追求短频快的产品节奏下,企业一般用什么工具进行交互设计?使用哪些工具能够快速高效……移动设计模式整理分析导航篇最近一直在整理移动设计模式,终于把导航部分整理好了。先跟大家分享这一部分吧,有遗漏的或是有争议的欢迎大家建言导航就像一部小说的章节标题。正常阅读小说时,你不用刻意找它,它……从令人发指的苹果来看所谓的细节设计什么是细节设计?在讨论这个问题前先来看个案例。如果你手里恰巧有iPhone4s55s,请随便打开一个可以调出虚拟键盘的应用比如短信。注意观察键盘的最后一行,相信看这篇文章的人都……页面动效能否拯救扁平设计?(附工具推荐)作为一个网页设计师,我们需要努力让我们的技术与技巧与时俱进。我们不用追随每一个时代潮流(比如长投影),但是我们的确需要随着网络的发展与成熟,不断学习并提高我们的……
UX设计2018年10大预测iPhoneX适配手QH5页面通用解决方案小心!用户模型正在悄悄毁灭你的产品有规律又无规律的电商售后系统iOS11人机交互指南概览(三)给用户留下好印象的唯一机会:提升首次使用体验备战双十一,电商平台产品开发需注意的一些细节关于智能语音交互的5点思考APP设计:推送通知的7个关键点四点把控B端产品的框架设计没有Home键之后的iPhone会是什么样子?关于OPPO社区中“我的”页面设计的几点心得

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界