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

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

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