藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

來源：莫貝網(wǎng)

譯者注：本文譯自蘋果官方人機(jī)界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由騰訊ISUX設(shè)計(jì)師翻譯整理，非發(fā)文者一人之作。譯文首發(fā)于ISUX博客，如在閱讀過程中發(fā)現(xiàn)錯誤與疏漏之處，歡迎不吝指出。后續(xù)章節(jié)會陸續(xù)更新，敬請期待。

上期：《iOS 9人機(jī)界面指南（一）：UI設(shè)計(jì)基礎(chǔ)》

文章索引

• 2.1 設(shè)計(jì)原則(Design Principles)
• 2.1.1 美學(xué)完整性(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 從概念到產(chǎn)品(From Concept to Product)
• 2.2.1 定義應(yīng)用(Define Your App)
• 2.2.2 為任務(wù)量身訂制界面(Tailor Customization to the Task)
• 2.2.3 原型 & 迭代(Prototype & Iterate)
• 2.3 案例學(xué)習(xí)：從桌面到iOS(Case Study: From Desktop to iOS)
• 2.3.1 iPad版Keynote應(yīng)用(Keynote on iPad)
• 2.3.2 iPhone版郵件應(yīng)用(Mail on iPhone)
• 2.3.3 iOS系統(tǒng)內(nèi)的網(wǎng)頁內(nèi)容(Web Content in iOS)

 

2.1 設(shè)計(jì)原則(Design Principles)

2.1.1 美學(xué)完整性(Aesthetic Integrity)

美學(xué)完整性不評判應(yīng)用的視覺設(shè)計(jì)，也不是用來描述應(yīng)用的風(fēng)格特征。美學(xué)完整性是指在一款應(yīng)用的視覺表現(xiàn)和交互行為與功能結(jié)合后所傳達(dá)出的整體一致性。

人們關(guān)心應(yīng)用是否提供了應(yīng)有的功能，但是也會潛移默化甚至是很直接地被應(yīng)用的視覺表現(xiàn)和交互行為所影響。舉個例子，一款協(xié)助用戶完成任務(wù)的應(yīng)用，可 以通過使用精美而又無干擾的裝飾性元素、標(biāo)準(zhǔn)的控件和可預(yù)期的交互行為很好地幫助用戶聚焦在任務(wù)本身上。這樣，應(yīng)用就能傳達(dá)出清晰而一致的信息，使得人們 信任它。但是，如果應(yīng)用使用干擾的、瑣碎的或隨意的UI來呈現(xiàn)任務(wù)，那么人們可能會對其可靠性和可信賴度產(chǎn)生懷疑。

另一方面，在沉浸式應(yīng)用中—例如游戲—用戶期待驚艷的視覺表現(xiàn)，為用戶帶來樂趣和刺激，并鼓勵用戶進(jìn)行探索。用戶不是要在游戲中完成嚴(yán)肅的或程序式的任務(wù)，他們更期待游戲的視覺表現(xiàn)和交互行為與當(dāng)前的目的進(jìn)行整合。

2.1.2 一致性(Consistency)

一致性可以讓人們在一款應(yīng)用中的不同部分甚至不同應(yīng)用間復(fù)用使用同樣的認(rèn)知和技能。一款具備一致性的應(yīng)用不應(yīng)盲從地復(fù)制其他應(yīng)用，也不應(yīng)在風(fēng)格上一成不變。相反，它們專注于讓人們覺得舒適的標(biāo)準(zhǔn)和范例，并提供應(yīng)用內(nèi)部統(tǒng)一的體驗(yàn)。

在判斷一款iOS應(yīng)用是否要遵守一致性原則時，請思考如下問題：

• 應(yīng)用是否和iOS標(biāo)準(zhǔn)一致？是否正確地使用了系統(tǒng)提供的控件、視圖和圖標(biāo)？是否按照用戶所預(yù)期的方式整合了設(shè)備的特性？
• 應(yīng)用是否內(nèi)部統(tǒng)一？文案是否使用了一致的措辭和風(fēng)格？同樣的圖標(biāo)是否表意相同？在不同的位置執(zhí)行同樣的操作時，人們是否能能預(yù)期會發(fā)生什么？應(yīng)用中自定義的UI元素是否在外觀和行為上保持一致？
• 應(yīng)用是否和先前的版本保持一致？條款和意義是否保持不變？基本概念和主要功能是否發(fā)生了變化？

2.1.3 直接操作(Direct Manipulation)

當(dāng)人們不再使用一堆控件進(jìn)行操作，而是直接在屏幕上操作對象時，他們能更集中精力完成任務(wù)，也更容易理解這些行為所產(chǎn)生的結(jié)果。

使用多點(diǎn)觸摸界面，人們可以通過捏合操作來直接放大和縮小圖片或文本內(nèi)容。在游戲中，玩家可以直接與屏幕上的對象進(jìn)行交互。例如，游戲中可能會顯示密碼鎖，用戶可以通過轉(zhuǎn)動它來打開。

在一款iOS應(yīng)用中，如下情況中人們應(yīng)該能夠進(jìn)行直接操作：

• 旋轉(zhuǎn)或者移動設(shè)備來影響屏幕上的對象
• 使用手勢來操作屏幕上的對象
• 顯示即時可視的操作反饋

2.1.4 反饋(Feedback)

反饋可以明示人們的行為，呈現(xiàn)操作結(jié)果，并更新于任務(wù)進(jìn)程之中。

 

iOS內(nèi)置的應(yīng)用對用戶的每個行為都提供了可感知的反饋。當(dāng)人們點(diǎn)擊列表項(xiàng)和控件時，它們會被臨時高亮，并會在操作過程中持續(xù)一段時間，以此展示控件被執(zhí)行的過程。

精細(xì)的動畫會給人們帶來有意義的反饋，幫助闡明行為的結(jié)果。例如，列表中新增一項(xiàng)時的動畫可以從視覺上幫助人們發(fā)現(xiàn)列表的變化。

音效同樣可以為人們提供有效的反饋，但不應(yīng)成為唯一的反饋方式，因?yàn)槿藗儾灰欢苈牭健?/span>

