藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

本文來(lái)自：設(shè)計(jì)派

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

頁(yè)面設(shè)計(jì)中層級(jí)不僅僅與內(nèi)容和文字有關(guān)。設(shè)計(jì)中使用的所有圖片資源，從照片到圖標(biāo)，按鈕和其他任何除了文字的視覺元素，對(duì)于頁(yè)面的層級(jí)以及呈現(xiàn)的感覺有很大的影響。

在設(shè)計(jì)網(wǎng)站的時(shí)候，圖片資源會(huì)在很大程度上幫助你設(shè)置站點(diǎn)，以及顏色，排版或者更多內(nèi)容的基調(diào)。如果圖片視覺元素沒有和設(shè)計(jì)正確的結(jié)合，他很可能會(huì)破壞你原本想呈現(xiàn)的感覺。

Neonmob   頁(yè)面中圖片視覺元素都被正確擺放，因?yàn)樗麄兒驼军c(diǎn)的產(chǎn)品密切相關(guān)。Neonmob用一種很優(yōu)秀的方式呈現(xiàn)他們的產(chǎn)品，當(dāng)你握住卡片的時(shí)候，會(huì)有一種半現(xiàn)實(shí)的感覺。這種方式幫助強(qiáng)調(diào)了產(chǎn)品的方式，自然的講出故事。

創(chuàng)建一個(gè)好的視覺流需要理解怎么在不打斷內(nèi)容流利用這些視覺元素去加深用戶的體驗(yàn)。

圖片資源同樣是另一種講故事的好方式，幫助我們向用戶解釋他們應(yīng)該走向哪里，應(yīng)該做些什么，他們會(huì)從站點(diǎn)得到些什么。相對(duì)于使用內(nèi)容，圖片是一種很視覺化方式幫助用戶理解清楚需要講述的東西。

使用諸如圖片，圖標(biāo)這樣的視覺元素可以有效幫助建立令人興奮和具有創(chuàng)意的視覺點(diǎn)來(lái)吸引用戶的注意力。利用這一點(diǎn)我們可以高亮突出需要更多注意力的內(nèi)容。

通過(guò)圖片建立視覺層級(jí) 

下面是一些可以幫你建立很強(qiáng)圖片視覺層級(jí)的tips

1.想想你需要設(shè)定的頁(yè)面基調(diào) 

圖片描繪了網(wǎng)站的基調(diào)。如果你想設(shè)定的基調(diào)是專業(yè)的，放松的，隨意的，實(shí)用的（或者其他任何樣式），那么你需要選擇能夠反應(yīng)他們的圖片。

使用圖片加強(qiáng)網(wǎng)站的感覺比不得不使用圖片來(lái)解釋引導(dǎo)用戶下一步做什么更重要。一個(gè)沒有圖片的網(wǎng)站應(yīng)該具備能夠向用戶講述的能力，而圖片只是用來(lái)加強(qiáng) 講述內(nèi)容使他們表現(xiàn)更好的方式。然而圖片不是后來(lái)才需要加上去的東西。他們需要得到頁(yè)面中其他內(nèi)容同樣的關(guān)注和重視，確保他們跟頁(yè)面中其他內(nèi)容配合默契。

HopSkoch  需要向客戶講述他們的產(chǎn)品，他們需要被立即展示出來(lái)。 這種簡(jiǎn)單，直觀，又強(qiáng)大的展示方式表現(xiàn)的不錯(cuò)，能夠立即吸引來(lái)訪者的注意力。

2.永遠(yuǎn)不要使用圖片代替文字

不要設(shè)想圖片使容易理解的。我會(huì)建議你給圖片加上標(biāo)題或者自子標(biāo)題，這樣可以幫助用戶理解，更好的講述內(nèi)容。并且這樣可以在圖片和文字之間建立更好的連接。這樣也可以在圖片沒有現(xiàn)實(shí)出來(lái)的時(shí)候內(nèi)容是可獲得的。

3.使用全景圖庫(kù)或者自己拍片？

