激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

你必須要知道的移動(dòng)端UI組件設(shè)計(jì)寶典

發(fā)布時(shí)間：2023-12-07 15:29:02 瀏覽量：153次

作為一名UI設(shè)計(jì)師，我們經(jīng)常要進(jìn)行PC端和移動(dòng)端的設(shè)計(jì)任務(wù)，上一次給大家分享了：

《最全Web端UI組件設(shè)計(jì)詳解》

，這次給大家?guī)硪苿?dòng)端UI組件設(shè)計(jì)詳情，尤其在我們APP、小程序、H5頁面設(shè)計(jì)中，我們要使用和熟知各種的 UI組件，今天給大家總結(jié)了關(guān)于移動(dòng)端UI組件，希望可以在工作中幫到你。

什么是UI組件

UI 設(shè)計(jì)組件（UI KIT），直譯過來就是用戶界面成套元件，是界面設(shè)計(jì)常用控件或元件，「組」是設(shè)計(jì)元素的組合方式，「件」由不同的元件組成。

組件的優(yōu)勢(shì)

1、保證一致性 Consistency
與現(xiàn)實(shí)生活一致：與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念；在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。
2、反饋用戶 Feedback
控制反饋：通過界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作；頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。
3、提高效率，減少成本 Efficiency
簡化流程：設(shè)計(jì)簡潔直觀的操作流程；清晰明確：語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策；幫助用戶識(shí)別：界面簡單直白，讓用戶快速識(shí)別而非回憶，減少用戶記憶負(fù)擔(dān)。

組件詳解


一、頁面布局 Layout

1、布局 Layout

A. 左右留白，布局控件，多用于頁面整體布局

B. 上下留白，布局控件


二、導(dǎo)航組件 Navigation
1、導(dǎo)航欄 NavBar


導(dǎo)航可以解決用戶在訪問頁面時(shí)：在哪里，去哪里，怎樣去的問題。

2. 側(cè)邊導(dǎo)航 SideBar


可將導(dǎo)航欄固定在左側(cè)，提高導(dǎo)航可見性，方便頁面之間切換。適用于頁面內(nèi)的信息導(dǎo)航展示。

3. 抽屜式導(dǎo)航 DrawerBar

用于在屏幕邊緣顯示應(yīng)用導(dǎo)航等內(nèi)容的面板，是 Android 推薦的導(dǎo)航方式，常見于該平臺(tái)應(yīng)用。

4、菜單 Menu


在一個(gè)臨時(shí)的面板上顯示一組操作。

用法指南：

A. 至少包含 2 個(gè)以上的菜單項(xiàng)；B. 不應(yīng)該被當(dāng)做主要導(dǎo)航方式。


5、宮格 Grid

宮格可以在水平方向上把頁面分隔成等寬度的區(qū)塊，用于展示內(nèi)容或進(jìn)行頁面導(dǎo)航


6、氣泡 Popover

在點(diǎn)擊控件或者某個(gè)區(qū)域后，浮出一個(gè)氣泡菜單來做更多的操作。如果設(shè)置了遮罩層，建議通過點(diǎn)擊遮罩層的任一位置，進(jìn)行退出。

7、標(biāo)簽頁 Tab

用于讓用戶在不同的視圖中進(jìn)行切換；標(biāo)簽數(shù)量，一般 2-4 個(gè)；其中，標(biāo)簽中的文案需要精簡，一般 2-4 個(gè)字。

8、分頁 Pagination

當(dāng)數(shù)據(jù)量過多時(shí)，使用分頁分解數(shù)據(jù)。

9、分段器

由至少 2 個(gè)分段控件組成，用作不同視圖的顯示；是 iOS 的推薦組件。

用法指南：

A. 和 Tabs 功能相似，盡可能避免一個(gè)頁面中同時(shí)出現(xiàn)這兩個(gè)組件B. 可以搭配 NavBar 一起使用，用于顯示多個(gè)視圖，分段數(shù)一般為 2 個(gè)C. 單獨(dú)放置一行時(shí)，分段數(shù)最多為 5 個(gè)；文案需要精簡，一般 2-4 個(gè)字D. 盡可能保持文案長度一致


10、標(biāo)簽欄 Tabbar

位于 APP 底部，方便用戶在不同功能模塊之間進(jìn)行快速切換。

用法指南：

A. 用作 APP 的一級(jí)分類，數(shù)量控制在 3-5 個(gè)之間B. 盡可能保持字?jǐn)?shù)相同，文案要精簡，一般2-4個(gè)字C. 圖標(biāo)設(shè)計(jì)風(fēng)格要一致，保持視覺大小統(tǒng)一。

11、索引欄 IndexBar

點(diǎn)擊索引欄是會(huì)自動(dòng)跳轉(zhuǎn)到相對(duì)應(yīng)的錨點(diǎn)位置；多用于地區(qū)選擇、通訊錄-聯(lián)系人的快速定位等。

12、分類選擇 TreeSelect


樹型選擇控件，用清晰的層級(jí)結(jié)構(gòu)展示信息；多用于商品分類的展示。

寫在最后

這次的關(guān)于移動(dòng)端UI組件：布局和導(dǎo)航組件的分享就到此結(jié)束了，下一期會(huì)繼續(xù)給大家?guī)砥渌鸘I組件的講解，我們下期精彩繼續(xù)！

請(qǐng)私信我回復(fù)“666”，為嚴(yán)哥打Call~，還有更多驚喜哦~

.............................................................

UI嚴(yán)選—越努力，越幸運(yùn)

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定