歡迎來(lái)到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

網(wǎng)頁(yè)設(shè)計(jì)教程之背景中的他!她!它!

發(fā)布時(shí)間:2014-11-14 文章來(lái)源:  瀏覽次數(shù):2664

以人物肖像作為網(wǎng)頁(yè)背景在海內(nèi)的網(wǎng)頁(yè)設(shè)計(jì)中并未幾見(jiàn),但卻是國(guó)外網(wǎng)站很熱衷的一件事情,這看似大膽勇敢并且冒險(xiǎn),實(shí)則能在無(wú)形中大大的晉升網(wǎng)頁(yè)的用戶體驗(yàn)。


視覺(jué)引導(dǎo)對(duì)于首次訪問(wèn)網(wǎng)站的用戶非常重要。當(dāng)用戶來(lái)到一個(gè)完全目生的頁(yè)面,網(wǎng)站必需予以公道的引導(dǎo),這樣才能讓用戶有繼承瀏覽點(diǎn)擊的方向。


人物背景網(wǎng)頁(yè)設(shè)計(jì)的好處不僅如斯,以下是筆者為大家收集的各種相關(guān)案例,讓我們?cè)诎咐欣^承探索。


1、Ballet與普通的人物背景網(wǎng)頁(yè)設(shè)計(jì)不同,在人物的處理上沒(méi)有使用高清的大圖,而是故意做了布滿朦朧感的恍惚處理,搭配經(jīng)典的玄色,讓網(wǎng)頁(yè)多了一層神秘感。為了掩蓋大量的留白可能會(huì)帶來(lái)的單調(diào),設(shè)計(jì)師用人物的大幅度動(dòng)作讓頁(yè)面看起來(lái)更充實(shí)。


網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站用戶體驗(yàn)


2、HotDot的網(wǎng)站背景風(fēng)格好像很符合現(xiàn)代設(shè)計(jì)師的口味。背景中的人物使用亮點(diǎn)不僅僅只在于獨(dú)特?fù)屟鄣膴y容上,更在于人物的視線方向上。從整個(gè)網(wǎng)站的布局上來(lái)看,用戶體驗(yàn)并不是很理想,導(dǎo)航在首屏的底部,而且字體和顏色也很不利于閱讀。所以,設(shè)計(jì)師利用人物的視線,將用戶的視線帶到了底部導(dǎo)航部門,很大程度的彌補(bǔ)了這一不足。


網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站用戶體驗(yàn)


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


網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站用戶體驗(yàn)


4、使用高清大圖作為背景是2014年的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)之一,在這個(gè)案例中也有一定的體現(xiàn),而使用高清圖片的特點(diǎn)就是讓畫面的真實(shí)感更強(qiáng),但同時(shí)也許會(huì)流失一些美感。如下案例所示,老奶奶充滿皺紋的臉的確讓網(wǎng)頁(yè)更多了一些糊口感和親切感,但假如不加以潤(rùn)飾就就會(huì)顯得有些許蒼白單調(diào),因此設(shè)計(jì)師巧妙的加以紋理背景,讓畫面看起來(lái)既不失真又美觀。


網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站用戶體驗(yàn)


5、這個(gè)案例中使用了大量的圓形元素,而看似獨(dú)立的圖形反而會(huì)讓用戶尤其注重其中的內(nèi)容和條理關(guān)系。仔細(xì)看每個(gè)圓形中的布局方式,設(shè)計(jì)師很細(xì)心的用布局來(lái)彌補(bǔ)幾何元素帶來(lái)的“凌亂”,讓用戶感慨感染到網(wǎng)頁(yè)的個(gè)性。


網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站用戶體驗(yàn)


6、有人物的任何場(chǎng)景都能表現(xiàn)出不同的情感,就算沒(méi)有眼神、動(dòng)作的交流,一個(gè)簡(jiǎn)樸的背影也能引發(fā)出瀏覽者的無(wú)窮遙想。


網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站用戶體驗(yàn)


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


網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站用戶體驗(yàn)


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


網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站用戶體驗(yàn)


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


網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站用戶體驗(yàn)


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

上一條:關(guān)于如何進(jìn)步網(wǎng)站設(shè)計(jì)師的...

下一條:電子商務(wù)網(wǎng)站設(shè)計(jì)分析三:...