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