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

往期回顧：

閱讀文章 >>

閱讀文章 >>

這裏提醒大家，各種視圖之間並不是互斥的關係，而是可以組合使用的，例如分隔視圖中的主、副窗格都可以採用表格視圖，滾動視圖可基於 App 內置的網頁視圖呈現文本視圖等。

Tables 表格

表格將數據以可滾動的列表形式進行展示，可以簡潔有效地显示大量信息，特別適用於文本內容。

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

1. 表格寬度

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

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

2. 優先加載文本內容

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

3. 展示加載進度

加載動效可以讓用戶感受到 App 在正常運行。

4. 持續刷新內容

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

避免將索引與右對齊控件結合在一起，兩者都在屏幕右側，控件距離太近可能導致誤操作。

5. Tables Rows 表格行

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

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

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

7. 使用自定義刪除按鈕

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

8. 行被選中后應有反饋

表格行在被點擊的瞬間突出显示，之後緊接着會有其他反饋，例如切換視圖，選中標記出現等。

9. 可自定義表格樣式

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

Split Views 分隔視圖

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

1. 分隔視圖通常與可篩選的內容一起使用

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

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

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

3. 主窗格中被選中內容突出显示

輔助窗格內容從屬於主窗格，主窗格中被選中內容突出显示，有助於用戶了解兩塊內容之間的聯繫。

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

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

Scroll Views 滾動視圖

滾動視圖允許用戶瀏覽大於屏幕可見區域的內容，例如文檔、圖片合集。當用戶使用輕掃，滑動，拖動，點擊和捏合手勢時，滾動視圖會跟隨手勢显示或縮放。

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

1. 關於縮放

如果你的 App 允許對滾動視圖進行縮放，要設置合理縮放範圍（上限和下限）。

2. 分頁控制器

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

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

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

Collections 合集

合集視圖用來管理一組有序內容（例如照片集），展示效果可自定義，視覺上頗具有感染力。這種視圖不強制採用嚴格的線性格式，因此特別適合显示大小不同的項目，通常非常適合展示圖片內容。可以利用背景和其他視覺元素，在視覺上區分內容分組。（備註：可以參考格式塔心理學）

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

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

2. 盡量使用標準的行布局或者網格布局

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

3. 文本內容建議使用表格視圖

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

4. 謹慎使用動態布局

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

Image Views 圖像視圖

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

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

最好對圖像進行預縮放。系統執行縮放時，所有圖像在具有相同尺寸和形狀的情況下效果最好。

Text Views 文本視圖

文本視圖展示多行內容，高度不限，當內容擴展到視圖之外時可以滾動（和滾動視圖組合使用）。

1. 保持文本清晰易讀

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

2. 显示適當的鍵盤類型

為了簡化數據輸入，應對根據字段類型調用對應鍵盤類型。以下是我截圖的一些鍵盤類型，可以參考。

Web Views 網頁視圖

網頁視圖在 App 中可显示豐富的網頁內容，例如嵌入式 HTML 和網站。

1. 啟用前進和後退導航

系統默認禁用前進和後退導航，如果有很多頁面，那麼要啟用前進和後退導航，並提供相應控件。

2. 避免使用網頁視圖來構建Web瀏覽器

使用網頁視圖的目的是讓用戶在不離開 App 的情況下短暫訪問網站。Safari 是 iOS 提供的瀏覽網絡的主要方式，不必要並且不鼓勵 App 中複製 Safari 的功能。

Pages 頁面視圖

頁面視圖的控制器提供了內容頁面之間（文檔、書籍、記事本、日曆等）線性導航的方式。

默認有滾動、翻頁兩種頁面切換方式。

提供非線性導航方式。可以的話，允許用戶跳轉想去的位置，而不需一頁一頁的翻過去。

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

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五註冊開戶_iOS 人機界面指南精簡版筆記之界面元素：Views（下）