设计网页素材

做页面时素材到底指什么——是几张配图，还是包括图标、字体、视频、背景纹理这一整套东西？这个疑问几乎每个刚接手官网项目的人都会碰到。实际情况是，设计网页素材是一套按用途分层的资源包，图片只是其中最显眼的一层，真正决定页面观感和加载速度的，往往是图标、字体、插画和动效这些容易被忽略的部分。素材准备得是否规范，直接决定后面切图、套版、上线返工的次数。下面按实操顺序，把素材从梳理到交付的每个环节拆开讲。

素材先分类，再动手找

打开设计软件之前，先把一个页面需要的素材列成清单，按四类归拢：位图（照片、banner 背景）、矢量图（图标、logo、装饰线条）、字体（标题字、正文字）、媒体文件（视频、动效序列帧）。分类的意义在于这四类素材对格式和体积的要求完全不同，混在一起找，后面必然乱。

列清单时按页面区块走一遍：顶部导航要几个图标，首屏要几张主图，产品区每张卡片配几张图，页脚要不要放二维码。一个常规企业首页数下来，位图 15-30 张、图标 20 个上下是常见量级，提前数清楚，找素材时就不会漏。

位图：尺寸和格式先定死

照片类素材按最终展示尺寸的 2 倍准备，比如首屏横幅实际显示宽 1920 像素，就找 3840 像素宽的源图，留出高清屏的余量。格式上，照片用 JPG，需要透明背景的产品图用 PNG，这两条定下来，后面压缩和切图的规则就统一了。

单张位图控制在 300KB 以内是个实用门槛，超过这个数，移动端首屏加载就会明显拖慢。找图阶段就按这个标准筛，别等切完图再回头压。

矢量图与图标：统一风格比数量重要

图标最容易出问题的地方不是缺，而是风格打架——线性图标和面性图标混着用，圆角和直角混着用，页面立刻显得零碎。开工前定一条规则：整套图标统一线宽（常用 1.5 像素或 2 像素）、统一圆角半径、统一视觉尺寸（24×24 或 32×32）。

图标优先用 SVG 格式，放大不糊，还能直接用代码改颜色。关于图标、图片在页面里具体怎么插入、路径怎么配，可以延伸看《设计网页如何添加图片》，那篇把插图入口和路径规则讲得比较细。

版权和授权，动手前必须过一遍

素材来源无非三条路：自己拍、买授权、用免费图库。自己拍的注意肖像权和场地授权；买的商用授权要留存授权凭证，写清授权范围（是否可用于官网、是否可二次修改）；免费图库重点看两点——是否要求署名、是否允许商用。

字形素材同样有授权问题。商用字体按套授权，一套中文字体的商用授权费用从几百元到几千元不等，页面用了几套就买几套，别拿系统自带字体直接商用。遇到过的一个实际情况是，有家做服装电商的客户上线半年后收到字体公司的函，页面标题用了未授权字体，最后按套补了 4000 多元授权费，还得连夜换字重排。

这条钱省不得。虽然免费商用字体也能凑合，但我建议品牌官网的标题字老老实实买授权，字形是品牌识别的一部分，出问题的代价远高于授权费。

把素材整理成能交付的结构

素材齐了不等于能交付，散在一堆文件夹里发给开发，找图的时间比做页面还长。按下面的结构整理，交接效率会高出好几倍：

• 按页面区块建文件夹：header、banner、product、footer，每个区块一个目录，文件名带序号，如 banner-01.jpg。
• 源文件和压缩版分开放：source 目录存原始大图，dist 目录存压缩后的成品，交付只发 dist，源文件自己留底。
• 图标单独建 icons 目录，全部 SVG，文件名用英文小写加连字符，如 icon-cart.svg。
• 附一份素材清单表格，写清每张图的使用位置、尺寸、格式、授权来源。

这份清单不是形式主义，验收时逐行对，缺哪张一目了然。素材命名用英文小写，避免中文和空格，服务器对中文文件名的兼容性时好时坏，改起来都是麻烦。

交付前的三项检查

第一项查体积：整个页面所有图片素材加起来控制在 2MB 以内，单张超过 300KB 的挑出来重新压。第二项查格式匹配：透明背景的地方确认是 PNG 或 SVG，没有误用 JPG 导致白底。第三项查显示效果：把素材放进页面实际渲染一遍，重点看高清屏下图标是否发虚、横幅在窄屏下裁切是否切到主体。

三项检查按经验留 1-2 天，赶着上线跳过这步，后期返工的时间通常是检查时间的数倍。

总结

设计网页素材这件事，功夫都在动手之前：先按位图、矢量图、字体、媒体四类列清单，位图定尺寸和格式，图标定统一规范；版权授权逐项核实，字体商用授权该买就买；整理时按区块建目录、源文件与压缩版分离、附素材清单；交付前查体积、查格式、查实际渲染。素材这一层做扎实，后面的切图和套版才顺，页面上线后也少折腾。