作爲一名UI設計師，我們經常要進行PC端和移動端的設計任務，上一次給大家分享了：《最全Web端UI組件設計詳解》，這次給大家帶來移動端UI組件設計詳情，尤其在我們APP、小程序、H5頁面設計中，我們要使用和熟知各種的 UI組件，今天給大家總結了關於移動端UI組件，希望可以在工作中幫到你。
什麼是UI組件
UI 設計組件（UI KIT），直譯過來就是用戶界面成套元件，是界面設計常用控件或元件，「組」是設計元素的組合方式，「件」由不同的元件組成。
組件的優勢
1、保證一致性 Consistency
與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；
在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。
2、反饋用戶 Feedback
控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；
頁面反饋：操作後，通過頁面元素的變化清晰地展現當前狀態。
3、提高效率，減少成本 Efficiency
簡化流程：設計簡潔直觀的操作流程；
清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；
幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。
組件詳解
一、頁面佈局 Layout
1、佈局 Layout
A. 左右留白，佈局控件，多用於頁面整體佈局
B. 上下留白，佈局控件
二、導航組件 Navigation
1、導航欄 NavBar
導航可以解決用戶在訪問頁面時：在哪裏，去哪裏，怎樣去的問題。
2. 側邊導航 SideBar
可將導航欄固定在左側，提高導航可見性，方便頁面之間切換。適用於頁面內的信息導航展示。
3. 抽屜式導航 DrawerBar
用於在屏幕邊緣顯示應用導航等內容的面板，是 Android 推薦的導航方式，常見於該平臺應用。
4、菜單 Menu
在一個臨時的面板上顯示一組操作。
用法指南：
A. 至少包含 2 個以上的菜單項；
B. 不應該被當做主要導航方式。
5、宮格 Grid
宮格可以在水平方向上把頁面分隔成等寬度的區塊，用於展示內容或進行頁面導航
6、氣泡 Popover
在點擊控件或者某個區域後，浮出一個氣泡菜單來做更多的操作。如果設置了遮罩層，建議通過點擊遮罩層的任一位置，進行退出。
7、標籤頁 Tab
用於讓用戶在不同的視圖中進行切換；標籤數量，一般 2-4 個；其中，標籤中的文案需要精簡，一般 2-4 個字。
8、分頁 Pagination
當數據量過多時，使用分頁分解數據。
9、分段器
由至少 2 個分段控件組成，用作不同視圖的顯示；是 iOS 的推薦組件。
用法指南：
A. 和 Tabs 功能相似，儘可能避免一個頁面中同時出現這兩個組件
B. 可以搭配 NavBar 一起使用，用於顯示多個視圖，分段數一般爲 2 個
C. 單獨放置一行時，分段數最多爲 5 個；文案需要精簡，一般 2-4 個字
D. 儘可能保持文案長度一致
10、標籤欄 Tabbar
位於 APP 底部，方便用戶在不同功能模塊之間進行快速切換。
用法指南：
A. 用作 APP 的一級分類，數量控制在 3-5 個之間
B. 儘可能保持字數相同，文案要精簡，一般2-4個字
C. 圖標設計風格要一致，保持視覺大小統一。
11、索引欄 IndexBar
點擊索引欄是會自動跳轉到相對應的錨點位置；多用於地區選擇、通訊錄-聯繫人的快速定位等。
12、分類選擇 TreeSelect
樹型選擇控件，用清晰的層級結構展示信息；多用於商品分類的展示。
寫在最後
這次的關於移動端UI組件：佈局和導航組件的分享就到此結束了，下一期會繼續給大家帶來其他UI組件的講解，我們下期精彩繼續！