iOS 8人機介面指南（二）：設計策略

文章索引

• 2.1 設計原則（Design Principles）
• 2.1.1 美學完整性（Aesthetic Integrity）
• 2.1.2 一致性（Consistency）
• 2.1.3 直接操作（Direct Manipulation）
• 2.1.4 反饋（Feedback）
• 2.1.5 隱喻（Metaphors）
• 2.1.6 使用者控制（User Control）
• 2.2 從概念到產品(From Concept to Product)
• 2.2.1 定義應用（Define Your App）
• 2.2.2 為任務量身訂製介面（Tailor Customization to the Task）
• 2.2.3 原型與迭代（Prototype & Iterate）
• 2.3 案例學習：從桌面到iOS（Case Study: From Desktop to iOS）
• 2.3.1 iPad版Keynote應用（Keynote on iPad）
• 2.3.2 iPhone版郵件應用（Mail on iPhone）
• 2.3.3 iOS系統內的網頁內容（Web Content in iOS）

2.1 設計原則（Design Principles）

2.1.1 美學完整性（Aesthetic Integrity）

美學完整性並不評判應用的視覺設計，或者用來描述應用的風格特徵。美學完整性是指一款應用的視覺表現和互動行為在與功能結合後所傳達出的整體一致性。

人們關心應用是否提供了應有的功能，但是也會潛移默化甚至是很直接地被應用的視覺表現和互動行為所影響。舉個例子，一款協助使用者完成任務的應用，可以通過使用精美而又無干擾的裝飾性元素、標準的控制元件和可預期的互動行為來幫助使用者聚焦在任務本身上。這樣，應用就能傳達出清晰一致的資訊，使得人們信任它。但是，如果應用使用干擾的、瑣碎或隨意的UI來呈現任務，那麼人們可能會對其可靠性和可信賴度產生懷疑。

另一方面，在沉浸式應用中—例如遊戲—使用者期待驚豔的視覺表現，為使用者帶來樂趣和刺激，並鼓勵使用者進行探索。人們不希望在遊戲中完成嚴肅的或生產力式的任務，他們會期待遊戲的視覺表現和互動行為能夠整合進任務當中。

2.1.2 一致性（Consistency）

一致性可以讓人們在一款應用中的不同部分甚至不同應用間複用他們的知識和技能。一款具備一致性的應用不應盲從地複製其他應用，也不應在風格上一成不變。應用應專注於讓人們覺得舒適的標準和範例，並提供應用內部統一的體驗。

在決定一款iOS應用是否要遵守一致性原則時，請思考如下問題：

• 應用是否和iOS標準一致？是否正確地使用了系統提供的控制元件、檢視和圖示？是否以使用者所預期的方式整合了裝置的特性？
• 應用是否內部統一？文案是否使用了一致的措辭和風格？同樣的圖示是否表意相同？在不同的位置執行同樣的操作時，人們是否能能預期會發生什麼？
• 應用是否和先前的版本保持一致？條款和意義是否保持不變？基本概念和主要功能是否發生了變化？

2.1.3 直接操作（Direct Manipulation）

當人們不再使用一堆控制元件進行操作，而是直接操作螢幕上的物件時，他們能更集中精力完成任務，也更容易理解這些行為所產生的結果。

使用多點觸控介面，人們可以通過捏合操作來直接放大和縮小圖片或文字內容。在遊戲中，玩家應該直接移動和作用在螢幕上的物件。例如，遊戲中可能會顯示密碼鎖，使用者可以通過轉動它來開啟。

在一款iOS應用中，如下情況中人們應該能夠進行直接操作：

• 旋轉或者移動裝置來影響螢幕上的物件
• 使用手勢來操作螢幕上的物件
• 顯示即時可視的操作反饋

2.1.4 反饋（Feedback）

反饋可以明示人們的行為，展示操作的結果，並更新於任務程式之中。

iOS內建的應用對使用者的每個行為都提供了可感知的反饋。當人們點選列表項和控制元件時，它們會被臨時高亮，並會在操作過程中持續一段時間，以此展示控制元件被執行的過程。

精細的動畫會給人們帶來有意義的反饋，幫助闡明行為的結果。例如，列表中新增一項時的動畫可以從視覺上幫助人們發現列表的變化。

音效同樣可以為人們提供有效的反饋，但不應成為唯一的反饋方式，因為人們不一定能聽到。

2.1.5 隱喻（Metaphors）

