網頁設計教程之背景中的他！她！它！

以人物肖像作為網頁背景在海內的網頁設計中并未幾見，但卻是國外網站很熱衷的一件事情，這看似大膽勇敢并且冒險，實則能在無形中大大的晉升網頁的用戶體驗。

視覺引導對于首次訪問網站的用戶非常重要。當用戶來到一個完全目生的頁面，網站必需予以公道的引導，這樣才能讓用戶有繼承瀏覽點擊的方向。

人物背景網頁設計的好處不僅如斯，以下是筆者為大家收集的各種相關案例，讓我們在案例中繼承探索。

1、Ballet與普通的人物背景網頁設計不同，在人物的處理上沒有使用高清的大圖，而是故意做了布滿朦朧感的恍惚處理，搭配經典的玄色，讓網頁多了一層神秘感。為了掩蓋大量的留白可能會帶來的單調，設計師用人物的大幅度動作讓頁面看起來更充實。

2、HotDot的網站背景風格好像很符合現代設計師的口味。背景中的人物使用亮點不僅僅只在于獨特搶眼的妝容上，更在于人物的視線方向上。從整個網站的布局上來看，用戶體驗并不是很理想，導航在首屏的底部，而且字體和顏色也很不利于閱讀。所以，設計師利用人物的視線，將用戶的視線帶到了底部導航部門，很大程度的彌補了這一不足。

3、這個網站很顯著是一個產品的推廣網站，所以設計師用最簡樸直接的方式吸引用戶關注產品。固然產品在首屏中的占比很小，但卻仍舊能夠把瀏覽者的留意力集中在產品的部門，除了產品以外部門的設計都盡可能的精簡，就連按鈕也采用了幽靈按鈕的設計。

4、使用高清大圖作為背景是2014年的網頁設計趨勢之一，在這個案例中也有一定的體現，而使用高清圖片的特點就是讓畫面的真實感更強，但同時也許會流失一些美感。如下案例所示，老奶奶充滿皺紋的臉的確讓網頁更多了一些糊口感和親切感，但假如不加以潤飾就就會顯得有些許蒼白單調，因此設計師巧妙的加以紋理背景，讓畫面看起來既不失真又美觀。

5、這個案例中使用了大量的圓形元素，而看似獨立的圖形反而會讓用戶尤其注重其中的內容和條理關系。仔細看每個圓形中的布局方式，設計師很細心的用布局來彌補幾何元素帶來的“凌亂”，讓用戶感慨感染到網頁的個性。

6、有人物的任何場景都能表現出不同的情感，就算沒有眼神、動作的交流，一個簡樸的背影也能引發出瀏覽者的無窮遙想。

7、Metro的設計加上五彩繽紛的色彩，這對第一眼的視覺沖擊仍是很有作用的，但這只能針對走馬觀花的用戶，多看兩眼會讓人有點摸不著頭腦。而該案例中的人物使用讓整個畫面連貫起來，圖片中每個人物的肢體流向成了用戶們瀏覽網站的線索。

8、LOCALS APPAREL的網站前三屏都使用了人物背景，這三張圖片中人物所表現出的形態都不盡相同，但展現出的效果卻很類似。這個網頁背景是一個很典型的用畫面中的人物來引導用戶的案例，設計師利用統一個人物的不同方向，讓整體變得既同一又清楚。

9、他？她？還有它！幽默的擬人化動物形象能為網頁加入更多的詼諧色彩。如下案例所示，大猩猩不例外的成了整個頁面的主角，為了要將用戶的視線引到內容或是導航上，設計師在這些內容上添加了純色塊，讓網頁主次分明。

使用人物作為背景的網頁風格大多以簡約為主，由于這樣才能將其作用更好的展現出來。表情的確是一種很奇妙的內心表現形式，很細微的變化就會反饋給對方不同的信息。