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