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

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

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

在過去十年中高品質(zhì)的網(wǎng)頁可用性一直是業(yè)內(nèi)討論的核心，因?yàn)樗鼘τ脩魜碚f越來越重要。好的可用性也可以幫助建立品牌知名度，從而提升用戶對一個(gè)網(wǎng)站設(shè)計(jì)或者是一家公司的評價(jià)。今天人們依然高度關(guān)注可用性，是因?yàn)榇蟠笮⌒〉墓疽呀?jīng)證明了好的可用性策略是多么重要。

在過去幾年中，良好的可用性成為那些成功的初創(chuàng)公司的核心。多數(shù)情況下，簡單的想法最具創(chuàng)造性，可用性主要是指：使一個(gè)功能或者產(chǎn)品易于使用，但同時(shí)也要保持產(chǎn)品質(zhì)量維持在高水平上。

如今，很多文章會談到普遍意義。在對該話題年復(fù)一年的討論之后，似乎UI設(shè)計(jì)者們?nèi)匀缓茈y去理解它?？捎眯栽缫巡辉偈且粋€(gè)玩笑，下面藍(lán)藍(lán)設(shè)計(jì)這些建議應(yīng)當(dāng)被打印出來并粘到你桌子對面的墻上。

鏈接的顏色

我經(jīng)常發(fā)現(xiàn)自己在瀏覽網(wǎng)頁時(shí)，有些頁面上的鏈接沒有以某種形式高亮顯示。這是我見過的最愚蠢的錯(cuò)誤。我愿意訪問那些鏈接使用默認(rèn)藍(lán)色的頁面，而不是鏈接和 普通文字一個(gè)顏色的頁面。用戶需要知道如何在頁面之間導(dǎo)航、在哪兒能點(diǎn)擊鏈接。你不能指望他們把鼠標(biāo)一行行的掠過所有文字去找鏈接，直到發(fā)現(xiàn)鼠標(biāo)箭頭變成 “小手兒”。

我完全理解，有時(shí)候出于設(shè)計(jì)考慮，鏈接不能使用某種顏色來高亮顯示，這樣會使它們顯得太過突兀。這完全是可以理解的。但是可以添加文字樣式或者虛線框，你需要的只是以這種或那種方式來強(qiáng)調(diào)鏈接而已。

訪問過的鏈接也應(yīng)當(dāng)以不同的方式來顯示，以區(qū)別于默認(rèn)的鏈接顏色。因?yàn)檫@樣可以幫助用戶知道他們已經(jīng)訪問過什么，從而確定下一步要去哪兒。一些網(wǎng)站會使用戶困惑，但是讓他們知道自己已經(jīng)訪問過什么，絕對會使他們對你的網(wǎng)站印象更好。

糟糕的排版

當(dāng)我們談到 排版，并不是說我們需要一個(gè)大大的標(biāo)題，或者一段漂亮的文字。 當(dāng)我們考慮易用性時(shí)，排版的漂亮與否并不那么重要，重要的是排版要如何使我們的內(nèi)容易于閱讀。

緊密排列的大段文字會使閱讀它的人感到非常頭疼，但它應(yīng)該不會讓設(shè)計(jì)師頭疼。他只需要簡單的增加行高，進(jìn)行分段，增加文字大小，改變字體，就能使它更容易閱讀。

在網(wǎng)頁設(shè)計(jì)中，如何搭配字體的和用什么樣的顏色來喚醒訪客，并不是十分重要。當(dāng)然，你會這些那就更好 。在過去的幾年中，我們總是錯(cuò)誤的將美感重要性放到功能性之上。其實(shí)網(wǎng)站最重要的特性它易用性，它并不像圖形設(shè)計(jì)領(lǐng)域那樣有很很大的局限性。有的時(shí)候我們 不在乎它能有多么的好看，僅需要的是它能正常工作而已。

