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

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

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

1、提高性能

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

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

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

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

技巧1：使用SPRITE表

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

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

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

技巧2：延遲加載圖像

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

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

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

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

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

考慮Klook的加載順序：

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

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

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

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

設(shè)計圖像補充

記住要確定頁面的目標，并對其進行優(yōu)先級排序。無論您的目標是征求時事通訊的注冊或提供瀏覽目錄，您的圖像必須補充預(yù)期的目的。

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

有圖像采取后排

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

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

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

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

將文本放在一個軟背景疊加上

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

混合文本和圖像

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

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

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

將文本和圖像組合為一個交互單元

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

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

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

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

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

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

典型的網(wǎng)格是包含大小相等的正方形圖像拇指的網(wǎng)格。它帶來了一種平衡感和和諧感，適用于圖像不是主要掃描項目的頁面。卡片列表是一個經(jīng)典網(wǎng)格的選項。想想常見的用例，比如YouTube和Dribbble。

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

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

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

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

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

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

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

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

5、為目標添加動作

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

在谷歌的材料設(shè)計中提到了一些運動設(shè)計原則的最佳實踐。下面是一些如何在網(wǎng)站中使用動畫來支持用戶體驗的例子。

宣布布局變化

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

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

負載輕松

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

切換圖像

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

加入動畫來講述一個故事

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

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

這里有一個很好的經(jīng)驗法則：如果你可以發(fā)布視頻而不是圖片，那就這么做?？纯催@個耐克產(chǎn)品圖庫的例子，其中一個項目，偽裝成一個圖像，實際上，是一個視頻。在加載視頻之前會顯示一個圖像，這樣購物者的體驗就不會被抽象出來。

結(jié)論

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