編輯導(dǎo)讀：iOS是運(yùn)行于iPhone、iPad和iPod touch設(shè)備上、最常用的移動操作系統(tǒng)之一。作為互聯(lián)網(wǎng)應(yīng)用的開發(fā)者、產(chǎn)品經(jīng)理、體驗(yàn)設(shè)計(jì)師，都應(yīng)當(dāng)理解并熟悉平臺的設(shè)計(jì)規(guī)范。這有利于提高我們的工作效率，保證用戶良好的體驗(yàn)。本文是iOS設(shè)計(jì)規(guī)范系列第4篇，介紹3大界面要素（欄、視圖、控件）中的視圖（Bars）。

iOS是運(yùn)行于iPhone、iPad和iPod touch設(shè)備上、最常用的移動操作系統(tǒng)之一。作為互聯(lián)網(wǎng)應(yīng)用的開發(fā)者、產(chǎn)品經(jīng)理、體驗(yàn)設(shè)計(jì)師，都應(yīng)當(dāng)理解并熟悉平臺的設(shè)計(jì)規(guī)范。這有利于提高我們的工作效率，保證用戶良好的體驗(yàn)。

本文是iOS設(shè)計(jì)規(guī)范系列第4篇，介紹3大界面要素（欄、視圖、控件）中的視圖（Views）。首先讓我們回顧一下iOS的3大界面要素。

3大界面要素(Interface Essentials)：

大多數(shù)iOS應(yīng)用都是由UI Kit中的組件構(gòu)建的。UI Kit是一種定義通用界面元素的編程框架，這個(gè)框架不僅讓APP在視覺外觀上保持一致，同時(shí)也為個(gè)性化設(shè)計(jì)留有很大空間。

UI Kit提供的界面組件有三類：欄（Bars），視圖（Views），控件（Controls）。

欄（Bars）：

欄，可以告訴用戶在APP中當(dāng)前在所在的位置、能提供導(dǎo)航，還可能包含用于觸發(fā)操作和傳遞信息的按鈕或其他元素。包括6種：導(dǎo)航欄、搜索欄、側(cè)邊欄、狀態(tài)欄、標(biāo)簽欄、工具欄。

視圖（Views）：包含用戶在APP中看到的基本內(nèi)容，例如：文本、圖片、動畫以及交互元素。視圖可以具有滾動、插入、刪除和排列等交互行為。

控件（Controls）：控件，是用于觸發(fā)操作并傳達(dá)信息的。例如：按鈕、開關(guān)、文本框和進(jìn)度條，都屬于典型的控件。

iOS的12種視圖（Views）：

一、動作表單（Action Sheets）

動作表單是一種特定的警示樣式，它表示與當(dāng)前上下文有關(guān)的兩個(gè)或多個(gè)選擇。在較小的屏幕上，動作表單會從屏幕底部向上滑動。在較大的屏幕上，動作表會以彈出框的形式同時(shí)出現(xiàn)。

1. 在執(zhí)行潛在的破壞性操作之前，請使用操作表請求確認(rèn)。如果是非破壞性的操作可以使用下拉菜單（控件的一種，后面會講到）。
2. 提供“取消”按鈕，使人們可以重新考慮破壞性操作?！叭∠卑粹o應(yīng)出現(xiàn)在動作表單的底部。
3. 突出顯示破壞性選擇。將紅色用于執(zhí)行破壞性或危險(xiǎn)操作的按鈕，并將這些按鈕顯示在動作表單的頂部。
4. 避免讓操作表滾動。如果表單選項(xiàng)太多，用戶必須滾動才能看到所有選項(xiàng)。但滾動需要用戶額外花時(shí)間來做出選擇，而且很容易造成誤點(diǎn)。

二、活動視圖（Activity Views）

活動視圖通常出現(xiàn)在當(dāng)前上下文中，而活動便是一項(xiàng)任務(wù)，例如復(fù)制、收藏、查找。一旦啟動，活動可以立即執(zhí)行任務(wù)，或者在之前頁面的基礎(chǔ)上訪問更多信息?；顒佑苫顒右晥D管理，以工作表或彈出窗口的形式顯示，具體取決于設(shè)備和方向?；顒颖挥脕斫o用戶在APP中執(zhí)行一些自定義服務(wù)或任務(wù)。