2.1.5 隱喻(Metaphors)

當(dāng)應(yīng)用中的虛擬對象和交互行為與用戶已經(jīng)熟悉的體驗(yàn)相似時—無論這些體驗(yàn)是來源于真實(shí)或數(shù)字生活—用戶就可以快速地掌握如何來使用這個應(yīng)用。

當(dāng)應(yīng)用使用隱喻來傳達(dá)某種用法或體驗(yàn)時，最好不要讓隱喻突破所依賴的對象或交互行為本身的限制。(譯者注：此處可理解為對于隱喻的使用應(yīng)量力而為，不要過于牽強(qiáng)。)

由于人們實(shí)際上是和屏幕進(jìn)行物理上的交互，所以iOS應(yīng)用有很大的余地來使用隱喻。iOS中的隱喻包括：

• 移動分層視圖來顯示被遮擋的內(nèi)容
• 拖曳、輕掃和滑動游戲中的對象
• 點(diǎn)擊開關(guān)，滑動滑塊，轉(zhuǎn)動選擇器
• 輕掃來翻閱書本或雜志

2.1.6 用戶控制(User Control)

是人—而不是應(yīng)用—發(fā)起和控制行為。應(yīng)用可以對用戶進(jìn)行操作建議，對有危害的后果予以警示，但是不應(yīng)替用戶來做決策。好的應(yīng)用會在用戶需要時給予幫助和避免不必要的結(jié)果之間作出平衡。

當(dāng)對應(yīng)用的交互行為和控件都較為熟悉和可預(yù)期時，用戶會覺得應(yīng)用更易上手。那些簡單直白的交互行為更容易被用戶所理解和記住。

人們會希望在一個操作被執(zhí)行之前有足夠的機(jī)會來取消，也希望在執(zhí)行一個不可逆的操作之前可以有機(jī)會來進(jìn)行確認(rèn)。最后，人們還會希望能夠停止正在執(zhí)行中的操作。

 

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

2.2.1 定義應(yīng)用(Define Your App)

應(yīng)用的定義是對應(yīng)用主要功能和目標(biāo)用戶的簡明具體的描述。

