技術資訊

10個有用的技術改進你的用戶界面設計

2009-02-15 09:47:00

網頁設計最重要的組成部分是界面設計。創(chuàng)造美觀而具有功能性的界面包含多種技巧。以下是我自己收集的，我認為你會在工作中發(fā)現(xiàn)派上用場的10個技巧。它們和任何特定主題無關，而更偏向于我自己的項目里常使用的技術。沒什么其它問題的話，我們就開始吧。

1.填充鏈接區(qū)

鏈接（或是錨）默認都是內置元素，也就意味著它們可點的區(qū)域僅僅是文字的寬高。這個可點擊的區(qū)域，或是你可以點擊進該鏈接目的地的空間，可以極大提高可用性。我們可以通過增加填充，另外在有些情況下，也可以把鏈接轉換成快狀的元素。有個內置與填充鏈接的例子，它們可點的區(qū)域被高亮過了以示區(qū)別：

很明顯，可點擊的區(qū)域越大，點擊該鏈接就更容易，因為錯過它的機會就少了。把鏈接轉換成塊狀元素使文本區(qū)涵蓋整個容器的寬，除非寬被另外定義了。這樣，把鏈接放到側欄里是很理想的。我們可以通過下列的代碼來實現(xiàn)它：

view plaincopy to clipboardprint?
a {
    display: block;
    padding: 6px;
}

確保也要給鏈接增加一個完好的填充，因為把一個鏈接轉換成區(qū)域只影響其表現(xiàn)和寬度；增加填充可以確保該鏈接夠高，而且有喘息的空間。

2. 排版按鈕

對每一個細節(jié)的注重可以區(qū)分一個產品偉大還是平凡。例如，按鈕和標簽這樣的界面元素每天會被你的用戶多次點擊，所以適當?shù)慕o它們排版是有收獲的；我所謂的排版是指把這些標簽排列一下。以下有些我偶爾注意到的，誤用標簽的例子：

第一眼看到它們還行，但是注意那些文字被放的太高了，這是因為使用小寫字母作為垂直居中對齊文字的導向，像這樣：

無論怎樣，如果我們使用大寫字母和上格的小寫字母（t、d、f、h、k、l）平衡就倒向了上面，使得標簽看起來在按鈕上太高了。在那種情況下，我們應該把大寫字母的高度作為一個標尺-如果大多數(shù)字母是小寫，就把它略標高一些。我的意思是像這樣：

這樣使整個按鈕有一個更平衡的外觀。這樣的小打小鬧距離使你的界面更有光彩且易用，還有一段很長的路。

3.使用對比來管理焦點

類似的，你也可以使用元素間的對比來管理你的用戶的注意力。有一個例子關于發(fā)布頭條和其下面的一些發(fā)布者、發(fā)布日期的元信息：

所有的文字都被設成黑色。讓我們通過把文字設為很淺的灰色陰影來減小元信息（日期和作者名字）和背景的對比。

此處最強烈的對比元素是標題，所以它在字面上跳到我們眼前。其他的元素消逝到背景里。在此，我已經選擇作者作為第二重要的元素，而日期是最不重要的。這些字在大小和風格上也有所區(qū)分，但是對比的強度可以非常有力。讓我們把日期，作者和標題的重要性順序調換一下：

你可以看到這對轉換焦點是多么有效：現(xiàn) 在是日期跳到你的眼前，而標題消逝了。這項技術對于信息量很大的網站來講非常方便，例如博客，論壇和社會關系網，在這些地方你需要使大量信息易于被看到的同時，也顯示大量附加內容，例如日期。把多余的隱掉使訪問者易于把他們的注意力集中到最重要的文字上。

4.使用顏色來管理注意力

顏色也可以被有效的被用來把訪問者的注意力集中到重要的，或是可行的元素上。例如，在美國總統(tǒng)大選的時候，很多候選人的網站把捐贈的按鈕做成紅色。紅色是一種非常鮮艷而且有力的顏色，所以它吸引注意力，而且當網站的主色是藍色或是其他冷色調的時候它顯得更加突出。

形如紅，黃和桔色這些暖色調本身很鮮艷，所以很容易吸引眼球。當和藍，綠這些冷色對比的時候，它們也會“膨脹”。這意味著一個藍背景上的橙色按鈕看上去是向外流，并占據了前面的座位。相反，一個橙色背景上的藍按鈕像是向內的對比，更愿意作為背景。下面的圖示說明了這一點：

以下是一些有效使用顏色來引導用戶注意力到重要元素的網站范例：