iOS系統(tǒng)提供了許多內(nèi)置活動，包括Print、Message和AirPlay。這些任務(wù)總是首先出現(xiàn)在活動視圖中，無法重新排序。你不必為執(zhí)行這些內(nèi)置任務(wù)而去創(chuàng)建自定義活動?；顒右晥D還顯示其他APP的共享和操作擴(kuò)展。

1. 設(shè)計(jì)簡單的模板圖像來展示自定義的活動。模板圖像使用Mask來創(chuàng)建圖標(biāo)。使用具有適當(dāng)透明度和抗鋸齒效果的黑白，并且不包括陰影。模板圖像應(yīng)集中在約70px×70px的區(qū)域中。
2. 使用簡單的活動標(biāo)題來描述你的任務(wù)。標(biāo)題顯示在活動視圖中的圖標(biāo)下方。短標(biāo)題最好。當(dāng)標(biāo)題太長時(shí)，iOS首先縮小文本，然后如果標(biāo)題仍然太長直接將其截?cái)?。一般來說，請避免在標(biāo)題中包含你的公司名稱或產(chǎn)品名稱。
3. 確?；顒舆m合當(dāng)前上下文。雖然系統(tǒng)提供的任務(wù)無法在活動中重新排序，但如果它們不適用于你的APP，則可以將其屏蔽。例如：要阻止用戶打印圖像，你可以屏蔽“打印”活動。您還可以定義在給定的時(shí)間內(nèi)顯示哪些自定義任務(wù)。
4. 使用“操作”按鈕顯示活動視圖。人們習(xí)慣于點(diǎn)擊“操作”按鈕來訪問系統(tǒng)提供的活動。用戶習(xí)慣在點(diǎn)擊“功能”按鈕時(shí)彈出活動視圖。所以如果必是必須，盡量不要使用其他方法。

三、警示框（Alerts）

警示框主要用來傳達(dá)與APP或設(shè)備狀態(tài)相關(guān)的重要信息，并且通常會請求反饋。警示框由標(biāo)題、可選消息、一個(gè)或多個(gè)按鈕以及用于收集用戶輸入信息的可選文本字段組成。除了這些可配置的元素外，警示框的視覺外觀是靜態(tài)的，無法自定義的。

1. 盡量少用警示框。警示框會破壞用戶體驗(yàn)，只在重要情況下使用，例如確認(rèn)購買和破壞性操作（例如刪除）或通知用戶相關(guān)問題。嚴(yán)格控制警示框的數(shù)量，有助于讓用戶更認(rèn)真對待它。確保每個(gè)警示框都是提供關(guān)鍵的信息和有用的選擇。
2. 兩個(gè)方向都要測試警示框。在橫向模式和縱向模式下，警示框可能會有所不同。優(yōu)化警示框文本，使其在任何方向上都無需滾動就能很好地閱讀。

警示框標(biāo)題和內(nèi)容：

1. 盡可能寫一些短小的、描述性比較強(qiáng)的多文本警告標(biāo)題。屏幕上需要閱讀的文字應(yīng)該越少越好，可以嘗試編寫一個(gè)標(biāo)題并且避免添加額外的信息。因?yàn)閱巫謽?biāo)題很少會提供有用的信息，所以可以考慮以問問題或使用短句的方式，盡可能的將標(biāo)題保留在同一行上。通過大小寫及標(biāo)點(diǎn)符號來共同完成文本語句，而且需要注意不要在句子中間使用結(jié)束標(biāo)點(diǎn)符號。
2. 如果你必須提供信息，盡可能寫簡短完整的句子。盡量保持消息足夠短，盡量保持在一兩行之內(nèi)避免滾動，注意語句大小寫及標(biāo)點(diǎn)符號。
3. 避免使用帶有指責(zé)、批判、或侮辱性的詞語。人們知道警告會告訴他們問題的緊急和危險(xiǎn)情況，所以依然要使用友好的語氣，因?yàn)橹苯诱娴膽B(tài)度要比消極負(fù)面的態(tài)度有效果的多。避免使用代詞，如你，你，我，和我的等，它有時(shí)會比較容易被誤解為侮辱或不尊重。
4. 避免去解釋警告按鈕的作用。如果的的警告文本和按鈕標(biāo)題是明確的，那么就不需要去解釋按鈕是做什么的。除非在極少的情況下，必須提供指導(dǎo)，那么可以用“點(diǎn)擊”這個(gè)詞，在引用按鈕時(shí)保持大寫，不要在引號中包含按鈕標(biāo)題。

