图片也要“高颜值”,但它们不只是美丽的像素块.pdfVIP

图片也要 高颜值“ ”，但它们不只是美丽的像素块 几乎所有设计师都知道网页设计中用图的重要性。 AnyForWeb 也在上一篇文章《网页设计中，诱惑 大脑中的 原始人“ ”》里，和大家分享了一些经典的案例，通过不同类型的网页设计用图从多个层面充 分展现了 好图胜千言“ ”。 好案例自然能给设计师带来一定的灵感，但在实际项目中，如何做好图片设计？ 本文是网页图片设计系列之二， AnyForWeb 将与大家分享如何通过 把握图片的意图“ ”做好设计。 给设计师的建议：做图前先别急着找素材！如果能做好两个准备工作，对设计师们会有帮助： 1 、梳理网站中所需图片类型 没经过思考就直接开工是设计效率低下的罪魁祸首。 在图片设计前，设计师最好能参考目前已有的网页粗略布局和栏目等，重新梳理列出网站中所需的 图片类型。比如，按照栏目和模块对所需的图片分类： Banner 、业务介绍、产品介绍 /展示、公司 介绍、团队介绍、新闻 /资讯、客户案例等。 当然，设计师也可以根据项目实际情况，或最适合自己的方法采用更好的图片分类。梳理图片类型 是帮助设计师重新梳理网站内容，让后面工作更有计划和针对性。 2 、明确图片的意图 在一个网站中，浏览网页时所看到的图片不应仅做到吸引用户的视线，而更能让用户通过视觉影像 ，准确感受到网站传递的信息。 实际上，网页上的图片不只是美丽的像素块，所有的图片都应该是有意图的。了解图片意图，对设 计师来说就是明确图片的设计目标，这是非常重要的一步工作。 总结了几个常见的图片意图：展现产品特点（优势）；与文字相关联，保持元素一致性；帮助人理 解某些东西；教导人使用（某产品）；以人物视线引导用户；营造氛围；渲染情绪；塑造品牌。以 下是实际案例分享： 展现产品特点 上面案例是 fiftythree 网站的 Banner 图。 在一个网站中，首屏对用户的第一印象几乎起决定作用，而 Banner 图在首屏中所在的位置，决定了 其重要性。尤其对于营销型网站来说， Banner 图是一个最佳产品展示的位置。 案例中的图片展示了 “Pencil使用在” iPad （Apple 系列产品）上的画面，即产品的使用场景，也是产 品的一个特点。 该案例的图片意图非常明确，和文字搭配在一起，既有宣传、推广产品的作用，又是一个引导用户 点击参与的入口。 与文字相关联，保持元素一致性 上图案例是 aiia 产品博客的 Banner ，此处的图片与文字高度相关，既保持了元素的一致性，又通过 色调上明与暗的处理，呈现了一种视觉美。 用户在打开博客后，会同时关注到文字和背景的产品图片，在脑海中留下具象化的印象。 其实对设计师来说，图文相关是设计中的一个基本原则。但大部分网站忽略了这一点，甚至导致信 息不能正确传递、销售机会减少等问题。 有一个来自 Web 易用性大师 Jakob Nielsen 的研究结论：单纯的装饰性图片会潜意识地被我们大脑 忽略。 这项研究表明图文相关性的重要作用，成为设计指导原则。 “图片与文字相关联 ”更应该被设计师用于项目实践中。 帮助人理解 Z uli网站中为用户展示的是一款新颖的智能家居产品，其中首页 Banner 以产品使用场景为背景。 这款产品是怎么用的？上图帮助用户快速理解网站传达的内容。 此处图片经过专业拍摄和处理，清晰、干净，并且将原本需要一大段文字描述的信息，成功以 看图“ 说话 ”的方式直接向用户展示，帮助用户更好地理解产品。 教导人使用 在Z uli 网站的 “How it Works页面中，网页以图文结合方式展示产品的多个使用状态或场景。” 该网页的所有图片风格一致，图片设计都以实体图像为主，通过扁平化的图标建立了产品与手 机App 之间的虚拟联系，简单易懂。 此处图片的意图是教导用户使用产品。 当用户浏览网页时，图片可以吸引人的注意力，并让用户对图片内容高度敏感，进而主动浏览文字 深入了解产品如何使用，激发更大兴趣。 一般情况下，设计目标为 教导人使用“ ”的图片，更适用于新产品或使用复杂的产品，这种方式可以帮 助用户快速掌握使用技巧，降低产品使用成本，获得用户青睐。 以人物视线引导用户