美的 | H5设计全流程分析与思考 | 智慧生活年度账单项目回顾

Behance / 2023年2月9日

大厂复盘 233 2 0

可在下方连接中关注原账号原文链接：https://mp.weixin.qq.com/s/PfEtCHXtsa4dhisDVjjVLQ 项目背景在岁末年初之际，为了提高美的美居用户价值感和荣誉感，针对美居各维度数据、回顾2021年用户的智能操作行为，我们以“智慧生活”为主题进行创作，通过不同形…

| 项目背景

在岁末年初之际，为了提高美的美居用户价值感和荣誉感，针对美居各维度数据、回顾2021年用户的智能操作行为，我们以“智慧生活”为主题进行创作，通过不同形象的定制，为用户塑造个性化、情感化、有温度的视觉感受，打造仪式感满满的专属年度报告。

以下是「美的美居-2021我的智慧生活年度账单」设计成果的总结和复盘，希望借此与大家一起共同探索、学习成长。

| 项目梳理

在业务需求接收阶段，我们对信息进行收集梳理，得出三大业务关注问题点，围绕该问题进行一系列的目标设定、创意思考。并将整体H5交互流程进行梳理、分解归类，以便团队进行任务拆解、分工协作、制定设计输出计划。

| 设计目标

在完成需求梳理后，我们与业务方达成目标共识，一方面通过设计创新、统一视觉调性、融入品牌IP形象，提升用户对品牌的认同感；另一方面通过在交互上的玩法创新，让用户在报告中找到可玩性，从而提高用户参与感和分享欲，促进业务目标达成。

| 设计关键词

“提起美居年报你会联想到什么？”

带着这个问题，我们进行头脑风暴 — 发散想象 — 收拢创意，总结出以下重要的关键词，其中「情感化、场景化、个性化」作为最核心的关键词，将贯穿整个设计创作。

| 设计风格

01 如何体现情感化？

我们在整体主视觉调性上决定采用插画风格来呈现，粉紫色渐变作为主要色彩搭配（紫粉色也是2022年年度流行色），结合微光感的点缀，融入品牌IP-小蓝元素，让用户感受到美的美居的陪伴，传递品牌温度、家的温暖。

02 如何体现场景化？

在空间、构图、布局的创意构思上，如何融入产品并且打破常规家庭空间布局？是这次年报设计上一大突破点。我们摒弃了常规的家居场景插画风格，巧妙运用放大设备局部作为切入点，联想设备与人物互动的创意场景，打造充满想象力的虚拟场景。

| 人物设定

01 人物角色设计，赋予个性

通过对用户群体分析，我们了解到用户群体倾向年轻化，为满足不同用户喜好，我们基于美的美居运营插画体系的人物基础造型，为本次活动提炼了6种典型的人物形象，对发型、服饰、搭配等进行再创作。

02 人物动效落地，体验升级

03 人物动作拆解，确保设计落地

当用户选择一个人物形象，此形象将贯穿于整个H5中。因此，人物从动作设定、设计输出、切图以及动效实现等环节，都需在前期构思阶段考虑到位。每个人物都需绘制出一整套动作，确保在15个页面中，6个形象的动作切图和动效都能完美重合并随机切换。这是个繁复、极需耐心的工作，也非常考验设计与开发同事的沟通配合能力。