在Web界面中使用照片的七种最佳策略



网站上一张难忘的照片可以单独塑造一个品牌的整体形象,

作为基于视觉的生物,我们处理视觉数据比任何其他输入方法都要好得多(正如David McCandless在这篇TED演讲中解释的那样,这比其他输入方法要好得多)。这应该解释在网页设计中对照片的重视,而不是对文本块的重视。

今天,我将讨论在web界面中利用照片的七种最佳策略。

英雄形象

全屏幕或大屏幕图像会立即吸引用户的注意力。最新的主页图像技术之一是hero标题——由文本和导航选项覆盖的全屏图像。

一张恒星照片是开始体验和设定正确基调的好方法。上面的Cookiesound使用了超大尺寸的图像和简单的无衬线排版,以实现更定制的外观和感觉。由于该网站是一个旅游博客,高清照片配上引人注目的标题立即吸引你进入叙事。

使用英雄图像时,请遵循以下一般原则:

  • 印刷术–你的图片将是中心焦点,因此你的文本应该简短但有力。它必须与更刺激的视觉进行竞争,所以强烈的字体和处理总是有帮助的。尝试雅致的字体和不同的处理方式(粗体总是一个安全的默认值)

正如2016年网页设计趋势一样,英雄照片可以给用户留下最深刻的第一印象。仔细选择高清照片,然后根据美感和构图决定排版处理。

2、现实对象

特别受零售网站欢迎,在其实际环境中展示商品已被证明可以提高转化率。这让用户更容易想象产品或服务如何融入自己的生活。(有一件事你可能想避免——网络市场上流行的过度使用的“桌子和电脑”形象。)

从上面的Fino Par示例中可以看出,“真实”照片是食品行业的常见策略(因为这些照片会让人感到饥饿)。餐厅的环境显示了桌子、气氛、饮料和人——虽然不是脸,因为他们会分散注意力。这使得这顿饭看起来比简单的食物图片更美味,因为用户可以将自己放在场景中。

描绘真实物体的照片也会添加纹理,而不会有骨骼状粘性的风险。如当前平面设计趋势和;未来,这项技术是完美的增加更多的温暖到一个平面启发界面。作为向背景添加纹理的替代方法,请尝试使用高清照片,以提供纹理外观和感觉。

3、黑白

并不是每幅图像都必须是全彩的,才能产生令人难忘的影响。正如《人眼网页设计》中所提到的,黑白图像提供了一种内在的成熟感和专业感。

Goltz Group将黑白照片与彩色文字叠加在一起,以其产品(相框)为特色。对比度有助于将用户更多地吸引到主页上的照片滑块中,同时绘制所选文本(包括行动要求)。

更多精彩的例子,请查看这个黑白照片库。

4、彩色叠加

就像黑白图像一样,彩色叠加也很有效,因为它们将图片与用户界面元素(如文本、导航或行动按钮)区分开来。

这种技术通常使标题文本最明显,同时保留丰富的彩色背景。因为它适用于任何品牌和配色方案,所以彩色叠加比黑白图像更普遍适用(通常需要调整整个网站的调色板以匹配)。

Knuckles Industries使用额外的颜色投射来支持独特的视觉层次,创造了类似于黑白效果的复杂美学。这张色彩丰富的背景照片吸引了人们的目光,让人们看到了醒目的标题,由于其颜色的混合以及装饰性字体和直白字体之间的交替,标题更具冲击力。

他们对彩色叠加的应用突出了金属加工车间原始而精致的感觉。复古视觉处理很有意义,因为它让用户沉浸在旧世界工艺和工业肌肉的时代。

因为实现颜色覆盖可能会很棘手,请尝试阅读这些CSS和Photoshop教程。

较小的自定义图像

与全屏图像一样流行的是较小图像的拼贴。这种布局展示了更多的产品及其用例,此外,当使用滑块运动设置动画时,还可以增加视觉趣味性(然而,滑块并不适用于所有场景)。

肖像机(上图)使用滑块来展示其产品的各种图像。每张图片都有一个稍微不同的心情,并以快照的方式展示了不同年龄段的人。这有助于解释他们的业务在不同年龄和事件中的多样性。一张照片无法确定这个范围。

这种摄影技术与卡片UI模式密切相关。由于其在响应性设计和移动屏幕方面的有效性,卡片图案越来越受欢迎,这种布局完全依赖于多个小图像的屏幕。有关实现卡片模式的指导和建议,请查看免费电子书卡片&;极简主义。

自定义排版和文字

没有什么比将自定义照片与自定义排版配对更独特了。当然,代价是时间和努力。在网络如此拥挤的情况下,投资当然可以带来回报,创造一个难以复制的长期身份。

例如,Metaverse Mod Squad(上图)将custom提升到下一个级别。首先,请注意,右侧的车辆和骑手已经用bullseye标志进行了风格化。然后看课文。“WE ARE MODS”标题的装饰性字体也增加了现场的年轻气氛。

照片处理

正如Metaverse Mod团队修改他们的照片以插入他们的徽标一样,任何照片都可以在Photoshop之类的程序中修改,以更好地适合您的品牌。常见的照片编辑需要:

  • 调整单个图元的大小

此外,在右手中,照片编辑软件本身就成为一种新媒体。你可以用它来创建一些难忘的图片,这些图片是未经处理的照片无法比拟的。

发挥他们的创造力,动画和互动工作室通过使用照片处理来展示他们的技能。虽然这种极端主义对律师事务所等更专业的公司来说效果不太好,但它可能只是用来展示你独特的个性。

无论使用何种方式,定制摄影都是一种设计技巧,它总能让你的网站尽善尽美。图像应清晰、聚焦且质量高。他们应该代表你的品牌、声音和风格。如果你没有一个照片库可以使用,走出去,根据你的设想自己拍摄一些照片,然后招募一名摄影师来帮助你创建完美的定制照片集。

其他建议

有关10个最重要的网页设计趋势的更多建议,请查看2016年免费电子书网页设计趋势。通过分析来自谷歌、苹果、锐步、宝马、对讲机、阿迪达斯、Dropbox等公司的166个例子,你将从中学习。

来源:https://speckyboy.com/strategies-using-photos-web-inerfaces/

0