警示框按鈕：

1. 使用雙按鈕警示。雙按鈕警示框給予了用戶一個(gè)比較容易的雙選項(xiàng)的選擇方式。單按鈕通常只是告知信息，可操作性比較低。但如果3個(gè)或更多按鈕的話，會讓警示框變得很復(fù)雜并且可能需要滾動，這是一種不友好的用戶體驗(yàn)。如果2個(gè)按鈕滿足不了你的需求的話，你可以考慮使用動作表單（Action Sheets）。
2. 警示框按鈕的標(biāo)題要簡潔明了、合乎邏輯。最合適的按鈕標(biāo)題由一個(gè)或兩個(gè)詞語組成，用于描述選擇按鈕后的結(jié)果。對于所有的按鈕標(biāo)題，使用標(biāo)題樣式的文字且不需要標(biāo)點(diǎn)符號。盡可能使用與警示框標(biāo)題和警示框內(nèi)容直接相關(guān)的動詞和動詞短語。例如：查看全部、回復(fù)或忽略。使用”好的“也可以被接受，但不要使用”是“和”否“。
3. 將按鈕放置在人們期望的位置。一般而言，人們最有可能點(diǎn)擊的按鈕應(yīng)位于右側(cè)。取消按鈕應(yīng)始終位于左側(cè)。
4. 正確標(biāo)記取消按鈕。取消警報(bào)操作的按鈕應(yīng)始終標(biāo)記為“取消”。
5. 識別破壞性按鈕。如果警示框按鈕含有破壞性操作（例如刪除內(nèi)容），請將按鈕的樣式設(shè)計(jì)為“破壞性”（例如紅色字體），以便系統(tǒng)進(jìn)行適當(dāng)?shù)母袷皆O(shè)置。此外，提供“取消”按鈕，以便用戶可以安全地退出破壞性操作。將“取消”按鈕作為默認(rèn)按鈕，并使用粗體文本。
6. 允許用戶通過退出APP到主屏幕來取消警示框。當(dāng)警示框出現(xiàn)時(shí)，退出到主屏幕可以退出APP。這個(gè)操作產(chǎn)生與點(diǎn)擊取消按鈕的效果是相同的。即警示框被取消，且不執(zhí)行任何操作。如果你的警示框沒有“取消”按鈕，至少要保留這種取消警示框的交互方式。

四、集合（Collections）

集合主要用來管理一系列有序的內(nèi)容，例如一組照片，并以可自定義和高度可視化的布局呈現(xiàn)。因?yàn)榧蠜]有強(qiáng)制執(zhí)行嚴(yán)格的線性格式，所以它特別適合顯示大小不同的項(xiàng)。

一般來說，集合非常展示基于圖像的內(nèi)容?？梢赃x擇性地呈現(xiàn)背景和其他裝飾性的視圖，用以區(qū)分項(xiàng)目的子集。

集合支持交互性和動畫。默認(rèn)情況下，你可以點(diǎn)按以選擇、觸摸并按住進(jìn)行編輯，然后滑動進(jìn)行滾動。

如有需要，還可以添加更多手勢來執(zhí)行自定義操作。在集合中，插入、刪除或重新排序項(xiàng)目，都可以啟用動畫，并且還支持自定義動畫。

1. 當(dāng)標(biāo)準(zhǔn)行或網(wǎng)格布局足夠時(shí)，避免創(chuàng)建新的設(shè)計(jì)。集合應(yīng)該是用來優(yōu)化用戶體驗(yàn)的，而不是成為關(guān)注的焦點(diǎn)。集合應(yīng)該讓用戶松選擇項(xiàng)目更方便。如果在你的集合中很難找到某個(gè)條目，用戶會感到沮喪并失去興趣。在內(nèi)容周圍使用足夠的填充，以保持布局整齊并防止內(nèi)容重疊。
2. 集合的方式不適用于文本信息，文本信息可以用列表。相對于集合，文本信息展示在一個(gè)可滾動的列表中，瀏覽起來會更簡單和有效。
3. 謹(jǐn)慎進(jìn)行動態(tài)布局變更。集合的布局是可以隨時(shí)更改的。但需要注意的是，如果你是在用戶進(jìn)行查看集合或者正在與之進(jìn)行交互時(shí)來更改動態(tài)布局的話，請確保更改是有意義的且是易于跟蹤的。

