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