盡可能早的創(chuàng)建應(yīng)用的定義可以幫助你將一個想法和功能清單轉(zhuǎn)換為用戶想要的條理清晰的產(chǎn)品。在開發(fā)過程中，可以使用定義來決定某些功能和行為是否合理。使用以下幾個步驟來創(chuàng)建一個可靠的應(yīng)用定義。

1.列出所有你認(rèn)為用戶可能喜歡的功能

可以直接進(jìn)行頭腦風(fēng)暴。此時，你需要列出所有與產(chǎn)品核心想法有關(guān)的任務(wù)。不用擔(dān)心清單太長，因?yàn)榻酉聛頃M(jìn)行刪減。

假設(shè)你一開始的想法是開發(fā)一個幫助人們購買食品雜貨的應(yīng)用。你可以思考在進(jìn)行這項(xiàng)活動時，會涉及到那些相關(guān)的任務(wù)，這些就是用戶可能感興趣的潛在功能。例如：

• 創(chuàng)建清單
• 查找食譜
• 比較價格
• 定位商店
• 給食譜做注釋
• 查找并使用的優(yōu)惠劵
• 查看烹飪演示
• 探索不同的烹調(diào)方法
• 尋找某些食材的替代物

2.確定目標(biāo)用戶

現(xiàn)在你需要清楚的將你的應(yīng)用用戶與其他iOS用戶區(qū)分開來。確定在此情此景下，什么是對你的用戶最重要的。在食品雜貨例子中，你可能需要問問你的用戶：

• 通常是在家里做飯還是更喜歡現(xiàn)成的食物
• 是忠實(shí)的優(yōu)惠券用戶還是認(rèn)為優(yōu)惠券沒多大價值
• 喜歡尋找特別的食材還是喜歡基本食材
• 嚴(yán)格的按照食譜做菜還是只把食譜當(dāng)做靈感來源
• 喜歡少量多次購買還是一次性購買大量食物
• 希望能保留多個不同目的的購物清單還是只希望記錄回家路上需要購買的幾個東西
• 堅(jiān)持使用固定的品牌還是會使用方便的替代品
• 習(xí)慣于購買固定的一些物品還是會按照食譜來購買

思考過這些問題之后，假設(shè)你可以提取出目標(biāo)用戶的三個特征：喜歡按照食譜進(jìn)行嘗試，時常很匆忙，通常情況下比較節(jié)儉。

3.根據(jù)目標(biāo)用戶過濾功能清單

如果在確定了一些用戶特征后，你最終得到幾個主要功能，恭喜你在做正確的事情：好的iOS應(yīng)用應(yīng)該是高度聚焦在能幫用戶完成的任務(wù)上的。

例如，即使第一步想出的那些可能需要的功能都是有用的，也不一定是第二步定義的目標(biāo)用戶需要的。

當(dāng)你在目標(biāo)用戶的使用情境下檢查功能清單時，就可以判斷你的應(yīng)用應(yīng)該聚焦在三個主要功能上：創(chuàng)建清單，獲得并使用優(yōu)惠劵，獲得食譜。

此時你就可以給出應(yīng)用定義了，總結(jié)該應(yīng)用為誰做和做什么。食品雜貨購買應(yīng)用的定義可能如下：

“為熱愛烹飪且節(jié)儉的用戶訂制的創(chuàng)建購物清單工具。”

4.不止于此

應(yīng)用定義應(yīng)該貫穿于整個開發(fā)過程，使用應(yīng)用定義確定功能，控件，措辭的合理性。例如：

當(dāng)你想要新增一個功能時，問問自己這對應(yīng)用的主要目的和目標(biāo)用戶是否非常重要。如果不是，可以置之不理。例如，你已經(jīng)確定了你的用戶對大膽新穎的烹飪方法感興趣，那么著重展示盒裝蛋糕和現(xiàn)成的食物就不太合適。

當(dāng)你考慮用戶界面的外觀和操作時，問問你自己你的用戶更喜歡簡單的、流線型的風(fēng)格，還是有明顯主題的風(fēng)格。以用 戶目標(biāo)為指導(dǎo)，理解用戶期望通過你的應(yīng)用完成什么，例如快速找到答案，找到深入而全面的內(nèi)容或者娛樂。例如，盡管你的食品雜貨清單應(yīng)用需要易于理解和快速 上手，但你的用戶還是可能傾向于一個有關(guān)食物的主題界面。