Function 有個“我們正在招聘”的鏈接在它們的工作頁面。為了確保這個鏈接不被忽略，設計師給它設置了一個從深色背景的頁眉突出出來的紅色的背景，有效的抓住了注意力。

Causecast 使用顏色非常有效。4個粉紅色元素跳到你眼前：logo，反饋鏈接，捐贈鏈接和網站描述信息。

想要網站上的“關于”抓住訪問者的注意力？把背景設成黃色。想要使“加入”按鈕突出？把它設成橙色。但是要確保不要強調過多的元素，如果你這樣做了，它們會在彼此的映襯下迷失掉。

5. 空白表示了關系

界面上最富有爭議性的元素之一是各個元素之間的空白。如果你對于這種空白還不熟悉，它的意思其實是：一個界面元素與另一個之間的空間，它可以是一個按鈕，一個導航條，文章正文，一個標題或者其它。我們可以通過制造這種空白來表示特定元素，或是元素組合之間的關系。

因此，例如我們把標題放得接近文章正文，表示該標題與文字相關。然后文字被放到距離其它元素很遠的地方，使之更具有可讀性。下面是一個空白處可以被改進的例子：

文字看起來很好而且當然是可讀的，但是由于標題上下兩部分的空間是一樣的，它們并沒有清楚的把每一部分文字分割開來。我們可以通過增加每一段之間的空白來和略微縮小段落行距來改進這一點。

這樣的結果是更加明確的界定了區(qū)塊；我們可以容易的分辨哪個標題對映哪段文字，而且可以清晰的看到分隔的段落。好的設計師常常斜視一下或者從遠處掃一眼他們的作品，這樣讓他們從整體上來看被空白間隔開來的區(qū)塊元素。如果你不能清楚的看到這些組合，你可能需要調整一下你的空白。

#p#

6.字間距

網頁設計對于版式設計師來講是非常局限的。雖然這里只有一些安全網絡字體，而且你也做不了太多把來定義它們的樣式時，牢記我們依然有一些層面上的控制權是值得的?！皬健笔且粋€在排版上用來描述字間距調整的名詞。使用CSS里的“l(fā)etter-spacing”屬性，我們有能力做到這一點。

如果按限制和品位來使用，這個屬性將會有效改進你標題的樣子。我不鼓勵把字間距用在主體文字上，因為默認的間距已經提供了適宜小字號的最佳可讀性。

以下是一個使用字間距的范例：

下面是上述案例使用的CSS代碼：

view plaincopy to clipboardprint?
h1 {
    font-family: Helvetica;
    font-size: 27px;
}

h2 {
    font-family: Helvetica;
    font-size: 27px;
    letter-spacing: -1px;
}

h3 {
    font-family: Georgia;
    font-size: 24px;
    letter-spacing: 3px;
    font-variant: small-caps;
    font-weight: normal;
}

這個效果會在你想要做一個更美觀或是更原汁原味的標題時派上用場。在此，我只使用了幾個像素的字間距，但已經使字體的風格發(fā)生了大變化。

7.自動聚焦到輸入框

很多網絡應用和網站使用表單這一特性。它們可能是搜索表單或者是輸入表單邀請你去提交一些東西。如果這個表單是你的應用或是網站的核心特性，你可能會考慮在載入網站的時候，自動把用戶的鼠標指針聚焦到輸入框上。這樣會提高效率因為用戶可以不用點擊便直接輸入。這方面一個很好的例子是谷歌和維基百科的站點。

以上是維基百科上的，搜索框已經被高亮，準備好來接收文字。

自動聚焦到輸入框，你需要一點兒JavaScript。有很多的解決方法，你所需要的那種方法依賴于你想達到的功能。這么做最簡單的方法可以是把一些下列的東西加到你的BODY標簽后面。

view plaincopy to clipboardprint?
<body " />
    <input type="submit" value="Go" />
</form>

現(xiàn)在，每次這個頁面加載的時候，文字框調用“form_field” 被自動選擇，做好輸入的準備。

這么做唯一的問題是，如果你的用戶想要使用后退鍵回到前一頁，他們不會成功，因為他們只會把輸入框的字母刪除掉。謝天謝地，你可以在這兒找到Harmen Janssen有另一個簡單的JavaScript解決方案。他的腳本允許當輸入框中字母都被刪除的時候，后退鍵回到前一頁。

8. Custom input focus 自定義輸入焦點

雖然表單元素的默認外觀足以應對多數(shù)功能，有時候我們希望東西做的更好看，或者在跨越不同瀏覽器和系統(tǒng)的時候更標準化一些。我們只需輕松的把輸入框標注上“id,” “class” 或是更老的 “input” 就可以像這樣風格化輸入框：

