以人物作為背景的網(wǎng)頁設計解析

2014-11-13    藍藍設計的小編

以人物肖像作為網(wǎng)頁背景在國內(nèi)的網(wǎng)頁設計中并不多見,但卻是國外網(wǎng)站很熱衷的一件事情,這看似大膽并且冒險,實則能在無形中大大的提升網(wǎng)頁的用戶體驗。

視覺引導對于首次訪問網(wǎng)站的用戶非常重要。當用戶來到一個完全陌生的頁面,網(wǎng)站必須予以合理的引導,這樣才能讓用戶有繼續(xù)瀏覽點擊的方向。

人物背景網(wǎng)頁設計的好處不僅如此,以下是為大家收集的各種相關案例,讓我們在案例中繼續(xù)探索。

1.第一個案例是OYAMA定制的官方網(wǎng)站。從首屏設計上就不難看出網(wǎng)站需要表現(xiàn)出一種積極向上,充滿朝氣的氛圍。因此設計師很巧妙的將人物元素融入METRO的設計風格,這樣既能避免色彩多造成的視覺疲勞,也能順勢利用豐富亮麗的色彩,讓網(wǎng)站看起來更加生動有活力。

ui設計;網(wǎng)頁設計

2.Ballet與普通的人物背景網(wǎng)頁設計不同,在人物的處理上沒有使用高清的大圖,而是故意做了充滿朦朧感的模糊處理,搭配經(jīng)典的黑色,讓網(wǎng)頁多了一層神秘感。為了掩蓋大量的留白可能會帶來的單調,設計師用人物的大幅度動作讓頁面看起來更充實。

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

4.這個網(wǎng)站很明顯是一個產(chǎn)品的推廣網(wǎng)站,所以設計師用最簡單直接的方式吸引用戶關注產(chǎn)品。雖然產(chǎn)品在首屏中的占比很小,但卻仍然能夠把瀏覽者的注意力集中在產(chǎn)品的部分,除了產(chǎn)品以外部分的設計都盡可能的精簡,就連按鈕也采用了幽靈按鈕的設計。

5.使用高清大圖作為背景是2014年的網(wǎng)頁設計趨勢之一,在這個案例中也有一定的體現(xiàn),而使用高清圖片的特點就是讓畫面的真實感更強,但同時也許會流失一些美感。如下案例所示,老奶奶布滿皺紋的臉的確讓網(wǎng)頁更多了一些生活感和親切感,但如果不加以修飾就就會顯得有些許蒼白單調,因此設計師巧妙的加以紋理背景,讓畫面看起來既不失真又美觀。

6.這個案例中使用了大量的圓形元素,而看似獨立的圖形反而會讓用戶尤其注重其中的內(nèi)容和條理關系。仔細看每個圓形中的布局方式,設計師很細心的用布局來彌補幾何元素帶來的“凌亂”,讓用戶感受到網(wǎng)頁的個性。

7.有人物的任何場景都能表現(xiàn)出不同的情感,就算沒有眼神、動作的交流,一個簡單的背影也能引發(fā)出瀏覽者的無限遐想。

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

9.LOCALS APPAREL的網(wǎng)站前三屏都使用了人物背景,這三張圖片中人物所表現(xiàn)出的形態(tài)都不盡相同,但展現(xiàn)出的效果卻很類似。這個網(wǎng)頁背景是一個很典型的用畫面中的人物來引導用戶的案例,設計師利用同一個人物的不同方向,讓整體變得既統(tǒng)一又清晰。

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

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

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