讓我來作進(jìn)一步的解釋. 互聯(lián)網(wǎng)上兩股的設(shè)計(jì)思潮, 極簡主義和扁平化設(shè)計(jì), 都極其的簡約并聚焦于內(nèi)容的呈現(xiàn)而非背景圖該多漂亮才好. 在極簡主義與扁平化設(shè)計(jì)變得越來越流行的后面有個(gè)原因就是他們非常簡單,而且工作良好 －有時(shí)候真的是很難去相信如此簡單的一個(gè)網(wǎng)站卻能獲得巨大的成功, 你進(jìn)入網(wǎng)站, 看完內(nèi)容,然后走人, 沒有東西使你分心, 沒有Flash, 沒有使得網(wǎng)站加載變慢的Javascript, 沒有好看的花兒或圖樣, 僅僅是內(nèi)容而已.

現(xiàn)在, 你應(yīng)該明白了讓內(nèi)容變得易于訪問是多么的重要的道理, 不要在第一時(shí)間花費(fèi)太多的精力去思考該如何讓網(wǎng)站變得多漂亮 －無論字體有多優(yōu)美,別人如果不能閱讀的話也是枉然.

不參照慣例

參照設(shè)計(jì)慣例和易用性建議是非常重要的，因?yàn)闊o論你是誰，只要你按照那么做了，那么用戶會在你的網(wǎng)站上花費(fèi)的時(shí)間會和在其他網(wǎng)站上花費(fèi)的一樣多，這意味著你和其他人站在了同一起跑線上。

舉一個(gè)例子讓大家更清楚的理解我到底想要表的什么。這有這么一個(gè)網(wǎng)站，在它導(dǎo)航欄上放置了一鏈接來退出頁面。這個(gè)按鈕的作用，這與通常所理解的導(dǎo)航欄應(yīng)該有的作用大不相同，這樣的設(shè)計(jì)違反了設(shè)計(jì)慣例。

好在最近幾年，情況改善了很多，但還是能發(fā)現(xiàn)在一些不應(yīng)該發(fā)生的低級錯(cuò)誤，比如：循環(huán)展示模塊上面鏈接失效，或者點(diǎn)擊鏈接的時(shí)候彈出了框。因此，要緊跟設(shè)計(jì)慣例。

避免回答問題

用戶瀏覽網(wǎng)頁都是有目標(biāo)的。也許是想娛樂一下，也許是查找信息，也許是跟家人或朋友保持聯(lián)系，也許是其它目的。不管他們做什么，總會有一個(gè)目標(biāo)。

現(xiàn)在你需要記住的最重要的是，大多數(shù)情況下，用戶上網(wǎng)是在尋求某些信息。他們?nèi)?Google是要搜索某些東西；他們?nèi)ゾS基百科是要學(xué)習(xí)某些東西；他們上企業(yè)站點(diǎn)是為了了解產(chǎn)品信息。他們總會有一個(gè)目標(biāo)。

當(dāng)我明確地想去網(wǎng)頁上找一個(gè)問題的答案的時(shí)候, 它們卻就是找不到, 這種問題在我身上已經(jīng)發(fā)生n次了. 我能理解設(shè)計(jì)代理(機(jī)構(gòu))們?yōu)楹尾皇鞘冀K都突出表述價(jià)格因素, 因?yàn)樵谝粋€(gè)項(xiàng)目里面變量太多, 但我就是不能理解一個(gè)發(fā)廊為何不告訴我理發(fā)到底需要多少錢, 我也不能理解洗車公司的網(wǎng)站上為何不突出表述我洗干凈車需要多少錢, 那你為啥還要在這個(gè)地球上建一個(gè)網(wǎng)站呢? 我只是覺得這對你和你的訪客都是無益的, 你倆誰也不能從中獲得任何有用的信息.

在訪客訪問你的網(wǎng)站的時(shí)候了解他們的意圖是個(gè)好主意, 如果有人想去下載博客主題, 那就引導(dǎo)他們到下載區(qū)域, 如果他們是為了玩游戲而來, 那就盡量多放些游戲在上面, 如果他們是來了解產(chǎn)品價(jià)格或者你所能提供的服務(wù)的, 那就突出表述它們.

