iOS 基本界面元素包括三大類，分別是 Bars（欄）、Views（視圖）、Controls（控件）。之前跟大家分享了 Bars（欄），以及具有模態(tài)屬性的部分 Views（視圖），今天分享視圖部分的其他樣式。

往期回顧：

這里提醒大家，各種視圖之間并不是互斥的關(guān)系，而是可以組合使用的，例如分隔視圖中的主、副窗格都可以采用表格視圖，滾動視圖可基于 App 內(nèi)置的網(wǎng)頁視圖呈現(xiàn)文本視圖等。

Tables 表格

表格將數(shù)據(jù)以可滾動的列表形式進(jìn)行展示，可以簡潔有效地顯示大量信息，特別適用于文本內(nèi)容。

iOS 提供了三種表格樣式：Plain 平鋪、Grouped 分組、Inset Grouped 嵌入式分組。

1. 表格寬度

表格過窄導(dǎo)致文本被截斷或換行，表格過寬導(dǎo)致用戶難以瀏覽閱讀，且過度占用頁面空間。

總之，表格過寬、過窄都會降低閱讀效率。

2. 優(yōu)先加載文本內(nèi)容

在圖片等加載較慢的內(nèi)容呈現(xiàn)之前，優(yōu)先加載表格框架和文本內(nèi)容，用戶可以立即獲得有用的信息，同時提升了操作反饋響應(yīng)速度，緩解用戶在等待完整內(nèi)容加載時的焦慮情緒。在一些場景中，在新數(shù)據(jù)展示出來之前展示舊數(shù)據(jù)也是有意義的。

3. 展示加載進(jìn)度

加載動效可以讓用戶感受到 App 在正常運(yùn)行。

4. 持續(xù)刷新內(nèi)容

更新數(shù)據(jù)時不要改變當(dāng)前展示位置（用戶會感到失控），可以將新數(shù)據(jù)加入頂部或底部，同時提供指示器讓用戶跳轉(zhuǎn)至更新位置，也可以提供手動刷新按鈕。

避免將索引與右對齊控件結(jié)合在一起，兩者都在屏幕右側(cè)，控件距離太近可能導(dǎo)致誤操作。

5. Tables Rows 表格行

系統(tǒng)提供的表格樣式都可使用圖像元素，但這些圖像元素會擠壓大標(biāo)題和副標(biāo)題的展示空間。

6. 保持文案簡短，避免被截斷

被截斷的文案內(nèi)容增加了理解難度。（備注：人類在閱讀時，大腦的識別模式是視覺化的，被截斷的文案破壞了這種視覺化的完整性，詳情可以了解《認(rèn)知與設(shè)計》第四章：閱讀不是自然的）

7. 使用自定義刪除按鈕

相比系統(tǒng)提供的刪除按鈕，自定義刪除按鈕更清晰明確，也更容易保持 App 內(nèi)用戶體驗的一致性。

8. 行被選中后應(yīng)有反饋

表格行在被點(diǎn)擊的瞬間突出顯示，之后緊接著會有其他反饋，例如切換視圖，選中標(biāo)記出現(xiàn)等。

9. 可自定義表格樣式

依據(jù)需要呈現(xiàn)的數(shù)據(jù)類型，或者為了保持 App 外觀的一致性，可以自定義表格樣式。

Split Views 分隔視圖

分隔視圖可以同時展示兩個窗格。每個窗格可以包含各種元素，包括導(dǎo)航欄，工具欄，選項卡欄，表格，合集，圖像，地圖和自定義視圖。

1. 分隔視圖通常與可篩選的內(nèi)容一起使用

當(dāng)設(shè)備為豎屏方向時，主窗格可以覆蓋輔助窗格，不使用時可以隱藏在屏幕外。這樣可以為輔助窗格提供更多的內(nèi)容展示空間。

2. 主、副窗格的布局比例

默認(rèn)主窗格占屏幕 1/3，輔助窗格占比 2/3，也可以各自 1/2，但輔助窗格不能比主窗格要窄。

3. 主窗格中被選中內(nèi)容突出顯示

輔助窗格內(nèi)容從屬于主窗格，主窗格中被選中內(nèi)容突出顯示，有助于用戶了解兩塊內(nèi)容之間的聯(lián)系。

4. 提供多種訪問隱藏的主窗格的方式

在主窗格可以隱藏的布局中，允許用戶使用輕掃手勢或者按鈕顯示主窗格。

Scroll Views 滾動視圖

滾動視圖允許用戶瀏覽大于屏幕可見區(qū)域的內(nèi)容，例如文檔、圖片合集。當(dāng)用戶使用輕掃，滑動，拖動，點(diǎn)擊和捏合手勢時，滾動視圖會跟隨手勢顯示或縮放。

