2015-11-12 用心設計
藍藍設計( m.qdjdjx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
來源：莫貝網
譯者注：本文譯自蘋果官方人機界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由騰訊ISUX設計師翻譯整理，非發文者一人之作。譯文首發于ISUX博客，如在閱讀過程中發現錯誤與疏漏之處，歡迎不吝指出。后續章節會陸續更新，敬請期待。
上期：《iOS 9人機界面指南（一）：UI設計基礎》
文章索引
美學完整性不評判應用的視覺設計，也不是用來描述應用的風格特征。美學完整性是指在一款應用的視覺表現和交互行為與功能結合后所傳達出的整體一致性。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102205944549-590x307.png)
人們關心應用是否提供了應有的功能，但是也會潛移默化甚至是很直接地被應用的視覺表現和交互行為所影響。舉個例子，一款協助用戶完成任務的應用，可 以通過使用精美而又無干擾的裝飾性元素、標準的控件和可預期的交互行為很好地幫助用戶聚焦在任務本身上。這樣，應用就能傳達出清晰而一致的信息，使得人們 信任它。但是，如果應用使用干擾的、瑣碎的或隨意的UI來呈現任務，那么人們可能會對其可靠性和可信賴度產生懷疑。
另一方面，在沉浸式應用中—例如游戲—用戶期待驚艷的視覺表現，為用戶帶來樂趣和刺激，并鼓勵用戶進行探索。用戶不是要在游戲中完成嚴肅的或程序式的任務，他們更期待游戲的視覺表現和交互行為與當前的目的進行整合。
一致性可以讓人們在一款應用中的不同部分甚至不同應用間復用使用同樣的認知和技能。一款具備一致性的應用不應盲從地復制其他應用，也不應在風格上一成不變。相反，它們專注于讓人們覺得舒適的標準和范例，并提供應用內部統一的體驗。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210013279-590x235.png)
在判斷一款iOS應用是否要遵守一致性原則時，請思考如下問題：
當人們不再使用一堆控件進行操作，而是直接在屏幕上操作對象時，他們能更集中精力完成任務，也更容易理解這些行為所產生的結果。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210039758-590x287.png)
使用多點觸摸界面，人們可以通過捏合操作來直接放大和縮小圖片或文本內容。在游戲中，玩家可以直接與屏幕上的對象進行交互。例如，游戲中可能會顯示密碼鎖，用戶可以通過轉動它來打開。
在一款iOS應用中，如下情況中人們應該能夠進行直接操作：
反饋可以明示人們的行為，呈現操作結果，并更新于任務進程之中。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210115815-590x386.png)
iOS內置的應用對用戶的每個行為都提供了可感知的反饋。當人們點擊列表項和控件時，它們會被臨時高亮，并會在操作過程中持續一段時間，以此展示控件被執行的過程。
精細的動畫會給人們帶來有意義的反饋，幫助闡明行為的結果。例如，列表中新增一項時的動畫可以從視覺上幫助人們發現列表的變化。
音效同樣可以為人們提供有效的反饋，但不應成為唯一的反饋方式，因為人們不一定能聽到。
當應用中的虛擬對象和交互行為與用戶已經熟悉的體驗相似時—無論這些體驗是來源于真實或數字生活—用戶就可以快速地掌握如何來使用這個應用。
當應用使用隱喻來傳達某種用法或體驗時，最好不要讓隱喻突破所依賴的對象或交互行為本身的限制。(譯者注：此處可理解為對于隱喻的使用應量力而為，不要過于牽強。)
由于人們實際上是和屏幕進行物理上的交互，所以iOS應用有很大的余地來使用隱喻。iOS中的隱喻包括：
是人—而不是應用—發起和控制行為。應用可以對用戶進行操作建議，對有危害的后果予以警示，但是不應替用戶來做決策。好的應用會在用戶需要時給予幫助和避免不必要的結果之間作出平衡。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210148356.png)
當對應用的交互行為和控件都較為熟悉和可預期時，用戶會覺得應用更易上手。那些簡單直白的交互行為更容易被用戶所理解和記住。
人們會希望在一個操作被執行之前有足夠的機會來取消，也希望在執行一個不可逆的操作之前可以有機會來進行確認。最后，人們還會希望能夠停止正在執行中的操作。
應用的定義是對應用主要功能和目標用戶的簡明具體的描述。
盡可能早的創建應用的定義可以幫助你將一個想法和功能清單轉換為用戶想要的條理清晰的產品。在開發過程中，可以使用定義來決定某些功能和行為是否合理。使用以下幾個步驟來創建一個可靠的應用定義。
1.列出所有你認為用戶可能喜歡的功能
可以直接進行頭腦風暴。此時，你需要列出所有與產品核心想法有關的任務。不用擔心清單太長，因為接下來會進行刪減。
假設你一開始的想法是開發一個幫助人們購買食品雜貨的應用。你可以思考在進行這項活動時，會涉及到那些相關的任務，這些就是用戶可能感興趣的潛在功能。例如：
2.確定目標用戶
現在你需要清楚的將你的應用用戶與其他iOS用戶區分開來。確定在此情此景下，什么是對你的用戶最重要的。在食品雜貨例子中，你可能需要問問你的用戶：
思考過這些問題之后，假設你可以提取出目標用戶的三個特征：喜歡按照食譜進行嘗試，時常很匆忙，通常情況下比較節儉。
3.根據目標用戶過濾功能清單
如果在確定了一些用戶特征后，你最終得到幾個主要功能，恭喜你在做正確的事情：好的iOS應用應該是高度聚焦在能幫用戶完成的任務上的。
例如，即使第一步想出的那些可能需要的功能都是有用的，也不一定是第二步定義的目標用戶需要的。
當你在目標用戶的使用情境下檢查功能清單時，就可以判斷你的應用應該聚焦在三個主要功能上：創建清單，獲得并使用優惠劵，獲得食譜。
此時你就可以給出應用定義了，總結該應用為誰做和做什么。食品雜貨購買應用的定義可能如下：
“為熱愛烹飪且節儉的用戶訂制的創建購物清單工具。”
4.不止于此
應用定義應該貫穿于整個開發過程，使用應用定義確定功能，控件，措辭的合理性。例如：
當你想要新增一個功能時，問問自己這對應用的主要目的和目標用戶是否非常重要。如果不是，可以置之不理。例如，你已經確定了你的用戶對大膽新穎的烹飪方法感興趣，那么著重展示盒裝蛋糕和現成的食物就不太合適。
當你考慮用戶界面的外觀和操作時，問問你自己你的用戶更喜歡簡單的、流線型的風格，還是有明顯主題的風格。以用 戶目標為指導，理解用戶期望通過你的應用完成什么，例如快速找到答案，找到深入而全面的內容或者娛樂。例如，盡管你的食品雜貨清單應用需要易于理解和快速 上手，但你的用戶還是可能傾向于一個有關食物的主題界面。
當你考慮應該使用怎樣的措辭時，考慮用戶在這個領域的專業程度。例如，盡管你的用戶可能不是由專業的大廚組成，但你也可以肯定他們希望看到有關食材和技術專用的措辭。
最好的iOS應用根據清晰的目標和易用性來平衡用戶界面的設計。為了達到這種平衡，要確保在設計階段前期就考慮定制化。因為考慮品牌性，原創性和適銷性通常會影響定制化的決策，所以專注于定制化怎樣影響用戶體驗是難的。
開始考慮應用中的任務：用戶執行這些任務的頻率如何，在什么樣的環境下進行？
舉個例子，想象一個計算器應用使用的是精心設計的，充滿藝術感的風格，并且使用了創新的層級去顯示大家熟悉的計算元素。這像藝術品一樣的細節渲染和 創新層級并不會影響用戶去理解怎樣點擊按鈕和查看計算結果。但是對于只是簡單的需要完成工作的用戶，這種新奇的體驗和美麗的界面很快就會失去效用，并且可 能成為一種妨礙。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210520761.png)
相反，隨身錄音室應用(GarageBand)可以不展示好看的、逼真的樂器來幫助用戶制作音樂，但這樣會使應用缺少身臨其境的愉悅感。在隨身錄音室里，界面不只是向用戶展示了如何使用，同樣使得制作音樂的主任務更容易完成。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210543478-590x333.png)
當你思考定制化如何增強或減弱用戶完成任務的注意力時，記住以下幾點：
定制總要有緣由。理想情況下，定制化的用戶界面能促進用戶完成任務并增強他們的體驗。你最好盡可能的用任務驅動定制化決策。
盡量避免增加用戶的認知負擔。用戶對標準界面元素的外觀和行為都已經很熟悉了，所以他們不用停下來思考如何使用它們。當用戶面對外觀和行為與標準不同的元素時，他們就失去了經驗的優勢。除非你的的元素能夠使任務更容易完成，否則用戶很可能不喜歡被強制學習一些在其他應用都不通用的步驟。
保持內部的一致性。你的應用中自定義元素越多，保持這些元素外觀和行為的一致性就越重要。如果用戶花費時間去學習了你創建的那些不熟悉的控件，那么他們會希望新學到的這些操作能夠在整個應用中通用。
總是以內容為重點。因為標準元素很熟悉，所以它們不會分散用戶在內容上的注意力。當你自定義用戶界面時，注意確保界面元素不會搶走用戶對內容的注意力。例如，如果你的應用允許用戶觀看視頻，你可能選擇設計一個自定義的重播控件。但是不管你用的是自定義還是標準的重播控件，都沒有它是否在用戶開始觀看后隱藏點擊屏幕后出現來的重要。
在對標準控件進行重設計時再三思考。如果你不只是想自定義標準控件，而是想重設計，確保你的重設計能提供盡可能多的信息。例如，你設計了一個開關控件，它沒有可以指明相反狀態存在的信息，那么用戶很可能意識不到這是個有兩個狀態的控件。
一定要徹底測試自定義的界面元素。在測試過程中，近距離的觀察用戶是否能預測你的元素如何使用以及是否能容易的 與它們交互。例如，如果你創建的控件的可點擊區域小于44 x 44像素，用戶點擊時就會有困難。或者如果你創建了一個視圖對點擊和滑動的反饋不一樣，確保這個視圖提供的功能值得用戶去額外關注交互的不同。
在你投入工程資源實現設計之前，最好先創建原型來進行用戶測試。即使只有幾個同事來幫你測試原型，你也會收獲一些關于應用功能和用戶體驗的新鮮觀點。
在設計的早期階段，你可以使用紙質的原型或者線框圖去呈現主要的視圖和控件，并且標明每個頁面之間的跳轉關系。你可以從線框圖測試中獲得一些有用的反饋，但是線框圖的稀疏性有可能會誤導用戶。因為用戶很難想象當線框被實際內容填滿時體驗會有什么樣的變化。
如果你有一個可以在設備上運行的原型，那你可以得到更多有用的反饋。當用戶能在設備上與你的原型進行交互時，他們能更容易的發現應用中哪里功能不滿足預期，哪里體驗過于復雜。
創建可靠原型的最簡單的方法是使用基于故事版的Xcode模板創建一個基礎應用，然后使用一些類似于占位符的內容來進行填充。(故事版可以涵蓋應用中的所有界面，并且包括界面之間的跳轉關系。)接著，將這個原型導入到設備中，這樣被測者就可以有一個盡可能真實的體驗了。
你不需要在原型中提供大量的實際內容或者使每一個控件都可用，但是你確實需要營造足夠的情境來保證真實的體驗。并且需要在典型用戶體驗和非典型的邊 緣情況之間做好平衡。例如，如果你的應用需要處理很長的列表項，你的原型就不能只顯示一兩個條目。而且在用戶測試交互中，只要被測者能夠點擊屏幕上的一個 區域進入到下一個邏輯頁面或者完成主任務，那他們就可能提供更有建設性的反饋。
當你使用Xcode應用模板來創建原型時，你可以免費使用很多功能，并且它可以相對容易的進行設計中的響應反饋調節。在你確定設計方案并投入資源進行實現之前，應該對原型進行多次迭代測試。想要開始學習Xcode，請參考Xcode Overview.
桌面版的Keynote 應用是一個十分強大而又靈活的應用，可以創建非常優秀的幻燈片。人們喜愛Keynote將簡單易用與細粒度的操作結合進而控制無數細節的方式，如動畫和文本屬性等。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210617922-590x356.png)
iPad版的Keynote提取了桌面版Keynote的核心要素，并通過創造以下的用戶體驗使它在iPad上更舒適：
Keynote用戶能很快理解如何使用iPad版，是因為它使用了iPad原生的范例，符合了用戶對功能上的預期。新用戶可以用簡單、自然的方式直接操控內容，所以可以很容易學會如何使用iPad版的Keynote.
Keynote從桌面版向iPad版的轉變是基于從細節到整體的大量修改和重新設計的。以下是一些明顯的修改：
流線型的工具欄。工具欄中只有少數的元素，但是它們是用戶在創建內容時所需的所有功能和工具的統一入口。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210649867-590x25.png){kind=small}
簡化并優先響應用戶焦點的檢查器。對于用戶所選的需要修改的對象，iPad版的Keynote能自動控制其工具 和屬性。(譯者注：特別是根據當前的操作對象而有限選擇某些工具。)通常，人們可以在第一檢查器視圖中完成他們需要的所有修改操作。如果他們需要修改那些 不常用的屬性，他們可以下拉另一個檢查器視圖來進行。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210710109.png)
豐富的預設樣式集。人們可以利用預設的樣式很簡單地改變對象(如表格或圖表)的外觀或者感覺。除了顏色之外，每個集中，例如表格的標題和軸區分標識等的預設屬性都被設計得與整體的主題和諧一致。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210729757.png)
直接操作內容，豐富有意義的動畫。在iPad版的Keynote中，用戶可以拖動滑塊到一個新的位置，可以扭動 旋轉一個對象，也可以輕擊圖片來選中它。iPad版Keynote的響應動畫進一步加強了這種可直接操作的印象。例如，用戶在移動某個滑塊時它通常會暫 停，而當它被放置在一個新的位置時，環繞在周圍的滑塊將會向外擴散給它留出空間。
郵件應用是OS X中一款好用而又廣受好評的常見應用。它也是一個很強大的程序，可以允許用戶撰寫、接收、分類和存儲郵件，追蹤行動和事件，也可以編寫備忘錄和邀請等。桌面版的郵件應用通過一系列的窗口提供了這些強大的功能。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210759227.jpg)
iPhone版的郵件專注于桌面版郵件的核心功能，幫助人們接收、撰寫、發送和組織他們的信息。為了塑造移動iPhone版的郵件應用，將這些功能濃縮在為其量身定制的界面之中，做了如下的工作：
必須明白的是，相對于桌面版的郵件應用來說，iPhone版的郵件應用不是(注：或者說并不需要是)一個更好的應用，而是為移動端用戶重新設計的郵件應用。iPhone版的郵件應用專注于桌面版的功能子集并將它們呈現在一個吸引人的精簡界面之中，據此為移動端的用戶提供了核心的郵件體驗。
為了使郵件應用的體驗能適應移動場景，iPhone版的郵件應用在幾個關鍵的方面革新了用戶界面。
直接、高度專注的頁面。每個頁面顯示了郵件應用體驗的一個方面：賬戶列表、郵箱列表、消息列表、消息查看和編輯視圖。用戶可以在一個屏幕內滑動查看完整的內容。
![[ISUX譯]iOS 9人機界面指南(二)：設計策略](http://www.mobileui.cn/blog/uploads/2015/11/20151102210832802-590x321.png)
簡單、可預期的導航。通過每屏的一次點擊，用戶可以逐層展開綜合內容(賬戶列表)進入具體頁面(一封消息)。每個頁面會顯示一個標題用以指示用戶所在的位置，以及一個返回按鈕用以更容易地回溯到他們之前的步驟。
需要時即可獲取的、簡單的點擊性控件。基本上在任何場景之下，編寫郵件和查閱新郵件都是人們首要希望進行的操作，因此iPhone版的郵件應用保證了這兩個功能在多個頁面中都可以便利地進行。當用戶查看一封消息時，就會顯示諸如回復、移動和刪除等對消息的操作。
針對不同任務的不同類型的反饋。當人們刪除一封消息時，它會動態地進入垃圾桶圖標中。當人們發送一封消息時，可以看到它的發送過程；而當發送結束時，人們可以聽到一個特別的聲音提示。通過消息列表頁面工具欄的副標題，用戶通過簡單一瞥就可以查看郵箱上次更新的時間。
iOS版的Safari應用在iOS設備上提供了出眾的移動網頁瀏覽體驗。人們喜歡閱讀清晰的文字和圖片，也希望能通過旋轉設備或者捏合和點擊屏幕來調整視圖。
基于標準建立的網站可以在iOS設備上顯示得很好。特別是那些能偵測設備并不需要插件的網站可以同時在iPhone和iPad上都表現得很好，兩者之間不會需要太多的修改，即使有也很小。
除此之外，成功的網站應具備以下的特性：
有時候，額外的一些修改可以(使頁面)更合理。例如，在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.)
本章英文原文訪問地址：iOS Human Interface Guidelines
本章中文翻譯PDF下載：點此下載
感謝你的閱讀，本文出處 騰訊ISUX