作為一名UI設(shè)計師末盔，我們經(jīng)常要進(jìn)行PC端和移動端的設(shè)計任務(wù)就漾，上一次給大家分享了：《最全Web端UI組件設(shè)計詳解》，這次給大家?guī)硪苿佣薝I組件設(shè)計詳情隶糕，尤其在我們APP、小程序站玄、H5頁面設(shè)計中枚驻，我們要使用和熟知各種的 UI組件，今天給大家總結(jié)了關(guān)于移動端UI組件株旷，希望可以在工作中幫到你再登。
什么是UI組件
UI 設(shè)計組件（UI KIT），直譯過來就是用戶界面成套元件灾常，是界面設(shè)計常用控件或元件霎冯，「組」是設(shè)計元素的組合方式，「件」由不同的元件組成钞瀑。
組件的優(yōu)勢
1沈撞、保證一致性 Consistency
與現(xiàn)實生活一致：與現(xiàn)實生活的流程、邏輯保持一致雕什，遵循用戶習(xí)慣的語言和概念缠俺；
在界面中一致：所有的元素和結(jié)構(gòu)需保持一致显晶，比如：設(shè)計樣式、圖標(biāo)和文本壹士、元素的位置等磷雇。
2、反饋用戶 Feedback
控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作躏救；
頁面反饋：操作后唯笙，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。
3盒使、提高效率崩掘，減少成本 Efficiency
簡化流程：設(shè)計簡潔直觀的操作流程；
清晰明確：語言表達(dá)清晰且表意明確少办，讓用戶快速理解進(jìn)而作出決策苞慢；
幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶英妓，減少用戶記憶負(fù)擔(dān)挽放。
組件詳解
一、頁面布局??Layout
1蔓纠、布局?Layout?
A. 左右留白辑畦，布局控件，多用于頁面整體布局
B. 上下留白贺纲，布局控件
二航闺、導(dǎo)航組件??Navigation
1、導(dǎo)航欄 NavBar
導(dǎo)航可以解決用戶在訪問頁面時：在哪里猴誊，去哪里潦刃，怎樣去的問題。
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)航方式，常見于該平臺應(yīng)用墨状。
4卫漫、菜單?Menu
在一個臨時的面板上顯示一組操作。
用法指南：
A. 至少包含 2 個以上的菜單項肾砂；
B. 不應(yīng)該被當(dāng)做主要導(dǎo)航方式列赎。
5、宮格?Grid
宮格可以在水平方向上把頁面分隔成等寬度的區(qū)塊镐确，用于展示內(nèi)容或進(jìn)行頁面導(dǎo)航
6包吝、氣泡?Popover
在點擊控件或者某個區(qū)域后饼煞，浮出一個氣泡菜單來做更多的操作。如果設(shè)置了遮罩層诗越，建議通過點擊遮罩層的任一位置砖瞧，進(jìn)行退出。
7嚷狞、標(biāo)簽頁??Tab
用于讓用戶在不同的視圖中進(jìn)行切換块促；標(biāo)簽數(shù)量，一般 2-4 個床未；其中褂乍，標(biāo)簽中的文案需要精簡，一般 2-4 個字即硼。
8、分頁?Pagination
當(dāng)數(shù)據(jù)量過多時屡拨，使用分頁分解數(shù)據(jù)只酥。
9、分段器
由至少 2 個分段控件組成呀狼，用作不同視圖的顯示裂允；是 iOS 的推薦組件。
用法指南：
A. 和 Tabs 功能相似哥艇，盡可能避免一個頁面中同時出現(xiàn)這兩個組件
B. 可以搭配 NavBar 一起使用绝编，用于顯示多個視圖，分段數(shù)一般為 2 個
C. 單獨放置一行時貌踏，分段數(shù)最多為 5 個十饥；文案需要精簡，一般 2-4 個字
D.?盡可能保持文案長度一致
10祖乳、標(biāo)簽欄?Tabbar
位于 APP 底部逗堵，方便用戶在不同功能模塊之間進(jìn)行快速切換。
用法指南：
A. 用作 APP 的一級分類眷昆，數(shù)量控制在 3-5 個之間
B. 盡可能保持字?jǐn)?shù)相同蜒秤，文案要精簡，一般2-4個字
C. 圖標(biāo)設(shè)計風(fēng)格要一致亚斋，保持視覺大小統(tǒng)一作媚。
11、索引欄??IndexBar
點擊索引欄是會自動跳轉(zhuǎn)到相對應(yīng)的錨點位置帅刊；多用于地區(qū)選擇纸泡、通訊錄-聯(lián)系人的快速定位等。
12厚掷、分類選擇??TreeSelect
樹型選擇控件弟灼，用清晰的層級結(jié)構(gòu)展示信息级解；多用于商品分類的展示。
寫在最后
這次的關(guān)于移動端UI組件：布局和導(dǎo)航組件的分享就到此結(jié)束了田绑，下一期會繼續(xù)給大家?guī)砥渌鸘I組件的講解勤哗，我們下期精彩繼續(xù)！
