如何在网页设计中更有效运用图像?

网页设计师明白,对图像的精妙选择,以及对排版和设计元素的运用,是吸引用户的重要因素。但你如何确保为每个项目都选择正确的图像,又希望这些华丽的图像起到怎样的作用呢?

后端设计师们为网页或APP设计网格框架,前端设计师们设计UI、测试UX并进行配色。当涉及到图像的时候,为什么却要用“握着手微笑的商人”或者“暗示成功和专注”的下三路泛滥图像呢?

在你思考这个问题的同时,看看下面这5个案例,我们会给你一些关于图像选择的启发。

01.选择完美的主图

50547631 - design, sharing - 如何在网页设计中更有效运用图像?

现在显示器的分辨率越来越高,落地页上一张震撼人心的主图起到的作用越来越不可小觑。

由于主图可以建立或毁灭用户和品牌的联系,选择主图的确是至关重要的。请确保图像和主题有足够强的相关性,如果你没有时间或预算去进行拍摄或制作主图,那也没有关系——现成的资源也是足够的,选择高质量的图库图像也能达成目的。

但是仍然要记住,避免用烂大街的图像。你需要有目的地选择和品牌相关的图像,过于像是通用素材的内容会降低用户体验,并影响网站的权威性。

思考一下上面的案例(Molly & Me Pecans)。主图占满了首页,展示了令人垂涎欲滴的坚果。当然,它看起来像是专业摄影,但高品质的图库图像无疑也能有同样的效果。

02.考虑不同裁剪和尺寸

11766515 - design, sharing - 如何在网页设计中更有效运用图像?

一旦你选择了正确的图像,你就需要动用你的设计技巧来裁剪它。在裁剪的时候,注意保持吸引观众的部分,不要在图像上留下太多的无用区域。

这是个需要仔细均衡考虑的步骤。在全响应式网站中,如果图像没有被设置正确,它可能在不同尺寸的荧幕上不能都很好地呈现效果。在测试的时候,尽量转换到每种你能预想到的设备上,看看图像的实际效果。

上面的案例是世界野生动物基金会(WWF)的首页,采用了全响应式设计。它选择的图像,在主体动物的周围流出了足够的背景,这样在小屏幕上就可以实现分割,而且不会留下太多死角导致喧宾夺主。

03.为在线商店策划内容

66885387 - design, sharing - 如何在网页设计中更有效运用图像?

虽然前两个例子中,使用图库的图像是没有问题的,但在电子商务网站中,你的图像往往需要定制——它可能由客户提供,但如果你可以改良它们是最好的。

好的在线商店图像往往诞生于工作室,在合适的灯光、照明和拍摄位置下,可以保持一致的颜色呈现、大小和角度,适当时候还可以进行局部放大。

上面的例子来自钱包品牌Bellroy,它选择了同一产品的8种不同角度摄影,并展示了各自的细节。最终,给出一张主题图像,一览无余地告诉你可以往里装什么。

当然,这一条的建议仅当你的网站销售一手产品的时候才适用。如果你要卖的是第三方产品,应该根据类似条件采购合适的图像。

04/选择图像作为UI和图标

32137113 - design, sharing - 如何在网页设计中更有效运用图像?

图库里有大量的矢量图形,可以作为你的应用程序和网站UI或图标的优秀来源。尤其是当你使用Adobe Illustrator作为设计工具的时候。

在使用图库图形的时候,也要记得原创性和相关性,但有时候UI图标可能反而越眼熟越好。为了保持用户体验的流畅,可以使用特定符号的内置视觉关联。

如果图标UI足以表达信息,那就无需额外加上文本标签,这样界面更简洁干净。很多这样的图标可以做到,被称为“通用图标”,比如代表“首页”的房子按钮,代表“搜索”的放大镜和代表“购物车”的小推车。

不幸的是,通用图标并不是那么多,很多熟悉的图标会因为所在位置有不同的含义。比如随处可见的心形和星形符号(某乎的点赞和感谢),这些被称为冲突图标。仔细选择,在必要的时候添加文本标签,保证用户获得流畅体验。

05.寻找关联上下文的图像

90505541 - design, sharing - 如何在网页设计中更有效运用图像?

根据网站的情况,可能需要图像来对特定子页面进行补充说明,它可以是一个故事或博客的文章——虽然后者可能是CMS使用者需要考虑的问题。

这里重申,所有关于图像的选择都要关联内容。当数量和质量合适的时候,定制的图像是极好的,然而图库图像也是不可或缺的。但就算是子页面的图像,也要考虑和主题的适配。

拍摄图像可能是昂贵而耗时的,典型的例子就是上文的社交旅行平台Tripoto,使用了大量特定位置的旅行图像。

虽然热门的旅行地点,在图库里一定也有无数张,但如果你需要一整批,那就需要花时间去寻找类似风格和情感的图像

 

英文来源:Creaviebloq

英文标题:How to use images more effectively in web design

原作者:Nick Carson

翻译:卡米雷特

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注