在設(shè)計(jì)成品中，UI設(shè)計(jì)越來(lái)越顯得重要。而現(xiàn)實(shí)中有很多可以讓一個(gè)網(wǎng)頁(yè)設(shè)計(jì)既漂亮又功能化的技術(shù)，這里，原作者介紹了10種他經(jīng)常用在自己設(shè)計(jì)的產(chǎn)品中的技術(shù)。 如果你想擁有更好的UI，讓我們一起繼續(xù)。

1. 填充鏈接塊
鏈接（或錨點(diǎn)）都是默認(rèn)的內(nèi)聯(lián)元素，這就意味著，只有在它本身的跨度上才有可點(diǎn)擊性。如下圖所示（藍(lán)色部分為可點(diǎn)擊區(qū)域，一圖是TechCrunch的，二圖是Smash Magazine的）：

顯示，Smashing Magazine的鏈接可點(diǎn)擊性要比TechCrunch強(qiáng)。這可以增大點(diǎn)擊的正確率和點(diǎn)擊率。而如果你想這么做，只要用以下的代碼即可:

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

當(dāng)然，要提醒一下的是，請(qǐng)確保運(yùn)用Padding是恰當(dāng)?shù)?，IE有可能讓Padding沒(méi)能正常實(shí)現(xiàn)其真正的樣式。 有效避免Padding出現(xiàn)問(wèn)題的方法是盡量讓它們與沒(méi)有padding或Margin的容器接觸，而常用的方法是，給padding的元素加上一個(gè)border。

2. 按鈕文章的排版
別小看這個(gè)問(wèn)題，這可能是區(qū)分一個(gè)產(chǎn)品好與壞的一個(gè)細(xì)節(jié)。好的設(shè)計(jì)者會(huì)做到視覺(jué)平衡。讓我們來(lái)看看下面的例子：

第一眼看起來(lái)還好，但看越覺(jué)得不對(duì)。你會(huì)覺(jué)得按鈕上的文字好像偏上了。因?yàn)榇髮?xiě)字母我小寫(xiě)字母混大一起時(shí)，有一些是需要向上頂，或向下的（中文方塊字就不會(huì)了，很好?。┪蚁氡磉_(dá)的是：

那么，我們需要怎么做呢？如果我們不想全部都是大字字母的話，可以按照下面的方法。讓他們都在同一個(gè)水平的空間內(nèi)，而且是向下沉的，這樣做，可以現(xiàn)好地平衡視覺(jué)效果，讓人看起來(lái)文字正好在中間：

3. 使用對(duì)比來(lái)突出焦點(diǎn)
我想，我自己常用這個(gè)方法。因?yàn)檫@即安全又環(huán)保（囧），讓我們來(lái)看看下面這個(gè)吧：

看完上面的，讓我們來(lái)對(duì)比一下下面的文字，有什么區(qū)別呢? 很明顯，我們把焦點(diǎn)放在大標(biāo)題上。

不過(guò)，需要注意的是，你要突出的是標(biāo)題，而不是一些比較將要的東西，所以，把焦點(diǎn)用對(duì)，向下面這個(gè)，并不適合：

4. 使用顏色來(lái)突出焦點(diǎn)
顏色通?？梢砸鹩脩舻淖⒁?，而你可以用突出的顏色來(lái)展示你想要展示的結(jié)果，就像下面一樣：

不過(guò)，就像上面我們?cè)谡f(shuō)標(biāo)題的焦點(diǎn)一樣。你最好把顏色選對(duì)。做比較好的搭配，并確保要突出的內(nèi)容出現(xiàn)在上方，而不是有被壓著的感覺(jué)，就像下面這兩個(gè)實(shí)例：

Function 把HEADER區(qū)域中的 "We’re Hiring" 的鏈接突出來(lái)，像你現(xiàn)在所看到的，會(huì)沒(méi)有顧忌地把注意力投過(guò)去。從而使這個(gè)鏈接不會(huì)被遺忘，另外，讓我們來(lái)看看下一個(gè)：

 
Causecast 剛把重要的東西都放在粉紅色的背景下，比如Feedback，LOGO，DONATE等。

不過(guò)，切記，不要隨便讓一個(gè)頁(yè)面充滿顏色，這樣會(huì)失去焦點(diǎn)；不要運(yùn)用太另類的搭配，這可能引起反感。適當(dāng)利用，懂得我們的目的是要突出所需展示的內(nèi)容，而不是在顏色本身。

5. 用空行來(lái)表示關(guān)系
這個(gè)說(shuō)起來(lái)好像有點(diǎn)讓人摸不著究竟能體現(xiàn)出什么關(guān)系來(lái)。其實(shí)，你只要看看平時(shí)我們看書(shū)的時(shí)候，通常每一個(gè)章節(jié)或者某個(gè)段落都可能用空白來(lái)隔開(kāi)，表示他們屬于各種的內(nèi)容，就是這個(gè)意思，下面讓我們來(lái)看一個(gè)例。這個(gè)排得很漂亮吧：

對(duì)，確實(shí)很漂亮。不過(guò)，在標(biāo)題與段落之間，他們的間隔都一樣，容易讓人產(chǎn)生不知道這個(gè)標(biāo)題是屬于那一段的感覺(jué)。而我們能做得更好，比如像下面一樣顯示，讓人一目了然。

PS:趕著去吃飯，接下來(lái)的，明天再發(fā)布，ohhaha…
原文：http://www.happinesz.cn/archives/838/