無意義的布局更改可能會使APP看起來不可預(yù)測且難以使用。如果由于布局改變而改變了用戶的使用語境，用戶可能會覺得迷失。

五、圖像視圖（Image Views）

圖像視圖是在透明或不透明背景上，顯示的單個(gè)圖像或動畫圖像序列。在圖像視圖中，圖像可以被拉伸、縮放、調(diào)整大小以適合或固定到特定位置。默認(rèn)情況下，圖像視圖是不可進(jìn)行交互的。

如果可能的話，請確保動畫序列中的所有圖像大小一致。理想情況下，應(yīng)對圖像進(jìn)行預(yù)分類以適應(yīng)視圖，避免系統(tǒng)再進(jìn)行任何縮放。如果系統(tǒng)必須執(zhí)行縮放，那么所有圖像具有相同的大小和形狀時(shí)，最容易實(shí)現(xiàn)。

六、頁面視圖（Pages）

頁面視圖控制器提供了一種在內(nèi)容頁面之間實(shí)現(xiàn)線性導(dǎo)航的方式，例如在文檔、書籍、記事本或日歷中。頁面視圖控制器可以使用滾動或頁面卷曲兩種樣式的任意一種完成頁面之間的轉(zhuǎn)場過渡。

如果需要，可以自定義一種非線性的導(dǎo)航方法。使用頁面視圖控制器時(shí)，頁面只能按順序跳轉(zhuǎn)，而跨頁面之間是無法跳轉(zhuǎn)的。如果用戶想要不按順序訪問頁面，你可以自定義控件來實(shí)現(xiàn)此功能。

七、浮層/彈出視圖（Popovers）

浮層通常是當(dāng)用戶點(diǎn)擊屏幕上某個(gè)內(nèi)容的控制點(diǎn)或區(qū)域時(shí)，在其上方出現(xiàn)的瞬態(tài)視圖。通常浮層上會有個(gè)指向其出現(xiàn)位置的箭頭。浮層分為非模態(tài)的和模態(tài)的。非模態(tài)浮層可以通過點(diǎn)擊屏幕上浮層以外的部分或浮層上的按鈕來取消/關(guān)閉。而模態(tài)浮層則是通過點(diǎn)擊浮層上的取消或其他按鈕來關(guān)閉/取消的。

浮層適合大屏幕上，可以包含各種元素，包括導(dǎo)航欄、工具欄、標(biāo)簽欄、表格、集合、圖像、地圖和自定義視圖。當(dāng)浮層出現(xiàn)時(shí)，其他視圖的交互行為會被禁止，直到浮層被取消/關(guān)閉。使用浮層所顯示的內(nèi)容要與當(dāng)前頁面中的內(nèi)容關(guān)聯(lián)。例如：當(dāng)你點(diǎn)擊“操作”按鈕時(shí)，許多iPad應(yīng)用會彈出一個(gè)浮層（如下圖）。

