你還記得你最后一次訪問(wèn)沒(méi)有圖片的網(wǎng)站是什么時(shí)候嗎？作為網(wǎng)頁(yè)設(shè)計(jì)師，我們喜歡在我們的設(shè)計(jì)中添加圖片，因?yàn)閳D片是令人難忘的，并且給我們提供了一個(gè)直接溝通觀眾大腦的渠道。此外，圖像是普遍的，我們的大腦處理圖片的速度比文本快。這就是為什么"故事"媒介（帶有特效和疊加效果的短視頻）和表情符號(hào)吸引人們的部分原因。

但自"web 2.0"出現(xiàn)以來(lái)，其他事情也在發(fā)生?；ヂ?lián)網(wǎng)上大量使用圖片，其中一些是由用戶(hù)生成的內(nèi)容推動(dòng)的，這給網(wǎng)頁(yè)設(shè)計(jì)師帶來(lái)了一個(gè)問(wèn)題，他們必須在圖片數(shù)量不斷增加的情況下提供豐富的體驗(yàn)。

在接下來(lái)的部分中，我們將詳細(xì)討論在現(xiàn)代設(shè)計(jì)智能、圖像豐富的網(wǎng)站時(shí)需要記住的技巧。

1、提高性能

每當(dāng)有人想到網(wǎng)絡(luò)上的圖片，他們的內(nèi)容、分辨率和風(fēng)格就會(huì)立刻浮現(xiàn)在腦海中。但最重要的因素是提供更好的用戶(hù)體驗(yàn)的圖像實(shí)際上是性能，這甚至比圖像本身更重要。這是因?yàn)榇蠖鄶?shù)訪問(wèn)您網(wǎng)站的訪問(wèn)者不會(huì)費(fèi)心等待您的圖片加載。

簡(jiǎn)而言之，圖片豐富的網(wǎng)站不能慢下來(lái)。負(fù)載時(shí)間每增加一秒，轉(zhuǎn)換就減少7%。這意味著，一個(gè)加載緩慢的電子商務(wù)網(wǎng)站，如果每天的收入為1000美元，每年的銷(xiāo)售額就會(huì)減少25萬(wàn)美元。

瑞安航空（Ryanair）和瑪莎百貨（Marks & Spencer）等大公司進(jìn)行了大規(guī)模的網(wǎng)站重新設(shè)計(jì)，但由于關(guān)鍵的性能問(wèn)題，這些設(shè)計(jì)都以失敗告終。因此，一定要記住，以用戶(hù)為中心的網(wǎng)站首先是基于性能的。您可以在許多方面提高性能，這是一個(gè)很好的起點(diǎn)。

使用優(yōu)化和響應(yīng)的圖像。只有在用戶(hù)需要的時(shí)候，以及他們需要的時(shí)候，才能向用戶(hù)展示圖片。以下是三個(gè)基本的建議。

技巧1：使用SPRITE表

在web上加速加載時(shí)間的最古老的技巧之一。加載多個(gè)圖像需要時(shí)間和資源。但是，加載單個(gè)映像并顯示其組件要快得多，因?yàn)檫@樣做可以減少服務(wù)器請(qǐng)求的數(shù)量并優(yōu)化帶寬。

通過(guò)級(jí)聯(lián)圖像樣式表（Cascading Image Style Sheet, CSS）精靈，瀏覽器只加載了一張圖片，比如一排社交媒體圖標(biāo)，只在相關(guān)位置顯示其中的一部分。

最近衛(wèi)報(bào)的2018年世界杯信息圖表就是一個(gè)很好的例子。一開(kāi)始，頁(yè)面就出現(xiàn)了一個(gè)問(wèn)題，顯示了大量的圖片：32支參賽隊(duì)伍，每個(gè)隊(duì)伍都有超過(guò)20名球員。作為一個(gè)解決方案，該網(wǎng)站利用CSS精靈來(lái)顯示每個(gè)球隊(duì)的球員。下面的頁(yè)面顯示了西班牙國(guó)家隊(duì)的23名球員，頁(yè)面來(lái)源只有一張圖片，加載速度非?？?。

技巧2：延遲加載圖像

另一個(gè)關(guān)鍵問(wèn)題是延遲加載，尤其是在大量圖像的情況下。原理很簡(jiǎn)單：只在瀏覽器的視圖中可見(jiàn)時(shí)加載圖像，而不是通過(guò)加載整個(gè)圖像集合讓訪問(wèn)者等待。

