臨時(shí)視圖

臨時(shí)視圖

警告框

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

API 提示：

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

警告框：

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

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

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

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

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

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

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

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

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

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

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

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

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

一般情況下，使用兩個(gè)按鈕的警告框。兩個(gè)按鈕的警告框是最為常見和有用的，因?yàn)樗畋阌谟脩粼趦蓚€(gè)按鈕中做選擇。單按鈕警告框不那么有用，因?yàn)樗ǔＶ皇瞧鸬礁嬷淖饔?，并未給予用戶控制當(dāng)前狀態(tài)的能力。多于兩個(gè)按鈕的警告框太過復(fù)雜，應(yīng)該盡可能地避免使用。如果你在警告框中設(shè)計(jì)了太多按鈕，它也許會(huì)導(dǎo)致警告框被強(qiáng)制滾動(dòng)，這也是一個(gè)非常糟糕的體驗(yàn)。

提示

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

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

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

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

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

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

操作列表

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

API 提示：

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

操作列表：

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

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

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

使用紅色文字來表示可能存在破壞性的操作。在操作列表的頂部使用文字顏色為紅色的按鈕，因?yàn)樵娇拷斜眄敳康牟僮髟饺菀滓鹩脩糇⒁?。?iPhone 里，潛在風(fēng)險(xiǎn)的操作離列表底部越遠(yuǎn)，用戶在關(guān)注 Home 鍵的時(shí)候就越不容易誤點(diǎn)它。

避免讓用戶滾動(dòng)操作列表。如果你的操作列表中存在過多按鈕，用戶必須要滾動(dòng)才能看完所有操作。這樣的體驗(yàn)是可能讓用戶不安，因?yàn)樗麄円ǜ嗟臅r(shí)間來充分理解每個(gè)選項(xiàng)的區(qū)別。此外，用戶在滾動(dòng)的過程中將很有可能誤點(diǎn)其它按鈕。

模態(tài)視圖

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

API 提示：

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

模態(tài)視圖：

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

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

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

確保你的模態(tài)視圖看起來與你的app的整體視覺風(fēng)格相協(xié)調(diào)。舉個(gè)例子，如果一個(gè)模態(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ù)指南。

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

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