當(dāng)你考慮應(yīng)該使用怎樣的措辭時，考慮用戶在這個領(lǐng)域的專業(yè)程度。例如，盡管你的用戶可能不是由專業(yè)的大廚組成，但你也可以肯定他們希望看到有關(guān)食材和技術(shù)專用的措辭。

2.2.2 為任務(wù)量身訂制界面(Tailor Customization to the Task)

最好的iOS應(yīng)用根據(jù)清晰的目標(biāo)和易用性來平衡用戶界面的設(shè)計(jì)。為了達(dá)到這種平衡，要確保在設(shè)計(jì)階段前期就考慮定制化。因?yàn)榭紤]品牌性，原創(chuàng)性和適銷性通常會影響定制化的決策，所以專注于定制化怎樣影響用戶體驗(yàn)是難的。

開始考慮應(yīng)用中的任務(wù)：用戶執(zhí)行這些任務(wù)的頻率如何，在什么樣的環(huán)境下進(jìn)行？

舉個例子，想象一個計(jì)算器應(yīng)用使用的是精心設(shè)計(jì)的，充滿藝術(shù)感的風(fēng)格，并且使用了創(chuàng)新的層級去顯示大家熟悉的計(jì)算元素。這像藝術(shù)品一樣的細(xì)節(jié)渲染和 創(chuàng)新層級并不會影響用戶去理解怎樣點(diǎn)擊按鈕和查看計(jì)算結(jié)果。但是對于只是簡單的需要完成工作的用戶，這種新奇的體驗(yàn)和美麗的界面很快就會失去效用，并且可 能成為一種妨礙。

相反，隨身錄音室應(yīng)用(GarageBand)可以不展示好看的、逼真的樂器來幫助用戶制作音樂，但這樣會使應(yīng)用缺少身臨其境的愉悅感。在隨身錄音室里，界面不只是向用戶展示了如何使用，同樣使得制作音樂的主任務(wù)更容易完成。

當(dāng)你思考定制化如何增強(qiáng)或減弱用戶完成任務(wù)的注意力時，記住以下幾點(diǎn)：

定制總要有緣由。理想情況下，定制化的用戶界面能促進(jìn)用戶完成任務(wù)并增強(qiáng)他們的體驗(yàn)。你最好盡可能的用任務(wù)驅(qū)動定制化決策。

盡量避免增加用戶的認(rèn)知負(fù)擔(dān)。用戶對標(biāo)準(zhǔn)界面元素的外觀和行為都已經(jīng)很熟悉了，所以他們不用停下來思考如何使用它們。當(dāng)用戶面對外觀和行為與標(biāo)準(zhǔn)不同的元素時，他們就失去了經(jīng)驗(yàn)的優(yōu)勢。除非你的的元素能夠使任務(wù)更容易完成，否則用戶很可能不喜歡被強(qiáng)制學(xué)習(xí)一些在其他應(yīng)用都不通用的步驟。

保持內(nèi)部的一致性。你的應(yīng)用中自定義元素越多，保持這些元素外觀和行為的一致性就越重要。如果用戶花費(fèi)時間去學(xué)習(xí)了你創(chuàng)建的那些不熟悉的控件，那么他們會希望新學(xué)到的這些操作能夠在整個應(yīng)用中通用。

總是以內(nèi)容為重點(diǎn)。因?yàn)闃?biāo)準(zhǔn)元素很熟悉，所以它們不會分散用戶在內(nèi)容上的注意力。當(dāng)你自定義用戶界面時，注意確保界面元素不會搶走用戶對內(nèi)容的注意力。例如，如果你的應(yīng)用允許用戶觀看視頻，你可能選擇設(shè)計(jì)一個自定義的重播控件。但是不管你用的是自定義還是標(biāo)準(zhǔn)的重播控件，都沒有它是否在用戶開始觀看后隱藏點(diǎn)擊屏幕后出現(xiàn)來的重要。

在對標(biāo)準(zhǔn)控件進(jìn)行重設(shè)計(jì)時再三思考。如果你不只是想自定義標(biāo)準(zhǔn)控件，而是想重設(shè)計(jì)，確保你的重設(shè)計(jì)能提供盡可能多的信息。例如，你設(shè)計(jì)了一個開關(guān)控件，它沒有可以指明相反狀態(tài)存在的信息，那么用戶很可能意識不到這是個有兩個狀態(tài)的控件。

