以訪客至上的網頁設計（二）

閱讀過Steve Krug 所著的《Don't make me think》-訪客至上的的網頁設計祕笈，從中學到了不少交互設計方面的知識，在這裏和你們分享。

以前寫過一章，「咱們是如何使用Web」的，今天咱們來講一下廣告牌/banner設計的要點。

 

廣告牌設計101法則

未掃描設計，不爲閱讀設計

 

若是用戶們都是一覽而過，那麼，你須要注意如下5個重要方面，來保證他們儘量地看到了，並理解了你的網站：

l  在每一個頁面創建清楚地視覺層次

l  儘可能利用習慣用法

l  把頁面劃分紅明肯定義的區域

l  明顯標示能夠點擊的地方

l  最大限度的下降干擾

 

創建清楚的視覺層次

讓頁面在瞬間明白易懂的一個好辦法是確保頁面上全部內容的外觀—全部可視線索---清楚，並且能準確地表述頁面上內容之間的關係；哪些內容相關，哪些內容是其餘內容的組成部分，換句話說，每一個頁面都應該有清楚地視覺層次。

一個視覺層次清楚地頁面有三個特色：

l  越重要的部分越突出。

例如，組重要的標題要麼字體更大，更粗，顏色更特別，旁邊了有更多的空白，要麼更接近頁面的頂部—或者，以上幾點的綜合。

                       

l  邏輯上相關的部分在視覺上也相關。

例如，能夠把內容相近的分紅一組，放在同一個標題之下，採用相似的顯示樣式，或者把他們所有放在一個定義明確的區域以內。

 

l  邏輯上包含的部分在視覺上進行嵌套。

例如，一個分類標題「名著書籍」出如今某本具體書籍書名上面，在視覺上包含書籍區域，由於該書籍屬於這個標題，並且書籍的標題也要橫向覆蓋描述這本書的元素。

 

      

對於視覺層次，沒有什麼特別的。例如在咱們閱讀報紙的時候，會發現每張報紙都用突出、分組和嵌套的方式爲讀者提供關於報紙內容的有用信息。這張圖片和這個新聞內容是一塊兒的，由於它們位於同一個標題的覆蓋範圍之下。這個新聞內容最重要，由於他採用了最大的標題，最寬的欄目，並佔用頁面最突出的位置。

 

咱們天天都會對視覺層次進行分解—不論是在網絡上仍是在報紙上，可是這種分解發生得太快了，所以咱們常常只有在不能這麼作 的時候才能模模糊糊地感受到了他—也就是，當這些可視信息線索（或可視信息線索的缺少）迫使咱們思考的時候。

 

好的視覺層次經過預先處理頁面，用一種咱們能快速理解的方式對頁面的內容進行組織並區分優先級，從而減小了咱們的工做。

 

可是i，若是一個頁面沒有清楚的視覺層次，例如，全部內容看起來都同樣重要，咱們會下降掃描頁面的速度，尋找關鍵的文字和短語，而後拼湊出咱們感受重要的內容和內容的組織方。這樣就增長了不少工做。

 

並且，和其餘媒體同樣，咱們在網站上，也但願獲得編輯的引導。沒有人比網站發佈者更清楚哪些內容更重要，更有價值，更流行了，一次咱們爲何不幫咱們把這些內容標識出來，省得給咱們帶來麻煩？

 

分解一個視覺層次上有問題的頁面，例如，一個標題涵蓋了不屬於它的內容，就像是讀一個病句同樣。

 

即便咱們一般能猜出這個句子的意思，但他仍是讓咱們花了點時間，迫使咱們不得不進行一些沒必要要的思考。

分享連接：http://www.ncloud.hk/技術分享/web_desigin_dont-make-me-think-2/