APP內容視圖有幾種形式？

布局合理的內容視圖有利于用戶瀏覽，提高用戶使用頻率。然而內容視圖指的是什么?內容視圖又包含哪些形式?

什么是內容視圖?

內容視圖指的是手機界面中用于展示內容的區(qū)域，是手機界面的重要組成元素之一。內容視圖區(qū)域不僅可以展示內容信息，還能夠進行一系列交互行為。例如，內容滾動，頁面跳轉、插人內容、刪除內容等操作。如下圖所示紅框標識的部分為手機界面中的內容視圖。

內容視圖的分類

內容視圖的設計樣式多種多樣，常見的樣式分類主要有列表視圖、卡片視圖、集合視圖、文本視圖和網絡視圖，下面將對這些視圖進行講解。

1. 列表視圖

列表視圖是用分割線將內容進行區(qū)分。利用緊密、對比、重復、對齊”的原則設計每條列表的信息，使信息清晰有力地傳達給用戶。列表視圖分為兩種樣式: 一種是平鋪型，另一種是分組型，如下圖所示。

    
左：平鋪型    右：分組型

2. 卡片視圖

卡片視圖是將同類信息歸納到一一個矩形或者圓角矩形當中，在占用較少屏幕空間的情況下將信息有組織地劃分到不同的區(qū)域中?？ㄆ梢员欢询B、覆蓋、移動，這樣極大地擴展了一個內容塊的視覺深度和可操作性。卡片在設計形式上還可以增加邊緣、陰影，使得卡片具有立體感。

3. 集合視圖

集合視圖是將同類信息用平鋪的形式展現，一般以圖片為主題，文字為輔助信息。集合視圖用于管理一系列有序的項，并以一種自定義的布局來呈現它們。例如，系統(tǒng)照片將圖片集合在一起，以相同大小的正方形進行展示，用戶通過點擊圖片放大查看，如下圖所示為集合視圖。

4. 文本視圖

文本視圖是一個能夠顯示多行文本的區(qū)域，當因內容太多而超出其適應范圍時，可以支持滾動。同時，文本視圖支持用戶編輯，當用戶輕擊文本視圖內部時，設備喚起鍵盤并根據輸人的內容類型來指定不同的鍵盤類型，可以為用戶提供更方便快捷地輸入體驗，下圖所示為文本視圖。

文本視圖

5. 網絡視圖

目前絕大部分的網絡視圖是指直接在內容區(qū)域嵌入HTML5頁面，其優(yōu)點是可以在服務端直接快速發(fā)布、更新內容，而不需要在應用平臺進行版本更新。例如，手機淘寶首頁內容區(qū)域就采用了嵌入HTML5的網絡視圖，下圖展示的就是淘寶雙十一前的首頁和淘寶雙十一時的首頁對比。

猜你喜歡：

移動端ui設計與pc端的差別是什么？

UI設計的四個基本原則是什么？

UI設計流程：UI設計工作全過程

UI設計行業(yè)常見術語有哪些？

黑馬程序員UI/UE課程