图片丰富网站的5个秘密

营销型网站
2024-05-07 23:11:26

你上次访问没有图片的网站是什么时候?

作为网页设计师，我们喜欢在我们的设计中添加图片，因为图片是令人难忘的，给我们提供了一个与观众大脑直接沟通的渠道。此外，图像是普遍的，我们的大脑处理图像的速度比文本快。这也是为什么“故事”媒体(带有效果和叠加的短格式视频)和表情符号能吸引用户参与的部分原因。

但自“web 2.0”出现以来，还发生了其他一些事情。图片在网络上的大量使用，其中一些是由用户生成的内容推动的，这给web设计师带来了一个问题，他们现在必须在面对越来越多的图片时提供丰富的体验。

在接下来的几节中，我们将详细讨论在现代设计智能、图像丰富的网站时需要记住的五件事。

1. 提高性能

每当有人想到web上的图像时，他们的内容、分辨率和样式就会立即浮现在脑海中。但是，提供更好的图像用户体验的最重要因素实际上是性能，这甚至比图像本身更重要。这是因为大多数访问您站点的访问者不会等待您的图像加载。

一个每天收入1000美元的缓慢加载的电子商务网站，每年的销售额会损失25万美元

简而言之，图片丰富的网站不能慢。负载时间每增加一秒，转换量就减少7%。这意味着，一个日营收为1000美元、加载速度较慢的电子商务网站，每年的销售额将减少25万美元。

瑞安航空(Ryanair)和玛莎百货(Marks & Spencer)等大公司进行了大规模的网站重新设计，但由于关键的性能问题，这些设计都以惨败告终。所以一定要记住，以用户为中心的网站建设首先是基于性能的。您可以在许多方面提高性能，这是一个很好的起点。

使用优化和响应图像。只在用户需要的时候和确切的方式显示图像。下面是三个基本的技巧。

技巧1:使用雪碧纸

加速web加载时间的最古老的技巧之一。加载多个图像需要时间和资源。然而，加载单个映像并显示其组件要快得多，因为这样做可以减少服务器请求的数量并优化带宽。

使用级联图像样式表(CSS) sprites，浏览器只加载一个图像，比如一排社交媒体图标，只在相关位置显示其中的一部分。

最近一个很好的例子就是《卫报》2018年世界杯信息图。一开始，页面遇到了一个问题，显示的图片太多:32支参赛球队，每支球队都有20多名球员。作为一种解决方案，该网站利用CSS sprites来显示每个球队的球员。查看下面显示西班牙队所有23名球员的页面，页面源只有一个图像，加载速度非常快。

guardian_football

提示2:延迟加载图像

另一个关键问题是延迟加载，尤其是在大量图像的情况下。原理很简单:只有当图像在浏览器的视图中可见时才加载它，而不是通过加载整个图像集合让访问者等待。

例如，向下滚动Unsplash主页。

技巧3:首先加载站点骨架

图像永远不会提前出现，这就是为什么你必须考虑感知性能。

加载一个网站的基本框架版本之前，其图像创建一个更好的用户体验。然后他们就会知道将要发生什么，在某些情况下，甚至可以开始与站点交互(在加载图像之前)。

考虑Klook的加载顺序:

Klook

在这里，对于每个图像，浏览器首先加载站点的浅色版本(带有白色背景)，然后加载实际的背景图像。对于某些人来说，这种方法可能看起来很快或微不足道，但请记住，连接和设备的性能各不相同。

(如果使用React或Vue，可以使用这个很酷的工具创建框架组件。)

2. 将图像作为设计的一部分

这条规则可能看起来很明显，但经常被忽视。图像是设计的一个组成部分，因此，必须考虑到。因为设计服务于一个目标，所以页面的相关图像和组成必须支持这个目标。

设计图像以补充

记住要确定页面的目标并对其进行优先排序。无论您的目标是征求通讯注册或提供目录浏览，您的图像必须补充预期的目的。

例如，Essential Phone的登录页面显示了该产品的一个醒目的单一图像。黄色的“立即购买”(Buy Now)按钮突出地显示出来，引导访问者的注意力到预期的操作上。因为图像显示的是产品本身，所以它不会被切断，也不会作为文本的背景。

essential_phone

让影像退居二线吗

尽管以图像为中心的设计通常会提供更好的结果，但请确保遵循基本的可用性原则，因为这些设计并不能保证成功。例如，您可能会忽略视觉层次结构，为主要元素和次要元素分配相同的权重。

