空间小窝：萌是一种怎样的体验

在快速发展的信息化时代背景下，我们变得更加被动和缺少耐心。琐碎的信息打碎了我们的生活，分散了我们的精力；互联网让一切触手可及，也催生了更多“伸手党”。在我们渐渐变得麻木和消极的时候，萌物悄然生长。这是一付治愈系灵丹妙药，安抚着我们疲惫的心灵，让我们热血沸腾。那么，萌是一种怎样的体验呢？

 

 

萌之奥义

——

萌可以被理解为“个人因事物的某些特征而萌生起像燃烧般的共鸣感觉”。 “热血”“共鸣”可以说是萌的奥义，它能使人亢奋并蠢蠢欲动。

空间小窝是一个以“萌”为核心的应用。小窝的萌来自于最纯真的童年梦想。那时我们期盼着有漂亮的芭比娃娃和亲手装扮的家。于是小窝准备了超萌的虚拟形象和装修道具带我们重回初心。这是一趟足以融化你内心的旅程，是满足感和幸福感升华的体验。

在这里，用户可以打造属于自己的Q版形象和主题房间，可以到新朋友家打招呼、送花、留言，建立自己的社交圈。在用户感受华丽变身之时满足用户对美的幻想，从心灵深处抓住用户。

这是团队第一次尝试游戏风产品，需要短时间内攻克不熟悉的领域，对团队来说是一个不小的挑战。此外，如何更好地吸引到年轻用户，抓住玩家心理营造气氛是视觉挑战的重点。本文总结了小窝设计过程中的一些方法和思考，分享给大家~

 

品牌形象

——

Q版虚拟形象

产品定位之初，需要确定用户画像。我们的主力用户群定位在13~20岁的用户。这阶段的用户情窦初开，开始对外表在意，对装扮类游戏有潜在的心理诉求。为此小窝打造了超萌的Q版二头身虚拟形象，满足用户对幼齿形象的幻想。多套角色装扮，随时体验不同的风格。感谢设计师Mandy的萌心之作。

 

糖果色彩体系

产品的色彩赋予了用户第一感官印象。小窝的形象是可爱乐观的，富有感染力的。为了表现这种快乐精神，小窝以鲜艳的色彩和圆润的质感，形成缤纷的糖果色彩体系，联同视觉、味觉、想象力三个方面刺激用户产生愉悦感。

 

暗示动线的Appicon

产品的icon也是奠定品牌形象的关键。如果用一幅画来表现梦想小窝，那这幅画中会有：热情的红色屋顶房子、纯净的蓝天、漫山遍野的绿草、还有可爱的花朵。这些元素象征着自由和安逸，也是小窝想带给用户的感受。将这几个元素提取组合，最终形成了小窝的icon。

对比前几个版本的Appicon，最终版从客人的主观角度出发，拉近了视角，有一种即将开门迎接的动线暗示，色彩更鲜明，画面感更显生动。

 

充满活力的文字LOGO

如何将小窝的品牌形象提取出来作为文字Logo，则更多的考虑了Logo使用的环境——登录页的场景。登录页以广阔的蓝天白云草地为大背景，前景需要突出小窝品牌的Logo，于是采用了最明亮活泼的黄色作为“空间小窝”文字的基本色。文字造型圆润饱满，文字之间大小、位置富有变化产生韵律感，以传递“活力”“Q萌”的品牌特征。

 

视觉风格进化

——

更亮纯的色彩

第一版颜色在上机测试后发现损失了不少，画面看上去比预想的黯淡了很多，所以重新调整了色彩的纯度和亮度，让画面保持新鲜和活力。

另一个导致画面黯淡的原因，就是明暗的冷暖一致性。如果选用了某一冷暖倾向的颜色搭配，而暗部的色调没有趋向统一倾向，会直接导致界面黯淡不和谐，也就是显得脏。小窝整体气质是给人暖暖的，所以整体色调偏暖，因此暗部也做了趋暖优化。

 

前后景区分

小窝首页以房间展示为背景，前景集合了相应的功能按钮入口，这样的布局下，前后景很容易融在一起。第一版的视觉方案，就出现了这个问题。参考同样环境下的游戏案例，可以发现这类游戏普遍通过深色描边和按钮面板的形式将前景按钮和背景区分开来，界面整洁清晰，功能形式都做到了统一。

在案例的启发下，第二版的方案用深色轮廓描边加强了清晰度，按钮造型更加圆润，整体上也更加规整。考虑到产品最核心的是房间背景的展示，因此前景按钮没有做背景面板避免遮挡到房间。

 

释放空间

上一版本的方案，按钮占了很大的空间，用户的注意力被更多吸引到按钮本身，过于呈现的内容在一定程度上造成用户的疲劳感。所以接下来需要动刀做减法，释放更多空间出来。第三版方案，将用户信息做了收纳和调整，不是首要关键的信息把它藏在第二层，通过交互间接展示。按钮整体缩小精致化，不干扰用户视线，以最小的资源传递更多价值的信息。最终方案房间展示区域增大了一半以上，充分扩大了视野。

 

打造气泡光感效果

——

在视觉细节上，小窝有着特有的风格——气泡光感效果。想象这是一张扁平化的桌子，点上几滴水滴后，界面上的元素变得立体了起来，阳光照射进桌面，水滴熠熠生辉。圆润的高光和暗部厚度是气泡光感效果的两大要素，不同物体的气泡材质都有所不同，高光呈现不同的形态。

 

