UI.

5个富含图像的网站的秘密

Boaz Lederer. 经过 Boaz Lederer.  |  2018年10月12日

您最后一次访问没有图像的网站是什么时候?

作为网络设计师,我们喜欢将图像添加到我们的设计中,因为 图像是难忘的 并向我们​​提供与观众大脑的直接沟通渠道。此外,图像是普遍的,并由我们的大脑加工得比文本更快。这部分是为什么“故事”媒体(具有效果和叠加的短片视频)和表情符号吸引参与。

但是,由于“Web 2.0”来了,别的东西也在发生。在网络上遍布图像的图像高度使用,一些由用户生成的内容推动的,正在为现在必须在越来越多的图像中提供丰富体验的网络设计师创建问题。

在以下部分中,我们将详细讨论在现代时代设计智能,图像丰富的网站时要记住五件事。

 

1.增强性能

每当有人对网络上的图像,他们的内容,分辨率和风格都会立即想到。但是,提供高级UX的图像的最重要因素实际上是性能,这甚至比图像本身更重要。那是因为大多数访问网站的访问者赢了’T TRECH等待您的图像加载。

一个缓慢加载的电子商务网站,每天收入为1,000美元,每年销售额为250,000美元

简而言之,图像丰富的网站不能慢。对于负载时间的每秒增加,有一个 转换减少7%。这意味着一个缓慢加载的电子商务网站,每天收入为1,000美元,每年销售额为250,000美元。

像瑞安阿航等大公司 分数& Spencer 由于关键的性能问题,有大量的网站重新设计失败,无法令人难以理解。因此,请务必记住,以用户为中心的网站,首先是性能。您可以通过多种方式提高性能,这是 开始的好地方。

使用优化和响应图像。仅显示用户才能何时且准确地显示它们。以下是三个基本提示。

提示1:使用精灵板

最古老的技巧之一,用于加速Web上的加载时间。加载多个图像需要时间和资源。但是,加载单个图像并显示其组件的速度要快得多,因为这样做减少了服务器请求的数量并优化带宽。

通过级联图像样式表(CSS)精灵,浏览器只加载一个图像,例如社交媒体图标,只在相关地方显示它的一部分。

最近的这种技术的良好示例是 守护者 2018年世界杯Infographic。首先,页面遇到了大量图像的问题,以显示:32支竞争团队,每支竞争团队有20多名球员。作为解决方案,该网站利用CSS精灵来为每个团队展示玩家。请参阅下面的页面,显示西班牙语团队的所有23名播放器,页面源仅限 一张单身,加载超级快速。

Guardian_football.

提示2:懒惰加载图像

另一个关键问题,特别是在众多图像的情况下是懒惰的加载。原理很简单:仅在浏览器的视口中可见时加载图像,而不是通过加载整个图像集合来等待访问者等待。

对于一个经典的例子,向下滚动 未提出主页.

提示3:首先加载站点骨架

图像从未提前出现过,这就是您必须占用的原因 感知表现.

加载基本 骨骼 在其图像之前,网站的版本为访客创造了更好的体验。然后,他们意识到要期待的内容,并且在某些情况下,甚至可以开始与网站进行互动(在图像加载之前)。

考虑klook的加载顺序:

klook.

这里,对于每个图像,浏览器首先加载站点的光文版本(带有白色背景),然后加载实际背景图像。这样的方法可能看起来很快或微不足道,但请记住性能在连接和设备上变化。

(如果您正在使用React或Vue,您可以使用 这个很酷的工具 创建骨架组件。)

 

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

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

设计图像补充

请记住识别并优先顺序页面的目标。无论您的目标是征求时事通讯注册或提供浏览目录,您的图像必须补充预期目的。

举个例子, 基本手机着陆页 显示产品的单一,引人注目的图像。黄色 立即购买 按钮突出突出,转向游客对预期行动的关注。因为图像显示了产品本身,它永远不会被切断,它也不是文本的背景。

基本_电话

有图像拿后座

虽然 以图像为中心的设计 经常提供更好的结果,务必遵循基本可用性原则,因为这些设计不保证成功。例如,您可以通过向主元和辅元素分配等重量来忽略视觉层次结构。

金属镶嵌 是专门设计界面的设计代理。首次显示时,其单折登录页面仅显示一个具有最小文本的固色背景,主要是其客户的名称。但是,一旦鼠标悬停在公司名称上,背景会细微更改,显示上下文图像。这意味着每次通过上下文切换都不会更痛苦。这样的家庭页面设计巧妙地传达了Metalab的客户令人印象深刻的消息。

金属镶嵌

 

3.让文本和图像成为朋友

在同一页面上显示文本和图像可能是一个棘手的业务。挑战是找到您网站的完美余额和图像的图像。

将文本放在软背景叠加

在软背景上放置文本叠加是呈现对比图像和文本的最简单技术之一。 Indiegogo的着陆页 是一个葡萄酒示例,其中标题和描述在网站上提供的每个产品的图像上显示出软,黑暗的覆盖层。文本很容易阅读,没有牺牲在视觉上诉。