當應用中的虛擬物件和互動行為與使用者已經熟悉的體驗相似時—無論這些體驗是來源於真實或數字生活—使用者就可以快速地掌握如何來使用這個應用。

當應用使用隱喻來傳達某種用法或體驗時，最好不要讓隱喻突破所依賴的物件或互動行為本身的限制。（譯者注：此處可理解為對於隱喻的使用應量力而為，不要過於牽強。）

由於人們實際上是和螢幕進行物理上的互動，所以iOS應用有很大的餘地來使用隱喻。iOS中的隱喻包括：

• 移動分層檢視來顯示被遮擋的內容
• 拖曳、輕掃和滑動遊戲中的物件
• 點選開關，滑動滑塊，轉動選擇器
• 輕掃來翻閱書本或雜誌

2.1.6 使用者控制（User Control）

是人—而不是應用—發起和控制行為。應用可以對使用者進行操作建議，對有危害的後果予以警示，但是不應替使用者來做決策。好的應用會在給人們幫助他們避免不必要結果的能力時，找到正確的平衡。

當對應用的互動行為和控制元件都較為熟悉和可預期時，使用者會覺得應用更易上手。那些簡單直白的互動行為更容易被使用者所理解和記住。

人們會希望在一個操作被執行之前有足夠的機會來取消，也希望在執行一個不可逆的操作之前可以有機會來進行確認。最後，人們還會希望能夠停止正在執行中的操作。

2.2 從概念到產品(From Concept to Product)

2.2.1 定義應用（Define Your App）

應用的定義是對應用主要功能和目標使用者的簡明具體的描述。

儘可能早地建立應用的定義可以幫助你將一個想法和功能清單轉換為使用者想要的條理清晰的產品。在開發過程中，可以使用定義來決定某些功能和行為是否合理。使用以下幾個步驟來建立一個可靠的應用定義。

1、列出所有你認為使用者可能喜歡的功能

可以直接進行頭腦風暴。此時，你需要列出所有與產品中心有關的任務。不用擔心清單太長，因為接下來會進行刪減。

假設你一開始的想法是開發一個幫助人們購買食品雜貨的應用。你可以思考在進行這項活動時，會涉及到哪些相關的任務，這些就是使用者可能感興趣的潛在功能。例如：

• 建立清單
• 查詢食譜
• 比較價格
• 定位商店
• 給食譜做註釋
• 查詢可使用的優惠劵
• 檢視烹飪演示
• 探索不同的烹調方法
• 尋找某些食材的替代物

2、確定目標使用者

現在你需要清楚地將你應用的使用者與其他iOS應用的使用者區分開來。確定在此情此景下，什麼是對你的使用者最重要的。在食品雜貨例子中，你可能需要問問你的使用者：

• 通常是在家裡做飯還是更喜歡現成的食物
• 是忠實的優惠券使用者還是認為優惠券沒多大價值
• 喜歡尋找特別的食材還是喜歡基本食材
• 嚴格按照食譜做菜還是隻把食譜當做靈感來源
• 喜歡少量多次購買還是一次性購買大量食物
• 希望能保留多個不同目的的清單還是隻希望記錄回家路上需要購買的幾個東西
• 堅持使用固定的品牌還是會使用方便的替代品
• 習慣於購買固定的一些物品還是會按照食譜來購買

思考過這些問題之後，你可以從三個方面來描述目標使用者的特徵：喜歡按照食譜進行嘗試，時常很匆忙，通常情況下很節儉。

3、根據目標使用者過濾功能清單

如果在確定了一些使用者特徵後，你最終只得到了幾個主要功能，那麼你就已經步入了正軌：出色的iOS應用應該聚焦在幫助使用者解決問題的核心任務上。

例如，即使第一步想出的那些可能需要的功能都是有用的，也不可能全都被第二步定義的目標使用者認可。

當你在目標使用者的使用情境下檢查功能清單時，就可以判斷你的應用應該聚焦在三個主要功能上：建立清單，獲得並使用優惠劵，獲得食譜。

此時你就可以給出應用定義了，總結該應用做什麼以及為誰做。食品雜貨購買應用的定義可能如下：

“為熱愛烹飪且節儉的使用者訂製的建立購物清單工具。”

4、不止於此

應用定義應該貫穿於整個開發過程，使用應用定義來確定功能，控制元件，措辭的合理性。例如：

當你想要新增一個功能時，問問你自己這對應用的主要目的和目標使用者是否非常重要。如果不是，可以置之不理。例如，你已經確定了你的使用者對大膽新穎的烹飪方法感興趣，那麼著重展示盒裝蛋糕和現成的食物就不太合適。

