首頁(yè)技術(shù)文章正文

APP內(nèi)容視圖有幾種形式?

更新時(shí)間:2022-01-13 來(lái)源:黑馬程序員 瀏覽量:

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


什么是內(nèi)容視圖?

內(nèi)容視圖指的是手機(jī)界面中用于展示內(nèi)容的區(qū)域,是手機(jī)界面的重要組成元素之一。內(nèi)容視圖區(qū)域不僅可以展示內(nèi)容信息,還能夠進(jìn)行一系列交互行為。例如,內(nèi)容滾動(dòng),頁(yè)面跳轉(zhuǎn)、插人內(nèi)容、刪除內(nèi)容等操作。如下圖所示紅框標(biāo)識(shí)的部分為手機(jī)界面中的內(nèi)容視圖。

手機(jī)內(nèi)容視圖

內(nèi)容視圖的分類

內(nèi)容視圖的設(shè)計(jì)樣式多種多樣,常見(jiàn)的樣式分類主要有列表視圖、卡片視圖、集合視圖、文本視圖和網(wǎng)絡(luò)視圖,下面將對(duì)這些視圖進(jìn)行講解。


1. 列表視圖

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

平鋪形    分組型
左:平鋪型    右:分組型

2. 卡片視圖

卡片視圖是將同類信息歸納到一一個(gè)矩形或者圓角矩形當(dāng)中,在占用較少屏幕空間的情況下將信息有組織地劃分到不同的區(qū)域中。卡片可以被堆疊、覆蓋、移動(dòng),這樣極大地?cái)U(kuò)展了一個(gè)內(nèi)容塊的視覺(jué)深度和可操作性??ㄆ谠O(shè)計(jì)形式上還可以增加邊緣、陰影,使得卡片具有立體感。


3. 集合視圖

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

集合視圖

4. 文本視圖

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

文本視圖1文本視圖

文本視圖

5. 網(wǎng)絡(luò)視圖

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

淘寶對(duì)比


猜你喜歡:

移動(dòng)端ui設(shè)計(jì)與pc端的差別是什么?

UI設(shè)計(jì)的四個(gè)基本原則是什么?

UI設(shè)計(jì)流程:UI設(shè)計(jì)工作全過(guò)程

UI設(shè)計(jì)行業(yè)常見(jiàn)術(shù)語(yǔ)有哪些?

黑馬程序員UI/UE課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!