1.4 H5页面的设计流程

设计H5页面时，设计师需要先明确设计目的，然后根据用户需求进行内容策划，并完成原型图的绘制，再进行素材的收集以及H5页面设计、交互设计，最后生成和发布H5。

1.4.1 明确设计目的

在设计之初，客户往往会提供设计需求，设计师需要先仔细阅读设计需求，理解H5页面的整体目标和设计目的。明确到底要做什么，需要在其中表达什么内容，并将重点信息罗列出来，确定H5页面所要实现的具体目标，如宣传企业形象、提高品牌知名度、推广产品或服务等，为H5页面的内容策划提供方向。

1.4.2 策划内容

明确设计目的后，即可策划H5页面的内容。在进行内容策划时，需要先构建内容大纲，明确做什么；然后规划结构和内容，并选择内容的表现风格；再组织和布局内容，在此过程中可通过绘制原型图的方式展现内容。

1.构建内容大纲

构建内容大纲是设计H5页面较为重要的一环，设计师明确设计目的后，即可分析用户、品牌和产品，从而构建H5页面内容的大纲。

● 用户分析。了解目标用户的年龄、性别、受教育程度、兴趣和行为习惯，分析目标用户的需求和期望，确定内容大纲中需要包含的关键信息。

● 品牌分析。了解品牌的声誉和风格定位，确定H5页面应体现品牌的哪些信息，以及如何对品牌进行宣传与推广。

● 产品分析。了解产品的功能、卖点和定位，确定H5页面应展示产品的哪些方面，如何提升更多用户对产品的了解程度，以及如何营销和推广产品。

根据用户分析、品牌分析和产品分析的结果，罗列出需要在H5页面中传达的主题和核心信息。按照逻辑顺序，将主题和各个信息组织成结构清晰、层次分明的大纲，大纲一般需要说明设计目的、核心主题、设计手法、所用元素等。

2.规划结构和内容

根据内容大纲来规划结构和内容，整个规划过程可分为4步。

● 组织相关内容。根据内容大纲，对主要内容的相关性和从属关系进行组织和划分，考虑哪些内容需要在同一页展示，哪些内容可以分散到不同页面中展示。

● 划分页面结构。根据内容的数量和相关性，确定H5页面的结构和页数。考虑整体的叙述逻辑和页面间的衔接性，确保用户能够顺利浏览和理解每一页内容。

● 确定每一页的核心内容。根据设计目的和内容需求，确定每一页的重点和焦点，明确每一页要传达的主题和核心信息。

● 决定内容的呈现形式。根据内容大纲和设计需求，决定每项内容的呈现形式，如文本、图片、视频、动画等，考虑如何利用空间和媒体元素来传达信息，以吸引用户的注意力。

3.选择内容风格

选择合适的风格能够提升H5页面的吸引力、可读性和用户体验。不同的内容其适合的风格存在差别，设计师可以从目标用户和品牌的需求等方面进行考虑。另外，不同风格的设计效果不同，设计师应注意选择合适的表现方式，如扁平化风格强调简洁和平面化，常采用简单、明快的图形和色块来表现。

4.组织和布局内容

当确定整个H5页面的内容和风格后，可采用原型图的方式对内容进行组织和布局。一般来说，设计师常通过软件或手绘的方式绘制H5页面原型图，在绘制原型图的过程中，设计师还可与企业管理者、产品管理者、内容策划者等沟通，确保在进行H5页面的设计时能够更加全面地了解设计内容、设计难点和设计周期等情况。

图1-19所示为使用Illustrator绘制的茶饮产品H5页面原型图，从原型图可以看出该H5页面主要分为8屏：第1屏是首页（展现封面和主副标题），第2屏是品牌介绍（介绍品牌门店），第3屏是品茶（介绍茶饮产品），第4屏是好物（介绍优质产品），第5屏是茶树（展示真实场景），第6屏是茶山（展示视频），第7屏是地址（介绍门店位置），第8屏是总结（总结收尾）。在H5页面原型图的中间区域可对展现的内容进行描述，如有交互内容，设计师也可根据描述进行添加和制作；在H5页面原型图的下侧，可通过文字对主要内容进行说明，以方便后期制作。

图1-20所示为手绘原型图，也需要直观地展示H5页面内容。

1.4.3 搜集素材

完成原型图的绘制后，需要根据原型图标注的内容来搜集素材，常见的素材有文案、图片、视频、音效等。通常来说，与企业产品和活动相关的文字、图片、视频等资源，主要由企业提供，设计师也可以前往企业进行拍摄与录制等；页面设计的装饰素材、美化素材，如页面背景、按钮、图标等素材，可以通过网络下载，或由设计师自行设计。

1.4.4 进行页面设计

搜集完素材后，便可使用专业的H5编辑器进行页面设计。以Mugeda为例，可使用以下3种方式设计H5页面。

● 使用模板设计H5页面。在Mugeda中选择合适的模板，并将之前搜集的素材添加到编辑器中，替换模板内容，如图1-21所示。

● 使用图像工具设计H5页面。使用图像工具设计H5页面时多使用Photoshop、Illustrator等。在设计时可根据原型图的要求绘制页面，再将完成后的页面导入Mugeda中。图1-22所示为使用Photoshop设计抢红包H5页面。

● 直接使用Mugeda设计H5页面。Mugeda是一款专业的H5编辑器，设计师可直接在其中使用各种工具绘制和调整图形，添加媒体文件与文字等，完成H5页面的设计。图1-23所示为使用Mugeda设计节约用水H5页面。

1.4.5 进行交互设计

使用模板设计的H5页面，大多已经包含交互效果。而对于使用图像工具或直接使用Mugeda设计的H5页面，则要根据需求依次对页面中的元素添加动画、音效、互动等，使其具有交互效果。图1-24所示为在Mugeda中为节约用水H5页面添加预设动画。

1.4.6 生成和发布H5

完成H5的交互设计后，即可预览完成后的效果。若需要将H5发布到微信或网页中，可在发布页面通过二维码或链接的方式生成与发布H5。图1-25所示为节约用水H5广告的发布页面。