轉(zhuǎn)載藍藍設(shè)計(   www.cqzjtgb.com  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點這里　

我想每個人都會贊成，網(wǎng)站設(shè)計的可用性是它能否受歡迎的一個重要方面，無論你進行的是公司網(wǎng)站、在線商店還是其他，讓你的界面變得容易操控，使用時令人舒服是關(guān)鍵，近幾年已經(jīng)有很多針對網(wǎng)站界面設(shè)計優(yōu)化的研究，而且這些研究的成果對于提高網(wǎng)站可用性是非常有價值的?，F(xiàn)在這里有10個超實用的經(jīng)驗分享，相信藍藍設(shè)計，這些建議會極大地提高你那個網(wǎng)站的用戶體驗，讓用戶愛上你的網(wǎng)站界面設(shè)計！ 

一、善用人物配圖，使用戶專注于你想呈現(xiàn)的

當進入你的網(wǎng)站，我們會本能地關(guān)注網(wǎng)站上人物圖片中的臉和眼睛，這倒是為我們提供了一個想法，是不是可以用人物配圖吸引小伙伴的注意力呢？當然，但這僅是第一步，我們還可以這樣做，你瞧，是不是大不相同?。ㄒ娤聢D）

這是第一步：

「根據(jù)眼球追蹤的研究，我們先會關(guān)注這個直望著我們的小萌孩」

「現(xiàn)在，小萌孩是仰望著右邊文字的，與此同時，你是不是也把注意力轉(zhuǎn)移到右邊的內(nèi)容呢？」

這里是原始的研究報告 → usableworld.com，實踐證明，如果其他人往某個方向望，那么人們也會跟著望同一個方向（參照腦筋急轉(zhuǎn)彎：大街上有，有一個人仰著頭站著。旁邊的人以為天空中有什么好看的東西，都跟著往天上看，可天空中什么都沒有。你猜那人怎么說？答案附最后..）基于這個特點，我們可以利用人物配圖來呈現(xiàn)你想要讓用戶關(guān)注的內(nèi)容。

二、表格的最理想位置

一個來自UX Matters 的研究發(fā)現(xiàn)，最理想的表格置放應(yīng)該是由上至下，因為人們通常會適應(yīng)垂直的表格，這樣通常易于閱讀與填寫。

三、人們對網(wǎng)站的信任度取決于設(shè)計質(zhì)量

第一印象很重要！栗子：

這是一個展示手機應(yīng)用的網(wǎng)站，可能我們不知道這個名為”fever”的APP究竟怎么樣，可是看到一個這么干凈圓潤的用戶界面，對它的好感理應(yīng)大大提升了。

一個有趣的研究發(fā)現(xiàn)，人們判斷一本書的根據(jù)往往是它的封面…同樣的，一個網(wǎng)站的布局、一致性、配色、排版等都在影響你的用戶，他們會以此判斷你將提供的東西。因此，你要確切保證網(wǎng)站的風格不僅要干凈漂亮，更要適合你的受眾用戶。

除了網(wǎng)站設(shè)計，其他影響用戶對你的網(wǎng)站信任度的還有：網(wǎng)站內(nèi)容的質(zhì)量、出錯的次數(shù)、更新的頻率、操作的便捷性和網(wǎng)站站住的人品。

四、大多數(shù)用戶不會滾動瀏覽

一份來自Jakob Nielsen的研究顯示（研究在此 → nngroup）僅僅有23%的用戶第一次進入網(wǎng)站時會滾動瀏覽，這意味著有77%的用戶只會看那個區(qū)域（無須滾動的可見頁面），更重要的是，只有16%的用戶會在第二次訪問時繼續(xù)滾動瀏覽。該數(shù)據(jù)突顯出，將關(guān)鍵的內(nèi)容放在首頁的突出位置是多么的重要！

不過，這并不意味著你要填滿頁面的上部區(qū)域，全部塞在那兒只會讓內(nèi)容難懂，當用戶看到太多的信息時，他們不知道該從哪里開始看。

讓我們看看優(yōu)秀范例：

basecamp 在這折疊線以上（768px高），網(wǎng)站顯示了一個巨大的截圖，標語、價值主張、呼吁行動、客戶列表、視頻以及顯示特點的小圖。

這些內(nèi)容對于網(wǎng)站主頁是至關(guān)重要的，所以我們需要提供的核心要點有：

• 網(wǎng)站的名稱
• 網(wǎng)站的價值主張（即用戶能得到什么，有什么好處，如何使用它）
• 與用戶相關(guān)的導航設(shè)計

然而，自那時以來，用戶習慣發(fā)生了很大的改變，最近的研究證明用戶很喜歡視差滾動的效果，他們寧愿滾動到頁面底部而不是翻頁，對很多用戶來說，最重要的信息也不須置放在首頁，所以有個好主意，我們可以利用留白空間的方式將頁面分成幾段。

五、可以獨特，但不要難懂

有一個獨特設(shè)計的網(wǎng)站當然是好樣的，但當你需要提高網(wǎng)站的可用性時，建議你最好遵守大多數(shù)網(wǎng)站采取的方式。因為當人們?yōu)g覽一個新網(wǎng)站時，他們會啟動自身的「經(jīng)驗模式」去理解這個網(wǎng)站的使用，例如：藍色是鏈接的顏色，網(wǎng)站LOGO的位置、導航標簽的下拉行為等。

谷歌之所以所有的鏈接都是藍色是由緣由的，這個顏色適合大多數(shù)用戶，也便于辨認。

鏈接該選什么顏色？

• 顏色夠深/淺，能夠與背景色有強烈地對比，易于區(qū)分
• 不能與文字顏色相同，所以你可以看到，沒有鏈接是黑色的
• 研究證明，選用藍色的鏈接是最好的，因為瀏覽器默認的鏈接是藍色的。選擇其他顏色也沒問題，但可能會影響用戶找到它