當你考慮使用者介面的外觀和行為時，問問你自己你的使用者更喜歡簡單的、流線型的風格，還是有明顯主題的風格。以使用者目標為指導來完成你的應用，理解使用者期望通過你的應用完成什麼，例如完成任務的能力，快速找到答案的能力，深入綜合內容的能力，或者獲得娛樂的能力。例如，儘管你的食品雜貨清單應用需要易於理解和快速上手，但你的使用者還是可能傾向於一個有關食物的主題介面。

當你考慮應該使用怎樣的措辭時，努力和使用者對這個主題的專業程度相匹配。例如，儘管你的使用者可能不是由專業的大廚組成，但你也可以肯定他們希望看到有關食材和技術專用的措辭。

2.2.2 為任務量身訂製介面（Tailor Customization to the Task）

好的iOS應用會根據清晰的目標和易用性來平衡使用者介面的設計。為了達到這種平衡，要確保在設計階段前期就考慮定製化。因為考慮品牌性、原創性和適銷性通常會影響定製化的決策，所以專注於定製化怎樣影響使用者體驗是有挑戰性的。

可以由應用中的任務著手：使用者執行這些任務的頻率如何，在什麼樣的環境下進行？

舉個例子，想象一個計算器應用使用的是精心設計的，充滿藝術感的風格，並且使用了創新的佈局來展示大家熟悉的計算器元素。這些像藝術品一樣的細節渲染和創新的佈局並不會影響使用者去理解怎樣點選按鈕和檢視計算結果。但是對於只想簡單完成任務的使用者，這種新奇的體驗和美麗的介面很快就會失去效用，並且可能成為一種妨礙。

相反，GarageBand（隨身錄音室應用）可以不展示好看的、逼真的樂器來幫助使用者製作音樂，但這樣會使應用缺少身臨其境的愉悅感。在GarageBand裡，介面不只是向使用者展示瞭如何使用，同樣使得製作音樂的主任務更容易完成。

當你思考定製化如何增強或減弱使用者完成任務的注意力時，記住以下幾點：

定製總要有緣由。理想情況下，定製化的使用者介面能促進使用者完成任務並增強他們的體驗。你最好儘可能地用任務驅動定製化決策。

儘量避免增加使用者的認知負擔。使用者對標準介面元素的外觀和行為都已經很熟悉了，所以他們不用停下來思考如何使用它們。當使用者面對外觀和行為與標準不同的元素時，他們就失去了經驗優勢。除非你的獨一無二的元素能夠使任務更容易完成，否則使用者很可能不喜歡被強制學習一些在其他應用都不通用的操作。

保持內在的一致性。你的應用中自定義元素越多，保持這些元素外觀和行為的一致性就越重要。如果使用者花費時間去學習了你建立的那些不熟悉的控制元件，那麼他們會希望新學到的這些操作能夠在整個應用中通用。

總是以內容為重點。因為標準元素很熟悉，所以它們不會分散使用者在內容上的注意力。當你自定義使用者介面時，注意確保介面元素不會搶走使用者對內容的注意力。例如，如果你的應用允許使用者觀看視訊，你可能選擇設計一個自定義的重播控制元件。但是不管你用的是自定義還是標準的重播控制元件，都沒有它是否在使用者開始觀看後隱藏，點選螢幕後出現來的重要。

在對標準控制元件進行重設計時再三思考。如果你不只是想自定義標準控制元件，而是想重設計，確保你的重設計能提供儘可能多的資訊。例如，你設計了一個開關控制元件，它沒有可以指明相反狀態存在的資訊，那麼使用者很可能意識不到這是個有兩個狀態的控制元件。

一定要徹底測試自定義的介面元素。在測試過程中，近距離的觀察使用者是否能預測你的元素如何使用以及是否能容易地與它們互動。例如，如果你建立的控制元件的可點選區域小於44 x 44點，使用者點選時就會有困難。或者如果你建立了一個檢視對點選和滑動的反饋不一樣，確保這個檢視提供的功能值得使用者去額外關注互動的不同。

2.2.3 原型與迭代（Prototype & Iterate）

在你投入工程資源實現設計之前，建立原型來進行使用者測試是個很好的主意。即使只有幾個同事來幫你測試原型，你也會收穫一些關於應用功能和使用者體驗的新鮮觀點。

