H5是基于HTML5技术开发的移动端可交互网页，将视觉效果与互动性结合在一起。前段时间刷屏朋友圈的年度报告、买奶茶时弹出的产品介绍、电商平台在双十一推出的小游戏都属于H5的范畴。网易云音乐、饿了么、快手
年度报告
互联网行业平日里会高频推出营销活动，比起专门开发一个程序，H5成本更低且周期短，能够灵活应对市场变化，且分享形式易于传播和裂变，2024推出年度报告的app粗略估计已经有20多个，由此可见越来越多的互联网公司都会要求设计师熟练掌握H5制作。区别在于有些规模小的企业会要求一个设计师掌握H5制作全流程，而大厂会拆分成：UI设计师、视觉设计师、动效设计师，甚至更多。事先声明：今天所说的H5不是套用第三方模板快速生成的简单界面，而是能够展示创意和交互技术的营销形式。![]()
左侧：H5免费模板 右侧：大厂需要的H5设计（网易云听歌报告）
设计师在制作H5时不仅要保证视觉上的美观，用户的交互体验也是重中之重。年度报告一直都是各大厂的年度保留节目，在技术和情感层面都有代表性，今天就以此为例，从用户体验设计五要素出发，系统分析H5全流程设计及需要掌握的技能点。![]()
战略层主要任务就是明确目标和用户需求，简单来说就是要回答两个问题：用户点击年度报告可能是为了复盘这款APP对过往一年的影响，或是发布在朋友圈中彰显“个性”；对企业而言，年度报告是其展示影响力的绝佳机会，通过这些数据向用户传播品牌的重要性，进而增强产品的认同感与忠诚度。![]()
比起静态海报，H5会更重视直击用户内心，引起共鸣。为了增强情感的连接，设计师需要通过充分的市场调研来了解品牌与用户需求，并对收集到的数据进行分析，比如通过查看往年报告中用户停留的时长，来确定用户最关注的内容与浏览习惯。范围层的主要任务是确定内容大致方向，具体来说就是：在网易云2024年度报告中，用户个性化的人设形象、所呈现的数据维度、引起情感共鸣的主题都是在这个阶段确定的。
![]()
设计师主要依据在战略层获取的信息来决定H5的内容，能够组织筛选出适合展示的内容、顺序及重点；同时兼顾交互功能设计，如果能够掌握JavaScript等编程语言，则更能设计出易于落地的方向。![]()
L同学 获 金斯顿史密斯学院 Design: Expanded Practice - Pathway 4：Interactions and Experiments MA
意大利罗马一大 Product and Service Design MA offer
典型案例是美团2024年度报告，短剧+AI的形式非常大胆，用户可以选择以男频/女频的身份进入，题材涵盖职场、豪门、仙侠等，这种打开方式在一众年度报告中非常清奇，不仅视觉设计夺人眼球，用户进入内容的过程也别具一格。![]()
用户的年度消费数据被巧妙的融入进剧情当中，这种呈现与交互形式打破了传统的图文方式，让用户能在轻松愉快的氛围中看完年度报告，且留下深刻印象。
![]()
设计师需要掌握Axure等工具来绘制信息构架图，能够清晰理清内容之间的关系；熟悉用户行为模式（比如用户的浏览路径），设计出符合用户操作习惯的流程。该阶段就将进入具体的界面设计了：UI、排版及布局。这个阶段的任务主要交给UI/UX设计师，要设计出直观、易于识别的按钮和图标，提升用户操作的便捷性；加入简单的滑块、下拉菜单等；把握字体、字号、行距等排版原则；并能够合理规划页面布局，确保信息的层次和流程。![]()
Z同学 作品 《GEMINI》
获 香港理工大学 智能系统设计 MDes
表现层是最重要且是视觉设计师主要参与的环节，包括视觉设计、动画动效设计、品牌形象设计。在这个阶段，要充分了解品牌定位以及发展战略，才能设计出符合公司形象的作品。小宇宙2024年度报告中，由于APP是以听觉为主的播客平台，整体风格简约而不简单，屏幕四周的线条配合动效，让文字移动的角度仿佛穿梭于宇宙之中，极具冲击力，应和了“小宇宙”的主题与名称。排版设计主要以文字信息为主，各个界面的颜色明亮大胆，切换非常频繁，这种设计风格更适用于需要清晰传达信息、强调数据的页面，同时也保持了视觉上的吸引力和品牌特色。![]()
小红书保持常用的插画风格，采用年轻人中流行的“多巴胺”配色，色彩明亮且对比鲜明，绘画风格轻松幽默，符合品牌整体“潮流”定位和受众偏好，使用的卡通人物形象的风格也更加亲切、有趣，容易吸引用户的注意力。
![]()
Bilibili年度报告主打温暖与陪伴，写实的自然背景与插画风格的“小电视”配撞到一起，这种设计风格和B站近些年转型有关，B站正在突破二次元平台的局限，希望能够吸纳更多现实中的创作者入驻平台，达成二三次元的融合。![]()
动效设计师需要与视觉设计师共同完成方案设计，用AE、PS、Blender等软件产出视频Demo和动效资源、标注，再传递给开发编写动效。2023年网易云音乐画面采用「淡入淡出」样式的翻页动效，并配合上下滑动；文字出现用透明度渐显和向上位移的方式，为了突出文字内容，还给画面添加了「缓动曲线」。整体风格都是温暖、轻快的。从各大平台的H5页面中可以发现，作为传播最广的渠道之一，H5承担企业宣传的重要任务，所以内容与品牌形象与业务密切相关，风格与品牌形象之间要保持深刻的连接性与一致性；同时注重数据、关键词和用户之间的个性化表达。设计师需要在清楚信息层级与用户需求的基础上灵活运用，设计出直击人心的内容。![]()
W同学 获 伦敦大学学院 Digital Media：Production MA
格拉斯哥艺术学院 Design Innovation and Interaction Design MDes offer
最后预祝各位都能拿到心仪的offer，如果各位同学已经找到自己心意的岗位，想要尝试投递，但对自己的业务水平没有足够的信心，想要通过优化作品集提升个人竞争力，欢迎继续向下了解：我们最新研发的竞赛式培训课程，旨在培养学生的项目式创作专业技能，激发创意潜能，为学生在各类设计竞赛中脱颖而出提供指导和咨询，从而确保学生不管是在留学、保研、申博还是实习、就业，都能具备强悍的竞争优势。此课程不限课时，不限项目数，一年的服务期之内，您至少能够收获2个知名设计奖项。优秀学员还可获得就业指导和推荐网络，免费推荐实习内推机会。价格优惠，详情欢迎通过文末二维码咨询。