六、理想的搜索框?qū)挾仁?7個英語字符

什么是理想的搜索框？有的，Jakob Nielsen針對可用性進行了一個搜索框?qū)挾鹊难芯?，發(fā)現(xiàn)大多數(shù)搜索框都太短了，搜索框太短帶來的問題是盡管你可以輸入足夠長的字符，但只有一部分文本字符可見，這導致你很難檢查或者編輯。

這項研究發(fā)現(xiàn)搜索框的平均長度是18個字符，27個字符的搜索框可能會太長而很難適應(yīng)，不過，它能滿足90%的搜索。記住，你可以用像素和點設(shè)置寬度，而不僅僅是em。小技巧，一em的寬與高對應(yīng)一個英文字符”m”，所以你可以以此來檢測搜索框是否有27個英文字符的寬度。

谷歌的搜索框?qū)挾染b綽有余

相對而言，蘋果就力不從心了。

通常來說，搜索框稍長比稍短好，因為用戶可以隨時查看、核實、修改。這條經(jīng)驗非常簡單，但是很不幸的是經(jīng)常被人們忽略。其實在輸入?yún)^(qū)域的一點改進也會帶來更好地用戶體驗

七、留白設(shè)計帶來更好的閱讀

大多數(shù)設(shè)計師都知道白色空間在段落、圖片、按鈕以及其他項目中的價值，白色空間可以讓各個項目自由地呼吸。當然，我們也可以通過空間的排列（組合、減少）來制造白色空間。對于在頁面展示內(nèi)容間的聯(lián)系、建立層級關(guān)系非常重要。

參照：我們?yōu)楹我谠O(shè)計中重視”留白”

注意：文本的邊緣，段落的間隔這些細節(jié)都給閱讀帶來了舒適的感受。

白色空間讓頁面內(nèi)容的可讀性相應(yīng)提高。一個04年的研究表明，如果在段落與左右邊緣間能夠卓越地地利用留白，至少提高20%的閱讀舒適感。讀者可以更加容易地專注于閱讀。

八、不必進行廣泛的用戶測試

Jakob Nielsen的研究顯示僅需要5個用戶就可以發(fā)現(xiàn)你的網(wǎng)站85%的問題，如果有15人就能找出接近全部的問題。

第一或第二個用戶會發(fā)現(xiàn)最大的問題，其他人會確認這些問題并且發(fā)現(xiàn)其他小問題，只有2個用戶能找到你網(wǎng)站50%的問題，這意味著其實你不需花很多錢去得到一個好的結(jié)果。當你開始測試時，你已經(jīng)有巨大的收獲了。任何小小的測試都比沒有好

九、有多少信息，就有多少青睞。

大多數(shù)介紹產(chǎn)品的頁面總是缺少足夠多的信息，有些僅僅能讓用戶掃一眼。這是個必須正視的問題，因為產(chǎn)品的信息將幫助人們忖度購買的決定。在可用性的研究中，貧乏的產(chǎn)品信息這個失敗的案例占據(jù)了8%甚至10%的網(wǎng)站。

Apple提供了詳細的產(chǎn)品介紹頁面，包括產(chǎn)品特點及規(guī)格等。請注意，不要讓一點難懂的技術(shù)細節(jié)停留在介紹頁面，給消費者看的懂的。

參照：推薦！令人為之動容的互聯(lián)網(wǎng)文案

提供關(guān)鍵的信息，而不要臃腫，讓你的文案易于吸收。通過段落間隔和副標題使介紹能夠一掃明了，給你的添加足夠的圖片，且不要使用行話，否則你的用戶看不懂。

十、大多數(shù)用戶會無視廣告

Jakob Nielsen的研究表明大多數(shù)用戶會直接無視廣告的存在，如果他們在全神貫注地閱讀文章，他們不會被廣告轉(zhuǎn)移注意力。

這條經(jīng)驗要告訴你的是，人們會無視廣告，并且與任何看起來與廣告類似的東西，即使它不是廣告。一些顏色風格強烈的導航會讓他們誤以為是廣告，所以請仔細注意這個經(jīng)驗。

 

在左側(cè)的方塊圖其實不是廣告，但是看起來與廣告很類似，所以可能會被一些用戶誤解。

所以，廣告看起來最好能像文章，那樣人們才會去點擊它，也能給你帶來更多的收入，但無疑這將會損失你的用戶信任度，當他們點擊廣告時他們以為會是文章，結(jié)果被你欺騙。因此當你決定這樣做之前，考慮下這個交易：短期的利益與長期的信任。

干貨福利：

在這些年，我們的雜志組為了確定最佳地設(shè)計方案，研究了很多案例。到目前為止，我們已經(jīng)發(fā)現(xiàn)了很多有趣的模式，是的，它們可以作為你的下個設(shè)計項目的指導方針，希望這些標準能予你方便。

• 行高（px）÷ 英文字符大（px）=1.48

1.5通常被認為是最經(jīng)典的排字方式，我們的研究決心為這個方式點個贊。幾乎沒有網(wǎng)站使用低于它的，那些高于這個標準的也會越來越少，特別是當你看完這篇文章后。

• 行長（px）÷行高（px）=27.8

行的平均長度是538.64px（排除邊緣），對于大多數(shù)還采用12px到13px大小字體的網(wǎng)站來說，這是最完美的安排。

• 最佳的字/行是55——75

根據(jù)經(jīng)典的排版書籍，最佳的字/行應(yīng)該是55到75，但現(xiàn)在流行的75——85，童鞋們自由斟酌（英文字符）

• 注冊頁面通常很簡單，是為了避免人們分心