1.改善鏈接體驗(yàn)
網(wǎng)頁(yè)中的文字鏈接通常標(biāo)有下劃線，表示文字是可以點(diǎn)擊的，但可點(diǎn)擊區(qū)域不會(huì)超過(guò)字符的寬、高范圍。設(shè)計(jì)類(lèi)似這種帶有超鏈接的可點(diǎn)擊區(qū)域的時(shí)候，都可以通過(guò)一些小技巧來(lái)提高可用性，比如：增加間隔，有些情況下甚至可以把鏈接轉(zhuǎn)換為塊元素。如下圖，用高亮來(lái)區(qū)別可點(diǎn)擊區(qū)域。
顯然，可點(diǎn)擊的區(qū)域越大，用戶(hù)點(diǎn)擊就容易。在沒(méi)有指定寬度的時(shí)候，將鏈接轉(zhuǎn)換為塊元素，可以使文字鏈接的可點(diǎn)擊區(qū)域擴(kuò)大到為整個(gè)容器的寬度，這樣的設(shè)計(jì)尤其適用于側(cè)邊欄的鏈接。這個(gè)技巧可以通過(guò)如下CSS實(shí)現(xiàn)。
a {
display: block;
padding: 6px;
}
注意：由于轉(zhuǎn)換為塊元素只對(duì)鏈接的寬度起作用，所以需要設(shè)置間隔(padding)來(lái)保證塊在縱向的間距。
2.按鈕也需要排版！
設(shè)計(jì)的每一個(gè)細(xì)節(jié)失誤都有可能把完美的產(chǎn)品變成平庸，比如按鈕、Tab這樣簡(jiǎn)單的界面元素，由于用戶(hù)每天都會(huì)點(diǎn)擊無(wú)數(shù)次，也需要適當(dāng)?shù)倪M(jìn)行排版。請(qǐng)看下面一些例子：
乍看起來(lái)上圖沒(méi)有什么問(wèn)題，仔細(xì)觀察可以發(fā)現(xiàn)，按鈕和select的文字都偏上，原因就是將小寫(xiě)字母作為了排版的基準(zhǔn)，小寫(xiě)字母居中時(shí)，整個(gè)文字的位置就會(huì)顯得偏上。如下圖：
就像上圖中，如果按鈕上的文字包含大寫(xiě)字母或一些較高的小寫(xiě)字母，如”t,d,f,h,k,l”的時(shí)候，文字就會(huì)顯得偏上。所以，通常應(yīng)該把大寫(xiě)字母作為定位的基準(zhǔn)，或者在小寫(xiě)字母較多時(shí)，稍微將文字的位置向上移動(dòng)。
上面的文字排版使按鈕看起來(lái)更舒服，注重像這樣的小細(xì)節(jié)對(duì)界面設(shè)計(jì)大有幫助。
大頭：雖然中文沒(méi)有大小寫(xiě)字母的問(wèn)題，但也有很多頁(yè)面設(shè)計(jì)時(shí)不注重按鈕的文字排版，導(dǎo)致錯(cuò)位。
3.利用對(duì)比來(lái)控制焦點(diǎn)
與上面兩個(gè)技巧類(lèi)似，我們也可以通過(guò)頁(yè)面元素間的對(duì)比來(lái)控制用戶(hù)關(guān)注的焦點(diǎn)。下面的例子關(guān)于文章標(biāo)題與日期、作者等信息之間利用對(duì)比突出重點(diǎn)的例子。
上圖中所有文本都是黑色，讓我們?cè)囍鴣?lái)調(diào)整一下日期和作者文字的顏色看看
文章標(biāo)題的對(duì)比度最高(顏色最重)，所以感覺(jué)凸顯出來(lái)。同時(shí)，通過(guò)對(duì)比度的不同，將作者與日期也體現(xiàn)了區(qū)別。相比于字體、字號(hào)的設(shè)置，對(duì)比度(顏色深淺)更能凸顯出不同。下面讓我們改變一下對(duì)比度高低的順序：
可以看到不同的對(duì)比度設(shè)置會(huì)有明顯的效果，上圖這種效果可能會(huì)用在一些顯示大量信息的場(chǎng)合，如blog、論壇或SNS網(wǎng)站。凸顯某些信息可以讓用戶(hù)快速的瀏覽、找到自己所需的內(nèi)容。大頭：我能想到的比如搜索結(jié)果頁(yè)，將搜索條件突出顯示可能會(huì)好些。
4.利用顏色來(lái)引起注意
當(dāng)然，顏色的不同也可以有效地吸引用戶(hù)對(duì)重要及可操作元素的注意力。舉例來(lái)說(shuō)，在前段時(shí)間美國(guó)總統(tǒng)候選人提名期間，很多候選人的頁(yè)面上都有紅色的“捐助”按鈕，在頁(yè)面整體是藍(lán)色或其他冷色調(diào)的時(shí)候，鮮明的紅色能夠很有效的吸引訪客的注意力。
像紅、黃、橙等暖色調(diào)，天生就有較強(qiáng)的吸引眼球的能力，而且這種能力在對(duì)比藍(lán)、綠等冷色調(diào)時(shí)就更為突出。有趣的是，這種差別會(huì)讓人產(chǎn)生空間上的想象，比如藍(lán)色背景上的橙色按鈕會(huì)給人凸起的感覺(jué)，相反情況下會(huì)給人凹陷的感覺(jué)，詳見(jiàn)下圖：
大頭：由于國(guó)內(nèi)應(yīng)用深色背景的網(wǎng)站較少，下面挑選一些大家熟悉的例子來(lái)展示一下顏色的應(yīng)用。同時(shí)通過(guò)顏色區(qū)別來(lái)吸引用戶(hù)注意也不必拘泥于冷、暖色調(diào)的對(duì)比。
上圖中：豆瓣首頁(yè)的＂馬上注冊(cè)＂按鈕，以及登錄區(qū)域都用粉色重點(diǎn)表示，由于豆瓣采用白色背景，所以淡淡的粉色也能起到突出的作用。
對(duì)于上線不久的蝦米，凸顯導(dǎo)航、\”了解更多”以及”軟件下載”都有明確目的。
需要注意的是，盡量避免利用顏色凸顯過(guò)多的元素，這樣反而會(huì)讓用戶(hù)無(wú)所適從。
5.空白-不僅僅用來(lái)分隔
內(nèi)容元素之間的空白也是設(shè)計(jì)中需要注意的問(wèn)題之一，比如像按鈕、導(dǎo)航條、文章內(nèi)容、標(biāo)題等等元素之間的空白都有必要關(guān)注。有效地利用空白，我們可以明確的表現(xiàn)出頁(yè)面元素之間的關(guān)系。
舉例來(lái)說(shuō)，標(biāo)題與內(nèi)容相近可以表示之間的所屬關(guān)系，但文字內(nèi)容與其他元素有一定距離會(huì)方便閱讀。請(qǐng)看下面的例子：
上面的圖例看起來(lái)沒(méi)什么問(wèn)題，但仔細(xì)看可以發(fā)現(xiàn)，每個(gè)標(biāo)題上下的空白是相等的，這樣就沒(méi)有明顯的區(qū)分每部分內(nèi)容。我們可以通過(guò)調(diào)整段落間的距離或段落中的行距來(lái)解決這個(gè)問(wèn)題：
上圖是否變得更清楚些？好的設(shè)計(jì)師通常會(huì)瞇著眼或從遠(yuǎn)處來(lái)看看自己的作品，這樣會(huì)有效的發(fā)現(xiàn)內(nèi)容顯示是否清楚的問(wèn)題。
