網(wǎng)頁設(shè)計(jì)最重要的組成部分是界面設(shè)計(jì)。創(chuàng)造美觀而具有功能性的界面包含多種技巧。以下是我自己收集的，我認(rèn)為你會(huì)在工作中發(fā)現(xiàn)派上用場的10個(gè)技巧。它們和任何特定主題無關(guān)，而更偏向于我自己的項(xiàng)目里常使用的技術(shù)。沒什么其它問題的話，我們就開始吧。
1.填充鏈接區(qū)
鏈接（或是錨）默認(rèn)都是內(nèi)置元素，也就意味著它們可點(diǎn)的區(qū)域僅僅是文字的寬高。這個(gè)可點(diǎn)擊的區(qū)域，或是你可以點(diǎn)擊進(jìn)該鏈接目的地的空間，可以極大提高可用性。我們可以通過增加填充，另外在有些情況下，也可以把鏈接轉(zhuǎn)換成快狀的元素。有個(gè)內(nèi)置與填充鏈接的例子，它們可點(diǎn)的區(qū)域被高亮過了以示區(qū)別：
很明顯，可點(diǎn)擊的區(qū)域越大，點(diǎn)擊該鏈接就更容易，因?yàn)殄e(cuò)過它的機(jī)會(huì)就少了。把鏈接轉(zhuǎn)換成塊狀元素使文本區(qū)涵蓋整個(gè)容器的寬，除非寬被另外定義了。這樣，把鏈接放到側(cè)欄里是很理想的。我們可以通過下列的代碼來實(shí)現(xiàn)它：
view plaincopy to clipboardprint?
a {
display: block;
padding: 6px;
}
確保也要給鏈接增加一個(gè)完好的填充，因?yàn)榘岩粋�(gè)鏈接轉(zhuǎn)換成區(qū)域只影響其表現(xiàn)和寬度；增加填充可以確保該鏈接夠高，而且有喘息的空間。
2. 排版按鈕
對每一個(gè)細(xì)節(jié)的注重可以區(qū)分一個(gè)產(chǎn)品偉大還是平凡。例如，按鈕和標(biāo)簽這樣的界面元素每天會(huì)被你的用戶多次點(diǎn)擊，所以適當(dāng)?shù)慕o它們排版是有收獲的；我所謂的排版是指把這些標(biāo)簽排列一下。以下有些我偶爾注意到的，誤用標(biāo)簽的例子：
第一眼看到它們還行，但是注意那些文字被放的太高了，這是因?yàn)槭褂眯懽帜缸鳛榇怪本又袑R文字的導(dǎo)向，像這樣：
無論怎樣，如果我們使用大寫字母和上格的小寫字母（t、d、f、h、k、l）平衡就倒向了上面，使得標(biāo)簽看起來在按鈕上太高了。在那種情況下，我們應(yīng)該把大寫字母的高度作為一個(gè)標(biāo)尺-如果大多數(shù)字母是小寫，就把它略標(biāo)高一些。我的意思是像這樣：
這樣使整個(gè)按鈕有一個(gè)更平衡的外觀。這樣的小打小鬧距離使你的界面更有光彩且易用，還有一段很長的路。
3.使用對比來管理焦點(diǎn)
類似的，你也可以使用元素間的對比來管理你的用戶的注意力。有一個(gè)例子關(guān)于發(fā)布頭條和其下面的一些發(fā)布者、發(fā)布日期的元信息：
所有的文字都被設(shè)成黑色。讓我們通過把文字設(shè)為很淺的灰色陰影來減小元信息（日期和作者名字）和背景的對比。
此處最強(qiáng)烈的對比元素是標(biāo)題，所以它在字面上跳到我們眼前。其他的元素消逝到背景里。在此，我已經(jīng)選擇作者作為第二重要的元素，而日期是最不重要的。這些字在大小和風(fēng)格上也有所區(qū)分，但是對比的強(qiáng)度可以非常有力。讓我們把日期，作者和標(biāo)題的重要性順序調(diào)換一下：
你可以看到這對轉(zhuǎn)換焦點(diǎn)是多么有效：現(xiàn) 在是日期跳到你的眼前，而標(biāo)題消逝了。這項(xiàng)技術(shù)對于信息量很大的網(wǎng)站來講非常方便，例如博客，論壇和社會(huì)關(guān)系網(wǎng)，在這些地方你需要使大量信息易于被看到的 同時(shí)，也顯示大量附加內(nèi)容，例如日期。把多余的隱掉使訪問者易于把他們的注意力集中到最重要的文字上。
4.使用顏色來管理注意力
顏色也可以被有效的被用來把訪問者的注意力集中到重要的，或是可行的元素上。例如，在美國總統(tǒng)大選的時(shí)候，很多候選人的網(wǎng)站把捐贈(zèng)的按鈕做成紅色。紅色是一種非常鮮艷而且有力的顏色，所以它吸引注意力，而且當(dāng)網(wǎng)站的主色是藍(lán)色或是其他冷色調(diào)的時(shí)候它顯得更加突出。
形如紅，黃和桔色這些暖色調(diào)本身很鮮艷，所以很容易吸引眼球。當(dāng)和藍(lán)，綠這些冷色對比的時(shí)候，它們也會(huì)“膨脹”。這意味著一個(gè)藍(lán)背景上的橙色按鈕看上去是向外流，并占據(jù)了前面的座位。相反，一個(gè)橙色背景上的藍(lán)按鈕像是向內(nèi)的對比，更愿意作為背景。下面的圖示說明了這一點(diǎn)：
以下是一些有效使用顏色來引導(dǎo)用戶注意力到重要元素的網(wǎng)站范例：
Function 有個(gè)“我們正在招聘”的鏈接在它們的工作頁面。為了確保這個(gè)鏈接不被忽略，設(shè)計(jì)師給它設(shè)置了一個(gè)從深色背景的頁眉突出出來的紅色的背景，有效的抓住了注意力。
Causecast 使用顏色非常有效。4個(gè)粉紅色元素跳到你眼前：logo，反饋鏈接，捐贈(zèng)鏈接和網(wǎng)站描述信息。
想要網(wǎng)站上的“關(guān)于”抓住訪問者的注意力？把背景設(shè)成黃色。想要使“加入”按鈕突出？把它設(shè)成橙色。但是要確保不要強(qiáng)調(diào)過多的元素，如果你這樣做了，它們會(huì)在彼此的映襯下迷失掉。
5. 空白表示了關(guān)系
界面上最富有爭議性的元素之一是各個(gè)元素之間的空白。如果你對于這種空白還不熟悉，它的意思其實(shí)是：一個(gè)界面元素與另一個(gè)之間的空間，它可以是一個(gè)按鈕，一個(gè)導(dǎo)航條，文章正文，一個(gè)標(biāo)題或者其它。我們可以通過制造這種空白來表示特定元素，或是元素組合之間的關(guān)系。
因此，例如我們把標(biāo)題放得接近文章正文，表示該標(biāo)題與文字相關(guān)。然后文字被放到距離其它元素很遠(yuǎn)的地方，使之更具有可讀性。下面是一個(gè)空白處可以被改進(jìn)的例子：
文字看起來很好而且當(dāng)然是可讀的，但是由于標(biāo)題上下兩部分的空間是一樣的，它們并沒有清楚的把每一部分文字分割開來。我們可以通過增加每一段之間的空白來和略微縮小段落行距來改進(jìn)這一點(diǎn)。
這樣的結(jié)果是更加明確的界定了區(qū)塊；我們可以容易的分辨哪個(gè)標(biāo)題對映哪段文字，而且可以清晰的看到分隔的段落。好的設(shè)計(jì)師常常斜視一下或者從遠(yuǎn)處掃一眼他們的作品，這樣讓他們從整體上來看被空白間隔開來的區(qū)塊元素。如果你不能清楚的看到這些組合，你可能需要調(diào)整一下你的空白。
粵公網(wǎng)安備 44010402000282號