1. 盡量不要在iPhone上使用浮層。一般來說，浮層主要應(yīng)用于iPad上的APP(聚焦用戶注意力）。在iPhone的APP中，通常會使用全屏模態(tài)視圖來呈現(xiàn)信息，而不是彈出浮層來節(jié)省空間。通過在全屏模式視圖中顯示信息而不是在彈出窗口中來利用所有可用屏幕空間。
2. 使用“關(guān)閉”按鈕僅用于確認(rèn)和指導(dǎo)。如果傳達(dá)的含義足夠清晰明確，可以使用“關(guān)閉”按鈕（例如“取消”或“完成”），例如退出是否保存更改。若無存在的必要，彈出窗口應(yīng)自動關(guān)閉。當(dāng)用戶點(diǎn)擊浮層之外的區(qū)域或浮層中的關(guān)閉/取消按鈕時(shí)，浮層應(yīng)該關(guān)閉。如果可以進(jìn)行多次選擇，則浮層還是要保持打開狀態(tài)，直到用戶有意識地對它進(jìn)行關(guān)閉。
3. 自動關(guān)閉非模式彈出窗口時(shí)，請務(wù)必保存當(dāng)前任務(wù)。通過點(diǎn)擊屏幕非浮層區(qū)域部分，很容易誤點(diǎn)而關(guān)閉非模態(tài)彈出窗口。僅當(dāng)用戶點(diǎn)擊取消按鈕時(shí)才取消當(dāng)前的任務(wù)。
4. 在屏幕適當(dāng)?shù)奈恢蔑@示浮層。浮層的箭頭應(yīng)盡可能直接指向觸發(fā)它的元素。因?yàn)楦硬荒茉谄聊簧贤蟿?，所以浮層不能覆蓋屏幕上太多內(nèi)容。也不能覆蓋觸發(fā)它的元素。
5. 一次只顯示一個(gè)浮層。顯示多個(gè)浮層會使界面混亂不堪。永遠(yuǎn)不要顯示一個(gè)有層級關(guān)系的浮層，或一個(gè)浮層接著又彈出一個(gè)浮層。如果你需要顯示另一個(gè)浮層，請先關(guān)閉當(dāng)前浮層。
6. 警示框除外，不要在浮層上顯示其他視圖。除了警示框，浮層上不應(yīng)顯示任何視圖。
7. 如果可能的話，讓用戶在一次點(diǎn)擊中關(guān)閉一個(gè)浮層，同時(shí)打開另一個(gè)浮層。避免額外的點(diǎn)擊，尤其是需要在多個(gè)不同的項(xiàng)目欄中打開浮層時(shí)。
8. 避免浮層太大。浮層不應(yīng)該占據(jù)整個(gè)屏幕，足以顯示其內(nèi)容并指向觸發(fā)按鈕即可。請注意，系統(tǒng)可能會調(diào)整浮層的大小，以確保它適合屏幕。
9. 確保自定義的浮層與系統(tǒng)提供的浮層類似。盡管可以自定義浮層，但是也應(yīng)該避免創(chuàng)建看起來都不像是浮層的設(shè)計(jì)。當(dāng)浮層接近系統(tǒng)浮層時(shí)，往往效果最好。
10. 當(dāng)需要改變浮層的大小時(shí)，提供一個(gè)平滑過渡的方案。一些浮層對于相同信息提供了精簡視圖和擴(kuò)展視圖兩種展示方式。如果你調(diào)整浮層的大小，請為更改設(shè)置一些動畫，以避免用戶產(chǎn)生新浮層替換舊浮層的意識。

八、滾動視圖（Scroll Views）

滾動視圖主要被用戶用來去瀏覽那些像文檔中的文本，集合中的圖像等比顯示區(qū)域要大的內(nèi)容。當(dāng)用戶進(jìn)行翻閱、輕擊、拖拽、點(diǎn)擊以及縮放等交互行為時(shí)，滾動視圖會隨之進(jìn)行放大縮小等與之對應(yīng)的變化。

滾動視圖本身沒有可視化界面，但是其會隨著用戶的滾動顯示滾動條。同時(shí)滾動視圖也可以被設(shè)置為頁面模式，此時(shí)滾動視圖便可以以頁面翻轉(zhuǎn)的形式進(jìn)行新舊頁面間的切換。

1. 恰當(dāng)?shù)闹С挚s放交互行為。在確保有意義的前提下，支持用戶通過縮放或雙擊進(jìn)行縮放。當(dāng)滾動視圖的縮放選項(xiàng)被打開時(shí)，設(shè)置比較合適的最大及最小值。例如：放大文本直到一個(gè)單一的字符充滿整個(gè)屏幕，即使其可能對于大部分應(yīng)用來說是沒有意義的。
2. 當(dāng)滾動視圖處于頁面模式時(shí)考慮顯示頁面控制元素。頁面元素通常會顯示有多少頁面，多少屏，或者多少數(shù)量的內(nèi)容是當(dāng)前可用及可見的。如果你在滾動視圖中顯示頁面控制元素，則需要關(guān)閉滾動視圖中的滾動條以免為用戶帶來困擾。
3. 不要在一個(gè)滾動視圖中放置另一個(gè)滾動視圖。這樣做帶來的后果主要為會產(chǎn)生一個(gè)不可預(yù)期的用戶界面，從而控制起來會變得非常困難。
4. 同一時(shí)刻只顯示一個(gè)滾動視圖。用戶經(jīng)常會在滾動時(shí)使用非常大幅度的動作，如此便會非常難以避免在同一屏幕中對相鄰的滾動視圖進(jìn)行交互操作。所以如果你需要在一個(gè)屏幕中放置兩個(gè)滾動視圖時(shí)，盡量考慮允許它們在不同的方向進(jìn)行滾動，如此可能對其相互間的影響是最小的。