MetaLab是一家专门设计界面的设计机构。第一次显示时，它的单折叠着陆页面只显示了一个纯色背景，只有很少的文本，主要是它的客户端名称。然而，只要您在公司名称上单击鼠标，背景就会发生微妙的变化，显示上下文相关的图像。这意味着不再需要每次切换上下文。这样的主页设计巧妙地传达了这样一个信息，即美泰来的客户非常广泛。

metalab

3.让文字和图片成为朋友

在同一页面上同时显示文本和图像可能是一件棘手的事情。挑战是为您的网站找到文本和图像的完美平衡。

将文本放在软背景覆盖上

将文本放置在软背景覆盖层上是呈现对比图像和文本最简单的技术之一。Indiegogo的登陆页面就是一个经典的例子，在这个页面上，每个产品的图片上都覆盖着一层柔软的黑色覆盖物，上面显示着标题和描述。文本易于阅读，不牺牲视觉吸引力。

indiegogo

混合文本和图像

Airbnb在主页上采用了文本和图片的完美视觉融合。

home类别的图像包含图像本身内部的措辞，使设计师能够在照片的覆盖对象之间隐藏文本。(参见“家庭”)这种方法可以无缝地工作，证明文本和图像不需要是独立的实体。

(关于易访问性的补充说明:请记住，在图像中使用文本也意味着除了在图像的alt标签中指定的关键词外，搜索引擎没有关键词，除非使用aria-label标签，否则会造成易访问性问题。最终的选择取决于设计上下文和页面的目标。)

将文本和图像组合成一个交互单元

2018年电影《非常抱歉打扰你》的登陆页面只显示了每位演员的照片，鼠标停留在演员名字的上方，同时还在缓慢加载照片。虽然文本由活动文本(列表元素)组成，但它使用样式化的字体和颜色以及图像的投影，使呈现看起来像一件艺术品(或电影)。图像和文字之间的界线模糊不清。

在正确的时间显示正确的图像体现了有趣和迷人的用户体验。

sorrytobotheryou

4. 应用正确的布局

正如我们所知，用户体验在很大程度上取决于网站的布局。对于媒体丰富的网站，常见的布局选择通常是网格。这是因为网格的模式完美地显示了一个图像列表，而且每个图像都是并排显示的。

下面的部分描述了三种主要的网格类型，并为每种类型提供了一个示例。

应用一个经典网格

一个经典的网格包含大小相同的方形图像拇指。它带来了一种平衡感和和谐感，适用于图像不是主要扫描项目的页面。卡片列表是经典网格的一个选项。想想常见的用例，比如YouTube和Dribbble。

dribbble

应用野兽网格

下面是一个投资组合站点的例子，该站点不遵循非常熟悉的网格布局，同时仍然关注内容。马库斯·埃里克森(Marcus Eriksson)是一位炙手可热的摄影师，他的客户包括耐克(Nike)和ESPN等顶级品牌。他的网站采用了非传统的网格布局，在不牺牲可用性的前提下吸引浏览者的注意力。该站点的延迟加载也非常好。

如果您希望访问者将注意力集中在几个单独的图像上，请使用此模式。混乱的布局非常吸引人，并有一个惊喜的元素。但是，要注意，有些图片可能会在途中丢失。

马库斯

应用砌体网格

谷歌Art & Culture的艺术调色板实验将流行的艺术作品分解为基本的调色板。相反，它还可以根据您选择的调色板显示艺术形式。

对于我们的目的，艺术调色板网站是鼓舞人心的。这是一个很好的砌体网格的例子，显示不同大小的图像，同时保持它们“整齐”。“这是显示大量图像的最佳方式，同时又保持了原始的纵横比。

谷歌

(你可以用这个插件建立你自己的砌体网格。)

关于性能的补充说明:还记得前面提到的骨架技术吗?Art Palette站点通过最初加载一个延迟加载的主色块，然后逐步加载低质量的图像占位符(LQIP)，将其提升了一个档次。一个强烈推荐的举动!

5. 添加有目的的运动

运动元素增加了网站的视觉效果。然而，就像处理文本一样，在处理大量图像时，要确保运动和图像能够协同工作。

运动设计原则的一些最佳实践在谷歌的材料设计中被注意到。下面是一些如何在网站中使用动画来支持用户体验的例子。

宣布布局变化