简约风格多采用弱对比色调，色 调反差较小，冷暖色调均可。
3.1.2 扁平化风格
在H5页面风格设计中，扁平化风 格一直很受设计人员的追捧，优 势在于其通过形状、色彩、字体 等呈现出清晰明了的视觉层次， 给用户带来较为直观的视觉感受， 更易于用户理解传播的信息。
扁平化页面风格设计主张摒弃一 切繁杂冗余的装饰效果。
3.1.7 混合风格
在H5的诸多风格中，有一类不是 单一风格所能概括的，这类H5作 品融合了多种风格形式，形成了 别具一格的混合风格。混合风格 的H5中含有丰富的素材，构成了 一场华丽的视觉盛宴，能够带给 用户强烈的感染力。
目录
CONTENT
3.1 常见的H5页面风格 3.2 H5页面色彩设计
3.2.2 H5页面色彩设计策略
色彩是页面主题氛围传达的关键
在H5作品中，影响页面氛围的因素有很多，色彩无疑是传达主题氛围的关键因素之一。因此，色彩作为主题氛围 传达的“使者”，如果使用不当，就难以清晰地表达H5的主题。
3.2.2 H5页面色彩设计策略
重视用户对色彩的情感体验
在H5设计中，页面氛围传达与品牌Logo的企业形象表达是同样的道理，色彩冷暖的选择要符合H5想要给用户传达 的心理感受，设计者可以根据主题类别进行选择。
3.1.5 水墨风格
水墨风格的H5融合了许多传统文 化元素，具有浓郁的古典韵味。 它延续和传承了传统水墨绘画的 手法，有的还增添了时尚的成分。 水墨风格的H5多用于江湖武侠游 戏等的宣传，能够营造出典雅脱 俗的意境。
3.1.6 手绘风格
在传统绘画书法的影响下，一些 手绘元素也被融入到H5页面风格 设计中，形成了丰富、细腻、纯 朴、自然的表现风格。与其他风 格相比较，手绘风格的H5更加贴 近自然、反映生H5页面设计中常用的配色方案
第一阶：确定主色
三阶配色方案
3.2.1 H5页面设计中常用的配色方案
第一阶：确定主色
三阶配色方案
第二阶：确定辅助色
3.2.1 H5页面设计中常用的配色方案
第一阶：确定主色
三阶配色方案
第二阶：确定辅助色
第三阶：适当添加点缀色
3.2.1 H5页面设计中常用的配色方案
多色调搭配方案
互补色搭配
近似色搭配
三角形搭配
分裂互补色搭配
矩形搭配
正方形搭配
3.2.2 H5页面色彩设计策略
H5页面色彩的整体布局
H5的页面色彩风格取决于色彩的整体布局，这要求设计人员在明确主色的基础上，再确定辅助色与其他元素的搭 配。为了达到更突出的视觉效果，有时甚至可以采用颠覆性的色彩搭配，如冲撞色、红绿、黑白搭配等。
学习目标
✓ 了解常见的H5页面风格。 ✓ 掌握H5页面设计中常用的对比配色方案。 ✓ 掌握H5页面色彩设计的策略。 ✓ 了解常用的H5配色工具。
目录
CONTENT
3.1 常见的H5页面风格 3.2 H5页面色彩设计
3.1.1 简约风格
在H5页面风格设计中，简约风格 常用于传递品牌信息或表达情感， 这种风格要求设计人员具有敏锐 的洞察力，能够准确把握品牌的 调性，通过恰当的留白处理与排 版来形成细腻别致的视觉效果。
3.2.3 常用的H5配色工具
Coolors
3.2.3 常用的H5配色工具
Adobe Kuler
3.2.3 常用的H5配色工具
ColorDrop
3.2.3 常用的H5配色工具
Colormind
课后习题
一、简答题
1．简述常见的H5页面风格。 2．简述H5页面设计中常用的配色方案。
二、实操训练题
3.1.3 科技感风格
在这个推崇科技创新的时代，科 技感风格受到H5设计人员的青睐。 炫酷的科技感效果能够在短时间 内吸引用户的注意力，备受年轻 人的喜爱。这种H5设计风格的应 用范围较广，多用于互联网、汽 车等领域。
3.1.4 卡通手绘风格
卡通手绘风格在H5页面风格设计 中也较为常见，设计人员往往通 过手绘来表现主题内容，既轻松 又有趣，用户浏览起来也不会觉 得累，自然会停留更长的时间。
下图所示为小米有品推出的宣传类H5《20mL治愈计划》，讲述了一名在城市拼搏的女孩治 愈坏心情的故事，试分析该H5的色彩设计策略。
CHAPTER 03
H5页面风格设计：营造极具冲击力 的视觉氛围
Ｈ5页面的设计版式、风格、色彩等形式都会对用户心理产生重要的影响，而用 户体验的优劣对H5的推广成功与否起着关键性的作用。那么，如何设计H5页面 风格，营造极具冲击力的视觉氛围，为用户带来全新的视觉体验就显得至关重要。 本章将学习如何选择与设计H5的页面风格，其中包括对比配色方案、色彩设计 的策略以及配色工具等知识。