臨時視圖

警告框

警告框用于告知用戶一些會影響到他們使用 app 或設(shè)備的重要信息。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/160.png" alt="" />

API 提示：

如需在代碼中使用警告框，你可以創(chuàng)建 UIAlertController 并且指定 UIAlertControllerStyleAlert.

警告框：

• 必須包含標(biāo)題，有時候會包含正文文本
• 包含一個或多個按鈕 一般來說，警告框警告出現(xiàn)的頻率較低，也正因為如此，警告的出現(xiàn)通常會讓用戶額外重視。請嚴(yán)格控制你的 app 中警告的個數(shù)，并且保證每一個警告都能提供重要的信息，或者有用的選項。

避免出現(xiàn)不必要的警告框。一般來說，在以下情景中，是不需要用到警告框的：

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/161.png" alt="" />

當(dāng)你在設(shè)計警告文案的時候，了解以下這些定義非常有用：

• 標(biāo)題式大寫(Title-style capitalization)指的是除了冠詞，并列連詞以及少于4個字母且不處在第一個單詞位置上的介詞外，標(biāo)題中每個單詞的首字母均大寫。
• 句子式大寫(Sentence-style capitalization)指的是第一個字母大寫，其余除了專有名詞和專有形容詞外的字母均小寫 簡明扼要地描述當(dāng)前情景，并告訴用戶他們可以做什么。理想情況下，警告框中的文字應(yīng)該給與用戶足夠的情景和上下文聯(lián)想，讓他們可以清楚地知道為什么警告會出現(xiàn)，同時幫助他們判斷自己應(yīng)該點哪個按鈕。

保證標(biāo)題足夠簡短，最好在一行之內(nèi)。過長的標(biāo)題讓用戶很難快速理解它的意思，還可能會被截斷。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/162.png" alt="" />

避免單個字的標(biāo)題。單字標(biāo)題，例如：錯誤，或警告，幾乎不能提供任何有用信息。

如果可以的話，使用句子片段而非完整的句子。一個簡潔清晰的狀態(tài)描述往往比一個完整的句子更容易理解。

盡可能的精煉你的標(biāo)題文字，讓警告框即使沒有下面的正文信息也能完全讓用戶理解。舉個例子，當(dāng)你使用一個問題，或者兩個短句來作為警告框標(biāo)題的話，很可能你并不需要添加文本信息。

不用刻意避免在警告框中使用消極負(fù)面的文案。用戶們理解大多數(shù)警告框是為了告訴他們發(fā)生的問題，或者對他們目前的狀態(tài)作出警告。因此消極但清晰直接的文案優(yōu)于積極但晦澀間接的文案。

