恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见
masterGo

推广

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
爱心萌宠V1.0,视觉设计复盘
43.7°
原创文章 / 经验/观点 / / 举报
8100 75 166 1

2021-10-08

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

项目背景

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

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

项目目标

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


关键词定位
目标人群

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

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


风格定位

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

方案探索

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

核心路径

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

主场景

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

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

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

风格设定

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

造型

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

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

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

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

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

丰收果园入口

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

 

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

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

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


 纸箱

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

主要功能入口 

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

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

好友功能

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

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

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

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

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


已帮助

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

 

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

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

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

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

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

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

Powered by Froala Editor

创建于:2021-10-08
收藏

75人已收藏

SFUPDESIGN

极致体验,助力增长

  • 3

    作品

  • 72

    粉丝

  • 0

    关注

  • 活动「收件采蜜换大礼」设计总结
  • 顺丰会员成长体系设计总结

猜你喜欢

    SFUPDESIGN

    SFUPDESIGN

    极致体验,助力增长

    首页新秀
    • 72

      粉丝

    • 135.9

      人气

    • 1540

      颜值

    作品

      最新推荐

      UI设计师的感官体验日记-第2期

      87 0 1

      相关佳作
      换一换

        SFUPDESIGN

        点赞:166

        收藏:75

        评论:1

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

        你确定要举报爱心萌宠V1.0,视觉设计复盘

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年10月08日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录

        可云端编辑的专业级UI设计工具

        立即体验