一定要徹底測試自定義的界面元素。在測試過程中，近距離的觀察用戶是否能預(yù)測你的元素如何使用以及是否能容易的 與它們交互。例如，如果你創(chuàng)建的控件的可點(diǎn)擊區(qū)域小于44 x 44像素，用戶點(diǎn)擊時就會有困難?；蛘呷绻銊?chuàng)建了一個視圖對點(diǎn)擊和滑動的反饋不一樣，確保這個視圖提供的功能值得用戶去額外關(guān)注交互的不同。

2.2.3 原型 & 迭代(Prototype & Iterate)

在你投入工程資源實(shí)現(xiàn)設(shè)計(jì)之前，最好先創(chuàng)建原型來進(jìn)行用戶測試。即使只有幾個同事來幫你測試原型，你也會收獲一些關(guān)于應(yīng)用功能和用戶體驗(yàn)的新鮮觀點(diǎn)。

在設(shè)計(jì)的早期階段，你可以使用紙質(zhì)的原型或者線框圖去呈現(xiàn)主要的視圖和控件，并且標(biāo)明每個頁面之間的跳轉(zhuǎn)關(guān)系。你可以從線框圖測試中獲得一些有用的反饋，但是線框圖的稀疏性有可能會誤導(dǎo)用戶。因?yàn)橛脩艉茈y想象當(dāng)線框被實(shí)際內(nèi)容填滿時體驗(yàn)會有什么樣的變化。

如果你有一個可以在設(shè)備上運(yùn)行的原型，那你可以得到更多有用的反饋。當(dāng)用戶能在設(shè)備上與你的原型進(jìn)行交互時，他們能更容易的發(fā)現(xiàn)應(yīng)用中哪里功能不滿足預(yù)期，哪里體驗(yàn)過于復(fù)雜。

創(chuàng)建可靠原型的最簡單的方法是使用基于故事版的Xcode模板創(chuàng)建一個基礎(chǔ)應(yīng)用，然后使用一些類似于占位符的內(nèi)容來進(jìn)行填充。(故事版可以涵蓋應(yīng)用中的所有界面，并且包括界面之間的跳轉(zhuǎn)關(guān)系。)接著，將這個原型導(dǎo)入到設(shè)備中，這樣被測者就可以有一個盡可能真實(shí)的體驗(yàn)了。

你不需要在原型中提供大量的實(shí)際內(nèi)容或者使每一個控件都可用，但是你確實(shí)需要營造足夠的情境來保證真實(shí)的體驗(yàn)。并且需要在典型用戶體驗(yàn)和非典型的邊 緣情況之間做好平衡。例如，如果你的應(yīng)用需要處理很長的列表項(xiàng)，你的原型就不能只顯示一兩個條目。而且在用戶測試交互中，只要被測者能夠點(diǎn)擊屏幕上的一個 區(qū)域進(jìn)入到下一個邏輯頁面或者完成主任務(wù)，那他們就可能提供更有建設(shè)性的反饋。

當(dāng)你使用Xcode應(yīng)用模板來創(chuàng)建原型時，你可以免費(fèi)使用很多功能，并且它可以相對容易的進(jìn)行設(shè)計(jì)中的響應(yīng)反饋調(diào)節(jié)。在你確定設(shè)計(jì)方案并投入資源進(jìn)行實(shí)現(xiàn)之前，應(yīng)該對原型進(jìn)行多次迭代測試。想要開始學(xué)習(xí)Xcode，請參考Xcode Overview.

 

2.3 案例學(xué)習(xí)：從桌面到iOS(Case Study: From Desktop to iOS)

2.3.1 iPad版Keynote應(yīng)用(Keynote on iPad)

桌面版的Keynote 應(yīng)用是一個十分強(qiáng)大而又靈活的應(yīng)用，可以創(chuàng)建非常優(yōu)秀的幻燈片。人們喜愛Keynote將簡單易用與細(xì)粒度的操作結(jié)合進(jìn)而控制無數(shù)細(xì)節(jié)的方式，如動畫和文本屬性等。