盡可能地避免使用“你”，“你的”，“我”，“我的”這類字眼。有時候，這些直接指向的字眼容易引起歧義，有時候甚至?xí)徽`認(rèn)為是一種冒犯。 適當(dāng)?shù)厥褂么髮懞蜆?biāo)點符號，尤其是在以下這些場景中：

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/163.png" alt="" />

如果你必須為警告框添加正文文本，請使用一個完整的短句。可能的話，盡量保證句子在1到2行之間。如果句子太長，用戶會需要滾動才能看完，這樣的體驗很糟。使用句子式大寫，并在句末加上適當(dāng)?shù)臉?biāo)點符號。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/164.png" alt="" />

避免在文本中詳細(xì)描述“該按哪個按鈕”而導(dǎo)致文本過長。理想情況下，表意明確的警告文案和邏輯清晰的按鈕文案已經(jīng)足以讓用戶正確判斷自己該按哪個按鈕了。但如果你一定要在文案中描述這些內(nèi)容，請遵循以下原則：

• 確定使用輕擊(tap)來描述這個選擇操作，不要用觸摸(touch)、點擊(click)或者選擇(choose)這類字眼。
• 不要用引號，但保證大寫 確保警告框在豎屏和橫屏中均顯示正常。橫屏模式下警告框的高度會受到限制，其大小與豎屏下可能會有區(qū)別。我們推薦您限定好警告框的最大高度，保證在豎屏和橫屏模式下文字均能不需要滾動便可完整地顯示。

一般情況下，使用兩個按鈕的警告框。兩個按鈕的警告框是最為常見和有用的，因為它最便于用戶在兩個按鈕中做選擇。單按鈕警告框不那么有用，因為它通常只是起到告知的作用，并未給予用戶控制當(dāng)前狀態(tài)的能力。多于兩個按鈕的警告框太過復(fù)雜，應(yīng)該盡可能地避免使用。如果你在警告框中設(shè)計了太多按鈕，它也許會導(dǎo)致警告框被強(qiáng)制滾動，這也是一個非常糟糕的體驗。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/165.png" alt="" />

提示

如果你需要在警告框中給與用戶超過2個選項，可以考慮使用操作列表來代替警告框。

正確地放置按鈕。理想情況下，最容易點擊也最不容易點錯的按鈕符合兩個條件：它代表了用戶最可能會選擇的操作，即使用戶一時不注意誤點了它，也不會造成嚴(yán)重問題。尤其是：

• 如果這個按鈕不會造成損害性結(jié)果，又是用戶最有可能會選擇的操作，那么它應(yīng)該放在右邊，取消按鈕則應(yīng)該放在左邊。
• 如果這個按鈕會造成損害性后果，又是用戶最有可能會選擇的操作，那么它應(yīng)該被放在左邊，取消按鈕應(yīng)該放在右邊。 提示

一般來說，當(dāng)警告框出現(xiàn)的時候，按 Home 鍵將會從該 app 里切回主屏幕，此時 Home 鍵的效果類似于取消按鈕——當(dāng)用戶回到 app 中的時候，警告框?qū)⑾?，操作也不會被?zhí)行。

為按鈕設(shè)計簡短而邏輯清晰的文案。好的按鈕文案一般只有1到2個單詞，描述用戶點擊按鈕后的結(jié)果。設(shè)計文案時可以遵循以下指南：

• 跟其它所有按鈕一樣，使用標(biāo)題式大寫，而且不需要標(biāo)點符號
• 盡可能的使用與警告文案直接相關(guān)的動詞或動詞詞組，如”取消(Cancel)”，”查看全部(View All)”，”回復(fù)(Reply)”和“忽略(Ignore)”等
• 當(dāng)沒有更好的選擇的時候，可以使用”O(jiān)K”.避免使用”是(Yes)”或”否(No)”。
• 避免使用”你”，“你的”，“我”，“我的”這類字眼。含有這些字眼的文案可能會指代不清，還有可能造成冒犯。

操作列表

操作列表展示了與用戶觸發(fā)的操作直接相關(guān)的一系列選項。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/166.png" alt="" />

API 提示：

如需在代碼中使用操作列表，你可以創(chuàng)建一個 UIAlertController.并指定 UIAlertControllerStyleActionSheet

操作列表：

• 由用戶某個操作行為觸發(fā)
• 包含兩個或以上的按鈕 使用操作列表來：

提供完成一項任務(wù)的不同方法。操作列表提供一系列在當(dāng)前情景下可以完成當(dāng)前任務(wù)的操作，而這樣的形式不會永久占用頁面 UI 的空間。

在用戶完成一項可能有風(fēng)險的操作前獲得用戶的確認(rèn)。操作列表讓用戶有機(jī)會停下來充分考慮當(dāng)前操作可能導(dǎo)致的危險結(jié)果，并為他們提供了一些其它的選項，尤其是在以下這些情景下：

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/167.png" alt="" />

使用紅色文字來表示可能存在破壞性的操作。在操作列表的頂部使用文字顏色為紅色的按鈕，因為越靠近列表頂部的操作越容易引起用戶注意。在 iPhone 里，潛在風(fēng)險的操作離列表底部越遠(yuǎn)，用戶在關(guān)注 Home 鍵的時候就越不容易誤點它。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/168.png" alt="" />

避免讓用戶滾動操作列表。如果你的操作列表中存在過多按鈕，用戶必須要滾動才能看完所有操作。這樣的體驗是可能讓用戶不安，因為他們要花更多的時間來充分理解每個選項的區(qū)別。此外，用戶在滾動的過程中將很有可能誤點其它按鈕。

模態(tài)視圖

模態(tài)視圖是一個以模態(tài)形式展現(xiàn)的視圖，它為當(dāng)前任務(wù)或當(dāng)前工作流程提供獨立的、自包含的(self-contained)功能。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/169.png" alt="" />

API 提示：

如需在代碼中使用模態(tài)視圖，你可以創(chuàng)建一個 UIPresentationController. 并指定適當(dāng)?shù)臉邮?完整的樣式列表，請參考 Modal Presentation Styles)

模態(tài)視圖：

• 能占據(jù)整個屏幕，它也可能占據(jù)整個父視圖(parent view)的區(qū)域，或者是屏幕的一部分
• 包含完成當(dāng)前任務(wù)所需的文字和控件
• 通常也會包含一個完成任務(wù)的按鈕（點擊后即可完成任務(wù)，當(dāng)前模態(tài)視圖也會消失），和一個取消按鈕（點擊后即放棄當(dāng)前任務(wù)，同時當(dāng)前模態(tài)視圖消失） 當(dāng)需要用戶完成與你的 app 中的基礎(chǔ)功能相關(guān)的、獨立的任務(wù)的時候，可以使用模態(tài)視圖。模態(tài)視圖尤其適用于那些所需元素并非常駐在 app 主要 UI 中、又包含多個步驟的子任務(wù)。

根據(jù)當(dāng)前任務(wù)的種類和你的 app 的整體視覺風(fēng)格來選擇適當(dāng)?shù)哪B(tài)視圖。你可以使用以下定義的任何一種模態(tài)視圖樣式：

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/170.png" alt="" />

不要讓模態(tài)視圖覆蓋在浮出層之上。除了警告框外，沒有任何元素應(yīng)該覆蓋在彈出層上面。除非極其少有的情況下，用戶在彈出層內(nèi)進(jìn)行的操作結(jié)果必須要以模態(tài)視圖的形式展現(xiàn)，即便是這個時候，也請先將彈出層關(guān)閉，再出現(xiàn)模態(tài)視圖。

確保你的模態(tài)視圖看起來與你的app的整體視覺風(fēng)格相協(xié)調(diào)。舉個例子，如果一個模態(tài)視圖中含有導(dǎo)航條和取消或完成任務(wù)的按鈕，這里的導(dǎo)航條樣式應(yīng)該與你的 app 中導(dǎo)航條一樣。

合適的話，在模態(tài)視圖里加入可以說明任務(wù)內(nèi)容的標(biāo)題。你可能還需要在模態(tài)視圖里加入一些補(bǔ)充文字，來清楚地闡明任務(wù)內(nèi)容，并提供一些任務(wù)指南。

選擇一個適當(dāng)?shù)倪^渡動畫來展示模態(tài)視圖。使用與你的 app 一致的過渡動畫，讓用戶可以準(zhǔn)確地理解當(dāng)前頁面內(nèi)容的轉(zhuǎn)變與模態(tài)視圖的出現(xiàn)。關(guān)于這一點，你可以指定以下任意一種過渡動畫：

• 垂直出現(xiàn)(Vertical).模態(tài)視圖從底部邊緣滑入屏幕，也同樣從屏幕底部滑出（默認(rèn)模式）。
• 彈出(Flip).當(dāng)前視圖從右往左水平滑動，露出模態(tài)視圖。從視覺上看，模態(tài)視圖好像原來就處于當(dāng)前視圖的下面，當(dāng)前視圖移開時，它便出現(xiàn)了。離開模態(tài)視圖時，原先的父視圖從左邊滑回屏幕右邊。 如果你要改變當(dāng)前的過渡動畫樣式，請確保這種改變對于用戶而言是有用而且有意義的。用戶很容易便能感知到這些改變，還會認(rèn)為這些改變存在特別的意義。最好能設(shè)計出一種符合邏輯并始終保持一致的過渡方式，讓用戶容易感知并且記憶。在沒有充分理由支持的情況下，最好不要改變這些默認(rèn)的過渡方式。