H5+交互融媒体设计 课件 第三章 H5 视觉设计技巧.docx

第3章H5视觉设计技巧

学习要点：界面设计主要通过对文字、图片、插画、色彩等语言的规划、编排和优化来完成目标，促进传达者和受众的交流。视觉传达最早应用于商品文字广告，发展到现在数字交互产品的普及应用，大致经历了由文字→图形→色彩→动效→视频的

综合演化。

无论是早期的线下实体产品还是如今的数字产品，视觉设计都发挥着重要的作用。线下实体产品通过视觉设计承担大部分的广告行为，数字产品则通过视觉设计来达到聚拢用户视觉焦点的目的，为用户创造良好的用户体验和实现产品功能传达。因此，视觉设计绝不仅仅只是盲目的美观功能，而是结合产品特性对色彩、文字、图形、层次、空间等要素进行优化组合，在实现基本信息传递的同时，为用户创造最优体验，最终实现或商业或公益目的。

数字产品视觉设计的价值，通过产品颜值、体验与功能三方面来体现。三者相辅相成、缺一不可，从而让我们的数字产品更好地满足用户的需求。本章主要介绍H5数字产品视觉设计的一些规范与设计技巧。

平面设计师

视觉

数码设计师

视觉

听觉触觉

数字时代的视觉设计师

3.1

H5页面设计规范

当一个产品投放给用户后，用户的行为路径是“感知-记忆-理解-行动”。有颜值的视觉设计很重要。一是因为人们对喜爱的、美观的信息更愿意接受，视觉信息传播效率最高。二是相对于文字、音频等，图像化的视觉信息比其他信息更容易让人接受和记忆,科学家也已证实人的大脑处理视觉化的信息最有效率。视觉设计在产品体验上的价值,就是帮助用户获得更好的使用感受和舒适的感官体验。视觉设计通过视觉信息的合理规划、适度呈现、有序编排，使用户情感需求和使用流程得到满足，从而提升用户使用产品的愉悦度。而这个层面的需求，也受到视觉颜值价值的影响。视觉的美感，本身就是一种体验，和使用体验并不是割裂的，而且互相穿插影响。视觉设计在产品功能方面

的价值就是帮助用户更好地解决问题，精准而有创新的视觉设计会让产品功能更明确更

有效。移动端产品的更新迭代非常迅速，视觉设计师只有掌握更多技能，才能不断创新

,满足用户的需求。

3.1.1H5页面设计尺寸

目前大多数H5编辑器，一般会采用640px×1008px这套尺寸。这是适配苹果5代手机的尺寸，但苹果5代屏幕尺寸是640px×1136px,为什么会少掉的128px?那是因为H5一般会在微信上观看，微信页面的上方会有一个顶部导览，

它是用来显示退出、跳转和姓名等信息的。不仅仅是微信，手机端的浏览器也会

有不同样式的导航栏出现在屏幕的上方。

机型

分辨率

状态栏高度

导航栏高度

倍率

iPhone5、5s、5c、SE

640*1136px

40px

88px

@2x

iPhone6、6s、7、8

750*1334px

40px

88px

@2x

iPhone11

828*1792px

88px

88px

@2x

iPhone12、Pro

1170*2532px

132px

132px

@3x

19-08

19-08

×

回家之路

140

顶部栏目+导航条

HsAnn

回家就是一种度假

H5页面区

《

iPhone手机页面区

●像素：px(pixel)的缩写，是指在由一个数字序列表示的图像中的一个最小单位，称为像素。在网页设计中经常会使用该单位。

●像素密度：ppi(pixelsperinch)准确来说是每英寸的长度上排列的像素点数量，像素密度越高，代表屏幕显示效果越精细，H5中的图片分辨率一般用72ppi即可。

●倍率：交互设计中经常说的2倍图、3倍图，其实就是根据像素密度得来的。

H5中一般都做2倍尺寸，也就是2倍图(@2x),这样无论在苹果还是安卓手机上，H5的图片显示较为清晰，同时页面加载速度也会较快。随着手机屏幕越来越

大，比如iPhone12或更大尺寸手机，也会做3倍图(@3x)。

3.1.2H5的响应式特征

640px×1008px这套尺寸最大的好处在于压缩比特别高，它既能保证页面不会太大，又能保证H5的画面在大多数屏幕上能够显示得比较清晰。H5网站具有页

面“响应式”的自动适配能力，所以在大部分情况下页面都会自动适配满屏。

为避免背景图出现黑边、白边和错图类似情况的发生，我们的背景图通常要放出画

面。这个做法类似纸质媒体设计时的“出血”设计，纸媒的“出血”一般设定为3~

5mm。在移动界面设计时，凡是靠边缘的大元素，我们也要做“出血”处理，把它往画外放出去一些。而一些比较靠边的小元素，我们则把它往页面内移动一些，尽量不要出

现在边缘，以防止不同机型显示时元素不完整。