搜索
在H5设计中，图文设计是非常重要的一环。高颜值的图文设计不仅可以将H5主题很好地表达出来，还能产生强烈的视觉感染力。本章将学习如何在H5中进行图文设计，其中包括H5页面版式设计、H5页面图片设计以及H5页面文本设计，并通过制作邀请函H5案例巩固本章所学知识。CHAPTER04图文设计：用高颜值图文提升画面质感学习目标掌握H5页面版式设计的方法。掌握H5页面图片设计的方法。掌握H5页面文本设计的方法。目录CONTENTH5页面版式设计4.1H5页面图片设计4.2H5页面文本设计4.3实战案例——制作邀请函H5页面4.44.1.1页面有层级，元素要统一页面焦点部分一级信息页面次要部分二级信息页面的点缀部分三级信息第一级第二级第三级第一级第三级第二级4.1.2页面信息排版在版式设计时要找到元素之间的对齐线，从而建立联系。基于人们从左到右、从上到下的阅读习惯，H5页面信息的排版一般采用左对齐或居中对齐的方式。对齐4.1.2页面信息排版重复是指在H5页面设计中一些基础元素可以重复使用，如颜色、形状、空间关系、字体、图片以及一些几何元素等，这样可以增加页面的条理性和整体性，降低用户认知的难度。重复原则不仅限于单个页面，整个H5作品都应力求重复、统一的呈现方式。重复4.1.2页面信息排版对比就是要避免H5页面中的元素过于相似。对比可以将页面元素的重要性层次划分出来，使页面内容的展示更有条理，同时可以丰富H5页面中的内容层级，使整体内容一目了然。对比4.1.2页面信息排版所谓亲密性就是把H5页面中的元素进行分类，将在内容或逻辑上相互有关联的元素组合在一起，形成视觉单元，实现页面信息的组织性和条理性。同时，还要注意不要在这些元素中间留出太多的空白，并且视觉单位之间也要建立某种联系。亲密性4.1.3可视化页面信息在设计H5页面版式时，一定要考虑内容的易读性，用户对图形的理解比文字更高效，适当地使用图形可以增加内容的易读性和设计感。将文字表达图形化，可以让信息变得简明、清晰。4.1.4适当的留白在H5版式设计中，不仅有文字和图片的版式设计，留白也是页面版式设计必不可少的部分。所有的留白都要有明确的目的，以控制页面的空间构成。留白空间不一定是白色的，也可以是其他颜色或者纹理，它是任何与背景相同的空间。4.1.5保持页面视觉平衡在一个平面上，每个元素都是有“重量”的。同一个元素，颜色深的比颜色浅的重，面积大的比面积小的重。这些视觉上的感觉，称为视觉重量。视觉重量的大小主要通过对比产生，如视觉元素的大小、明暗、形态、纹理对比都能对视觉重量产生影响。4.1.6运用插画现在互联网产品越来越注重用户体验和情感化的设计，插画在设计中的运用越来越多。插画有多种多样的表现形式，如扁平插画、肌理插画、手绘插画、MBE插画、渐变插画、立体插画、描边插画等。4.1.7版面符合视觉心理比例是整体与部分、部分与部分之间数量的一种比率关系。成功的版面设计，首先取决于合适的比例，常常表现为一定的数列：等差数列、等比数列、黄金分割比等，这些比例可以使版面达到较大程度的和谐。在H5版面设计中，往往圆角比直角更容易让用户接受，也更加亲切，例如，个人头像、食物图片、板块样式等使用圆角会有更好的效果。而直角通常用在需要更全面展示的地方，如相片、艺术作品、商品展示等。在H5所有页面的排版中要避免页面单调，增加节奏感，让用户在观看过程中不会感到冗长、无趣。目录CONTENTH5页面版式设计4.1H5页面图片设计4.2H5页面文本设计4.3实战案例——制作邀请函H5页面4.44.2.1提高或降低图版率H5页面中图片所占的比率，称为图版率。通常情况下，提高图版率会使H5页面充满活力，富有感染力；而降低图版率会给人一种宁静、典雅、高级的感觉。4.2.1提高或降低图版率当H5页面的内容比较少时若想提高图版率可以使用色块或抽象化元素模拟现实存在的物体，如电影票，信封、书本、纸张、优惠券、便签等，这样可以使页面要友好，同时也能减少空洞的感觉。4.2.2使用全图和局部细节图片使用全图是指让H5页面中的图片占据整个屏幕，这样会让页面显得饱满、完整、有张力。4.2.2使用全图和局部细节图片很多图片看上去视觉冲击力较弱，主要是因为图片本身的细节感不强。如果将图片局部细节部分裁剪出来放大，就容易让用户看清细节，在视觉上的冲击力也会增强。4.2.3使用图标在H5设计中，经常需要使用图标。相对文字而言，图标能以一种更高效的方式将设计人员想要传递的信息进行浓缩，不仅使信息易于识别，还能让页面更加简洁、美观，更利于排版。4.2.3使用图标对于H5页面中的非交互图标，在设计时应保证图标风格的统一性。在图标风格一致的基础上，还要保证图标类型及外观的一致性。图标类型一致图标外观不一致4.2.3使用图标在设计图标时应让图标的视觉大小保持一致，而不是让它们的长宽属性保持一致。视觉大小不一致视觉大小一致4.2.4压缩图片大小一般来说，可以使用Photoshop进行图片的压缩，但有时用Photoshop压缩后的图片尺寸依然较大，并不适合使用，这时就需要借助其他压缩工具，如智图、TinyPNG、JPEGmini等。除了使用压缩工具压缩图片以外，还可以通过以下方法来优化图片，减小图片尺寸大小。（1）若图片色彩要求不高，可以使用PNG8格式，尽量避免使用PNG24格式。（2）在不用考虑兼容的情况下，可以尝试使用WebP和BPG等新图片格式。（3）使用SVG图标和IconFont图标文字代替简单的图标图片。（4）使用字蛛来代替艺术字体切图。（5）使用Srcset属性减小图片加载时间。Srcset属性可以根据屏幕密度设置不同的图片，例如，为使用高分辨率设备的用户显示高分辨的图像源，为使用非高分辨率设备的用户显示其他图像源。（6）设置合适的图片大小。首次加载图片小于1014KB，宽度小于640像素。目录CONTENTH5页面版式设计4.1H5页面图片设计4.2H5页面文本设计4.3实战案例——制作邀请函H5页面4.4整个画面中最重要的信息点，在页面中一般会充当视觉焦点。标题文本用于展示主要信息，在设计正文时不要随意地堆积，正文在H5页面中展示的重要程度应高于画面，以及相应的动效和装饰。正文文本标题的格式01标题的设计02控制正文信息量03设置字体04设置正文字号和颜色05设置间距06设置对齐方式07添加文字装饰08设置文字层级09目录CONTENTH5页面版式设计4.1H5页面图片设计4.2H5页面文本设计4.3实战案例——制作邀请函H5页面4.44.4.1使用Photoshop制作邀请函首页4.4.2将PSD文件导入H5页面