如何在网页设计中更有效运用图像？
网页设计师明白，对图像的精妙选择，以及对排版和设计元素的运用，是吸引用户的重要因素。但你如何确保为每个项目都选择正确的图像，又希望这些华丽的图像起到怎样的作用呢？
后端设计师们为网页或APP设计网格框架，前端设计师们设计UI、测试UX并进行配色。当涉及到图像的时候，为什么却要用“握着手微笑的商人”或者“暗示成功和专注”的下三路泛滥图像呢？
在你思考这个问题的同时，看看下面这5个案例，我们会给你一些关于图像选择的启发。
01.选择完美的主图
现在显示器的分辨率越来越高，落地页上一张震撼人心的主图起到的作用越来越不可小觑。
由于主图可以建立或毁灭用户和品牌的联系，选择主图的确是至关重要的。请确保图像和主题有足够强的相关性，如果你没有时间或预算去进行拍摄或制作主图，那也没有关系——现成的资源也是足够的，选择高质量的图库图像也能达成目的。
但是仍然要记住，避免用烂大街的图像。你需要有目的地选择和品牌相关的图像，过于像是通用素材的内容会降低用户体验，并影响网站的权威性。
思考一下上面的案例（Molly & Me Pecans）。主图占满了首页，展示了令人垂涎欲滴的坚果。当然，它看起来像是专业摄影，但高品质的图库图像无疑也能有同样的效果。
02.考虑不同裁剪和尺寸
一旦你选择了正确的图像，你就需要动用你的设计技巧来裁剪它。在裁剪的时候，注意保持吸引观众的部分，不要在图像上留下太多的无用区域。
这是个需要仔细均衡考虑的步骤。在全响应式网站中，如果图像没有被设置正确，它可能在不同尺寸的荧幕上不能都很好地呈现效果。在测试的时候，尽量转换到每种你能预想到的设备上，看看图像的实际效果。
上面的案例是世界野生动物基金会（WWF）的首页，采用了全响应式设计。它选择的图像，在主体动物的周围流出了足够的背景，这样在小屏幕上就可以实现分割，而且不会留下太多死角导致喧宾夺主。
03.为在线商店策划内容
虽然前两个例子中，使用图库的图像是没有问题的，但在电子商务网站中，你的图像往往需要定制——它可能由客户提供，但如果你可以改良它们是最好的。
好的在线商店图像往往诞生于工作室，在合适的灯光、照明和拍摄位置下，可以保持一致的颜色呈现、大小和角度，适当时候还可以进行局部放大。
上面的例子来自钱包品牌Bellroy，它选择了同一产品的8种不同角度摄影，并展示了各自的细节。最终，给出一张主题图像，一览无余地告诉你可以往里装什么。
当然，这一条的建议仅当你的网站销售一手产品的时候才适用。如果你要卖的是第三方产品，应该根据类似条件采购合适的图像。
04/选择图像作为UI和图标
图库里有大量的矢量图形，可以作为你的应用程序和网站UI或图标的优秀来源。尤其是当你使用Adobe Illustrator作为设计工具的时候。
在使用图库图形的时候，也要记得原创性和相关性，但有时候UI图标可能反而越眼熟越好。为了保持用户体验的流畅，可以使用特定符号的内置视觉关联。
如果图标UI足以表达信息，那就无需额外加上文本标签，这样界面更简洁干净。很多这样的图标可以做到，被称为“通用图标”，比如代表“首页”的房子按钮，代表“搜索”的放大镜和代表“购物车”的小推车。
不幸的是，通用图标并不是那么多，很多熟悉的图标会因为所在位置有不同的含义。比如随处可见的心形和星形符号（某乎的点赞和感谢），这些被称为冲突图标。仔细选择，在必要的时候添加文本标签，保证用户获得流畅体验。
05.寻找关联上下文的图像
根据网站的情况，可能需要图像来对特定子页面进行补充说明，它可以是一个故事或博客的文章——虽然后者可能是CMS使用者需要考虑的问题。
这里重申，所有关于图像的选择都要关联内容。当数量和质量合适的时候，定制的图像是极好的，然而图库图像也是不可或缺的。但就算是子页面的图像，也要考虑和主题的适配。
拍摄图像可能是昂贵而耗时的，典型的例子就是上文的社交旅行平台Tripoto，使用了大量特定位置的旅行图像。
虽然热门的旅行地点，在图库里一定也有无数张，但如果你需要一整批，那就需要花时间去寻找类似风格和情感的图像
英文来源：Creaviebloq
英文标题：How to use images more effectively in web design
原作者：Nick Carson
翻译：卡米雷特