作為一個(gè)經(jīng)典的例子，向下滾動(dòng)Unsplash主頁(yè)。

技巧3：首先加載一個(gè)網(wǎng)站骨架

圖像永遠(yuǎn)不會(huì)提前出現(xiàn)，這就是為什么你必須考慮感知性能。

在網(wǎng)站的圖片為訪問(wèn)者創(chuàng)造更好的體驗(yàn)之前，先加載一個(gè)基本的框架版本。然后他們就會(huì)知道接下來(lái)會(huì)發(fā)生什么，在某些情況下，他們甚至可以開(kāi)始與網(wǎng)站進(jìn)行交互（在加載圖片之前）。

考慮Klook的加載順序：

在這里，對(duì)于每個(gè)圖像，瀏覽器首先加載站點(diǎn)的輕型版本（帶有白色背景），然后加載實(shí)際的背景圖像。對(duì)于某些人來(lái)說(shuō)，這種方法可能看起來(lái)很快或微不足道，但要記住，不同連接和設(shè)備的性能是不同的。

（如果您正在使用React或Vue，您可以使用這個(gè)很酷的工具來(lái)創(chuàng)建框架組件。）

2、將圖像作為設(shè)計(jì)的一部分

這條規(guī)則似乎很明顯，但經(jīng)常被忽視。圖像是設(shè)計(jì)中不可分割的一部分，因此必須加以考慮。因?yàn)樵O(shè)計(jì)服務(wù)于一個(gè)目標(biāo)，所以頁(yè)面的相關(guān)圖像和組成必須支持這個(gè)目標(biāo)。

設(shè)計(jì)圖像補(bǔ)充

記住要確定頁(yè)面的目標(biāo)，并對(duì)其進(jìn)行優(yōu)先級(jí)排序。無(wú)論您的目標(biāo)是征求時(shí)事通訊的注冊(cè)或提供瀏覽目錄，您的圖像必須補(bǔ)充預(yù)期的目的。

例如，Essential Phone的登錄頁(yè)面上顯示了該產(chǎn)品的一個(gè)醒目圖片。黃色的"現(xiàn)在購(gòu)買(mǎi)"按鈕突出顯示，引導(dǎo)訪問(wèn)者的注意力到預(yù)定的動(dòng)作上。因?yàn)閳D像顯示的是產(chǎn)品本身，所以它不會(huì)被截?cái)?，也不?huì)作為文本的背景。

有圖像采取后排

盡管以圖像為中心的設(shè)計(jì)通常會(huì)帶來(lái)更好的結(jié)果，但一定要遵循基本的可用性原則，因?yàn)檫@些設(shè)計(jì)不能保證成功。例如，通過(guò)為主元素和輔助元素分配相同的權(quán)重，您可能會(huì)忽略視覺(jué)層次結(jié)構(gòu)。

MetaLab是一家專(zhuān)門(mén)設(shè)計(jì)界面的設(shè)計(jì)公司。第一次展示的時(shí)候，它的單層登錄頁(yè)面只顯示了純色背景，只有很少的文字，主要是客戶(hù)的名字。然而，當(dāng)你鼠標(biāo)移到一個(gè)公司名稱(chēng)上時(shí)，背景會(huì)發(fā)生微妙的變化，顯示一個(gè)上下文圖像。這意味著在每次切換上下文的過(guò)程中不會(huì)再有痛苦。這樣的主頁(yè)設(shè)計(jì)巧妙地傳達(dá)了這樣一個(gè)信息：MetaLab的客戶(hù)數(shù)量之多令人印象深刻。

3、讓文字和圖片成為朋友

在同一個(gè)頁(yè)面上同時(shí)顯示文本和圖像可能是一件棘手的事情。挑戰(zhàn)是為你的網(wǎng)站找到文本和圖像的完美平衡。

將文本放在一個(gè)軟背景疊加上

在軟背景疊加上放置文本是呈現(xiàn)對(duì)比圖像和文本最簡(jiǎn)單的技術(shù)之一。Indiegogo的登陸頁(yè)面就是一個(gè)典型的例子，在這個(gè)頁(yè)面上，每個(gè)產(chǎn)品的圖片上都有一個(gè)柔和的黑色疊加，上面顯示著標(biāo)題和描述。文本易于閱讀，沒(méi)有犧牲視覺(jué)吸引力。