例如：當(dāng)iPhone處于水平方向時(shí)，股票類應(yīng)用程序會在垂直方向支持滾動來展示特定公司的股票行情。

九、分列視圖（Split Views）

分列視圖管理應(yīng)用程序頂層的分層內(nèi)容的呈現(xiàn)。分列視圖由一個(gè)兩列或三列的界面組成，分別顯示一個(gè)主列，一個(gè)可選的補(bǔ)充列和一個(gè)輔助內(nèi)容窗格。主列中的更改將導(dǎo)致可選補(bǔ)充列中內(nèi)容的更改。分列視圖對于瀏覽內(nèi)容層次結(jié)構(gòu)的多個(gè)級別很有用，例如通過橫穿收件箱列表和郵件，來查看每個(gè)郵件的內(nèi)容。

分列視圖可以顯示各種內(nèi)容，但是許多系統(tǒng)應(yīng)用程序（例如Mail）都使用拆分視圖來創(chuàng)建基于邊欄的界面。在這種類型的界面中，主要列顯示側(cè)邊欄，可選補(bǔ)充列顯示列表視圖，輔助內(nèi)容窗格顯示有關(guān)所選內(nèi)容的詳細(xì)信息。

1. 在iPad上，使用拆分視圖而不是標(biāo)簽欄。拆分視圖提供與選項(xiàng)卡欄相同的快速導(dǎo)航，同時(shí)更好地利用了大屏幕。
2. 為每種類型的列選擇適當(dāng)?shù)臉邮?。對于顯示側(cè)欄的主列，請使用側(cè)欄外觀。此外觀適用于應(yīng)用程序級導(dǎo)航和集合列表，例如Mail中的郵箱。對于顯示列表視圖的補(bǔ)充列，請使用普通邊欄外觀。這種外觀適合于單個(gè)內(nèi)容的列表，例如郵箱中的消息。
3. 在主要和補(bǔ)充列中持續(xù)突出顯示任務(wù)選擇。盡管輔助窗格的內(nèi)容可以更改，但它應(yīng)始終與其他列中可清楚識別的選擇相對應(yīng)。這種選擇有助于人們理解列之間的關(guān)系并保持自己的方向。
4. 如果合適，允許人們在列之間拖放內(nèi)容。由于拆分視圖提供了對多個(gè)層次結(jié)構(gòu)的訪問權(quán)限，因此人們可以通過在列之間拖放項(xiàng)目來將內(nèi)容從應(yīng)用程序的一個(gè)部分快速移動到另一部分。

十、表單（Tables）

表單通常通過單行或多行的形式，對數(shù)據(jù)進(jìn)行分組分類展示。表單可以簡潔、高效地展示大量或少量信息。一般而言，表格是基于文本的內(nèi)容的理想選擇，并且通常作為導(dǎo)航視圖顯示在拆分視圖的一側(cè)，而相關(guān)內(nèi)容顯示在另一側(cè)。

表單分類iOS有三種樣式的列表，平級、分組、插入分組。

平級。行可以被分隔為不同標(biāo)記的部分，并且會有索引標(biāo)記顯示在屏幕右側(cè)。頁眉可以出現(xiàn)在一節(jié)中的第一項(xiàng)之前，頁腳可以出現(xiàn)在最后一項(xiàng)之后。

分組列表。行以分組的形式顯示，組的上方可以出現(xiàn)頁眉，下方則可以出現(xiàn)頁腳。此樣式的列表至少包含一個(gè)組，每個(gè)組至少包含一行。分組列表一般不包含索引標(biāo)記。

