UI學(xué)習(xí)基礎(chǔ)之內(nèi)容視圖有哪些分類(lèi)

來(lái)源：培訓(xùn)無(wú)憂(yōu)網(wǎng) 發(fā)布人：星星

2022-01-18 11:18:15|已瀏覽：172次

內(nèi)容視圖有哪些分類(lèi)

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

1. 列表視圖
列表視圖是用分割線將內(nèi)容進(jìn)行區(qū)分。利用緊密、對(duì)比、重復(fù)、對(duì)齊”的原則設(shè)計(jì)每條列表的信息，使信息清晰有力地傳達(dá)給用戶(hù)。列表視圖分為兩種樣式: 一種是平鋪型，另一種是分組型。
2. 卡片視圖
卡片視圖是將同類(lèi)信息歸納到一一個(gè)矩形或者圓角矩形當(dāng)中，在占用較少屏幕空間的情況下將信息有組織地劃分到不同的區(qū)域中�？ㄆ梢员欢询B、覆蓋、移動(dòng)，這樣極大地?cái)U(kuò)展了一個(gè)內(nèi)容塊的視覺(jué)深度和可操作性�？ㄆ谠O(shè)計(jì)形式上還可以增加邊緣、陰影，使得卡片具有立體感。
3. 集合視圖
集合視圖是將同類(lèi)信息用平鋪的形式展現(xiàn)，一般以圖片為主題，文字為輔助信息。集合視圖用于管理一系列有序的項(xiàng)，并以一種自定義的布局來(lái)呈現(xiàn)它們。例如，系統(tǒng)照片將圖片集合在一起，以相同大小的正方形進(jìn)行展示，用戶(hù)通過(guò)點(diǎn)擊圖片放大查看。
4. 文本視圖
文本視圖是一個(gè)能夠顯示多行文本的區(qū)域，當(dāng)因內(nèi)容太多而超出其適應(yīng)范圍時(shí)，可以支持滾動(dòng)。同時(shí)，文本視圖支持用戶(hù)編輯，當(dāng)用戶(hù)輕擊文本視圖內(nèi)部時(shí)，設(shè)備喚起鍵盤(pán)并根據(jù)輸人的內(nèi)容類(lèi)型來(lái)指定不同的鍵盤(pán)類(lèi)型，可以為用戶(hù)提供更方便快捷地輸入體驗(yàn)。
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ò)視圖。

注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://www.dedgn.cn/news-id-15963.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂(yōu)網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專(zhuān)業(yè)課程信息您可在線咨詢(xún)也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050

相關(guān)新聞

相關(guān)新聞

免費(fèi) 申請(qǐng) 試聽(tīng)

提交申請(qǐng)，《培訓(xùn)無(wú)憂(yōu)網(wǎng)》課程顧問(wèn)老師會(huì)一對(duì)一幫助你規(guī)劃更適合你的專(zhuān)業(yè)課程！

a级毛片免费全部播放-a级毛片免费观看在线播放-a级毛片免费观看网站-a级毛片免费看-国产成人精品在视频-国产成人精品在线

UI學(xué)習(xí)基礎(chǔ)之內(nèi)容視圖有哪些分類(lèi)