首頁(yè)?>?知識(shí)?資訊?>?設(shè)計(jì)網(wǎng)站要建立清楚的視覺階層。?>?正文

設(shè)計(jì)網(wǎng)站要建立清楚的視覺階層。

2017/2/24 0:00:00 · 稿源:傳誠(chéng)信

網(wǎng)站的頁(yè)面設(shè)計(jì)是讓人掃貓的,不是閱疆的!

設(shè)計(jì)網(wǎng)站要建立清楚的視覺階層。

建立清楚的網(wǎng)站視覺階層

設(shè)計(jì)的網(wǎng)站頁(yè)面要易于在一瞬間看清楚,就必須讓頁(yè)面上的每一樣?xùn)|西外觀的視覺表現(xiàn)都能簡(jiǎn)潔表達(dá),并傳達(dá)出頁(yè)面上每一件東西之間的關(guān)系:

哪些東西有關(guān)系,哪些東西屬于其他事物的一部份。換句話說(shuō),每一頁(yè)都應(yīng)該要有清楚的視覺階層。

有清楚視覺階層的頁(yè)面,會(huì)有三種不同的特征:

越重要的東西,就應(yīng)該要越明顯。例如,最重要的標(biāo)題,若非放大,就是 要加粗、使用不同顏色、多留些空白面積,或者放在頁(yè)面頂端一也可以將 上述方法組合使用。

視覺上的「巢狀」階層,顯示事物屬于哪一部份。

例如,小標(biāo)就應(yīng)該放在某本此類書籍的書名之上,在視覺上包圍整個(gè)頁(yè)面的內(nèi)容,因?yàn)檫@本書是屬于這類書籍。在書名底下,接著加入敘述該書的內(nèi)容。


「視覺階層」并不是什么新玩意兒。例如報(bào)紙上的每一頁(yè),都使用了凸顯、分 組與巢狀架構(gòu),讓我們還沒讀進(jìn)任何一個(gè)字,便能先了解關(guān)于這一頁(yè)內(nèi)容的 有用資訊。這張照片和這篇報(bào)導(dǎo)是在一起的,因?yàn)樗麄兌挤旁谶@個(gè)標(biāo)題底 下。這段報(bào)導(dǎo)最重要,因?yàn)闃?biāo)題字體最大、欄位最寬,也占用了頁(yè)面上最顯 著的位置。


我們每天都要解讀各種視覺階層一在網(wǎng)站上或者紙上,但是這個(gè)過(guò)程實(shí)在太快了,所以我們只有在無(wú)法一眼了解的情況下,才會(huì)去被迫思考。

良好的視覺階層,可以為我們預(yù)先處理網(wǎng)站頁(yè)面,節(jié)省我們的心力,還可以將內(nèi) 容管理排序,讓我們能夠立即了解。

但是當(dāng)頁(yè)面上并沒有清楚的視覺階層一例如每一件東西看起來(lái)都一樣重要, 那我們必須改用較慢的步驟,開始掃瞄頁(yè)面、解讀文字,并嘗試以自己的方 式來(lái)判斷內(nèi)容的重要性與組織方式。這就費(fèi)事多了。

此外,我們?cè)诰W(wǎng)站上也希望能和其他媒體一樣有編輯準(zhǔn)則。出版商比任何人 都知道網(wǎng)站內(nèi)容中什么東西最重要、最有價(jià)值或者最受歡迎,所以何不把這 些東西標(biāo)示出來(lái),幫我們省去麻煩?

解讀視覺結(jié)構(gòu)有瑕疵的頁(yè)面時(shí)一例如標(biāo)題下的東西并不屬于同一篇文章,就 像是閱讀一個(gè)沒寫好的句子廣他扶著桌子站立,因?yàn)槟_不太穩(wěn)」)。

即使我們通??梢圆鲁鲞@個(gè)句子的意義,但我們?nèi)匀粫?huì)暫時(shí)感到疑惑,迫使我們作非必要的思考。


  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時(shí)咨詢熱線

139-1050-5354