4.1 H5页面的版式设计 如何制作出美观、酷炫的H5作品?除了简单的图文搭配,以及一些元素的添加修饰外,整个页面的版式设计也是非常重要的。下面我们详细了解一下如何对H5页面的版式进行专业的设计,制作出吸引人眼球的H5版面。 4.1.1 H5版式设计的原则 在大多数的H5设计工具中,不论是移动端的小程序、APP上的H5设计工具,还是PC端的网站H5设计工具,所制作的H5页面都是适合在移动手机端屏幕展示的。 版式设计要考虑的因素是非常多的,例如手机屏幕适用H5页面的尺寸,以及如何在有限的屏幕中对所需传达的内容进行排版设计等。下面详细介绍H5版式设计的原则。 1. 内容分类整理 对H5页面进行设计排版时,对需要向用户传达的信息进行分类整理,把相关的信息归类在一起,排版时将相关的元素进行整体排列,可以对用户在观赏H5页面时的逻辑思维提供信息组织帮助,提高用户信息的获取量。图4-1所示为对页面信息进行的分类整理。 图4-1 信息分类整理 2. 元素对齐排列 将页面元素进行对齐排列,为的是能够让整个页面中的元素形成整体视觉效果。对齐排��作为常用的排版方式,能够使页面整体元素具有条理性,形成一个统一的整体,建立一种清晰的视觉效果。 图4-2所示为对页面元素进行对齐排列的效果。 图4-2 元素对齐排列 3. 布局重复交错 重复是指在H5页面布局中,对相关的元素、图像或文字使用相同的属性设计,使其形成一种视觉上的重复;而交错的应用就是为了避免生硬的重复,导致整个页面过于死板,如图4-3所示。 图4-3 对页面进行重复交错 4. 关键点的对比布局 在H5页面制作时,图文元素一定会存在主次之分。作为主要信息存在的元素,在页面中为了吸引用户眼球,就要对元素进行着重设计,使得主要元素与其他元素呈现完全不同的效果,形成对比性,有助于用户的阅读逻辑性。 如图4-4所示,这是在页面中突出**信息的版式效果。 图4-4 突出**信息 4.1.2 H5页面的网格设计 网格设计,又称为“网格系统”,起源于20世纪初的西欧**,完善成熟于20世纪中期的瑞士。 *早对这个概念进行阐释的是瑞士的约瑟夫?米勒-布罗克曼,其于1961年出版的《平面艺术家及其设计议题》一书,使网格设计成为了平面设计史上的先驱。 **的版式设计决定了整个作品的基调以及美观程度,在形成良好的视觉信息传递时,也能够很好地进行传播。但不是所有的行业企业都会为自己的品牌聘请一个设计师,接下来便带大家学习如何在零基础的情况下掌握网格设计。 网格的运用在设计领域可以说是非常普遍的,在所有的常用绘图软件中都必然存在着网格工具,例如,图4-5所示为Photoshop CC 2018绘图页面中的网格工具。 图4-5 Photoshop CC 2018绘图页面中的网格工具 1. 设计原理 网格设计的风格形成,*早是对建筑的应用,其风格特点是通过严格的数字比例关系进行运算,再把版心划分为无数统一尺寸的网格。将版面分为若干个均匀的格子,形成网状式的网格,将图片与文字置入其中,使版面具有一定的节奏变化,从而形成一种优美的韵律,但也会使版面产生呆板的负面影响。 网格为所有的设计元素提供了一个结构,可以使设计创造更轻松、灵活。采用这种方法设计的页面有着非常好的比例感和秩序感,同时也能形成很好的准确性与严密性,帮助设计师设计出美观、大方,而又实用的版面。 图4-6所示为现代杂志中运用的网格设计。 图4-7所示为网页中运用的网格设计。