你需要考慮你的網(wǎng)站訪客的需求的原因是你的網(wǎng)站不是給你自己建的, 如果你是給你自己建的, 你就別聯(lián)網(wǎng), 直接在你自己的電腦上看就可以了, 一個(gè)網(wǎng)站是為訪客而建的, 訪客是有需求的, 實(shí)現(xiàn)它們(的需求)吧!
小塊可點(diǎn)擊區(qū)域

因?yàn)槲屹I了臺Mac所以從不用鼠標(biāo)。事實(shí)上我買了一只魔術(shù)鼠標(biāo)，就在它們被發(fā)布并銷售僅僅三天以后。因?yàn)閷ξ襾碚f再沒有什么需要用到鼠標(biāo)的地方了。我用觸 摸板移動電腦指針動作非常熟練。但我記得五年前，當(dāng)我仍然使用PC的時(shí)候，我也曾有各種各樣的垃圾鼠標(biāo)。它們并不總是很，而且在懸停于小塊區(qū)域的時(shí)候 經(jīng)常定位很困難。

現(xiàn)在我再也沒有這個(gè)問題了。但是web不是僅僅給我用的。大約有數(shù)以億計(jì)的用戶，所以你應(yīng)該明白不是他們所有人都能這么熟練的使用這些奇妙的工具。

小塊可點(diǎn)擊區(qū)域有時(shí)候令人不那么舒服。你或許想讓字體顯得小一點(diǎn)，因?yàn)槟阆嘈胚@樣看起來很漂亮，但你要考慮到你的決定對可用性的影響有多大（我們不妨再來看看可讀性）。

重要的是不但要保證鏈接是可見的，還要讓它們是可點(diǎn)擊的。這個(gè)區(qū)域越小，人們點(diǎn)擊它們就越難。這里面有一個(gè)網(wǎng)站趨向移動化背后原因——就是說布局需要適應(yīng)更小的屏幕。需要適應(yīng)的東西之一就是按鈕，根據(jù)建議它們應(yīng)該在便攜式設(shè)備上變得更大，好讓它們?nèi)菀妆稽c(diǎn)擊。

同樣的策略也適用于桌面環(huán)境。新的扁平化用戶界面的風(fēng)潮是這個(gè)理念的布道者。你不會有點(diǎn)擊又大又清晰的鏈接的煩惱。保證讓你的用戶更輕松的瀏覽。再說一次，關(guān)注于功能性，讓美觀成為一個(gè)神奇蛋糕上面的櫻桃。

缺少聯(lián)系信息

有幾件事比糟糕的客戶服務(wù)更使我惱怒。其中之一就是根本無法聯(lián)系上客服或者負(fù)責(zé)該事務(wù)的公司。

正如我們之前討論的，人們總是帶著目的來訪問網(wǎng)頁。如果他們的目的是跟你取得聯(lián)系，那么從他們的角度來說，如果找不到聯(lián)系方式那么這個(gè)頁面就毫無用處。

沒有任何借口可以不提供聯(lián)系信息。如果你不想把你自己的電話號碼公之于眾，可以留下你的e-mail。對了，你也可以買個(gè)便宜的手機(jī)配個(gè)劃算的套餐，然后 留下這個(gè)號碼，或者申請一個(gè)新的e-mail。你想要避開垃圾郵件嗎? 可以使用一種機(jī)器無法自動識別的聯(lián)系方式。分享Twitter或者Facebook地址，也沒什么大不了。這都沒什么，只要能給你的客戶一個(gè)以某種方式找 到你的機(jī)會。

搜索功能

許多用戶都是任務(wù)導(dǎo)向型的, 也就是說他們來到網(wǎng)站上僅為獲取指定的信息而并不對其他東西感興趣. 如此看來, 你會發(fā)現(xiàn)一個(gè)好的搜索功能會變得多么的重要.

