視覺(jué)可用性：數(shù)字產(chǎn)品設(shè)計(jì)的原理與實(shí)踐

　　《視覺(jué)可用性：數(shù)字產(chǎn)品設(shè)計(jì)的原理與實(shí)踐》由資深視覺(jué)設(shè)計(jì)師Tania Schlatter和用戶(hù)界面設(shè)計(jì)師Deborah A. Levinson親力打造，內(nèi)容全面且深入，既展示應(yīng)用界面視覺(jué)設(shè)計(jì)的基本原則，又全方位講解了基于理論和實(shí)踐的設(shè)計(jì)方法和細(xì)節(jié)，使你在設(shè)計(jì)數(shù)字應(yīng)用界面的時(shí)候避免犯常見(jiàn)的錯(cuò)誤、做合理的決定，并最終實(shí)現(xiàn)超越平凡的應(yīng)用設(shè)計(jì)，是學(xué)習(xí)應(yīng)用視覺(jué)設(shè)計(jì)的最佳入門(mén)指南。

　　第一部分　基本原則第1章一　致　性如果存疑，就堅(jiān)持做下去。——A.Marcus，Graphic Documents for Electronic Documents and User Interfaces，第43頁(yè)1.1　什么是一致性如何學(xué)會(huì)使用那些每個(gè)頁(yè)面看起來(lái)都不太一樣的應(yīng)用呢？如何學(xué)會(huì)使用那些在一些頁(yè)面使用動(dòng)作按鈕而在其他頁(yè)面上為相同的動(dòng)作使用了鏈接的應(yīng)用呢？或者如何學(xué)會(huì)使用那些不可靠地運(yùn)用色彩和字體，不用任何可識(shí)別的規(guī)則來(lái)強(qiáng)調(diào)內(nèi)容和功能的應(yīng)用呢？你能夠?qū)W會(huì)，但并不怎么容易。為了幫助用戶(hù)，同時(shí)避免一些普遍的界面設(shè)計(jì)錯(cuò)誤，設(shè)計(jì)師和開(kāi)發(fā)者們需要建立一套規(guī)則來(lái)放置和處理界面元素，并且堅(jiān)持使用這套規(guī)則。正如你不能在用英語(yǔ)、法語(yǔ)和德語(yǔ)講話(huà)的同時(shí)還期待別人能清楚地理解你一樣，在你混用視覺(jué)界面特征的時(shí)候，用戶(hù)也會(huì)產(chǎn)生困惑。和口頭語(yǔ)言一樣，視覺(jué)語(yǔ)言需要運(yùn)用一致性的規(guī)則，這樣用戶(hù)才會(huì)認(rèn)知和解讀。你可以學(xué)會(huì)解讀缺乏一致性的線(xiàn)索或者你也可以猜，但是在那些致力于幫助人們完成任務(wù)的應(yīng)用里，這種猜來(lái)猜去的游戲可不怎么好玩。一致性聽(tīng)起來(lái)可能很無(wú)趣，那些“最具有一致性”的界面也不會(huì)獲得什么嘉獎(jiǎng)。無(wú)論你在設(shè)計(jì)一款應(yīng)用還是在做晚飯，嚴(yán)格按照同樣的方法不斷重復(fù)地做事情都是無(wú)法讓人感到興奮的，但讓人感到興奮的是看著用戶(hù)使用你的界面來(lái)做他們想做的事情。要記住，一致性不是要取悅自己，而是通過(guò)給予人們能夠理解并且依賴(lài)的方式來(lái)取悅他人。1.1.1　一致性和市場(chǎng)本書(shū)著眼于那些能幫助用戶(hù)完成任務(wù)的數(shù)字應(yīng)用的設(shè)計(jì)，從線(xiàn)上銀行或者軟件下載的復(fù)雜應(yīng)用到手機(jī)上的提醒事項(xiàng)的簡(jiǎn)單應(yīng)用。甚至連最小的變化（例如移動(dòng)某個(gè)按鈕的位置）都有可能在用戶(hù)理解和可用性上有巨大不同。建立一個(gè)能讓人們快速上手并且明白如何與它互動(dòng)的、具有一致性的界面對(duì)于這類(lèi)應(yīng)用的成功來(lái)說(shuō)是至關(guān)重要的。某些類(lèi)型的應(yīng)用要比其他類(lèi)型的變化得快?，F(xiàn)在，由于不斷演進(jìn)的技術(shù)和交互/視覺(jué)設(shè)計(jì)的融合，用戶(hù)界面有了全新的突破（Pinterest就是一個(gè)這樣的例子，它使用了無(wú)限的滾動(dòng)來(lái)顯示豐富的圖像內(nèi)容）。然而，每天還是有很多人在使用那些外觀(guān)糟糕、令人尷尬的應(yīng)用。盡管某個(gè)界面無(wú)法滿(mǎn)足頻繁使用者們的目標(biāo)和工作方法，他們依然創(chuàng)造了變通措施（他們不斷地重復(fù)用來(lái)完成自己需求的一系列動(dòng)作）或者就此放棄，然后向技術(shù)支持撥打代價(jià)高昂的電話(huà)。1.1.2　建立一致性建立一致性意味著通過(guò)用戶(hù)熟悉的元素來(lái)設(shè)置并維持用戶(hù)預(yù)期，此預(yù)期是由人們?cè)谄聊簧峡吹降囊约斑^(guò)去曾經(jīng)見(jiàn)過(guò)的東西建立的。例如，正在結(jié)賬頁(yè)面填寫(xiě)支付信息的人會(huì)基于他們看到的字段和組織結(jié)構(gòu)來(lái)解讀表格的流程，當(dāng)然也會(huì)基于他們?cè)趧倓偼顺龅牡卿浗缑嫔峡吹降臇|西來(lái)解讀表格的流程。他們的預(yù)期會(huì)受他們過(guò)去見(jiàn)過(guò)的其他登錄和結(jié)賬頁(yè)面的影響，他們可能會(huì)尋找“提交”按鈕，因?yàn)樵?jīng)在同一個(gè)應(yīng)用的其他頁(yè)面見(jiàn)過(guò)它，或者可能會(huì)查看他們?cè)?jīng)在其他結(jié)賬表格中見(jiàn)到的“提交”按鈕的地方。建立一致性依賴(lài)于對(duì)用戶(hù)預(yù)期的察覺(jué)（見(jiàn)圖1.1）。其中的一部分是通過(guò)現(xiàn)有頁(yè)面上的一些可視化慣例建立的；另一部分是通過(guò)應(yīng)用內(nèi)其他頁(yè)面上已經(jīng)建立的預(yù)期建立的；第三個(gè)部分在我們的掌控之外，是用戶(hù)在其他應(yīng)用上曾經(jīng)見(jiàn)過(guò)的。圖1.1　人們?nèi)绾谓庾x他們?cè)陧?yè)面上看到的內(nèi)容會(huì)受他們主動(dòng)看到的內(nèi)容的影響，也會(huì)受他們?cè)谕粋€(gè)或者其他應(yīng)用上看到的內(nèi)容影響如果我們了解用戶(hù)認(rèn)為哪些頁(yè)面是相關(guān)的，我們就可以預(yù)測(cè)他們的預(yù)期。如果你的設(shè)計(jì)決策是建立在用戶(hù)的預(yù)期、了解他們看過(guò)怎樣的模式、合并相關(guān)的事物上，那么就更有可能有效地建立一致性。你可以（甚至有時(shí)候你必須）在你的界面中采用那些用在相關(guān)頁(yè)面或應(yīng)用上的模式來(lái)提供用戶(hù)預(yù)期的東西（以用戶(hù)為中心的設(shè)計(jì)方式可以幫助你做這樣的決定，如情境調(diào)查和原型測(cè)試，第3章會(huì)有更詳細(xì)的說(shuō)明）。了解用戶(hù)預(yù)期是定義界面慣例（為你的應(yīng)用的視覺(jué)語(yǔ)言建立規(guī)則和基本原理）的一部分。一致性的類(lèi)型：內(nèi)部一致性和外部一致性某個(gè)應(yīng)用內(nèi)的頁(yè)面之間的一致性可以被叫作內(nèi)部一致性，而不同的應(yīng)用之間的一致性被叫作外部一致性。用另一種方式來(lái)說(shuō)就是：外部一致性：應(yīng)用的設(shè)計(jì)、內(nèi)容和行為是否跟同一用戶(hù)使用的其他應(yīng)用相似？?jī)?nèi)部一致性：應(yīng)用的設(shè)計(jì)、內(nèi)容和行為是否在不同頁(yè)面和功能上都保持基本一致？是否在特定平臺(tái)的限制和需求范圍內(nèi)保持基本一致？當(dāng)一款應(yīng)用是一個(gè)應(yīng)用套件的一部分時(shí)，內(nèi)部和外部一致性會(huì)有交集。在這種情況下，一個(gè)應(yīng)用的內(nèi)部一致性的元素也會(huì)適用于同一個(gè)應(yīng)用套件的其他應(yīng)用，或者會(huì)跟其他用戶(hù)的需求和要求相沖突。你不太可能讓一切都能保持完美一致，但是你越努力地去嘗試，你的用戶(hù)就越有可能不會(huì)那么痛苦地在不同應(yīng)用之間切換。（1）外部一致性外部一致性是非常重要的。如果你的用戶(hù)對(duì)于某些慣例非常習(xí)慣（比如在搜索結(jié)果的左側(cè)有分面導(dǎo)航控件），那么你可能需要去采用同樣的慣例來(lái)使用戶(hù)感覺(jué)舒服并且享受優(yōu)質(zhì)服務(wù)。但是，除非你在為某套產(chǎn)品或整個(gè)產(chǎn)品線(xiàn)中的一個(gè)界面做設(shè)計(jì)，否則這種外部一致性的要求實(shí)在是有些荒唐。用戶(hù)的需求可能跟你公司的CEO愛(ài)用的某個(gè)網(wǎng)站或移動(dòng)應(yīng)用的用戶(hù)需求不盡相同，而且那些設(shè)計(jì)師為了幫助自己的用戶(hù)所做出的選擇對(duì)你的用戶(hù)來(lái)說(shuō)未必是最佳選擇。思考并評(píng)估外部一致性是對(duì)一個(gè)從草圖開(kāi)始設(shè)計(jì)的應(yīng)用開(kāi)始定義界面慣例的絕好方法。如果你的用戶(hù)有很強(qiáng)烈的預(yù)期，那么建立一致性就需要檢驗(yàn)其他應(yīng)用已經(jīng)采用的模式，甚至可能是采用這些模式。你可以從研究開(kāi)始，并問(wèn)你自己：根據(jù)人口統(tǒng)計(jì)學(xué)或已知的用戶(hù)特性，用戶(hù)會(huì)對(duì)什么樣的布局和界面控件比較熟悉，你可以通過(guò)調(diào)研和情景調(diào)查來(lái)獲得關(guān)于這些假設(shè)的答案。對(duì)已有一套產(chǎn)品組合的公司的新應(yīng)用來(lái)說(shuō)，同樣可以采取這樣的方式。例如，假設(shè)你正在為生產(chǎn)效率類(lèi)軟件的公司開(kāi)發(fā)一款活動(dòng)簽到應(yīng)用，活動(dòng)簽到應(yīng)用代表了一條新的產(chǎn)品線(xiàn)，會(huì)有自己的名字，或許還會(huì)擁有跟原有產(chǎn)品不同的用戶(hù)群。以比較多個(gè)功能并且尋找共性開(kāi)始設(shè)計(jì)流程是很明智的。如果多個(gè)應(yīng)用擁有相同的功能，你就有可能復(fù)用潛在的準(zhǔn)則。從公司品牌一致性的角度出發(fā)，就算這個(gè)活動(dòng)簽到應(yīng)用擁有一個(gè)全新的名字，它依然可以在這個(gè)新應(yīng)用上使用相同的整體布局、控件與可供性以及CSS代碼（或者至少是字形特征）。這會(huì)讓母公司在用戶(hù)面前表現(xiàn)出一致性、條理性，在營(yíng)銷(xiāo)材料和廣告中也是這樣。（2）內(nèi)部一致性當(dāng)某個(gè)應(yīng)用的設(shè)計(jì)和行為在不同的頁(yè)面及功能當(dāng)中大部分保持一樣的時(shí)候，我們稱(chēng)之為內(nèi)部一致性。有內(nèi)部一致性的應(yīng)用對(duì)于避免常見(jiàn)錯(cuò)誤是非常重要的，對(duì)于可用性也很關(guān)鍵。沒(méi)有人愿意在使用每個(gè)頁(yè)面時(shí)都重新學(xué)習(xí)一套視覺(jué)語(yǔ)言，也沒(méi)有人愿意去猜為了看到更多信息他們是應(yīng)該點(diǎn)擊還是滑動(dòng)，然后在下一個(gè)頁(yè)面上繼續(xù)猜。他們想要的是盡快地用自己了解的方式把事情完成。當(dāng)一個(gè)應(yīng)用內(nèi)的視覺(jué)可用性工具（如布局、字體、色彩、圖像、視覺(jué)處理、控件與可供性）在頁(yè)面和小組件的層面上都被一致地運(yùn)用時(shí)，內(nèi)部一致性就實(shí)現(xiàn)了。如果一個(gè)應(yīng)用是跨平臺(tái)的（例如臺(tái)式/筆記本計(jì)算機(jī)、手機(jī)、平板電腦），在考慮到平臺(tái)特有的用戶(hù)界面交互慣例的情況下，這些視覺(jué)可用性工具應(yīng)該盡可能地達(dá)成一致。選擇合適的范式之所以如此重要，正是因?yàn)橐紤]到內(nèi)部一致性，理想狀態(tài)是，一旦選定了一個(gè)慣例，可以不斷地重復(fù)使用它，而用戶(hù)可以不假思索地使用你的應(yīng)用。如果你基于某種案例選擇了一種范式，然后發(fā)現(xiàn)它無(wú)法適用于其他的應(yīng)用，那就需要重做了。1.2　一致性在應(yīng)用設(shè)計(jì)中的作用成功的應(yīng)用設(shè)計(jì)需要在商業(yè)目標(biāo)、用戶(hù)需求、設(shè)計(jì)理論和技術(shù)能力這些方面都玩得轉(zhuǎn)，同時(shí)還需要牢記由Steve Krug推廣開(kāi)來(lái)的基本可用性原理：“不要讓我思考?！辈蛔層脩?hù)思考就要求你要了解你的用戶(hù)：他們是誰(shuí)，他們?cè)谑裁磿r(shí)候如何使用你的應(yīng)用，以及他們使用的原因。你還要了解他們的預(yù)期：你預(yù)期他們具備什么樣的基本知識(shí)，他們對(duì)于技術(shù)的熟悉度，他們正在使用哪些相似的應(yīng)用。假設(shè)你將對(duì)以上問(wèn)題的理解已經(jīng)融入了以用戶(hù)為中心的設(shè)計(jì)流程之中，下一步就是把這些你已經(jīng)掌握的信息運(yùn)用到界面設(shè)計(jì)的方方面面中了：布局：是否把相同功能的元素都擺放在每個(gè)頁(yè)面相同的位置？排版：相似元素是否都使用同樣的排版？色彩：是否有一組已定義好的色彩？是否有一套用色彩來(lái)強(qiáng)調(diào)并支持信息層級(jí)的系統(tǒng)？圖像：是否使用了相同風(fēng)格的圖像傳達(dá)相似的信息？控件和可供性：是否使用了同樣的界面元素和設(shè)計(jì)處理來(lái)代表同樣的動(dòng)作？是否為反饋和互動(dòng)控件使用了同樣的動(dòng)作？1.2.1　布局的一致性在任何應(yīng)用當(dāng)中都會(huì)有展示相似信息類(lèi)別的頁(yè)面，它們會(huì)包含一些無(wú)論在哪都處理相似任務(wù)的功能單元（小組件、內(nèi)容區(qū)塊等）。這里有兩條實(shí)用的規(guī)則可以幫助你建立自己的布局：在展示同類(lèi)信息的頁(yè)面上，所有元素都應(yīng)該一直以相同的方式擺放。彼此關(guān)聯(lián)的不同元素應(yīng)該保持一樣的空間關(guān)系，無(wú)論它們出現(xiàn)在什么地方。例如，在一個(gè)電子商務(wù)應(yīng)用當(dāng)中，一個(gè)產(chǎn)品名字應(yīng)該總是擺放在一個(gè)與產(chǎn)品圖片相關(guān)的統(tǒng)一位置上。保證以上兩條規(guī)則實(shí)現(xiàn)的最佳方式是為不同的組件及頁(yè)面類(lèi)型開(kāi)發(fā)模板。如果你是一名開(kāi)發(fā)者，你可能已經(jīng)對(duì)內(nèi)容管理系統(tǒng)內(nèi)的模板概念非常熟悉了；如果你是一個(gè)設(shè)計(jì)師，那么你可能已經(jīng)在印刷和網(wǎng)站布局當(dāng)中使用過(guò)它們了。模板的基礎(chǔ)是網(wǎng)格。像網(wǎng)格一樣，好的模板非常靈活，可以變化，而且可以很好地支持頁(yè)面之間一致的元素?cái)[放（在第4章，我們會(huì)探討更多網(wǎng)格和模板設(shè)計(jì)的內(nèi)容）。下面，讓我們看一些實(shí)際的例子：Google的應(yīng)用——Gmail、Google News以及Google Drive（見(jiàn)圖1.2）。盡管它們的布局是不相同的，但它們卻擁有相似的結(jié)構(gòu)，這讓人們能夠感到它們屬于同一個(gè)產(chǎn)品家族。因?yàn)樗麄儽舜霜?dú)立卻擁有同樣的用戶(hù)，所以我們將它們看作外部一致。然而，隨著時(shí)間的推移，這些應(yīng)用也越來(lái)越具有內(nèi)部一致性，這也是Google提高跨平臺(tái)應(yīng)用可用性和改進(jìn)外觀(guān)的部分成果。它們的相似之處包括：跨應(yīng)用的頂部導(dǎo)航條。左側(cè)包含品牌標(biāo)志的二級(jí)欄，中間是搜索功能，右側(cè)是用戶(hù)賬號(hào)及分享工具。左側(cè)的一列標(biāo)出應(yīng)用的名字，并提供內(nèi)部導(dǎo)航。主體內(nèi)容區(qū)域放在導(dǎo)航條右側(cè)的一到兩列。應(yīng)用工具和設(shè)置放在主體內(nèi)容上方。如果你準(zhǔn)備設(shè)計(jì)另一款Google應(yīng)用，它可能被同樣的用戶(hù)使用，那么你就需要回顧這些現(xiàn)有的應(yīng)用，尋找它們?cè)趦?nèi)容和功能上的相似之處。你會(huì)把應(yīng)用名稱(chēng)和導(dǎo)航放在同樣的位置，盡可能多地重復(fù)使用元素，讓那些使用同系列應(yīng)用的用戶(hù)能夠熟悉你的新應(yīng)用。你采用的這些慣例會(huì)成為新應(yīng)用的布局規(guī)則和基本原理的起點(diǎn)。1.2.2　排版的一致性你選擇的字體以及如何運(yùn)用這些字體是創(chuàng)造一個(gè)合理信息結(jié)構(gòu)的重要部分。在頁(yè)眉及內(nèi)容中運(yùn)用一套標(biāo)準(zhǔn)的格式規(guī)則可以幫助人們快速地識(shí)別出哪些是重要的部分；圖1.2　a）Gmail；b）Google News；c）Google Drive使用了一致的視覺(jué)語(yǔ)言使用不統(tǒng)一的格式則可能導(dǎo)致一些混亂，進(jìn)而讓用戶(hù)不得不瀏覽整個(gè)頁(yè)面（甚至可能是好幾個(gè)頁(yè)面）來(lái)找到他們想要的東西。我們已經(jīng)探討過(guò)Google如何在數(shù)款應(yīng)用之間使用有限數(shù)量的布局來(lái)實(shí)現(xiàn)一致性，我們還能從同樣的案例中看出，它們的排版也是具有一致性，至少對(duì)于那些相關(guān)類(lèi)型數(shù)據(jù)來(lái)說(shuō)是具有一致性的。Google Drive（見(jiàn)圖1.2c）和Gmail（見(jiàn)圖1.2a）的主界面是一個(gè)表格式的信息清單。這兩款應(yīng)用使用了同樣的磅值和字體，以及左側(cè)間隔正合適的導(dǎo)航區(qū)域。這兩款應(yīng)用還使用了字體粗細(xì)度和顏色來(lái)強(qiáng)調(diào)信息的層級(jí)：Google Drive的文檔名字使用了黑色羅馬字體，旁邊是文檔分享的狀態(tài)，用灰色的稍小字體顯示，表示這是次重要的信息。Gmail把最新消息當(dāng)做最重要的信息——發(fā)件人的名字及消息標(biāo)題用粗體標(biāo)出，這幾乎不可能被人忽略掉，然后信息展開(kāi)的內(nèi)容是灰色羅馬字體。Google Drive把最新更改過(guò)的文檔的名字用黑體標(biāo)出來(lái)，表示它們比那些用羅馬字體標(biāo)出的未經(jīng)改動(dòng)的文檔要重要。盡管這些應(yīng)用之間有顯著的差異，但它們相同的排版和字體標(biāo)準(zhǔn)能夠幫助用戶(hù)明白需要什么時(shí)候在什么地方集中注意力，無(wú)論他們正在使用哪個(gè)應(yīng)用。