在設計的早期階段，你可以使用紙面原型或者線框圖去呈現主要的檢視和控制元件，並且標明每個頁面之間的跳轉關係。你可以從線框圖測試中獲得一些有用的反饋，但是線框圖的稀疏性有可能會誤導使用者。因為使用者很難想象當線框被實際內容填滿時體驗會有什麼樣的變化。

如果你有一個可以在裝置上執行的原型，那你可以得到更多有用的反饋。當使用者能在裝置上與你的原型進行互動時，他們能更容易發現應用中哪裡功能不滿足預期，哪裡體驗過於複雜。

建立可靠原型的最簡單的方法是使用基於故事板（storyboard）的Xcode模板建立一個基礎應用，然後使用一些類似於佔位符的內容來進行填充。（故事板（storyboard）檔案可以涵蓋應用中的所有介面，並且包括介面之間的跳轉關係。）接著，將這個原型匯入到裝置中，這樣被測者就可以有一個儘可能真實的體驗了。

你不需要在原型中提供大量的實際內容或者使每一個控制元件都可用，但是你確實需要營造足夠的情境來保證真實的體驗。並且需要在典型使用者體驗和非典型的邊緣情況之間做好平衡。例如，如果你的應用需要處理很長的列表項，你的原型就不能只顯示一兩個條目。而且在使用者測試互動中，只要被測者能夠點選螢幕上的一個區域進入到下一個邏輯頁面或者完成主任務，那他們就可能會提供更有建設性的反饋。

當你使用Xcode應用模板來建立原型時，你可以免費使用很多功能，並且它可以相對容易地進行設計中的響應反饋調節。在你確定設計方案並投入資源進行實現之前，應該對原型進行多次迭代測試。想要開始學習Xcode，請參考Xcode Overview。

2.3 案例學習：從桌面到iOS（Case Study: From Desktop to iOS）

2.3.1 iPad版Keynote應用（Keynote on iPad）

桌面版的Keynote 應用是一個十分強大而又靈活的應用，可以建立非常優秀的幻燈片。人們喜愛Keynote將簡單易用與良好的細粒度的操作結合進而控制無數精確細節的方式，如動畫和文字屬性等。

iPad版的Keynote提取了Keynote桌面版的核心要素，並通過創造以下的使用者體驗使它在iPad上更舒適：

• 專注於使用者內容
• 在不削減功能的基礎上減少系統的複雜性
• 提供有用而又令人愉悅的快捷操作
• 延續桌面版本的體驗
• 利用動人的動畫提供良好的反饋與交流

Keynote使用者能很快理解如何使用iPad版，是因為它使用了iPad原生的範例，符合了使用者對功能上的預期。新使用者可以用簡單、自然的方式直接操控內容，所以可以很容易學會如何使用iPad版的Keynote。

Keynote從桌面版向iPad版的轉變是基於從細節到深層的大量修改和重新設計的。這些都是一些最明顯的適應性：

流線型的工具欄

工具欄中只有少數的元素，但是它們是使用者在建立內容時所使用的全部功能和工具的統一入口。

簡化並優先響應使用者焦點的檢查器

iPad版的Keynote能自動偵測各種工具，能通過對使用者需求進行分類以修正被選擇的物件。（譯者注：特別是根據當前的操作物件而有限選擇某些工具。）通常，人們可以在第一檢查器檢視中完成他們需要的所有修改操作。如果他們需要修改那些不常用的屬性，他們可以下拉另一個檢查器檢視來進行。

豐富的預設樣式集

人們可以利用預設的樣式很簡單地改變物件（如表格或圖表）的外觀或者感覺。除了顏色之外，每個集中，例如表格的標題和軸區分標識等的預設屬性都被設計得與整體的主題和諧一致。

直接操作內容，豐富有意義的動畫

在iPad版的Keynote中，使用者可以拖動滑塊到一個新的位置，可以扭動旋轉一個物件，也可以輕擊圖片來選中它。iPad版Keynote的響應動畫進一步加強了這種可直接操作的印象。例如，使用者在移動某個滑塊時它通常會暫停，而當它被放置在一個新的位置時，環繞在周圍的滑塊將會向外擴散給它留出空間。

2.3.2 iPhone版郵件應用（Mail on iPhone）

郵件應用是OS X中一款好用而又廣受好評的常見應用。它也是一個很強大的程式，可以允許使用者撰寫、接收、分類和儲存郵件，追蹤行動和事件，也可以編寫備忘錄和邀請等。桌面版的郵件應用通過一系列的視窗提供了這些強大的功能。

iPhone版的郵件專注於桌面版郵件的核心功能，幫助人們接收、撰寫、傳送和組織他們的資訊。為了塑造移動iPhone版的郵件應用，將這些功能濃縮在為其量身定製的介面之中，做了如下的工作：

• 將人們的內容前置和居中的合理化呈現
• 專為處理不同任務而設計的不同檢視
• 易於瀏覽並符合認知的資訊結構
• 適時提供強大的編輯和組織性工具
• 傳達動作和提供反饋的微妙且動人的動畫

（我們）必須明白相較於桌面版的郵件應用，iPhone版的郵件應用不是（譯者注：或者說並不需要是）一個更好的應用，而是為移動端使用者重新設計的郵件應用。iPhone版的郵件應用專注於桌面版的功能子集並將它們呈現在一個吸引人的精簡介面之中，據此為移動端的使用者提供了核心的郵件體驗。

為了使郵件應用的體驗能適應移動場景，iPhone版的郵件應用在幾個關鍵的方面革新了使用者介面。

直接、高度專注的頁面

每個頁面顯示了郵件應用體驗的一個方面：賬戶列表、郵箱列表、訊息列表、訊息檢視和編輯檢視。使用者可以在一個螢幕內滑動檢視完整的內容。

簡單、可預見的導航

通過每屏的一次點選，使用者可以逐層展開通用內容（賬戶列表）進入具體頁面（一封訊息）。每個頁面會顯示一個標題用以指示使用者所在的位置，以及一個返回按鈕用以更容易地回溯到他們之前的步驟。

需要時即可獲取的、簡單的點選性控制元件

基本上在任何場景之下，編寫郵件和查閱新郵件都是人們首要希望進行的操作，因此iPhone版的郵件應用保證了這兩個功能在多個頁面中都可以便利地進行。當使用者檢視一封訊息時，就會顯示諸如回覆、移動和刪除等對訊息的操作。

針對不同任務的不同型別的反饋

當人們刪除一封訊息時，它會動態地進入垃圾桶圖示中。當人們傳送一封訊息時，可以看到它的傳送過程；而當傳送結束時，人們可以聽到一個特別的聲音提示。通過訊息列表頁面工具欄的副標題，使用者通過簡單一瞥就可以檢視郵箱上次更新的時間。

2.3.3 iOS系統內的網頁內容（Web Content in iOS）

iOS版的Safari應用在iOS裝置上提供了出眾的移動網頁瀏覽體驗。人們喜歡閱讀清晰的文字和圖片，也希望能通過旋轉裝置或者捏合和點選螢幕來調整檢視。

基於標準建立的網站可以在iOS裝置上顯示得很好。特別是那些能偵測裝置並不需要外掛的網站可以同時在iPhone和iPad上都表現得很好，兩者之間不會需要太多的修改，即使有也很小。

除此之外，成功的網站應具備以下的典型性：

• 如果頁面寬度需要匹配裝置寬度，可以設定合適的視窗（viewport）來適應裝置
• 避免CSS中固定的定位，以便當使用者縮放或拖動頁面時內容無法被移出螢幕
• 擁有一套基於觸控操作的使用者介面，而不是依賴基於傳統點選操作的互動

有時候，額外的一些修改可以（使頁面）更合理。例如，在iOS系統中，很多網頁應用會設定合適的視窗（viewport）寬度並通常隱藏Safari的UI。如欲瞭解更多如何進行這些修改，參見Safari Web Content Guide章節中的Configuring the Viewport和Configuring Web Applications。

網站也可以通過其他的方法適配桌面網頁體驗到iOS端的Safari瀏覽器中：

使鍵盤適應iOS端的Safari

當鍵盤和格式輔助資訊出現時，iPhone上的Safari應用會將你的網頁顯示在URL地址下方和鍵盤與格式輔助資訊上方。

使彈出式選單適應iOS端的Safari

在桌面版的Safari應用中，彈出式選單會包含很多選項，就如在其他OS X應用中一樣。在必要的情況下，選單展開後可以超出應用視窗的邊界以顯示其中的所有選項。在iOS版的Safari應用中，彈出式選單由原生的元素所呈現，這樣能提供更好的使用者體驗。例如，在iPhone上，彈出式選單會出現在選擇器（picker）當中，選擇器裡會一個使用者可選擇的選項列表。（欲瞭解更多選擇器控制元件的內容，可以參見Picker。）