混合文本和圖像

Airbnb的主頁(yè)采用了文本和圖像的完美結(jié)合。

home類(lèi)別的圖像包含圖像本身內(nèi)部的措辭，使設(shè)計(jì)師能夠在照片的覆蓋對(duì)象之間隱藏文本。這種方法可以無(wú)縫地工作，說(shuō)明文本和圖像不需要是單獨(dú)的實(shí)體。

（關(guān)于可訪問(wèn)性的補(bǔ)充說(shuō)明：請(qǐng)記住，在圖像中使用文本也意味著搜索引擎除了在圖像的alt標(biāo)記中指定的關(guān)鍵字之外沒(méi)有關(guān)鍵字，除非使用aria標(biāo)簽，否則會(huì)在可訪問(wèn)性方面造成問(wèn)題。您的最終選擇取決于設(shè)計(jì)上下文和頁(yè)面的目標(biāo)。

將文本和圖像組合為一個(gè)交互單元

2018年電影的登陸頁(yè)很抱歉打擾你，每個(gè)演員的形象只顯示在一個(gè)鼠標(biāo)懸停的成員的名字上，同時(shí)延遲加載的形象。雖然文本是由活動(dòng)文本（列表元素）組成的，但是它使用樣式字體和顏色以及圖像的投影，使呈現(xiàn)看起來(lái)像一件藝術(shù)品（或電影）。圖像和文本之間的界限很模糊。

在正確的時(shí)間顯示正確的圖像體現(xiàn)了一種有趣的和引人入勝的用戶(hù)體驗(yàn)。

4、應(yīng)用正確的布局

正如我們所知，用戶(hù)體驗(yàn)很大程度上取決于網(wǎng)站的布局。對(duì)于媒體豐富的網(wǎng)站，常見(jiàn)的布局選擇通常是網(wǎng)格。這是因?yàn)榫W(wǎng)格的模式完美地顯示了一組圖像，而且每個(gè)圖像都并排顯示。

下面的部分描述了三種主要的網(wǎng)格類(lèi)型，每個(gè)類(lèi)型都有一個(gè)示例。

應(yīng)用一個(gè)經(jīng)典網(wǎng)格

典型的網(wǎng)格是包含大小相等的正方形圖像拇指的網(wǎng)格。它帶來(lái)了一種平衡感和和諧感，適用于圖像不是主要掃描項(xiàng)目的頁(yè)面?？ㄆ斜硎且粋€(gè)經(jīng)典網(wǎng)格的選項(xiàng)。想想常見(jiàn)的用例，比如YouTube和Dribbble。

應(yīng)用一個(gè)BRUTALIST網(wǎng)格

下面是一個(gè)投資組合站點(diǎn)的例子，該站點(diǎn)不遵循非常熟悉的網(wǎng)格布局，但仍然關(guān)注內(nèi)容。馬庫(kù)斯·埃里克森（Marcus Eriksson）是一位炙手可熱的攝影師，他的客戶(hù)包括耐克（Nike）和ESPN等頂級(jí)品牌。他的網(wǎng)站以非傳統(tǒng)的網(wǎng)格布局為特色，在不犧牲可用性的前提下吸引觀眾的注意力。這個(gè)站點(diǎn)的延遲加載也非常好。

如果你想讓你的訪問(wèn)者關(guān)注幾個(gè)單獨(dú)的圖片，使用這個(gè)模式?；靵y的布局是非常迷人的，有一個(gè)驚喜的元素。然而，要注意的是，有些圖片可能會(huì)從所有的喧囂中"迷失"。

應(yīng)用砌體網(wǎng)格

谷歌藝術(shù)與文化的藝術(shù)調(diào)色板實(shí)驗(yàn)將流行的藝術(shù)品分解成基本的調(diào)色板。相反，它還可以根據(jù)您選擇的調(diào)色板顯示藝術(shù)形式。

對(duì)于我們的目的，藝術(shù)調(diào)色板網(wǎng)站是鼓舞人心的。這是一個(gè)很好的砌體網(wǎng)格的例子，顯示不同大小的圖像，同時(shí)保持它們"有序"。這是顯示大量圖像的最佳方式，同時(shí)保持原來(lái)的長(zhǎng)寬比。

