编辑导语:无论是视觉设计师还是用户,一个新潮的应用趋势都是非常值得关注和使用的。Zenly是一款非常新潮的设计,极致体验设计的app。本文作者介绍了Zenly版本的更新内容,从视觉设计、动态设计、玩法设计、彩蛋设计四个方面介绍了其新潮的设计。有兴趣就来看看吧。
嗨,我是蔡赟。最近在研究竞品的时候,发现了一个叫Zenly的APP,动态效果非常丝滑,设计也非常新潮。还有很多彩蛋设计埋在里面,把体验设计做到了极致。
严格来说,Zenly并不是一款新的APP,推出的时间也比较早。不过这次5.0版本更新后,设计风格更加新潮大胆。他们不是跟风,而是引领潮流。
我想作为一名视觉设计师,我必须关注和研究这种新潮风格的应用趋势,所以让我们从今天蔡赟的角度来欣赏这种应用。
其实它上一个版本的设计也很优秀,我就介绍一下更新前后的设计变化。
这次重点介绍5.0的更新内容,因为升级后的风格很有个性。
第一,视觉设计在这个大版本中更新,风格完全变了,和设计风格几乎完全不同。从APP图标到界面中的功能图标、背景、图形、颜色都做了很大的改变。
1.平面彩色图标和界面应用主图标。除了冰棍造型的延续,整体效果从清新可爱到暗黑酷炫变化很大。
在上一个版本中,UI风格中规中矩,设计团队似乎还在她的吉他后面向我们隐藏着半张脸,压抑着自己的内心,但在这个版本中,他们完全释放了自己。
还有一个关于主图标的小彩蛋设计,就是当你完成了它的一些任务后,可以解锁更多的主图标效果,给用户更多的个性化体验。
到目前为止,我已经解锁了2个图标。其实这个应用也隐藏了很多彩蛋的设计,后面会讲到。
这里的一个好处就是主图标的风格和内部界面保持了很好的一致性,你可以从图标上感受到内部界面的风格特点。
5.0版本图标风格化更加明显,使用了非常大胆的渐变,具有强烈的风格特征。
2.多渐变颜色APP中的颜色体系也跟随整体调性做了很大的改变。
上一个版本是以白色为主,搭配一些渐变色,但在最新的5.0版本中,主色调改为了深色。
在这种色彩氛围下,非常适合加入一些酷炫的渐变色,在APP中几乎随处可见,包括图标、背景、图案、按钮、文字等等。
3.上一版本超大字体中的字体大小比较常规,但在这个版本中,字体大小设计变得非常大,几乎到了夸张的地步。
单纯从字体大小来看,在其他app中并不常见,也算是一个记忆点。个人觉得有点太大了,美感也不太好。
4.3D纹理表达设计也是Zenly的一大特色。总的来说,上一版的质感清爽可爱。虽然有一定的3D质感,但一般比较弱。
这个版本3D质感特别强,色彩细节特别多,好像是到了舞厅的感觉,充满了凉风(上一个版本用的是语音,有同步表情和你说话,可惜这个版本去掉了)。
而且这里的表达不仅设计酷炫,还有声音。当你给朋友的头像发一个表情,就会有相应的表情配音,表情声音其实挺少见的。声音的组合是其设计亮点之一,值得借鉴。
二、动态效果设计动态效果设计可以说是Zenly的一大亮点。它的动感效果无处不在,极其丝滑。是一个值得学习的地方。
其实现在动态设计越来越被重视,尤其是当UI行业介入到这种程度,丝滑的动态效果会越来越影响用户体验。
在大厂,老板对动态效率的要求越来越高,大家都在追求极致的丝滑感。这个APP是推荐参考之一。
Zenly被Snapchat收购后,动态效率体系的开放可能也是一个重要因素,母公司Snapchat的动态效率也极其优秀。
我自己体验过,感觉这些动态效果的一个重点就是动态效果的风格、节奏、弹性都很好。
整个Snapchat动态特效系统的特点就是Q弹,Zenly延续了这种动态特效风格,这也是品牌的一部分,在这里得到了很好的应用。
我们可以从这个应用中学习哪些地方应该使用动态效果,以及这些动画的节奏和动态曲线等等。
1.具有品牌意识的动态设计。添加好友时这里有一个很酷的地球动态效果,并且和应用的核心功能有很强的结合,让这个动态效果更有价值。添加的按钮的确认效果也是在Z轴上旋转的。虽然是细节设计,但也符合整体3D风格。
2.符合物理规律的动态设计。为了给用户一种自然流畅的感觉,符合物理规律的动态设计是非常重要的一点。冰棍在这里弹出的动态效果就像很多冰棍聚在一起一样。因为光滑,冲击力大,所以高速弹起,然后由于重力下落,直到静止,然后就有了另一个为人称道的动态效果。整体看起来很自然。
因为在Zenly中,冰棍代表用户,动态元素也被融入到品牌元素中,每个元素的应用都是有意义的。
3.Q弹的动态设计有很多Zenly中的动态元素,甚至包括很多文字内容。比如在注册过程中,单词出现一串错位,然后同时增加明显的反弹效果。整体看起来很Q,很符合他们年轻的品牌个性。
在回弹设计中,也运用了迪士尼动画12原则的一些变形规律,并对动态图标进行了夸张处理,使动画有趣而真实。
比如主页上的小房子图标,如果你仔细看这个图标的扭曲,就是一个预备动作的组合,挤压,变形,旋转,可以让这个动画更加生动有趣。
4.呼吸的动态效果设计在核心功能路径上,Zenly让动态效果更加极致。因为整个应用的核心游戏都是以定位为基础的,所以Zenly对定位图标做了非常夸张的设计,使用了多种动态效果进行叠加,用稍快的呼吸节奏不断向用户反馈当前位置。
5.Zenly充满活力的动态设计特别好的一点是,对于反馈设计来说,几乎没有一个地方是完全静态的,这使得整个应用充满了生机和活力。
即使当前页面没有动态变化,我也会尽可能通过你的手势交互给你一些动态反馈。
在游戏中,及时反馈是一个非常核心的设计。可以说,游戏通过不断给玩家反馈,让人沉迷其中,这一点在Zenly身上也得到了运用。
比如这个地图页面,你用手滑动侧面,它也会给你反馈,而且随着力度的加大,反馈的形式会动态变化,值得学习。
例如,当你拖动时,这里的卡片和信息提示会给你即时的反馈。这种反馈对用户非常友好,也算是一种惊喜的体验。
6.动态分享背景分享的时候可以预览不同的分享模板,背景加入了动态的文字,看起来很有动感。在一些背景设计中,如果期望背景可以动态生成,那么写作可能是一个很好的方式,也是另一个学习点。
7.抖动和活力抖动的反馈设计也是Zenly的一大特色,在很多关键路径上会给用户即时的触觉反馈。看,我们又谈到了反馈机制。大量的反馈使应用程序更有活力。
三、游戏性设计1。解锁模式应用模仿了很多游戏,利用上瘾机制,让用户通过小任务解锁更多体验玩法。
2.地图上不断推出表情包。点击朋友的头像,可以在他身上持续推出表情符号。这个表情符号也可以累计计算。是让用户想点击的设计,每个表情符号都有完全不同的配音。我经常喜欢双击这些表情符号。当对方收到这些表情的时候,如果数量比较大的话,会直接在他的屏幕上爆炸,这是一个很有意思的设计。
3.地图标记地图标记应该是其核心玩法设计之一。它会根据你在某个对手身上停留的时间长短和时间段来判断你是在家里还是在公司。
这就是为什么它一直提醒你把手机的定位功能改成永远允许,否则它的很多设计都不能正常工作。
第四,彩蛋设计在应用中也嵌入了很多彩蛋设计,在一定条件下会触发,给用户制造一种惊喜感。
不同距离的导航提示设计也不同。我们可能习惯了附近的定位提示,但是当我们在一个定位距离比较远的地方,比如深圳,如果我们搜索美国,如果我们要去那里,规划好的航线提示会意外的显示飞机动态效果。
比如上一个版本,当你在地面上的缩放比例已经很小的时候,双击或者双手保持放大,会出现裂缝到地心,每次触发后看到的地心景象还是不一样的。当时发现这个彩蛋的时候很惊讶。
可惜在新版本中,这个彩蛋设计被去掉了。我猜可能是这个彩蛋埋的太深,用的人太少,所以被移走了。设计最终将服务于用户。
动词(verb的缩写)总结最后,这个应用值得设计师朋友们学习。设计风格非常大胆新潮,尤其是动态设计非常系统,体验非常丝滑。
如果你平时有体验产品的习惯,那么这个APP一定不能错过。也欢迎大家留言,和大家分享一下你在体验过程中发现的更惊喜的东西。
#专栏作家# Caiyunsky,腾讯高级视觉设计师;微信官方账号:蔡赟翻译设计。
本文由人人作为产品经理原创发布。未经许可,禁止复制。
题目来自Unsplash,基于CC0协议。
暂无讨论,说说你的看法吧