把握图片的意图

几乎所有设计师都知道网页设计中用图的重要性。AnyForWeb也在上一篇文章《图片在网页设计中的重要性》里，和大家分享了一些经典的案例，通过不同类型的网页设计用图从多个层面充分展现了"好图胜千言"。

好案例自然能给设计师带来一定的灵感，但在实际项目中，如何做好图片设计？

本文是网页图片设计系列之二，AnyForWeb 将与大家分享如何通过"把握图片的意图"做好设计。

给设计师的建议：做图前先别急着找素材！

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

如果能做好两个准备工作，对设计师们会有帮助：

1、 梳理网站中所需图片类型

没经过思考就直接开工是设计效率低下的罪魁祸首。

在图片设计前，设计师最好能参考目前已有的网页粗略布局和栏目等，重新梳理列出网站中所需的图片类型。

比如，按照栏目和模块对所需的图片分类：Banner、业务介绍、产品介绍/展示、公司介绍、团队介绍、新闻/资讯、客户案例等。

当然，设计师也可以根据项目实际情况，或最适合自己的方法采用更好的图片分类。

梳理图片类型是帮助设计师重新梳理网站内容，让后面工作更有计划和针对性。

2、 明确图片的意图

在一个网站中，浏览网页时所看到的图片不应仅做到吸引用户的视线，而更能让用户通过视觉影像，准确感受到网站传递的信息。

实际上，网页上的图片不只是美丽的像素块，所有的图片都应该是有意图的。

了解图片意图，对设计师来说就是明确图片的设计目标，这是非常重要的一步工作。

AnyForWeb总结了几个常见的图片意图：展现产品特点（优势）；与文字相关联，保持元素一致性；帮助人理解某些东西；教导人使用（某产品）；以人物视线引导用户；营造氛围；渲染情绪；塑造品牌。

以下是实际案例分享：

展现产品特点

上面案例是fiftythree网站的Banner图。

在一个网站中，首屏对用户的第一印象几乎起决定作用，而Banner图在首屏中所在的位置，决定了其重要性。尤其对于营销型网站来说，Banner图是一个最佳产品展示的位置。

案例中的图片展示了"Pencil"使用在iPad（Apple系列产品）上的画面，即产品的使用场景，也是产品的一个特点。

该案例的图片意图非常明确，和文字搭配在一起，既有宣传、推广产品的作用，又是一个引导用户点击参与的入口。

与文字相关联，保持元素一致性