Indiegogo.

融合文本和图像

airbnb. 为其本土页面采用文本和图像的梦幻般的视觉混合。

家庭类别的图像包含图像本身内的措辞,使设计人员能够在照片中隐藏叠加对象之间的文本来播放。 (请参阅“家庭”)这样的方法无缝工作,展示文本和图像不需要单独的实体。

(关于可访问性的侧面笔记:请记住,在图像中使用文本也意味着除非图像'alt标签中指定的那些,除非您使用aria-label标签,否则使用搜索引擎的关键字。您的最终选择取决于在设计背景和您的页面的目标。)

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

登陆页面 2018电影 很抱歉打扰你 显示仅在成员姓名的鼠标鼠标上的每个成员的图像,同时懒惰加载图像。虽然文本由Live Text(List元素)组成,但它使用样式字体和颜色以及图像'丢帧,使演示文稿看起来像一件艺术(或电影)。图像和文本之间的线是模糊的。

在正确的时间显示正确的图像体现了俏皮和吸引力的用户体验。

很抱歉打扰你

 

4.申请正确的布局

正如我们所知,用户体验很大程度上铰接网站的布局。对于富含媒体的网站,通常的布局选择通常是 网格。 这是因为网格的模式无种植地显示图像列表,也是它们中的每个人并排。

下面的部分描述了三个主要网格类型,其中每个主要网格类型为每个主要网格类型。

申请经典网格

经典网格是包含相同尺寸的方形图像拇指的网格。它带来了平衡和和谐感,适用于图像不是扫描的铅项的页面。一张卡列表是经典网格的选项。想想像Youtube这样的常用用例 Dribbble。

德布布尔

申请野蛮主义网格

下面是投资组合网站的示例,它不会遵守全太熟悉的网格布局,同时仍然关注内容。 马库斯eriksson. 是一个被追捧的摄影师,他们的客户包括耐克和ESPN等顶级品牌。他的网站提供了一个非常规的网格布局,可以在不牺牲可用性的情况下绘制观众对内容的关注。该网站也很漂亮懒散。

如果您希望访问者专注于多个单个图像,请使用此模式。混乱的布局非常有吸引力,并且有一个惊喜的元素。但是,请注意,某些图像可能会“丢失在路上”的所有选手。

马库斯

涂上砖石网格

艺术调色板 谷歌艺术试验&文化将流行的艺术作品分解为他们的根本调色板。相反,它还可以根据您选择的调色板显示艺术形态。

为我们的目的,艺术调色板旨意是鼓舞人心的。这是砖石网格的一个很好的例子,显示不同尺寸的图像,同时保持“按顺序。”这是在保持原始纵横比的同时显示众多图像的最佳方式。

谷歌

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

关于性能的副注目:记住前面提到的骨架技术吗?通过最初装载懒惰地装载的,主导的色块然后逐步加载,艺术调色板网站将其提高了一个缺口 低质量的图像占位符 (LQIP)。强烈推荐的移动!

 

5.为目的添加动作

运动元素增加了网站的视觉风格。但是,就像用文本一样,在解决大量图像时,确保两个运动和图像一起工作。

在谷歌的情况下指出了一些最佳运动设计原则的做法 材料设计。 以下是如何在网站中使用动画来支持UX的一些示例。

宣布布局变化

在许多情况下,布局变化对访问者令人不安,就好像地面正在转移到页面上的所有内容发生变化位置。动画可以帮助软化访客的更改。

考虑 这个例子,显示在经典网格中的图像。在图像的鼠标悬停中,微妙的运动轻轻地阐明了访客对该元素的注意。换句话说,动画使访问者从网格布局带到单个图像的动画。简单,但非常出色。

容易装载

另一个有趣的例子是 优步设计网站。由于主要用户操作只是滚动到触发图像加载的页面,因此该网站丰富了具有平滑过渡和微妙动画的浏览体验,并以明确,易于访问的方式呈现相关信息。

开关图像

fubiz软化图像之间的开关 图像库 使用动画技术,在帖子上显示偷看的每个图像。

合并动画来讲故事

最后一个例子:avocode的 2017年设计报告,每个页面都有一个故事与世界上一些顶级设计人才创造的插图共享。该报告充当漫画,每个插图都构建和动画,以加强报告的主要结果。

大学教师’忘了视频的优势

这是一个很好的拇指规则:如果您可以发布视频而不是图像,请执行此操作。看到这个例子 耐克产品画廊,其中哪一个伪装为图像,实际上是视频。显示图像,直到加载视频,因此购物者的体验并不抽象。

 

结论

不得不解决大量图像或视觉媒体的显示’t意味着您应该忽略设计原则。在不考虑用户体验的情况下,设计时尚网站总是失败。规划图像作为您网站的目标,执行性能,并入动画的一部分,可以在壮观的体验和无聊之间实现所有差异。

[特别感谢 Sourav Kundu. 和米奇不答复本文。]