2

爱心萌宠V1.0,视觉设计复盘

 2 years ago
source link: http://www.ui.cn/detail/604149.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

爱心萌宠V1.0,视觉设计复盘-经验/观点-UICN用户体验设计平台

爱心萌宠V1.0,视觉设计复盘
30.4°
原创文章 / 经验/观点 / / 举报

2021-10-08

爱心萌宠,是基于顺丰公益基金会的线下公益项目,打造的线上公益平台的娱乐小游戏。

3895706.png3895705.png3895707.png项目背景

爱心萌宠,是基于顺丰公益基金会的线下公益项目,打造的线上公益平台的娱乐小游戏。

把公益项目与小游戏相结合,通过游戏化设计,运用养成类的游戏机制、简单有趣的玩法、持续的奖励,增强用户对顺丰公益项目开展与执行的认知,同时提升用户对公益的参与感,提升顺丰用户的活跃度和粘性。

项目目标

通过游戏化的设计,迎合当下年轻用户的喜好,逐步带动顺丰品牌的年轻化,丰富传统快递工具类的产品用户体验,提升年轻用户的黏性,同时通过公益内容,形成口碑传播,塑造顺丰品牌温度。

3895709.png关键词定位
3895710.png目标人群

根据数据显示,顺丰App的大部分用户分布在18-34岁,用户群体偏向年轻群体,这类群体大部分是学生、上班族。年轻化设计符合大部分用户审美。

当代的年轻人普遍存在孤独感,宠物陪伴是一种缓解孤独的方式,但养宠物对于现在的年轻人并不是一件容易的事,不单是钱的问题,更多时候是时间,精力。养一只虚拟宠物,既减少了成本花费,同时也能获得治愈与陪伴。

3895711.png风格定位

面向年轻人的互动型游戏活动,风格需要更具年轻化,符合现在年轻用户的偏好。同时,通过用户调研分析,“减压”是用户玩养成游戏时占比排在首位的获得体验,结合养成游戏偏慢的节奏,所以整体设计风格采取视觉柔和的Q版插画风格。3895712.png

方案探索

头脑风暴,输出草稿,进行方案探索。

3895722.png3895723.png

核心路径

在爱心萌宠中,用户拥有一只属于自己的狗狗。通过不断完成任务持续喂养狗狗,狗狗每次吃掉狗粮就会产生爱心,爱心可以进行公益捐赠,用户通过爱心捐赠参与公益慈善的活动。用户在喂养的过程中获得情感寄托,与建立深层次情感连接。

3895725.png主场景

主场景,可分为室内和室外场景两大类。为了贴合现在大多都市生活的用户日常养狗的真实场景,选择了室内场景。

色彩经过多色稿对比,最终选取暖色调,更加烘托家庭温馨气氛。3895727.pngUI颜色

在UI字体颜色的选择上,与主场景保持一致,选用了符合产品关键词「温暖」的暖色系配色,使画面看起来美观协调的同时更具一致性。按钮选用饱和度高的渐变色,增加年轻化和生机感。3895729.pngIP形象

3896009.png风格设定

设计初期通过对市面上产品调研后,扁平风格在市场中的差异化较弱,立体质感更契合年轻用户的审美喜好,ip风格最终选定2.5d。

造型

狗狗整体形象软萌化,视觉上柔和,更具有亲和力。没有具体品种及性别的特征,避免了与其他产品的IP形象趋同,以及避免不同用户自身对某种品种的偏好,使形象更具灵活性和包容性。

形态
在IP形态的选定上,尝试了拟人化方案(方案二),但为了更贴合现实养宠物场景,选择了保持动物本身形态(方案一),建立形象与用户之间的情感链接,增加游戏记忆点。
3895733.png成长状态

目前狗狗设定为两个状态,狗宝宝与大狗狗。

 初次进入游戏为幼宝宝状态,通过喂食,长成大狗狗,使用户更能深刻感受到是通过自己的喂养,狗狗获得了成长。
3896011.png动态

加入动效,每次点击狗狗就能产生互动,引起用户的好奇与喜爱,唤起用户主人意识。

3895736.png3897087.gif3896067.png丰收果园入口

窗外的树木是顺丰APP里另一养成游戏「丰收果园」的入口,将两个原本独立的模块关联起来,形成有效的链接与互动关系,打造游戏化运营体系。

公益捐助是不断累积的,用爱心作为载体,不断产生累积爱心。

爱心的累积也是对宠物喜爱的升温,以温度计的形式作为容器,能很好的展示爱心产生的进度,也更好的融入场景。

产生出来的爱心需要有一个器皿承载,需要在上面显示爱心数,且还需要是个器皿,所以使用玻璃的材质。把爱心装载于玻璃瓶子中,跟整个场景也相当契合。

3896085.png 纸箱

幼狗时期的快递箱,长大后存放在左侧也是为后期增加功能预留入口,同时也融入了品牌元素。

主要功能入口 

功能按钮风格卡通扁平,目的是清晰明了让用户识别,所以在保持整体按钮视觉统一性的前提下,用颜色加以区分。

此位置主要以凸显投喂功能,所以在布局和大小上与其他几个按钮作了一个差异化处理。

3896229.png好友功能

好友行榜激励用户去捐赠更多爱心,获取成就感的满足。

去好友家蹭吃功能,加强了用户之间的互动也让这款公益游戏变得更具可玩性,增加用户在游戏中的留存时间。
3896234.png引导弹窗

引导弹窗融入IP元素,选取了丰收果园场景元素, 链接两个游戏模块,增加故事性,增强趣味性。
3896235.png我的成就

根据捐赠爱心的数量,分为三级成就阶段。爱心荣誉以徽章形式展示,刺激用户达成成就,可增加尊享感、荣誉感,促使用户分享成就等。

本页面信息层级多,在设计上采用了卡片式布局,这样更有利于信息的分区,让用户对内容一目了然。为了与游戏其他页面风格一致,背景提取了主页背景并虚化处理,突出主要信息。

3895738.png已帮助

一部分信息在层级上不是很高,用扁平小插画搭配暖色系配色,营造温馨氛围感(个别亮色是为了突出整体)。

采用上下排版布局。根据信息层级弱化按钮,突出打卡进度条,刺激用户进行打卡。

仁爱之心卡片选择用橘黄色,是因为展示在第一屏,用暖色系与整个页面有一个过渡,看起来不会生硬。

【打卡图标】每一个图标上的图案都与其关键词相扣,图标搭配黄色边框,使之看起来更加统一,整个设计偏扁平轻量化,使其突出但又不喧宾夺主。

【未解锁图标】未解锁图标采用六角形状,与勋章造型保持整体一致。
3895739.png

勋章的设计,主要运用王冠、钻石、翅膀、六角勋章等元素,结合爱心、鲜花,且鲜花的花语与勋章的名称一致(仁爱-石竹花、守护-栀子花、奉献-梅花),既凸显了尊享感、荣誉感,同时也传递了温暖与关爱。

勋章之间是递增关系,在设计上,每一级的勋章都比上一级的造型更加华丽,配色更加丰富。

3895740.png3897089.gif3895743.png3896012.jpg3896236.jpg

3899453.png


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK