騰訊轉譯,iOS9人機界面指南(二)：設計策略

1、騰訊轉譯，iOS 9人機界面指南（二）：設計策略作者: 一網學   最后更新時間：2015-11-11 10:38:21小編：千呼萬喚始出來！蘋果官方ios9人機界面指南第二章節(jié)終于來了！讀完這篇科普，相信對ui設計師是一次思考和提升，這本教科書級別的設計讀物，快收！后續(xù)章節(jié)會陸續(xù)更新，敬請期待！文章索引· 2.1 設計原則(Design Principles)· 2.1.1 美學完整性(Aesthetic Integrity)· 2.1.2 一致性(Consistency)· 2.1.3 直接操作(Direct Manip

2、ulation)· 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

3、Study: From Desktop to iOS)· 2.3.1 iPad版Keynote應用(Keynote on iPad)· 2.3.2 iPhone版郵件應用(Mail on iPhone)· 2.3.3 iOS系統(tǒng)內的網頁內容(Web Content in iOS)2.1 設計原則(Design Principles)2.1.1 美學完整性(Aesthetic Integrity)美學完整性不評判應用的視覺設計，也不是用來描述應用的風格特征。美學完整性是指在一款應用的視覺表現(xiàn)和交互行為與功能結合后所傳達出的整體一致性。人們關心應用是否提供了應有的功能

4、，但是也會潛移默化甚至是很直接地被應用的視覺表現(xiàn)和交互行為所影響。舉個例子，一款協(xié)助用戶完成任務的應用，可以通過使用精美而又無干擾的裝飾性元素、標準的控件和可預期的交互行為很好地幫助用戶聚焦在任務本身上。這樣，應用就能傳達出清晰而一致的信息，使得人們信任它。但是，如果應用使用干擾的、瑣碎的或隨意的UI來呈現(xiàn)任務，那么人們可能會對其可靠性和可信賴度產生懷疑。另一方面，在沉浸式應用中例如游戲用戶期待驚艷的視覺表現(xiàn)，為用戶帶來樂趣和刺激，并鼓勵用戶進行探索。用戶不是要在游戲中完成嚴肅的或程序式的任務，他們更期待游戲的視覺表現(xiàn)和交互行為與當前的目的進行整合。2.1.2 一致性(Consistency)

5、一致性可以讓人們在一款應用中的不同部分甚至不同應用間復用使用同樣的認知和技能。一款具備一致性的應用不應盲從地復制其他應用，也不應在風格上一成不變。相反，它們專注于讓人們覺得舒適的標準和范例，并提供應用內部統(tǒng)一的體驗。在判斷一款iOS應用是否要遵守一致性原則時，請思考如下問題：· 應用是否和iOS標準一致？是否正確地使用了系統(tǒng)提供的控件、視圖和圖標？是否按照用戶所預期的方式整合了設備的特性？· 應用是否內部統(tǒng)一？文案是否使用了一致的措辭和風格？同樣的圖標是否表意相同？在不同的位置執(zhí)行同樣的操作時，人們是否能能預期會發(fā)生什么？應用中自定義的UI元素是否在外觀和行為上保持一致？&

6、#183; 應用是否和先前的版本保持一致？條款和意義是否保持不變？基本概念和主要功能是否發(fā)生了變化？2.1.3 直接操作(Direct Manipulation)當人們不再使用一堆控件進行操作，而是直接在屏幕上操作對象時，他們能更集中精力完成任務，也更容易理解這些行為所產生的結果。使用多點觸摸界面，人們可以通過捏合操作來直接放大和縮小圖片或文本內容。在游戲中，玩家可以直接與屏幕上的對象進行交互。例如，游戲中可能會顯示密碼鎖，用戶可以通過轉動它來打開。在一款iOS應用中，如下情況中人們應該能夠進行直接操作：· 旋轉或者移動設備來影響屏幕上的對象· 使用手勢來操作屏幕上的對象&

7、#183; 顯示即時可視的操作反饋2.1.4 反饋(Feedback)反饋可以明示人們的行為，呈現(xiàn)操作結果，并更新于任務進程之中。iOS內置的應用對用戶的每個行為都提供了可感知的反饋。當人們點擊列表項和控件時，它們會被臨時高亮，并會在操作過程中持續(xù)一段時間，以此展示控件被執(zhí)行的過程。精細的動畫會給人們帶來有意義的反饋，幫助闡明行為的結果。例如，列表中新增一項時的動畫可以從視覺上幫助人們發(fā)現(xiàn)列表的變化。音效同樣可以為人們提供有效的反饋，但不應成為唯一的反饋方式，因為人們不一定能聽到。2.1.5 隱喻(Metaphors)當應用中的虛擬對象和交互行為與用戶已經熟悉的體驗相似時無論這些體驗是來源于真

8、實或數(shù)字生活用戶就可以快速地掌握如何來使用這個應用。當應用使用隱喻來傳達某種用法或體驗時，最好不要讓隱喻突破所依賴的對象或交互行為本身的限制。(譯者注：此處可理解為對于隱喻的使用應量力而為，不要過于牽強。)由于人們實際上是和屏幕進行物理上的交互，所以iOS應用有很大的余地來使用隱喻。iOS中的隱喻包括：· 移動分層視圖來顯示被遮擋的內容· 拖曳、輕掃和滑動游戲中的對象· 點擊開關，滑動滑塊，轉動選擇器· 輕掃來翻閱書本或雜志2.1.6 用戶控制(User Control)是人而不是應用發(fā)起和控制行為。應用可以對用戶進行操作建議，對有危害的后果予以警示，但

9、是不應替用戶來做決策。好的應用會在用戶需要時給予幫助和避免不必要的結果之間作出平衡。當對應用的交互行為和控件都較為熟悉和可預期時，用戶會覺得應用更易上手。那些簡單直白的交互行為更容易被用戶所理解和記住。人們會希望在一個操作被執(zhí)行之前有足夠的機會來取消，也希望在執(zhí)行一個不可逆的操作之前可以有機會來進行確認。最后，人們還會希望能夠停止正在執(zhí)行中的操作。2.2 從概念到產品(From Concept to Product)2.2.1 定義應用(Define Your App)應用的定義是對應用主要功能和目標用戶的簡明具體的描述。盡可能早的創(chuàng)建應用的定義可以幫助你將一個想法和功能清單轉換為用戶想要的條

10、理清晰的產品。在開發(fā)過程中，可以使用定義來決定某些功能和行為是否合理。使用以下幾個步驟來創(chuàng)建一個可靠的應用定義。1.列出所有你認為用戶可能喜歡的功能可以直接進行頭腦風暴。此時，你需要列出所有與產品核心想法有關的任務。不用擔心清單太長，因為接下來會進行刪減。假設你一開始的想法是開發(fā)一個幫助人們購買食品雜貨的應用。你可以思考在進行這項活動時，會涉及到那些相關的任務，這些就是用戶可能感興趣的潛在功能。例如：· 創(chuàng)建清單· 查找食譜· 比較價格· 定位商店· 給食譜做注釋· 查找并使用的優(yōu)惠劵· 查看烹飪演示· 探索不同的

11、烹調方法· 尋找某些食材的替代物2.確定目標用戶現(xiàn)在你需要清楚的將你的應用用戶與其他iOS用戶區(qū)分開來。確定在此情此景下，什么是對你的用戶最重要的。在食品雜貨例子中，你可能需要問問你的用戶：· 通常是在家里做飯還是更喜歡現(xiàn)成的食物· 是忠實的優(yōu)惠券用戶還是認為優(yōu)惠券沒多大價值· 喜歡尋找特別的食材還是喜歡基本食材· 嚴格的按照食譜做菜還是只把食譜當做靈感來源· 喜歡少量多次購買還是一次性購買大量食物· 希望能保留多個不同目的的購物清單還是只希望記錄回家路上需要購買的幾個東西· 堅持使用固定的品牌還是會使用方便的替代

12、品· 習慣于購買固定的一些物品還是會按照食譜來購買思考過這些問題之后，假設你可以提取出目標用戶的三個特征：喜歡按照食譜進行嘗試，時常很匆忙，通常情況下比較節(jié)儉。3.根據(jù)目標用戶過濾功能清單如果在確定了一些用戶特征后，你最終得到幾個主要功能，恭喜你在做正確的事情：好的iOS應用應該是高度聚焦在能幫用戶完成的任務上的。例如，即使第一步想出的那些可能需要的功能都是有用的，也不一定是第二步定義的目標用戶需要的。當你在目標用戶的使用情境下檢查功能清單時，就可以判斷你的應用應該聚焦在三個主要功能上：創(chuàng)建清單，獲得并使用優(yōu)惠劵，獲得食譜。此時你就可以給出應用定義了，總結該應用為誰做和做什么。食品雜

13、貨購買應用的定義可能如下：“為熱愛烹飪且節(jié)儉的用戶訂制的創(chuàng)建購物清單工具?！?.不止于此應用定義應該貫穿于整個開發(fā)過程，使用應用定義確定功能，控件，措辭的合理性。例如：當你想要新增一個功能時，問問自己這對應用的主要目的和目標用戶是否非常重要。如果不是，可以置之不理。例如，你已經確定了你的用戶對大膽新穎的烹飪方法感興趣，那么著重展示盒裝蛋糕和現(xiàn)成的食物就不太合適。當你考慮用戶界面的外觀和操作時，問問你自己你的用戶更喜歡簡單的、流線型的風格，還是有明顯主題的風格。以用戶目標為指導，理解用戶期望通過你的應用完成什么，例如快速找到答案，找到深入而全面的內容或者娛樂。例如，盡管你的食品雜貨清單應用需要易

14、于理解和快速上手，但你的用戶還是可能傾向于一個有關食物的主題界面。當你考慮應該使用怎樣的措辭時，考慮用戶在這個領域的專業(yè)程度。例如，盡管你的用戶可能不是由專業(yè)的大廚組成，但你也可以肯定他們希望看到有關食材和技術專用的措辭。2.2.2 為任務量身訂制界面(Tailor Customization to the Task)最好的iOS應用根據(jù)清晰的目標和易用性來平衡用戶界面的設計。為了達到這種平衡，要確保在設計階段前期就考慮定制化。因為考慮品牌性，原創(chuàng)性和適銷性通常會影響定制化的決策，所以專注于定制化怎樣影響用戶體驗是難的。開始考慮應用中的任務：用戶執(zhí)行這些任務的頻率如何，在什么樣的環(huán)境下進行？舉

15、個例子，想象一個計算器應用使用的是精心設計的，充滿藝術感的風格，并且使用了創(chuàng)新的層級去顯示大家熟悉的計算元素。這像藝術品一樣的細節(jié)渲染和創(chuàng)新層級并不會影響用戶去理解怎樣點擊按鈕和查看計算結果。但是對于只是簡單的需要完成工作的用戶，這種新奇的體驗和美麗的界面很快就會失去效用，并且可能成為一種妨礙。相反，隨身錄音室應用(GarageBand)可以不展示好看的、逼真的樂器來幫助用戶制作音樂，但這樣會使應用缺少身臨其境的愉悅感。在隨身錄音室里，界面不只是向用戶展示了如何使用，同樣使得制作音樂的主任務更容易完成。當你思考定制化如何增強或減弱用戶完成任務的注意力時，記住以下幾點：定制總要有緣由。理想情況下

16、，定制化的用戶界面能促進用戶完成任務并增強他們的體驗。你最好盡可能的用任務驅動定制化決策。盡量避免增加用戶的認知負擔。用戶對標準界面元素的外觀和行為都已經很熟悉了，所以他們不用停下來思考如何使用它們。當用戶面對外觀和行為與標準不同的元素時，他們就失去了經驗的優(yōu)勢。除非你的獨一無二的元素能夠使任務更容易完成，否則用戶很可能不喜歡被強制學習一些在其他應用都不通用的步驟。保持內部的一致性。你的應用中自定義元素越多，保持這些元素外觀和行為的一致性就越重要。如果用戶花費時間去學習了你創(chuàng)建的那些不熟悉的控件，那么他們會希望新學到的這些操作能夠在整個應用中通用?？偸且詢热轂橹攸c。因為標準元素很熟悉，所以它們

17、不會分散用戶在內容上的注意力。當你自定義用戶界面時，注意確保界面元素不會搶走用戶對內容的注意力。例如，如果你的應用允許用戶觀看視頻，你可能選擇設計一個自定義的重播控件。但是不管你用的是自定義還是標準的重播控件，都沒有它是否在用戶開始觀看后隱藏點擊屏幕后出現(xiàn)來的重要。在對標準控件進行重設計時再三思考。如果你不只是想自定義標準控件，而是想重設計，確保你的重設計能提供盡可能多的信息。例如，你設計了一個開關控件，它沒有可以指明相反狀態(tài)存在的信息，那么用戶很可能意識不到這是個有兩個狀態(tài)的控件。一定要徹底測試自定義的界面元素。在測試過程中，近距離的觀察用戶是否能預測你的元素如何使用以及是否能容易的與它們交

18、互。例如，如果你創(chuàng)建的控件的可點擊區(qū)域小于44 x 44像素，用戶點擊時就會有困難?；蛘呷绻銊?chuàng)建了一個視圖對點擊和滑動的反饋不一樣，確保這個視圖提供的功能值得用戶去額外關注交互的不同。2.2.3 原型 & 迭代(Prototype & Iterate)在你投入工程資源實現(xiàn)設計之前，最好先創(chuàng)建原型來進行用戶測試。即使只有幾個同事來幫你測試原型，你也會收獲一些關于應用功能和用戶體驗的新鮮觀點。在設計的早期階段，你可以使用紙質的原型或者線框圖去呈現(xiàn)主要的視圖和控件，并且標明每個頁面之間的跳轉關系。你可以從線框圖測試中獲得一些有用的反饋，但是線框圖的稀疏性有可能會誤導用戶。因為用戶很

19、難想象當線框被實際內容填滿時體驗會有什么樣的變化。如果你有一個可以在設備上運行的原型，那你可以得到更多有用的反饋。當用戶能在設備上與你的原型進行交互時，他們能更容易的發(fā)現(xiàn)應用中哪里功能不滿足預期，哪里體驗過于復雜。創(chuàng)建可靠原型的最簡單的方法是使用基于故事版的Xcode模板創(chuàng)建一個基礎應用，然后使用一些類似于占位符的內容來進行填充。(故事版可以涵蓋應用中的所有界面，并且包括界面之間的跳轉關系。)接著，將這個原型導入到設備中，這樣被測者就可以有一個盡可能真實的體驗了。你不需要在原型中提供大量的實際內容或者使每一個控件都可用，但是你確實需要營造足夠的情境來保證真實的體驗。并且需要在典型用戶體驗和非典

20、型的邊緣情況之間做好平衡。例如，如果你的應用需要處理很長的列表項，你的原型就不能只顯示一兩個條目。而且在用戶測試交互中，只要被測者能夠點擊屏幕上的一個區(qū)域進入到下一個邏輯頁面或者完成主任務，那他們就可能提供更有建設性的反饋。當你使用Xcode應用模板來創(chuàng)建原型時，你可以免費使用很多功能，并且它可以相對容易的進行設計中的響應反饋調節(jié)。在你確定設計方案并投入資源進行實現(xiàn)之前，應該對原型進行多次迭代測試。想要開始學習Xcode，請參考Xcode Overview.2.3 案例學習：從桌面到iOS(Case Study: From Desktop to iOS)2.3.1 iPad版Keynote應用

21、(Keynote on iPad)桌面版的Keynote 應用是一個十分強大而又靈活的應用，可以創(chuàng)建非常優(yōu)秀的幻燈片。人們喜愛Keynote將簡單易用與細粒度的操作結合進而控制無數(shù)精確細節(jié)的方式，如動畫和文本屬性等。iPad版的Keynote提取了桌面版Keynote的核心要素，并通過創(chuàng)造以下的用戶體驗使它在iPad上更舒適：· 專注于用戶輸入的內容· 通過削減功能降低系統(tǒng)的復雜度· 提供有用而又令人愉悅的快捷操作· 延續(xù)桌面版本的體驗· 利用動人的動畫提供良好的反饋與交流Keynote用戶能很快理解如何使用iPad版，是因為它使用了iPad原