但這并不意味著你需要在每個(gè)頁面都提供一個(gè)搜索欄, 如果你運(yùn)營著一家設(shè)計(jì)公司, 只有一個(gè)單頁式網(wǎng)站用于提供項(xiàng)目和聯(lián)系方式的信息, 那就沒必要提供搜索功能.

然而, 如果說你運(yùn)行著一個(gè)博客或者其他任何內(nèi)容主打的網(wǎng)站, 搜索將會是許多用戶首先會去使用的功能, 研究表明第一時(shí)間會去查找搜索欄的用戶的比例占到了所有用戶的一半以上, 真的是極大的超乎了我們的想象.

假設(shè)你在一個(gè)類似于WordPress的平臺上運(yùn)行著一個(gè)網(wǎng)站, 你將可以利用其內(nèi)部集成的搜索功能, 另外你也可以始終使用Google提供的搜索, 因?yàn)橹悄芩阉匾婵赡芤呀?jīng)索引了你的所有(或者大部分)網(wǎng)頁, 你不再需要去自行編寫搜索功能, 所以你沒有理由不在你的網(wǎng)站上使用它.

強(qiáng)制性的注冊要求

允許用戶在必須注冊或者付費(fèi)之前，能對軟件或者功能有個(gè)預(yù)覽，比要求他們立即注冊要好得多?；ヂ?lián)網(wǎng)上看到的一些優(yōu)秀的概念或者想法，總是要求我先注冊，令人不爽。

不，在能夠使用你的應(yīng)用之前，我不會想把我的電話、住址和鞋碼留給你。我需要立刻就能試用一下來決定它是否適合我。

這種說法，也是手機(jī)UX/UI設(shè)計(jì)大師Luke Wroblewski (相關(guān)參考在文章最后)所贊同的。他相信，用戶在做出決定之前，應(yīng)該先窺見到產(chǎn)品的內(nèi)在。這很簡單，也是全部意義之所在。

不管你是做什么的, 銷售還是生產(chǎn), 不要要求網(wǎng)上的用戶在他們還沒確定需要該產(chǎn)品的情況下就進(jìn)行支付(負(fù)擔(dān)), 不然他們會感覺受了欺騙, 當(dāng)然你也就永遠(yuǎn)的失去了他們. 一個(gè)好的例子就是水果忍者, iOS平臺上很潮的游戲, 它總是以一個(gè)免費(fèi)示例版的形式出現(xiàn), 然后過了一段周期之后, 也就是你已經(jīng)迷上這個(gè)示例版的時(shí)候, 你會感覺你有點(diǎn)想要更大的挑戰(zhàn), 然后你就購買了游戲的完整版本. 這就是我所做的, 而且我覺得這的確說的過去, 我會一開始就在不能試玩的前提下購買這個(gè)游戲么? 扯淡.

這不僅僅是針對設(shè)計(jì)人員的一堂課, 也適用于許多的公司和制造商們, 如果你的產(chǎn)品夠好, 不要立即呼吁用戶去訂購, 相反, 你應(yīng)該盡快的提供給他們免費(fèi)試用你的產(chǎn)品的機(jī)會, 你應(yīng)該確信的是如果產(chǎn)品真有你想的那么好的話, 他們是會買的.

注冊表單

Luke Wroblewski在他的關(guān)鍵提示中常常提及的另一個(gè)問題是注冊表單。我都曾經(jīng)使用過注冊。你非常喜希望馬上注冊一個(gè)帳號（因?yàn)槟撤N程度上他可以滿足你的某種需求），但是由于注冊表單太長。于是你可能放棄注冊，這樣一個(gè)潛在的顧客就會失去。

讓注冊表單盡可能的簡單。只要求最重要的信息，郵箱、密碼和用戶名。完成注冊后，你可以讓他們選擇填寫更多的細(xì)節(jié)。這同樣也符合前面提及同樣的原則。為了 提交，用戶需要先嘗試你的產(chǎn)品。如果客戶不能確定是否喜歡你的產(chǎn)品，那么憑什么他們會把他們的家庭地址、真實(shí)姓名和職稱等信息給你呢？頂多你得到一些冒填 的虛假信息，在他們確定想使用你的產(chǎn)品前，你不會得到真實(shí)信息的。

 