插入分組。行以具有圓角的組顯示，并從父視圖的邊緣插入。這種樣式的表始終包含至少一組，并且每組始終包含至少一行，并且可以在其后跟一個(gè)頁眉和一個(gè)頁腳。插入分組表不包含索引。插入的分組樣式在常規(guī)寬度的環(huán)境中效果最佳。因?yàn)樵诰o湊的環(huán)境中空間較小，所以插入的分組表可能會導(dǎo)致文本換行，尤其是在內(nèi)容本地化時(shí)。

設(shè)計(jì)規(guī)范：

1. 注意列表的寬度。過于狹窄的列表可能導(dǎo)致文字沒法連續(xù)，這樣便會使用戶很難閱讀，并且難以在垂直方向像快速瀏覽。同樣，過寬的列表也一樣可能難以閱讀和掃描，并且可能占用內(nèi)容空間。
2. 快速顯示列表內(nèi)容。在顯示內(nèi)容之前，不要讓用戶等待大量的列表內(nèi)容加載。先用文本數(shù)據(jù)填充屏幕行，再顯示更復(fù)雜的數(shù)據(jù)（如圖像）。這種方式可以立即為用戶提供有用的信息，并提APP的感知響應(yīng)能力。某些情況下，在新數(shù)據(jù)加載出來之前，先展示之前的舊數(shù)據(jù)也是有意義的。
3. 在內(nèi)容加載時(shí)配以進(jìn)度條指示進(jìn)度。如果列表的數(shù)據(jù)需要一段時(shí)間才能加載出來，請顯示進(jìn)度條或旋轉(zhuǎn)加載器（俗稱的小菊花），以向用戶保證APP仍在運(yùn)行。
4. 保持內(nèi)容新鮮性?？梢钥紤]定期更新表格內(nèi)容，及時(shí)展示新的數(shù)據(jù)。但不要改變滾動的位置。相反，將內(nèi)容添加到表的開頭或結(jié)尾，讓用戶在準(zhǔn)備好時(shí)滾動到它。一些APP在加載新數(shù)據(jù)時(shí)會顯示一個(gè)加載器，并提供一個(gè)直接跳轉(zhuǎn)到該數(shù)據(jù)的控件。最好還包括一個(gè)刷新控件，這樣用戶就可以隨時(shí)手動進(jìn)行更新。
5. 避免將索引與包含右對齊元素的表單結(jié)合在一起。索引一般通過大的滑動手勢來控制的。如果附近存在其他交互元素，例如顯示指示器，則在出現(xiàn)手勢時(shí)很難辨別用戶的意圖，并且可能會激活錯(cuò)誤的元素。

表單中的行使用標(biāo)準(zhǔn)表格單元格樣式來定義內(nèi)容在表格行中的顯示方式。

基礎(chǔ)列表（默認(rèn)）：行的左側(cè)顯示圖像，其后緊跟左對齊標(biāo)題。對于不需要顯示其他附加信息的項(xiàng)目來說，這是一種很好的選擇。

子標(biāo)題模式：同一行中，包含左對齊標(biāo)題和標(biāo)題下面的左對齊文本。這種樣式適用于視覺上相似的列表。而加上子標(biāo)題有利于區(qū)分行與行。

右側(cè)子標(biāo)題：左對齊標(biāo)題，右對齊子標(biāo)題，位于同一行。

左側(cè)子標(biāo)題：右對齊標(biāo)題，左對齊子標(biāo)題，位于同一行。

以上所有系統(tǒng)提供的標(biāo)準(zhǔn)列表單元格樣式，同樣都支持圖形元素，例如勾選圖標(biāo)或其他指示性控件。當(dāng)然，添加這些元素會減少標(biāo)題和子標(biāo)題的可用空間。

