网站建设公司网站H5设计全流程分析与思考

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

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

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

网站设计目标

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

网站设计关键词

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

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

01  网站如何体现情感化？

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

02  网站如何体现场景化？

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

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

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

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

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

01  网站草图创意，设计创新

在设计前期，我们会对每一页内容进行理解，提炼主题，并发散想象力，为其打造独特的场景故事，最终与需求方确认每一个页面的创意方向，并阶段性的与需求方确认页面视觉输出效果，避免后期大量不必要的设计改动，确保整体项目进度顺利。

02  网站视觉呈现，调性统一

基于前期确定的设计风格，在设计过程中我们需要严格把控整体视觉调性的统一，不断发现问题、优化页面细节，从表现手法、配色方案、动效设计上都尽量保持一致性，让整体H5形成统一调性。

01  网站新增抽签抽奖玩法，提升体验感

考虑年度报告若只呈现用户数据回顾会显得比较单调，也会影响没有数据用户的完读情况。由于上线时间为跨年夜，我们在报告最后设计了抽新年签、抽奖环节，将报告与玩法/仪式感相结合，优化H5体验链路，提升用户参与度。

02  网站层层惊喜，强化情绪体验

我们在明度和饱和度保持统一的基础上，在视觉上融入了红色、金色，烘托新年氛围。并增加了抽签刮奖动效，相较静态展示更有视觉冲击，更能营造沉浸式的活动体验，强化用户情绪。

01  网站设计原则

好的动效会给人带来愉悦的心理感受。设计过程应当遵循以下几点原则：

02  网站实现方式

常用动效落地格式：SVGA、Lottie(json)、Gif /Apng、PNG序列、Sprite、Video、开发动效7种格式，不同形式各有各的特点和不足，实际的工作中，我们会根据用途或者动效类型使用不同的实现方式。

03 网站 动效标注

动效Demo完成后，需要开发的动效应输出动效标注交付前端开发，我们使用动效标注模板，应用规范化曲线，组件化编辑动效标注，下面以首页展示动效为例，进行图表标注。

04  网站函数曲线

即动画速率，简单来说就是动画速度变化的趋势，比如「先快后慢」「先慢后快」「缓动」「回弹」等效果。