生动的场景布置

——

场景图不仅在视觉层面丰富了界面表现，也同时暗示了界面的功能，利于用户理解。小窝打造了生动的场景表现不同功能下的环境。

 

创建角色时的衣帽间

以大帘幕、穿衣镜、衣架、人型模特等为场景元素，暗示了换装、变身的环境，引起用户的装扮欲。

 

相册中的照片墙

墙体为主要展示面，桌面上的花盆、画框的投影映衬了顶部光源，形成三角构图，衬托出主体墙面上的相片展示。画框内选用小窝代表性的场景照片，小细节体现品牌感。

 

礼盒大舞台

大红色的帘幕、顶部的彩旗、地面中心聚焦的光源都充分暗示了舞台的场景，整体气氛热烈欢乐，带动用户参与。

 

Q弹光感动画萌萌哒

——

小动画能让静止的界面充满生命力，能节约用户的理解成本和等待成本，同时加深用户对品牌的认知。小窝实现了多种生动有趣的动画来体现“萌”“精致”的特性，让人眼前一亮。

 

Q弹效果

小窝是一个暖萌的产品，界面中的元素都是生动可爱的，所以较之冰冷坚硬的工业化产品，小窝中的元素都相对柔软有弹性的，这种特别的质感表现为Q弹效果。Q弹效果的使用场景可以结合元素本身的特性，比如按钮在押下之后反弹时，元素出现和消失的时候，以及反馈操作的时候等等。

以按钮押下时Q弹反馈作为例子。首先我们研究动画本身的原理，模拟不同参数值变化下的效果，然后运用到实际的场景中。

Q弹动画的精髓即是弹性反馈和惯性衰减。弹性体现在打破长宽等比的运动变化，让元素质地更动感。惯性衰减即指一次运动停止之后，物体因为惯性依旧保留运动，只是力作用在逐渐衰减。

 

光感动画

除了Q弹的效果，界面中还需要一些光感动画来提升整体气质。光感动画主要用来强调主体物，吸引用户的目光，作为视觉上的引导，比如登录页logo强调、换装之后焕然一新的效果等。

加了光效之后元素更加生动精致，更好的升华了气泡光感的视觉效果，同时也为画面增添了节奏感和层次感。

在设计稿阶段，动画可以非常丰富炫酷，而到了开发阶段不得不忍痛割爱了。通常开发实现不了的动画可以用png序列帧的形式输出，效果接近100%还原，而缺点是更新迭代不灵活，占用程序内存。尽管不舍效果，程序运行能力还是要优先考虑的。这时就需要设计师和开发鼎力配合一起研究程序实现动画的方式了。例如按钮上的扫光效果，经过试验，可以用一张发光图层配合程序实现遮罩动画，效果也还不错。

 

把握气氛的完成页动效

——

操作完成的页面也是场景中重要的一环，完成页的效果直接影响着用户的情绪和品牌信任感。小窝中完成页有两大关键要素，分别是及时反馈和气氛营造。及时反馈能给与用户安全感，而好的气氛能提升用户的满足感，增加好感度。调动用户情绪的方法是使用丰富的动效，动效在信息反馈、气氛营造方面有着独特的优势，下面汇总一些小窝中完成页动效的实现方法。

 

参数动画

提供动画关键帧参数，由程序实现动画过程。主要使用于完成状态时的旋转光环、弹出动画中，此时画面集中表现用户的操作结果，循环的动画直接令画面生动起来。

序列帧动画

输出完整的动画png序列，百分百还原效果。用于程序难以实现的复杂动画中，比如拆开礼盒的动画，以及一些丰富的闪光粒子效果。

 

路径动画

指定元素的动画路径，通过程序实现。路径动画经常被使用在游戏中，用以打通两个元素的关系，视觉引导用户视线。

 

设计一些加分的小细节

——

性别特分设计

创建角色的时候有男、女两种形象，除了形象本身的装扮素材和默认的房间装修风格不同，小窝也在一些UI细节上体现了男女区别。主要表现为颜色区分、场景装饰物区分以及性别形象带入。

 

空白页不再单调

当网络出问题或者没有数据时，一些依赖信息的界面就一片空白了，小窝针对各种空页面情况做了相应的空白页面设计，以弥补用户心理的缺憾。

空白页首先要注意的是融入环境，使用同坏境和谐的元素，使画面表现更合理。其次是带入用户主观情感，从用户的角度看待空白页的情况，以温柔的方式化解尴尬，比如积灰的相框暗示没有人使用，萧条的落叶幽默表现孤独。总之，空白页是一个很好抓住用户心理的地方~

 

写在最后

——

历经半年的时间，小窝终于打磨出炉。这半年最大的感慨就是，大家突然都成了萌娘玩家，不断尝试体验优秀的产品，充分代入用户的思维，努力抓住产品的核心。

面对产品中的种种困难，团队始终饱含萌心，齐心协力一起跨越障碍。

这是一个充满萌趣的理想国度，小窝里的每一件作品都“萌”意满满，希望大家能在小窝里找到属于自己的纯真和乐趣。快来体验这段温暖动心的旅程吧！