2.2 網頁圖片選擇

在瀏覽網頁中，用戶對訪問速度是比較敏感的，用戶等待網頁打開時間最長約為10s，如果放置太多的動畫、視頻等多媒體元素，會延遲網頁的加載速度。而全圖片或全文字的網頁也不利于瀏覽體驗。因此設置恰當的圖片可以增加頁面美感，不僅能讓瀏覽者身心愉悅，同時能準確傳達頁面的信息，可以說圖文并茂是網頁設計的關鍵。

2.2.1 圖片素材的收集

1．從主題出發選圖片

網站主題對于搜索引擎優化是非常重要的。搜索引擎蜘蛛爬取網站頁面時，會通過關鍵詞來判斷網站的主題，主題清晰的網站有利于縮短檢索時間，增加搜索引擎對網站的信任度。

目前的網絡中，網站的主題非常廣泛，以百度的網站主題分類為例，常見的網站主題有音樂影視、娛樂休閑、游戲、網絡服務與應用、博客、網址導航、數碼及手機、教學及考試、醫療保健、女性時尚、房產家居、旅游、小說等。每個主題都有各自的特征，如醫療類網站多以紅十字為標志，白色為主色調；娛樂休閑類網站風格時尚；網絡服務類網站風格嚴謹。

2．從品質出發選圖片

一張適宜并質量高的圖片對頁面來說無疑是加分的。圖片質量一般分為高清、模糊、低像素等，如圖2-4所示。

左圖：像素和分辨率高，能看清圖片的細節內容，適合做各種圖片效果設計，為首選素材。

中圖：呈現效果模糊，可作為襯托、背景圖片，為慎選素材。

右圖：像素和分辨率低，應用時要保持原始尺寸或縮小尺寸，為不建議選擇的素材。

3．從視覺引導選圖片

有表現力和內涵的圖片有助于激發設計靈感。這種圖片一般都具有一定的引導作用，如動態走勢引導、色彩引導等。

（1）走勢對視覺的引導作用

設計師要具有把握圖片動態走勢的能力，如圖2-5所示。

左圖：在主體物視線的前方，有大量空白，形成向前的動態走勢，圖片具有想象空間。

中圖：在主體物視線的前方，無空白，動態走勢引導方向不明確，圖片內涵表達不清楚。

右圖：主體物被切割，無引導方向，圖片沒有內涵，杜絕采用。

（2）色彩對視覺的引導作用

顏色同樣對視覺有顯著的引導作用。通過調整顏色來改變版面的外觀，如純度高的顏色使頁面更亮眼，顏色的差異化能突出頁面不同區域的內容，如圖2-6所示。

左圖：彩色圖構圖飽滿、色彩豐富，可用的處理手法多，風格多樣化，較為常用。

中圖：具有某種單一顏色傾向的彩色圖片，體現一定的氛圍、格調，如棕色有舊時代的氛圍。

右圖：黑白圖的格調凝重而純粹，要注意黑白過渡色（灰色）的變化層次。

（3）時代對視覺的引導作用

圖片的選擇要符合內容所描述的時代特征，要充分挖掘時代的特色，圖2-7所示為唐朝、清朝及現代服飾。

左圖：唐朝女子服飾的特點是浪漫多姿，給人一種俏麗優雅的感覺。

中圖：清朝女子服飾的特點是色彩絢麗醒目，款式別致，體現東方女性的含蓄優雅。

右圖：現代服飾設計風格更多樣化。

4．從設計細節出發選圖片

圖片的選擇除考慮上述因素外，還要注重圖片的相互搭配。下面以網上商城商品展示欄為例。首先給出不合理的圖片搭配，如圖2-8所示。

分析搭配別扭的原因如下。

錯誤一：第2張圖明顯與其他3張圖不屬于一個商品類型，導致圖片主題不一致。

錯誤二：第2張圖、第4張圖與其他兩張圖的背景顏色不一樣，導致圖片顏色不一致。

錯誤三：第4張圖比其他3張圖大，導致圖片大小不一致。

錯誤四：以綠色線為基準，第1張圖與其他3張圖位置發生偏移，導致圖片視角不一致。

正確搭配圖片，要注重圖片之間尺寸、角度、色彩、風格等方面的協調性。下面給出合理的圖片搭配，如圖2-9所示。

2.2.2 圖片的處理

在根據網頁主題收集圖片后，可利用摳圖等方法進行處理，截取精華、去除糟粕、修復瑕疵、增添特效。以圖2-10為例，常用的圖片處理手段如圖2-11到圖2-15所示。

2.2.3 圖片的調整

圖片擺放的位置、大小等，會對讀者的閱讀造成一定的影響。

1．圖片的位置變化

圖片的位置直接關系到版面的布局。

（1）單張圖片的擺放

當版面中只有一張圖片時，其位置決定著版面效果。

1）居中擺放。這種擺放適用于追求平衡性和規范性的畫面，體現穩重感。擺放時要注意左右、上下的距離要對稱，如圖2-16和圖2-17所示。

2）邊角擺放。圖片擺放在某個邊角位置，能使版式更加生動，如圖2-18所示。

3）占據半個版面。圖片占版面的一半，分為左右、上下兩種分割方式，如圖2-19所示。

（2）多張圖片的擺放

當版面中有多張圖片時，要根據版面布局來擺放圖片。

1）中心擺放。這種擺放方式使圖片排列整齊，富于條理，如圖2-20所示。

2）邊角擺放。要展示主體形象，就要弱化其他部分。借助九宮格或三等分線將多張圖片錯落擺放，把主要的圖片放在三等分線的交界處，使版面更具延展性，如圖2-21所示。

3）占據半個版面。這種擺放一般是文字占半版，圖片組合占另一半版，整個版面清晰有條理，如圖2-22所示。

2．圖片的尺寸變化

（1）放大和縮小

視覺效果良好的頁面表現在其主體形象突出。如何將主體形象與其他部分區分開，是設計師的工作要點。

在頁面中將需要突出的部分進行放大是一個不錯的方法，次要的部分可縮小，再按主次排列圖片。例如，一張主圖配幾張小圖，通過大圖和小圖的相互搭配，提升版面的視覺沖擊力。這種手法在電子商務網站中很常見，如圖2-23所示。

（2）推近和拉遠

如果圖片尺寸不發生變化，通過兩張有推近和拉遠效果的圖片的對比，可以給人帶來圖片尺寸大小有別的視覺效果，如圖2-24所示。

3．圖片與文字的組合

（1）標題性文字與圖片的組合

當圖片中有標題性文字時，要先判斷標題文字與圖片的主從關系。要突出標題文字時，可將標題文字放在版面的重要位置，放大字號，甚至可以遮擋圖片，如圖2-25所示；要突出圖片時，可將標題文字放在圖片的留白處，且標題文字的顏色要與圖片相反，如圖2-26所示。

（2）說明性文字與圖片的組合

圖片與說明性文字搭配時，要注意圖片與相關的說明文字距離近一些，與無關的說明文字距離遠一些，如圖2-27所示。