5個有效改進網頁UI設計的技巧

 

轉自

http://hi.baidu.com/lantonad/blog/item/be9d52d843256aee39012feb.html#diglog-e920c09cff7d482e898ecbe6ad58b9b9

 

 

從某種意義上來說，頁面設計(web設計)也就是使用者介面設計。有許多技巧可以協助我們製作出漂亮、實用的介面，這裡收集的5個小技巧就會對你有所協助的。這些技巧並不依賴於特定的主題或模板，所以會適用於多數情況下的設計。不羅嗦了，我們開始吧！

1.改善連結體驗
       網頁中的文字連結通常標有底線，表示文字是可以點擊的，但可點擊地區不會超過字元的寬、高範圍。設計類似這種帶有超連結的可點擊地區的時候，都可以通過一些小技巧來提高可用性，比如：增加間隔，有些情況下甚至可以把連結轉換為塊元素。如，用高亮來區別可點擊地區。

       顯然，可點擊的地區越大，使用者點擊就容易。在沒有指定寬度的時候，將連結轉換為塊元素，可以使文字連結的可點擊地區擴大到為整個容器的寬度，這樣的設計尤其適用於側邊欄的連結。這個技巧可以通過如下CSS實現。

a {
　display: block;
　padding: 6px;
　} 　

注意：由於轉換為塊元素只對連結的寬度起作用，所以需要設定間隔(padding)來保證塊在縱向的間距。

      2.按鈕也需要排版！
      設計的每一個細節失誤都有可能把完美的產品變成平庸，比如按鈕、Tab這樣簡單的介面元素，由於使用者每天都會點擊無數次，也需要適當的進行排版。請看下面一些例子：

    乍看起來沒有什麼問題，仔細觀察可以發現，按鈕和select的文字都偏上，原因就是將小寫字母作為了排版的基準，小寫字母置中時，整個文字的位置就會顯得偏上。如：

      就像中，如果按鈕上的文字包含大寫字母或一些較高的小寫字母，如”t,d,f,h,k,l”的時候，文字就會顯得偏上。所以，通常應該把大寫字母作為定位的基準，或者在小寫字母較多時，稍微將文字的位置向上移動。

      上面的文字排版使按鈕看起來更舒服，注重像這樣的小細節對介面設計大有協助。
      大頭：雖然中文沒有大小寫字母的問題，但也有很多頁面設計時不注重按鈕的文字排版，導致錯位。

     3.利用對比來控制焦點
      與上面兩個技巧類似，我們也可以通過頁面元素間的對比來控制使用者關注的焦點。下面的例子關於文章標題與日期、作者等資訊之間利用對比突出重點的例子。

    中所有文本都是黑色，讓我們試著來調整一下日期和作者文字的顏色看看

      文章標題的對比最高(顏色最重)，所以感覺凸顯出來。同時，通過對比的不同，將作者與日期也體現了區別。相比於字型、字型大小的設定，對比(顏色深淺)更能凸顯出不同。下面讓我們改變一下對比高低的順序：

       可以看到不同的對比設定會有明顯的效果，這種效果可能會用在一些顯示大量資訊的場合，如blog、論壇或SNS網站。凸顯某些資訊可以讓使用者快速的瀏覽、找到自己所需的內容。大頭：我能想到的比如搜尋結果頁，將搜尋條件反白可能會好些。

       4.利用顏色來引起注意
       當然，顏色的不同也可以有效地吸引使用者對重要及可操作元素的注意力。舉例來說，在前段時間美國總統候選人提名期間，很多候選人的頁面上都有紅色的“捐助”按鈕，在頁面整體是藍色或其他冷色調的時候，鮮明的紅色能夠很有效吸引訪客的注意力。
       像紅、黃、橙等暖色調，天生就有較強的吸引眼球的能力，而且這種能力在對比藍、綠等冷色調時就更為突出。有趣的是，這種差別會讓人產生空間上的想象，比如藍色背景上的橙色按鈕會給人凸起的感覺，相反情況下會給人凹陷的感覺，詳見：

 

 

 
     需要注意的是，盡量避免利用顏色凸顯過多的元素，這樣反而會讓使用者無所適從。

       5.空白-不僅僅用來分隔
       內容元素之間的空白也是設計中需要注意的問題之一，比如像按鈕、導航條、文章內容、標題等等元素之間的空白都有必要關注。有效地利用空白，我們可以明確的表現出頁面元素之間的關係。
       舉例來說，標題與內容相近可以表示之間的所屬關係，但文字內容與其他元素有一定距離會方便閱讀。請看下面的例子：

       上面的圖例看起來沒什麼問題，但仔細看可以發現，每個標題上下的空白是相等的，這樣就沒有明顯的區分每部分內容。我們可以通過調整段落間的距離或段落中的行距來解決這個問題：

       是否變得更清楚些？好的設計師通常會眯著眼或從遠處來看看自己的作品，這樣會有效發現內容顯示是否清楚的問題。