iPad版的Keynote提取了桌面版Keynote的核心要素，并通過創(chuàng)造以下的用戶體驗(yàn)使它在iPad上更舒適：

• 專注于用戶輸入的內(nèi)容
• 通過削減功能降低系統(tǒng)的復(fù)雜度
• 提供有用而又令人愉悅的快捷操作
• 延續(xù)桌面版本的體驗(yàn)
• 利用動人的動畫提供良好的反饋與交流

Keynote用戶能很快理解如何使用iPad版，是因?yàn)樗褂昧薸Pad原生的范例，符合了用戶對功能上的預(yù)期。新用戶可以用簡單、自然的方式直接操控內(nèi)容，所以可以很容易學(xué)會如何使用iPad版的Keynote.

Keynote從桌面版向iPad版的轉(zhuǎn)變是基于從細(xì)節(jié)到整體的大量修改和重新設(shè)計(jì)的。以下是一些明顯的修改：

流線型的工具欄。工具欄中只有少數(shù)的元素，但是它們是用戶在創(chuàng)建內(nèi)容時所需的所有功能和工具的統(tǒng)一入口。

簡化并優(yōu)先響應(yīng)用戶焦點(diǎn)的檢查器。對于用戶所選的需要修改的對象，iPad版的Keynote能自動控制其工具 和屬性。(譯者注：特別是根據(jù)當(dāng)前的操作對象而有限選擇某些工具。)通常，人們可以在第一檢查器視圖中完成他們需要的所有修改操作。如果他們需要修改那些 不常用的屬性，他們可以下拉另一個檢查器視圖來進(jìn)行。

豐富的預(yù)設(shè)樣式集。人們可以利用預(yù)設(shè)的樣式很簡單地改變對象(如表格或圖表)的外觀或者感覺。除了顏色之外，每個集中，例如表格的標(biāo)題和軸區(qū)分標(biāo)識等的預(yù)設(shè)屬性都被設(shè)計(jì)得與整體的主題和諧一致。

直接操作內(nèi)容，豐富有意義的動畫。在iPad版的Keynote中，用戶可以拖動滑塊到一個新的位置，可以扭動 旋轉(zhuǎn)一個對象，也可以輕擊圖片來選中它。iPad版Keynote的響應(yīng)動畫進(jìn)一步加強(qiáng)了這種可直接操作的印象。例如，用戶在移動某個滑塊時它通常會暫 停，而當(dāng)它被放置在一個新的位置時，環(huán)繞在周圍的滑塊將會向外擴(kuò)散給它留出空間。

2.3.2 iPhone版郵件應(yīng)用(Mail on iPhone)

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

iPhone版的郵件專注于桌面版郵件的核心功能，幫助人們接收、撰寫、發(fā)送和組織他們的信息。為了塑造移動iPhone版的郵件應(yīng)用，將這些功能濃縮在為其量身定制的界面之中，做了如下的工作：

• 將人們的內(nèi)容前置和居中的合理化呈現(xiàn)
• 專為處理不同任務(wù)而設(shè)計(jì)的不同視圖
• 易于瀏覽并符合認(rèn)知的信息結(jié)構(gòu)
• 適時提供強(qiáng)大的編輯和組織性工具
• 用微妙且動人的動畫來傳達(dá)動作和提供反饋

必須明白的是，相對于桌面版的郵件應(yīng)用來說，iPhone版的郵件應(yīng)用不是(注：或者說并不需要是)一個更好的應(yīng)用，而是為移動端用戶重新設(shè)計(jì)的郵件應(yīng)用。iPhone版的郵件應(yīng)用專注于桌面版的功能子集并將它們呈現(xiàn)在一個吸引人的精簡界面之中，據(jù)此為移動端的用戶提供了核心的郵件體驗(yàn)。

為了使郵件應(yīng)用的體驗(yàn)?zāi)苓m應(yīng)移動場景，iPhone版的郵件應(yīng)用在幾個關(guān)鍵的方面革新了用戶界面。

直接、高度專注的頁面。每個頁面顯示了郵件應(yīng)用體驗(yàn)的一個方面：賬戶列表、郵箱列表、消息列表、消息查看和編輯視圖。用戶可以在一個屏幕內(nèi)滑動查看完整的內(nèi)容。