（你可以用這個(gè)插件建立你自己的砌體網(wǎng)格。）

關(guān)于性能的補(bǔ)充說(shuō)明：還記得前面提到的骨架技術(shù)嗎?藝術(shù)調(diào)色板站點(diǎn)通過(guò)首先加載一個(gè)延遲加載的、占主導(dǎo)地位的色塊，然后逐步加載低質(zhì)量的圖像占位符（LQIP），使其達(dá)到一個(gè)新的高度。強(qiáng)烈推薦的舉動(dòng)!

5、為目標(biāo)添加動(dòng)作

運(yùn)動(dòng)元素增加了網(wǎng)站的視覺(jué)天賦。然而，就像文本一樣，在處理大量圖像時(shí)，要確保運(yùn)動(dòng)和圖像一起工作。

在谷歌的材料設(shè)計(jì)中提到了一些運(yùn)動(dòng)設(shè)計(jì)原則的最佳實(shí)踐。下面是一些如何在網(wǎng)站中使用動(dòng)畫(huà)來(lái)支持用戶(hù)體驗(yàn)的例子。

宣布布局變化

在很多情況下，頁(yè)面布局的變化會(huì)讓訪問(wèn)者感到不安，就好像頁(yè)面上的所有東西都在改變位置，地面也在改變一樣。動(dòng)畫(huà)可以幫助你的訪問(wèn)者軟化變化。

考慮這個(gè)例子，它在一個(gè)典型的網(wǎng)格中顯示圖像。當(dāng)鼠標(biāo)移到一個(gè)圖像上時(shí)，一個(gè)微妙的動(dòng)作會(huì)將訪問(wèn)者的注意力轉(zhuǎn)移到這個(gè)元素上。換句話(huà)說(shuō)，動(dòng)畫(huà)巧妙地將訪問(wèn)者從網(wǎng)格布局引導(dǎo)到單圖像布局。簡(jiǎn)單而有效。

負(fù)載輕松

另一個(gè)有趣的例子是優(yōu)步的設(shè)計(jì)網(wǎng)站。由于用戶(hù)的主要操作是簡(jiǎn)單地向下滾動(dòng)頁(yè)面，這會(huì)觸發(fā)圖像加載，因此網(wǎng)站通過(guò)平滑的過(guò)渡和微妙的動(dòng)畫(huà)來(lái)豐富瀏覽體驗(yàn)，同時(shí)以一種清晰、容易訪問(wèn)的方式呈現(xiàn)相關(guān)信息。

切換圖像

Fubiz使用動(dòng)畫(huà)技術(shù)在圖片庫(kù)中的圖片之間切換，顯示出每個(gè)圖片的內(nèi)部信息。

加入動(dòng)畫(huà)來(lái)講述一個(gè)故事

最后一個(gè)例子是Avocode的2017年設(shè)計(jì)報(bào)告，在這份報(bào)告中，每一頁(yè)都有一個(gè)故事與一些世界頂尖設(shè)計(jì)人才創(chuàng)作的插圖分享。這份報(bào)告就像連環(huán)畫(huà)一樣，每一個(gè)插圖的制作和動(dòng)畫(huà)都是為了加強(qiáng)報(bào)告的關(guān)鍵發(fā)現(xiàn)。

不要忘記視頻的優(yōu)點(diǎn)

這里有一個(gè)很好的經(jīng)驗(yàn)法則：如果你可以發(fā)布視頻而不是圖片，那就這么做。看看這個(gè)耐克產(chǎn)品圖庫(kù)的例子，其中一個(gè)項(xiàng)目，偽裝成一個(gè)圖像，實(shí)際上，是一個(gè)視頻。在加載視頻之前會(huì)顯示一個(gè)圖像，這樣購(gòu)物者的體驗(yàn)就不會(huì)被抽象出來(lái)。

結(jié)論

必須處理大量圖像或視覺(jué)媒體的顯示并不意味著你應(yīng)該忽略設(shè)計(jì)原則，設(shè)計(jì)一個(gè)不考慮用戶(hù)體驗(yàn)的時(shí)尚網(wǎng)站總是失敗的。規(guī)劃圖片作為你網(wǎng)站目標(biāo)的一部分，執(zhí)行性能，并結(jié)合動(dòng)畫(huà)可以使壯觀的體驗(yàn)和枯燥的體驗(yàn)完全不同。