22、生的范例，符合了用戶對功能上的預期。新用戶可以用簡單、自然的方式直接操控內容，所以可以很容易學會如何使用iPad版的Keynote.Keynote從桌面版向iPad版的轉變是基于從細節(jié)到整體的大量修改和重新設計的。以下是一些明顯的修改：流線型的工具欄。工具欄中只有少數(shù)的元素，但是它們是用戶在創(chuàng)建內容時所需的所有功能和工具的統(tǒng)一入口。簡化并優(yōu)先響應用戶焦點的檢查器。對于用戶所選的需要修改的對象，iPad版的Keynote能自動控制其工具和屬性。(譯者注：特別是根據(jù)當前的操作對象而有限選擇某些工具。)通常，人們可以在第一檢查器視圖中完成他們需要的所有修改操作。如果他們需要修改那些不常用的屬性，他們

23、可以下拉另一個檢查器視圖來進行。豐富的預設樣式集。人們可以利用預設的樣式很簡單地改變對象(如表格或圖表)的外觀或者感覺。除了顏色之外，每個集中，例如表格的標題和軸區(qū)分標識等的預設屬性都被設計得與整體的主題和諧一致。直接操作內容，豐富有意義的動畫。在iPad版的Keynote中，用戶可以拖動滑塊到一個新的位置，可以扭動旋轉一個對象，也可以輕擊圖片來選中它。iPad版Keynote的響應動畫進一步加強了這種可直接操作的印象。例如，用戶在移動某個滑塊時它通常會暫停，而當它被放置在一個新的位置時，環(huán)繞在周圍的滑塊將會向外擴散給它留出空間。2.3.2 iPhone版郵件應用(Mail on iPhone

24、)郵件應用是OS X中一款好用而又廣受好評的常見應用。它也是一個很強大的程序，可以允許用戶撰寫、接收、分類和存儲郵件，追蹤行動和事件，也可以編寫備忘錄和邀請等。桌面版的郵件應用通過一系列的窗口提供了這些強大的功能。iPhone版的郵件專注于桌面版郵件的核心功能，幫助人們接收、撰寫、發(fā)送和組織他們的信息。為了塑造移動iPhone版的郵件應用，將這些功能濃縮在為其量身定制的界面之中，做了如下的工作：· 將人們的內容前置和居中的合理化呈現(xiàn)· 專為處理不同任務而設計的不同視圖· 易于瀏覽并符合認知的信息結構· 適時提供強大的編輯和組織性工具· 用微妙且

25、動人的動畫來傳達動作和提供反饋必須明白的是，相對于桌面版的郵件應用來說，iPhone版的郵件應用不是(注：或者說并不需要是)一個更好的應用，而是為移動端用戶重新設計的郵件應用。iPhone版的郵件應用專注于桌面版的功能子集并將它們呈現(xiàn)在一個吸引人的精簡界面之中，據(jù)此為移動端的用戶提供了核心的郵件體驗。為了使郵件應用的體驗能適應移動場景，iPhone版的郵件應用在幾個關鍵的方面革新了用戶界面。直接、高度專注的頁面。每個頁面顯示了郵件應用體驗的一個方面：賬戶列表、郵箱列表、消息列表、消息查看和編輯視圖。用戶可以在一個屏幕內滑動查看完整的內容。簡單、可預期的導航。通過每屏的一次點擊，用戶可以逐層展開

26、綜合內容(賬戶列表)進入具體頁面(一封消息)。每個頁面會顯示一個標題用以指示用戶所在的位置，以及一個返回按鈕用以更容易地回溯到他們之前的步驟。需要時即可獲取的、簡單的點擊性控件?；旧显谌魏螆鼍爸?，編寫郵件和查閱新郵件都是人們首要希望進行的操作，因此iPhone版的郵件應用保證了這兩個功能在多個頁面中都可以便利地進行。當用戶查看一封消息時，就會顯示諸如回復、移動和刪除等對消息的操作。針對不同任務的不同類型的反饋。當人們刪除一封消息時，它會動態(tài)地進入垃圾桶圖標中。當人們發(fā)送一封消息時，可以看到它的發(fā)送過程；而當發(fā)送結束時，人們可以聽到一個特別的聲音提示。通過消息列表頁面工具欄的副標題，用戶通過簡單一瞥就可以查看郵箱上次更新的時間。2.3.3 iOS系統(tǒng)內的網頁內容(Web Content in iOS)iOS版的Safari應用在iOS設備上提供了出眾的移動網頁瀏覽體驗。人們喜歡