簡單、可預(yù)期的導(dǎo)航。通過每屏的一次點(diǎn)擊，用戶可以逐層展開綜合內(nèi)容(賬戶列表)進(jìn)入具體頁面(一封消息)。每個頁面會顯示一個標(biāo)題用以指示用戶所在的位置，以及一個返回按鈕用以更容易地回溯到他們之前的步驟。

需要時即可獲取的、簡單的點(diǎn)擊性控件。基本上在任何場景之下，編寫郵件和查閱新郵件都是人們首要希望進(jìn)行的操作，因此iPhone版的郵件應(yīng)用保證了這兩個功能在多個頁面中都可以便利地進(jìn)行。當(dāng)用戶查看一封消息時，就會顯示諸如回復(fù)、移動和刪除等對消息的操作。

針對不同任務(wù)的不同類型的反饋。當(dāng)人們刪除一封消息時，它會動態(tài)地進(jìn)入垃圾桶圖標(biāo)中。當(dāng)人們發(fā)送一封消息時，可以看到它的發(fā)送過程；而當(dāng)發(fā)送結(jié)束時，人們可以聽到一個特別的聲音提示。通過消息列表頁面工具欄的副標(biāo)題，用戶通過簡單一瞥就可以查看郵箱上次更新的時間。

2.3.3 iOS系統(tǒng)內(nèi)的網(wǎng)頁內(nèi)容(Web Content in iOS)

iOS版的Safari應(yīng)用在iOS設(shè)備上提供了出眾的移動網(wǎng)頁瀏覽體驗(yàn)。人們喜歡閱讀清晰的文字和圖片，也希望能通過旋轉(zhuǎn)設(shè)備或者捏合和點(diǎn)擊屏幕來調(diào)整視圖。

基于標(biāo)準(zhǔn)建立的網(wǎng)站可以在iOS設(shè)備上顯示得很好。特別是那些能偵測設(shè)備并不需要插件的網(wǎng)站可以同時在iPhone和iPad上都表現(xiàn)得很好，兩者之間不會需要太多的修改，即使有也很小。

除此之外，成功的網(wǎng)站應(yīng)具備以下的特性：

• 如果頁面寬度需要匹配設(shè)備寬度，可以設(shè)置合適的視窗(viewport)來適應(yīng)設(shè)備
• 避免CSS中固定的定位，以便當(dāng)用戶縮放或拖動頁面時內(nèi)容無法被移出屏幕
• 擁有一套基于觸控操作的用戶界面，而不是依賴基于傳統(tǒng)點(diǎn)擊操作的交互

有時候，額外的一些修改可以(使頁面)更合理。例如，在iOS系統(tǒng)中，很多網(wǎng)頁應(yīng)用會設(shè)置合適的視窗(viewport)寬度并通常隱藏Safari的UI。如欲了解如何進(jìn)行這些修改，參見Safari Web Content Guide章節(jié)中的Configuring the Viewport和Configuring Web Applications.

網(wǎng)站也可以通過其他的方法適配桌面網(wǎng)頁到iOS端的Safari瀏覽器中：

使鍵盤適應(yīng)iOS端的Safari. 當(dāng)鍵盤和格式輔助信息出現(xiàn)時，iPhone上的Safari應(yīng)用會將你的網(wǎng)頁顯示在URL地址下方和鍵盤與格式輔助信息上方。

使彈出式菜單適應(yīng)iOS端的Safari.在 桌面版的Safari應(yīng)用中，彈出式菜單會包含很多選項(xiàng)，就如在其他OS X應(yīng)用中一樣。在必要的情況下，菜單展開后可以超出應(yīng)用窗口的邊界以顯示其中的所有選項(xiàng)。在iOS版的Safari應(yīng)用中，彈出式菜單由原生的元素所呈 現(xiàn)，這樣能提供更好的用戶體驗(yàn)。例如，在iPhone上，彈出式菜單會出現(xiàn)在選擇器(picker)當(dāng)中，選擇器里會一個用戶可選擇的選項(xiàng)列表。(欲了解 更多選擇器控件的內(nèi)容，可以參見Picker.)

本章英文原文訪問地址：iOS Human Interface Guidelines

本章中文翻譯PDF下載：點(diǎn)此下載