让用户舒服起来 10个改善UI的技术
在設(shè)計成品中，UI設(shè)計越來越顯得重要。而現(xiàn)實中有很多可以讓一個網(wǎng)頁設(shè)計既漂亮又功能化的技術(shù)，這里，原作者介紹了10種他經(jīng)常用在自己設(shè)計的產(chǎn)品中的技術(shù)。 如果你想擁有更好的UI，讓我們一起繼續(xù)。
1. 填充鏈接塊
鏈接(或錨點)都是默認的內(nèi)聯(lián)元素，這就意味著，只有在它本身的跨度上才有可點擊性。如下圖所示(藍色部分為可點擊區(qū)域，一圖是TechCrunch的，二圖是Smash Magazine的)：?
顯示，Smashing Magazine的鏈接可點擊性要比TechCrunch強。這可以增大點擊的正確率和點擊率。而如果你想這么做，只要用以下的代碼即可:
a {
display: block;
padding: 6px;
}
當(dāng)然，要提醒一下的是，請確保運用Padding是恰當(dāng)?shù)?#xff0c;IE有可能讓Padding沒能正常實現(xiàn)其真正的樣式。 有效避免Padding出現(xiàn)問題的方法是盡量讓它們與沒有padding或Margin的容器接觸，而常用的方法是，給padding的元素加上一個border。
2. 按鈕文章的排版
別小看這個問題，這可能是區(qū)分一個產(chǎn)品好與壞的一個細節(jié)。好的設(shè)計者會做到視覺平衡。讓我們來看看下面的例子：?
第一眼看起來還好，但看越覺得不對。你會覺得按鈕上的文字好像偏上了。因為大寫字母我小寫字母混大一起時，有一些是需要向上頂，或向下的(中文方塊字就不會了，很好!)我想表達的是：?
那么，我們需要怎么做呢?如果我們不想全部都是大字字母的話，可以按照下面的方法。讓他們都在同一個水平的空間內(nèi)，而且是向下沉的，這樣做，可以現(xiàn)好地平衡視覺效果，讓人看起來文字正好在中間：?
?
3. 使用對比來突出焦點
我想，我自己常用這個方法。因為這即安全又環(huán)保(囧)，讓我們來看看下面這個吧：?
?
看完上面的，讓我們來對比一下下面的文字，有什么區(qū)別呢? 很明顯，我們把焦點放在大標(biāo)題上。?
不過，需要注意的是，你要突出的是標(biāo)題，而不是一些比較將要的東西，所以，把焦點用對，向下面這個，并不適合：?
?
?
4. 使用顏色來突出焦點
顏色通常可以引起用戶的注意，而你可以用突出的顏色來展示你想要展示的結(jié)果，就像下面一樣：?
不過，就像上面我們在說標(biāo)題的焦點一樣。你最好把顏色選對。做比較好的搭配，并確保要突出的內(nèi)容出現(xiàn)在上方，而不是有被壓著的感覺，就像下面這兩個實例：?
Function 把HEADER區(qū)域中的 "We’re Hiring" 的鏈接突出來，像你現(xiàn)在所看到的，會沒有顧忌地把注意力投過去。從而使這個鏈接不會被遺忘，另外，讓我們來看看下一個：?
Causecast 剛把重要的東西都放在粉紅色的背景下，比如Feedback，LOGO，DONATE等。
不過，切記，不要隨便讓一個頁面充滿顏色，這樣會失去焦點;不要運用太另類的搭配，這可能引起反感。適當(dāng)利用，懂得我們的目的是要突出所需展示的內(nèi)容，而不是在顏色本身。
?
?
5. 用空行來表示關(guān)系
這個說起來好像有點讓人摸不著究竟能體現(xiàn)出什么關(guān)系來。其實，你只要看看平時我們看書的時候，通常每一個章節(jié)或者某個段落都可能用空白來隔開，表示他們屬于各種的內(nèi)容，就是這個意思，下面讓我們來看一個例。這個排得很漂亮吧：?
?
對，確實很漂亮。不過，在標(biāo)題與段落之間，他們的間隔都一樣，容易讓人產(chǎn)生不知道這個標(biāo)題是屬于那一段的感覺。而我們能做得更好，比如像下面一樣顯示，讓人一目了然。（happinesz.cn）?
?
6. 字距
大家都知道用行距來控制段內(nèi)文字的顯示，特別是中文排版，行距顯得非常重要。不過，很多人忽略了字距。可能是因為這個英文與中文有點不同，英文在標(biāo)題中運用字距能顯示更好的效果，不過，在中文標(biāo)題中個人建議按默認排法，因為默認排法一般是最優(yōu)的顯示方式。字距對于中文排版相對來說并不是很重要，而相比行距則是你知道的。英文的一般用在標(biāo)題上，并不建議在一般文本中運用，原因是一般情況下，默認的可讀性比較強，讓我們來看看下面的例子吧：?
?如果你想控制一下標(biāo)題，看看下面的CSS代碼：
| 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; } |
想你知道的，某些東西可能不需要改變，但改變即使是1px大小，也會讓整個設(shè)計的整體感覺非常不同。而你能做到的就是，多做細節(jié)的調(diào)整。你會發(fā)現(xiàn)更多意料外的驚喜。
?
7. 自動把焦點落在INPUT(輸入框)上
有沒有發(fā)現(xiàn)，有很多網(wǎng)站，你一進去，不用點鼠標(biāo)，光標(biāo)就會定在輸入框中，特別是在某些需要登陸后操作的網(wǎng)站?就像維基百科，就是這樣，如下：?
?為了讓焦點顯示在INPUT上，你可能需要一些Javascript來實現(xiàn)，而你可以用到的最簡潔的代碼如下所示：
| <body onLoad="document.forms.form_name.form_field.focus()"> |
而你的html代碼需要是這樣的：
| <form method="get" name="form_name" action="#"> <input type="text" name="form_field" size="20" /> <input type="submit" value="Go" /> </form> |
這樣的話，每次進入這個頁面的時候，name="form_field" 的INPUT將會被自動選中，作為第一個輸入的焦點。
不這，這個最簡單的JS還是有點小問題。如果你的讀者習(xí)慣用退格鍵來返回前一個頁面，這里，在你的頁面將不起作用。因為焦點在INPUT上，這時退格鍵只是刪除文本內(nèi)容，而不會回到上一個頁面。不過，所幸的是，如果你特別在意這個問題，請訪問 這里， Harmen’s的腳本可以讓用戶在INPUT中沒有本文的狀態(tài)下回到前一頁。
?
?
8. 自定義INPUT的樣式
默認未必不好，不過，最好的是自定義一個與整體一樣的樣式，讓你的設(shè)計更讓用戶賞心悅目，而你需要做的是，給INPUT加個ID或者CLASS，然后在CSS中定義它，比如我是這樣定義的：?
?CSS代碼如下：
| input { border: 2px solid #888; padding: 4px; font-size: 1em; background-color: #F8F8F8; } |
而更有趣的是":focus"值(這東西不會在IE6下顯示)看看這個是怎么定義的：?
?CSS代碼如下：
| input:focus { border-color: #000; background-color: #FFFE9D; } |
這里有一個問題，當(dāng)你使用INPUT背景的時候，在OSX(APPLE)會有一個默認的效果，自動給你加個INPUT:FOCUS的樣式，如下顯示：?
?為了更進一步優(yōu)化，我們來解決它，方法如下，你只要把它定義為outline:none就行了，事情總是如此簡單，代碼如下：
| input:focus { outline: none; } |
這時，這個我們不希望有的藍框就會消失掉：?
??
?
9. 光標(biāo)移過
是不是不想讓某些東西重復(fù)，讓版面看起來更舒服? 但這些東西都是必須的，怎么辦? 來吧，看看下面的例子，你就會明白如何做了：?
?上面是Twitter的效果，當(dāng)鼠標(biāo)上放的時候，會顯示收藏和回復(fù)兩個圖標(biāo)。如果讓每一行都顯示這個的話，版面似乎會很雜亂，那么來吧，這還能成為一個吸引人的功能呢。而你需要做的是把代碼這樣寫：
| .message .controls { display: none; } .message:hover .controls { display: block; |
| 當(dāng)鼠標(biāo)經(jīng)過".message"的 <div>時，".controls" 的<div>將會顯示出來。不過，這在IE6下顯示（萬惡的IE6），你需要做的是，在<head>標(biāo)簽內(nèi)加上如下代碼： <!--[if lt IE 7]> |
讓我們來看看Jinwen是怎么運用到博客上去的：讓回復(fù)留言的按鈕動態(tài)點。
?
?
10. 把動詞用在便條上
一般情況下，當(dāng)有某些提示的時候，我們選擇彈出一個提示便條，寫著"Yes," "No" 或者 "Cancel,"讓用戶來選擇。看起來好像理所當(dāng)然這樣做沒錯。來吧，讓我們來比較一下WINXP和OSX的做法：?
?很明顯，在看WIN的時候，我們很有可能需要看提示語，然后再點擊。OSX上面，因為有"SAVE"讓我們知道是要保存某些東西，所以，基本上都不用去看提示語說的是什么，從而保證效率提升。
總結(jié)一下：作者寫了一大堆，自己看完之后也覺得學(xué)習(xí)到不少。雖然自己也會用，但在看的過程和介紹的過程中自己也會去思考作者為什么會這么寫，為什么要用這個，這個過程更加深了自己在UI設(shè)計方面的理解。而你呢? 如果用一句話來表達的話，我會對你說，"做自己的用戶，并時刻為自己著想"。
總結(jié)
以上是生活随笔為你收集整理的让用户舒服起来 10个改善UI的技术的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