這完全取決于你網(wǎng)站想要傳達(dá)的感覺和你需要展示的設(shè)計(jì)質(zhì)量等級(jí)。但是這也看你是想要全景圖片或者自己拍攝。

個(gè)人認(rèn)為全景圖片有些也一般，特別是如果你想要一種標(biāo)準(zhǔn)化辦公室風(fēng) 格樣子的照片。也就是說(shuō)，使用精心布置的拍攝方式，自己拍攝完全可以達(dá)到那種水平。

作為自己拍攝的圖片，特別是當(dāng)你請(qǐng)了一個(gè)專業(yè)攝影師時(shí)，同樣可以給你的設(shè)計(jì)帶了很出色的表現(xiàn) ，因?yàn)槌錾膱D片通常會(huì)促使你提高設(shè)計(jì)水平添加一些視覺對(duì)比

有時(shí)候?qū)τ谝恍╇娚叹W(wǎng)站也是需要自己定制拍攝的圖片的，但是要記住，拍攝的圖片要符合網(wǎng)站風(fēng)格，感覺。否則就可能會(huì)有網(wǎng)站設(shè)計(jì)很漂亮，圖片也很吸引人但是放在一塊兒就是奇怪的風(fēng)險(xiǎn)。

HopSKock 同樣使用自己制作的圖標(biāo)來(lái)展示他們的作品，如果這些圖標(biāo)使用圖庫(kù)的圖片，品牌信息傳遞就會(huì)減半。

4.小心使用尺寸和對(duì)比

還有一個(gè)需要注意的小點(diǎn)是使用圖片的尺寸。如果可以，保持圖片在你之前創(chuàng)建的垂直方向上的韻律。這同樣會(huì)保證你的內(nèi)容流順暢流動(dòng)在瀏覽的時(shí)候不會(huì)感覺結(jié)結(jié)巴巴。

同樣需要注意圖片的實(shí)際尺寸會(huì)影響到內(nèi)容的閱讀。你當(dāng)然不希望創(chuàng)建出文字和圖片的強(qiáng)對(duì)比，這會(huì)使內(nèi)容變得難以閱讀甚至完全破壞視覺流。也就是說(shuō)，你可以使用大一點(diǎn)的圖片，打破這個(gè)規(guī)則。自由使用他們，給頁(yè)面創(chuàng)建一些亮點(diǎn)。

Fitbit頁(yè)面呈現(xiàn)的圖片就都是關(guān)于自家產(chǎn)品的。他們使用大小，和對(duì)比來(lái)呈現(xiàn)產(chǎn)品引發(fā)交互。

4.將顏色變成優(yōu)勢(shì)

使用的任何一張照片元素都是應(yīng)該有原因的。我們使用顏色的大部分原因都是想吸引注意，或者將元素與元素，區(qū)域與區(qū)域之間區(qū)分開。

這是一種很有效率的使用顏色的方法，它可以給你頁(yè)面中元素應(yīng)有的視覺權(quán)重。你同樣可以聰明的使用顏色來(lái)抓去注意力以區(qū)分出元素的輕重緩急?？纯茨沩?yè)面中圖標(biāo)的顏色是如何影響整個(gè)頁(yè)面的感覺和信息傳達(dá)的。

Fibit就是傳達(dá)出品牌的網(wǎng)站之一。他們?cè)诰W(wǎng)站和線下其他服務(wù)中都適用一致的顏色，徽章設(shè)計(jì)中也是。這很細(xì)微的將所有設(shè)計(jì)元素聯(lián)系在一起形成一個(gè)品牌整體。

5.不要忘記形狀

形狀是容易被低估和被忘記的視覺元素之一 。不要害怕將形狀和內(nèi)容，圖片混合在一起使用，盡管圓形在如今的設(shè)計(jì)界很流行，也可以 嘗試一下其他形狀，然后看看如何結(jié)合到自己的設(shè)計(jì)當(dāng)中。不管是一個(gè)圖標(biāo)的形狀，還是你給圖片