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