滾動視圖本身沒有外觀，但用戶和頁面交互時會顯示滾動指示器。滾動視圖可以和其他幾種視圖組合使用。分頁（paging mode）也可配置為滾動視圖，但滾動后切換到新頁面，而非當(dāng)前頁面。

1. 關(guān)于縮放

如果你的 App 允許對滾動視圖進(jìn)行縮放，要設(shè)置合理縮放范圍（上限和下限）。

2. 分頁控制器

分頁控制器可以展示包含頁數(shù)和當(dāng)前位置的信息。如果頁面是分頁模式，建議采用分頁控制器，而不是滾動指示器，以免混淆。

3. 不要在滾動視圖中嵌套另一個滾動視圖

滑動手勢幅度大，用戶可能會誤觸到另一個滾動視圖。如果確實(shí)需要有兩個滾動視圖，要設(shè)置不同的滾動方向（一個橫向，一個縱向），從而降低誤操作概率。

Collections 合集

合集視圖用來管理一組有序內(nèi)容（例如照片集），展示效果可自定義，視覺上頗具有感染力。這種視圖不強(qiáng)制采用嚴(yán)格的線性格式，因此特別適合顯示大小不同的項目，通常非常適合展示圖片內(nèi)容?？梢岳帽尘昂推渌曈X元素，在視覺上區(qū)分內(nèi)容分組。（備注：可以參考格式塔心理學(xué)）

1. 合集視圖可支持交互和動效

默認(rèn)情況下，點(diǎn)擊以選中，長按以編輯，輕掃來滾動。動效可以在內(nèi)容插入、刪除、重新排序時使用。可以自定義其他手勢和動效。

2. 盡量使用標(biāo)準(zhǔn)的行布局或者網(wǎng)格布局

用戶在這種布局下更容易和內(nèi)容交互。注意留有足夠的空隙，避免交互內(nèi)容之間擁擠和重疊而導(dǎo)致誤操作。

3. 文本內(nèi)容建議使用表格視圖

以可滾動的列表形式展示文本，便于用戶瀏覽閱讀。

4. 謹(jǐn)慎使用動態(tài)布局

隨時更改的布局會讓用戶失去控制感。

Image Views 圖像視圖

圖像視圖展示單個圖像或動畫序列。背景可以是透明或者不透明的。圖像可以被拉伸、縮放、調(diào)整大小和固定到指定位置。圖像模式默認(rèn)是非交互式的。

盡量確保動畫序列中的所有圖像尺寸一致

最好對圖像進(jìn)行預(yù)縮放。系統(tǒng)執(zhí)行縮放時，所有圖像在具有相同尺寸和形狀的情況下效果最好。

Text Views 文本視圖

文本視圖展示多行內(nèi)容，高度不限，當(dāng)內(nèi)容擴(kuò)展到視圖之外時可以滾動（和滾動視圖組合使用）。

1. 保持文本清晰易讀

盡管可自定義文本字體、顏色、對齊方式，但保持內(nèi)容的可讀性至關(guān)重要。建議支持動態(tài)類型，這樣當(dāng)用戶更改設(shè)備上的文字大小時依舊可以保持文本清晰易讀。另外還應(yīng)該測試在啟用輔助功能后的展示效果（例如文本加粗）。

2. 顯示適當(dāng)?shù)逆I盤類型

為了簡化數(shù)據(jù)輸入，應(yīng)對根據(jù)字段類型調(diào)用對應(yīng)鍵盤類型。以下是我截圖的一些鍵盤類型，可以參考。

Web Views 網(wǎng)頁視圖

網(wǎng)頁視圖在 App 中可顯示豐富的網(wǎng)頁內(nèi)容，例如嵌入式 HTML 和網(wǎng)站。

1. 啟用前進(jìn)和后退導(dǎo)航

系統(tǒng)默認(rèn)禁用前進(jìn)和后退導(dǎo)航，如果有很多頁面，那么要啟用前進(jìn)和后退導(dǎo)航，并提供相應(yīng)控件。

2. 避免使用網(wǎng)頁視圖來構(gòu)建Web瀏覽器

使用網(wǎng)頁視圖的目的是讓用戶在不離開 App 的情況下短暫訪問網(wǎng)站。Safari 是 iOS 提供的瀏覽網(wǎng)絡(luò)的主要方式，不必要并且不鼓勵 App 中復(fù)制 Safari 的功能。

Pages 頁面視圖

頁面視圖的控制器提供了內(nèi)容頁面之間（文檔、書籍、記事本、日歷等）線性導(dǎo)航的方式。

默認(rèn)有滾動、翻頁兩種頁面切換方式。

提供非線性導(dǎo)航方式?？梢缘脑?，允許用戶跳轉(zhuǎn)想去的位置，而不需一頁一頁的翻過去。

歡迎關(guān)注作者的微信公眾號：「能呆書房一整天」