現(xiàn)如今，很多網(wǎng)站已經(jīng)可以實(shí)現(xiàn)通過Twitter或者Facebook 即可登錄。這很棒，使得登錄非常簡單快捷。你為此不需要記憶太多的帳號和密碼。只要你能登錄Facebook，你也就可以登錄那些使用API注冊的網(wǎng)站。 雖然不是所有人都使用這個(gè)途徑，但是請給用戶提供這種可能的登錄途徑。

不一致的設(shè)計(jì)

如果網(wǎng)站有一個(gè)白色的背景和一個(gè)頂部導(dǎo)航區(qū)，就不要把相關(guān)頁面弄成黑色并把導(dǎo)航挪到頁面底部。它會令我懷疑自己是否還在同一個(gè)網(wǎng)站上，我可不想在這個(gè)問題上浪費(fèi)時(shí)間。

整個(gè)網(wǎng)站要保持一樣的布局。給你的頁面網(wǎng)格體系規(guī)定一個(gè)列數(shù)，不管是幾列只要合適就行，并在整個(gè)網(wǎng)站中貫徹這個(gè)規(guī)定。同樣的規(guī)則適用于背景色，鏈接的顏色，排版和設(shè)計(jì)原則?？傊刮以邳c(diǎn)擊“關(guān)于”頁面之前，能清楚的知道我還在同一個(gè)網(wǎng)站上。

圖片的誤用

設(shè)計(jì)的一個(gè)基本原則就是，不要使用那些你其實(shí)并需要的元素。對圖片來說也是這樣，不要只是為了填滿頁面而使用它們。研究表明，用戶趨向于忽略那些只是填充頁面的圖片。所以如果你沒有什么要展示的話，我最不想看到的就是隨機(jī)展示的圖片。

如果你決定要使用圖片，至少要確保把它們放到正確的位置。我討厭某站網(wǎng)站，把正文寫到一個(gè)兩列寬的表格里，還用整行寬的圖片把正文分隔開。這總是讓我考 慮：我是應(yīng)該接著看右側(cè)第二列然后看圖片下的第一列呢，還是應(yīng)該先看圖片下的第一列？這真是讓人厭惡，而更讓人厭惡的是不同網(wǎng)站在處理這一問題時(shí)使用了不 同的方式。 如果你要使用圖片，要確保我在讀文字時(shí)不會被圖片影響太多，這是最重要的。我需要的只是閱讀。

哦，順便說一下,如果你想知道為什么我不愿意考慮這個(gè)問題(或者為什么用戶不愿意考慮), 我強(qiáng)烈推薦你看一下Steve Krug’s 的書。你可以在本文最后的參考中找到該書的鏈接。

結(jié)論

如果你想成為一個(gè)好的網(wǎng)頁設(shè)計(jì)師，你只需按照上面的步驟行事即可。你無需成為一個(gè)用戶體驗(yàn)專家，上面我寫的真的只不過是一些常識，但是在大多數(shù)時(shí)候正是它們使得一個(gè)的網(wǎng)站與一個(gè)像樣的網(wǎng)站區(qū)別開來。

這也很大程度上歸因與你對用戶的興趣。如果你制作網(wǎng)站只是為了維持生計(jì)，那么你無需這些規(guī)則。你也可能只是一個(gè)低于自我期望的設(shè)計(jì)師，會在若干年內(nèi)失敗。 如果你為你的訪問者考慮更多，想給他們提供一個(gè)好的網(wǎng)站體驗(yàn)，那么你需要知道，什么是應(yīng)該開始著手處理的基本要素。正如前文所述，網(wǎng)站界面設(shè)計(jì)不需要漂亮。應(yīng)該記 得的是，沒有什么比一個(gè)簡單的、運(yùn)行優(yōu)異的網(wǎng)站更漂亮的了。