作為一名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組件的講解，我們下期精彩繼續！

請私信我回復“666”，為嚴哥打Call~，還有更多驚喜哦~

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

UI嚴選—越努力，越幸運

總結

以上是生活随笔為你收集整理的react ui框架 移动端_你必须要知道的移动端UI组件设计宝典的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。