1. 保持文本言簡意賅，避免顯示不全。顯示不全的文字和詞語很難被閱讀和理解。超長的文本被截?cái)嘣谒斜砀駟卧駱邮街卸际亲詣拥?，只是根?jù)你使用的單元格樣式和發(fā)生截?cái)嗟奈恢茫赡軙霈F(xiàn)或多或少的問題。
2. 可為“刪除”按鈕自定義標(biāo)題。如果某行支持刪除并且有助于提供清晰性，請將系統(tǒng)提供的刪除標(biāo)題替換為自定義標(biāo)題。
3. 在用戶做出選擇時(shí)給予相應(yīng)的反饋。用戶在與列表進(jìn)行交互時(shí)，希望被點(diǎn)擊的列表可以突出顯示。然后，用戶還會期待出現(xiàn)新的視圖或者要改變的東西，例如已勾選按鈕，是表示用戶已經(jīng)做出了選擇。
4. 為非標(biāo)準(zhǔn)表行設(shè)計(jì)自定義表格單元格樣式。系統(tǒng)提供的這些標(biāo)準(zhǔn)單元格樣式，很適合在各種常見場景中使用，但某些內(nèi)容或某個(gè)APP有可能需要大量自定義的單元格樣式。

十一、文本視圖（Text Views）

文本視圖主要用以顯示多行樣式的文本內(nèi)容。文本視圖可以是任何高度，并可以通過滾動的方式顯示額外的內(nèi)容。

默認(rèn)情況下，文本視圖中的文本是左對齊的，并使用黑色的系統(tǒng)字體。如果文本視圖可編輯，則在視圖內(nèi)部點(diǎn)擊時(shí)，屏幕下方會彈出鍵盤。

1. 保持文字清晰。雖然你可以使用各種類型的字體、顏色以及對齊方式，但必須保持內(nèi)容的可讀性。采用動態(tài)類型文本是個(gè)好辦法，這樣如果用戶在設(shè)備上更改文字大小，你的文本內(nèi)容仍然會有友好的體驗(yàn)。還應(yīng)該在啟用了輔助功能選項(xiàng)（例如粗體文本）的情況下測試內(nèi)容單顯示情況。
2. 顯示恰當(dāng)?shù)逆I盤類型。iOS提供了幾種不同的鍵盤類型，每種鍵盤都對應(yīng)著一種具體的輸入方式。為了用戶可以流暢地進(jìn)行數(shù)據(jù)輸入，在編輯文本視圖期間顯示的鍵盤，應(yīng)該適合于該字段中的內(nèi)容類型。例如，輸入支付密碼彈出的是數(shù)字鍵盤。

十二、網(wǎng)頁視圖（Web Views）

網(wǎng)頁視圖可以在APP中加載和顯示豐富的網(wǎng)頁內(nèi)容。例如：嵌入式HTML和網(wǎng)站；郵箱APP使用網(wǎng)頁視圖來在消息中顯示HTML內(nèi)容。

適當(dāng)?shù)厥褂们斑M(jìn)和后退導(dǎo)航。網(wǎng)頁視圖支持前進(jìn)和后退導(dǎo)航，但默認(rèn)情況下這種交互行為是被禁用了的。如果用戶想通過網(wǎng)頁視圖訪問多個(gè)頁面，請啟用前進(jìn)和后退導(dǎo)航，并提供相應(yīng)的控件來啟動這些功能。

避免使用網(wǎng)頁視圖來構(gòu)建一個(gè)網(wǎng)頁瀏覽器。使用網(wǎng)頁視圖讓用戶在不離開APP當(dāng)前頁的情況下，短暫地訪問網(wǎng)站很好，但Safari是用戶在iOS上瀏覽網(wǎng)頁的主要方式。所以在你的APP中提供與Safari相似的功能沒有必要的，而且也不鼓勵這樣做。

本文介紹了3大界面要素中的視圖（Views），參考資料Apple Developer-Human Interface Guidelines。下一篇介紹控件（Controls）。

相關(guān)閱讀：

最新iOS平臺設(shè)計(jì)規(guī)范一｜3大主旨和6大原則

最新iOS平臺設(shè)計(jì)規(guī)范二｜7大應(yīng)用架構(gòu)

最新iOS平臺設(shè)計(jì)規(guī)范三｜3大界面要素：欄(Bars)

#專欄作家#

曉吾，微信公眾號：體驗(yàn)主義，人人都是產(chǎn)品經(jīng)理專欄作家。騰訊高級交互設(shè)計(jì)師，前創(chuàng)新工場、新浪微博交互設(shè)計(jì)師。專注社交創(chuàng)新與娛樂產(chǎn)品設(shè)計(jì)。

本文由 @曉吾 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議