網(wǎng)頁美工設計

如何做出有視覺層級的網(wǎng)頁設計

編輯：時間：2015-07-29 15:37:30

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

　　在設計網(wǎng)站的時候，圖片資源會在很大程度上幫助你設置站點，以及顏色，排版或者更多內(nèi)容的基調(diào)。如果圖片視覺元素沒有和設計正確的結合，他很可能會破壞你原本想呈現(xiàn)的感覺。頁面中圖片視覺元素都被正確擺放，因為他們和站點的產(chǎn)品密切相關。Neonmob用一種很優(yōu)秀的方式呈現(xiàn)他們的產(chǎn)品，當你握住卡片的時候，會有一種半現(xiàn)實的感覺。這種方式幫助強調(diào)了產(chǎn)品的方式，自然的講出故事。創(chuàng)建一個好的視覺流需要理解怎么在不打斷內(nèi)容流利用這些視覺元素去加深用戶的體驗。圖片資源同樣是另一種講故事的好方式，幫助我們向用戶解釋他們應該走向哪里，應該做些什么，他們會從站點得到些什么。相對于使用內(nèi)容，圖片是一種很視覺化方式幫助用戶理解清楚需要講述的東西。使用諸如圖片，圖標這樣的視覺元素可以有效幫助建立令人興奮和具有創(chuàng)意的視覺點來吸引用戶的注意力。利用這一點我們可以高亮突出需要更多注意力的內(nèi)容。通過圖片建立視覺層級下面是一些可以幫你建立很強圖片視覺層級的

　　1.想想你需要設定的頁面基調(diào) 圖片描繪了網(wǎng)站的基調(diào)。如果你想設定的基調(diào)是專業(yè)的，放松的，隨意的，實用的（或者其他任何樣式），那么你需要選擇能夠反應他們的圖片。使用圖片加強網(wǎng)站的感覺比不得不使用圖片來解釋引導用戶下一步做什么更重要。一個沒有圖片的網(wǎng)站應該具備能夠向用戶講述的能力，而圖片只是用來加強講述內(nèi)容使他們表現(xiàn)更好的方式。然而圖片不是后來才需要加上去的東西。他們需要得到頁面中其他內(nèi)容同樣的關注和重視，確保他們跟頁面中其他內(nèi)容配合默契。HopSkoch 需要向客戶講述他們的產(chǎn)品，他們需要被立即展示出來。這種簡單，直觀，又強大的展示方式表現(xiàn)的不錯，能夠立即吸引來訪者的注意力。

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

　　3.使用全景圖庫或者自己拍片？這完全取決于你網(wǎng)站想要傳達的感覺和你需要展示的設計質(zhì)量等級。但是這也看你是想要全景圖片或者自己拍攝。個人認為全景圖片有些也一般，特別是如果你想要一種標準化辦公室風格樣子的照片。也就是說，使用精心布置的拍攝方式，自己拍攝完全可以達到那種水平。作為自己拍攝的圖片，特別是當你請了一個專業(yè)攝影師時，同樣可以給你的設計帶了很出色的表現(xiàn) ，因為出色的圖片通常會促使你提高設計水平添加一些視覺對比。有時候?qū)τ谝恍╇娚叹W(wǎng)站也是需要自己定制拍攝的圖片的，但是要記住，拍攝的圖片要符合網(wǎng)站風格，感覺。否則就可能會有網(wǎng)站設計很漂亮，圖片也很吸引人但是放在一塊兒就是奇怪的風險。HopSKock 同樣使用自己制作的圖標來展示他們的作品，如果這些圖標使用圖庫的圖片，品牌信息傳遞就會減半。

　　4.小心使用尺寸和對比還有一個需要注意的小點是使用圖片的尺寸。如果可以，保持圖片在你之前創(chuàng)建的垂直方向上的韻律。這同樣會保證你的內(nèi)容流順暢流動在瀏覽的時候不會感覺結結巴巴。同樣需要注意圖片的實際尺寸會影響到內(nèi)容的閱讀。你當然不希望創(chuàng)建出文字和圖片的強對比，這會使內(nèi)容變得難以閱讀甚至完全破壞視覺流。也就是說，你可以使用大一點的圖片，打破這個規(guī)則。自由使用他們，給頁面創(chuàng)建一些亮點。Fitbit頁面呈現(xiàn)的圖片就都是關于自家產(chǎn)品的。他們使用大小，和對比來呈現(xiàn)產(chǎn)品引發(fā)交互。

　　5.將顏色變成優(yōu)勢使用的任何一張照片元素都是應該有原因的。我們使用顏色的大部分原因都是想吸引注意，或者將元素與元素，區(qū)域與區(qū)域之間區(qū)分開。這是一種很有效率的使用顏色的方法，它可以給你頁面中元素應有的視覺權重。你同樣可以聰明的使用顏色來抓去注意力以區(qū)分出元素的輕重緩急。看看你頁面中圖標的顏色是如何影響整個頁面的感覺和信息傳達的。Fibit就是傳達出品牌的網(wǎng)站之一。他們在網(wǎng)站和線下其他服務中都適用一致的顏色，徽章設計中也是。這很細微的將所有設計元素聯(lián)系在一起形成一個品牌整體。

　　6.不要忘記形狀形狀是容易被低估和被忘記的視覺元素之一。不要害怕將形狀和內(nèi)容，圖片混合在一起使用，盡管圓形在如今的設計界很流行，也可以嘗試一下其他形狀，然后看看如何結合到自己的設計當中。不管是一個圖標的形狀，還是你給圖片？？的遮罩形狀，這些都會對你設計的網(wǎng)站有很大影響。典型的視覺模型下面是一些可以幫助我們建立強視覺層級的視覺模型。在講組成的文章中已經(jīng)講述了很多細節(jié)，在這里就簡要講一下可以幫助我們真正思考視覺層級的內(nèi)容。

　　1.Z型布局Z行布局是最常見的布局之一，可以在很多設計中看到。他是根據(jù)人眼球在一個站點上如何轉動來設計的，從左上到右邊，再然后到下面的左邊，然后又跳轉到右邊。這就形成了一個Z字路徑。

　　2.黃金分割黃金分割在印刷和設計界很出名。它是一種基于數(shù)學比例的劃分方式，有效呈現(xiàn)頁面中的重點。主要內(nèi)容占最大塊，相對不重要的，次級不重要的占更小的部分。使用這個規(guī)則，元素都表現(xiàn)的相當出色，我們可以選擇更多重要的圖片放在主視覺區(qū)域，將次級重要的放在相對小一點的區(qū)域。

<< 上一篇：3種較常見的響應式設計問題

>> 下一篇：鄭州學習網(wǎng)頁美工參加培訓班哪里好

推薦資訊