view plaincopy to clipboardprint?
input {
    border: 2px solid #888;
    padding: 4px;
    font-size: 1em;
    background-color: #F8F8F8;
}

更有趣的是焦點在輸入框上的時候也可以風格化；即當它被點擊時候的狀態(tài)。我們需要在“input”之后加上一個 “:focus”的屬性：

view plaincopy to clipboardprint?
input:focus {
    border-color: #000;
    background-color: #FFFE9D;
}

如果你在使用自定義的背景來風格化你的輸入框，它們在有些瀏覽器和操作系統(tǒng)默認的聚焦效果下可能會沖突。例如，這里有一個自定義的風格和OS X 默認藍色光霧效果沖突的截屏：

在這種情況下，你也可以使用“input:focus”屬性來去掉默認的風格。以上截屏上默認的藍色光霧可以通過禁止“outline”屬性來去掉。

view plaincopy to clipboardprint?
input:focus {
outline: none;
}

藍色光霧的效果將會被去掉：

如果你要把它替換成你自己的風格，顯然你只會希望去掉外框，這樣你不會給你的表單的無障礙訪問以及可用性帶來負面影響。

9. 懸?？刂?BR>
一些網絡應用有額外的實用工具管理，例如編輯和刪除按鈕，它們不需要一直在每一項的旁邊顯示。它們可用被隱藏起來從而簡化界面，把訪問者的注意力聚焦到主要的控制和內容上。例如，這些用在Twitter上，當你經過信息時的懸?？刂?。

這些懸停控制可以通過一些簡單的CSS代碼來實現(xiàn)，不需要任何JavaScript。簡單的當它的父級層在一個懸停狀態(tài)時，用這些控制把div風格化。以下是隱藏和展示這些控制的代碼（在一個“message”屬性的層內部，使用一個“controls” 屬性的層）：

view plaincopy to clipboardprint?
.message .controls { display: none; }
.message:hover .controls { display: block; }

當你懸停在“message”屬性的層，內部“controls” 屬性的層就顯示出來，同時還有它的所有內容，提供給你和上面 Twitter截屏所顯示的一樣的功能。

無障礙訪問會有問題，因為屏幕閱讀者也許讀不到隱div。有很多其它的方法隱藏內部的div，比如用負值的邊緣偏移把它移出頁面（例如 “l(fā)eft-margin: -9999px”），把它的文字顏色設置的和背景色一樣，或是簡單的在它之上再放一層。

這項技術應該被加以限制的使用，因為你不想隱藏你重要的控制；但是如果使用正確，它將對通過移除你不希望一直顯示的，額外實用工具鏈接來清理你的界面很有用處。

注意這些對IE6并不適用，所以你需要把你的IE6專屬樣式表隱藏的優(yōu)先級覆蓋，或者你沒有的話，簡單的在<head> 這部分里使用以下IE6專屬代碼。

view plaincopy to clipboardprint?

10.標簽里的動詞

你可以考慮一下你用在按鈕和鏈接上的標簽，使對話框更具有可用性。如果一個錯誤或是消息彈出來，選擇是“是”，“否”和“取消”，你必須閱讀整條消息來回答?？雌饋砗芷匠?，不是么？

但是我們實際上可以通過在標簽里使用動詞來提高效率。所以，如果除了“是”，“否”，“取消”我們可以使用“存儲”，“不存儲”，“取消”按紐，你甚至不用去閱讀消息來理解這些選項是什么和會表現(xiàn)哪些行為。所有的信息已經包含在按鈕的標簽上了。

在按鈕和鏈接的標簽里使用動詞使得選擇對話框更好用，因為這些標簽含有用戶需要具備來作出一個選擇的所有的信息了。

結語
如果順利的話,你已經找到了將在你的工作里派上用場的一些新技術。和往常一樣，有效使用它們需要限制和考慮周全的實現(xiàn)。例如，出現(xiàn)在懸停時的控制可能會使你的界面清爽，但是它們也會增加學習曲線，因為人們可能一開始沒注意這些控制。但是同時顯示所有的控制可能也不是最好的戰(zhàn)略，因為用戶需要去掃描更多的東西來找到他們要找的東西。

達到你所顯示和你所隱藏之間正確的平衡是一項精細的藝術，作為一個設計師這也完全在你掌握之中。不要使用一項技術僅僅因為存在這項技術：使用它，如果它在你的上下文里有意義。

關于作者
Dmitry Fadeyev 是 Usability Post 博客的創(chuàng)始人，你可以在那里讀到他關于好設計和可用性的想法。
原文：http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/

(the end)

上一篇：白宮網站改版之深度剖析

下一篇：09年QQ登錄Banner之轉變