作为一名UI设计师，我们经常要进行PC端和移动端的设计任务，但是在设计过程中会遇到一个问题：在使用组件时，不知道该怎么去用，该如何使用，还有会经常用错组件的情况，这次严哥给大家带来一一解决这些问题和疑惑，尤其在我们APP、小程序、H5页面设计中，我们要使用和熟知各种的 UI组件，今天给大家总结了关于移动端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、分段器 SegmentedControl

由至少 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

树型选择控件，用清晰的层级结构展示信息；多用于商品分类的展示。

二、基础组件 Basis

1、状态栏 StatusBar

用于显示当前设备的时间、电池电量、蓝牙、信号、定位等各种状态。

2、按钮 Button

按钮用于点击后出发一个即时操作。

用法指南：

标记了一个操作命令，响应用户点击行为，触发相应的业务逻辑。

在设计中，基本有以下四种按钮类型：

主要按钮：用于主行动点，一个操作区域只能有一个主按钮。

默认按钮：用于没有主次之分的一组行动点。

线性按钮：常用于添加操作。

链接按钮：用于次要或外链的行动点。

以及四种状态属性与上面配合使用。

危险：删除/移动/修改权限等危险操作，一般需要二次确认。

幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。

禁用：行动点不可用的时候，一般需要文案解释。

加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

3、单元格 Cell

一个单元格，通常用于数据输入

4、图标  Icon

图标设计，保持一致性和统一性的原则，视觉统一，大小比例统一。

A. 线性图标

B. 面性图标

C. 线面结合图标

5、图片 Image

有多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

6、弹出层  Popup

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示

三、表单组件  Form

1、单选框  Radio

在一组备选项中进行单选

2、复选框 Checkbox

一组备选项中进行多选

3、日历  Calendar

按照日历形式展示数据的容器。

4、输入框 Field

表单中的输入框组件

5、步进器  Stepper

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字

6、选择器  Picker

选择器组件通常与弹出层组件配合使用

7、表单  Form

用于数据录入、校验，支持输入框、单选框、复选框、选择器、文件上传等类型组成。用以收集、校验、提交数据

8、日期选择器  DatePicker

用于选择时间，支持日期、时分等时间维度，通常与弹出层组件配合使用。

9、时间选择器  TimePicker

输入或选择日期的控件，用于选择时间，支持日期、时分等时间维度，通常与弹出层组件配合使用。

10、日期时间选择器  DateTimePicker

在同一个选择器里选择日期和时间，iOS推荐组件

11、图片选择器  ImagePicker

只是图片选择器，一般用于上传图片前的文件选择操作，但不包括图片上传的功能

12、滑动开关 Switch

在两个互斥对象进行选择，如：选择开或关。

用法指南：

A. 只在 List 中使用。

B. 避免增加额外的文案来描述当前 Switch 的值

13、滑块  Slider

通过拖动滑块在一个固定区间内进行选择，多用于控制屏幕的显示亮度。

14、上传  Upload

通过点击上传文件

用法指南：

A. 上传是将信息（文件、文字、图片、视频等）通过手机或者上传工具发布到远程服务器上的过程。

B. 当需要上传一个或一些文件时。

C. 当需要展现上传的进度时。

15、评分 Rate

评分组件

16、数字键盘  NumberKeyboard

数字虚拟键盘，可以配合密码输入框组件或自定义的输入框组件使用

一般常见的有：身份证号键盘（输入身份证号使用）、带有右侧栏按钮的键盘（自定义的键盘按钮）、带有标题的键盘（如支付宝输入金额时的键盘）、多个按键的键盘等（多见于00按钮）；

17、密码输入框   PasswordInput

带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与数字键盘组件配合使用

用法指南：

A. 多用于账号的支付密码/交易密码设计。

B. 用于对输入的数据类型进行校验，如短信验证码。

C. 用户登录注册时的密码设置和输入。

18、文本输入 InputItem

用于接受单行文本。

用法指南：

A. 支持通过键盘或者剪切板输入文本。

B. 通过光标可以在水平方向进行移动。

C. 对特定格式的文本进行处理，如：隐藏密码。

19、搜索栏 SearchBar

一般可位于导航栏或 NavBar 下方，通过『取消按钮』退出激活状态。

四、反馈组件  Feedback

1、遮罩层 OverLay

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作

用法指南：

A. 多用于弹框操作应用。

B. 引导用户进行操作，常见于APP梦层引导页。

2、下拉菜单 DropdownMenu

将动作或菜单折叠到下拉菜单中。

用法指南：

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

3、动作面板  ActionSheet

底部弹起的模态面板，包含与当前情境相关的多个选项。

4、活动指示器 ActivityIndicator

活动指示器。表明某个任务正在进行中。

用法指南：

A. 不要让活动指示器静止，用户会以为该任务停滞了。

B. 在某些特定场景下，提供有意义的文案，帮助用户明白哪个任务正在进行中，如：正在上传照片。

C. 如果能知道用户的等待时间，可以使用组件 Progress 来替代。

5、加载 Loading

加载数据时显示动效

6、消息通知  Notify

常用于消息通知提示。更多用于系统级通知的被动提醒。

7、对话框  Modal

用作显示系统的重要信息，并请求用户进行操作反馈，如：进行内容删除操作时，弹出 Modal 进行二次确认。

用法指南：

A. 尽可能少用。Modal 会打断用户操作，只用在重要的时候。

B. 标题应该简明，不能超过 1 行；描述内容应该简明、完整，一般不多于 2 行。

C. 操作按钮最多到 3 个（竖排），一般为 1-2 个（横排）；3 个以上建议使用组件 ActionSheet 来完成。

D. 一般将用户最可能点击的按钮，放在右侧。另外，取消按钮应当始终放在左侧。

8、弹出框  Dialog

弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作

9、轻提示 Toast

常用于提示系统消息时使用。

10、下拉刷新  PullRefresh

通过下拉手势触发，立刻重新加载内容。

11、分享面板  ShareSheet

底部弹起的分享面板，用于展示各社交平台分享渠道对应的操作按钮

用法指南：

最常见的是分享到微信、朋友圈、QQ、QQ空间、微博、支付宝、复制连接、生成海报、图片等信息；

12、滑动单元格  SwipeCell

向左滑动特定单元格，对其单元格可进行相关操作

用法指南：

A. iOS特有滑动方向是向左滑动的交互方式；

B. 多用于消息/信息列表的已读、未读、删除操作等。

C. 在电商APP-购物车页面的使用场景也很高频。

五、数据展示组件

1、手风琴  Accoridon

可以折叠/展开的内容区域。

用法指南：

A. 对复杂区域进行分组和隐藏。

B. 通常，一次只允许单个内容区域展开；特殊情况，多个内容区域可以同时展开。

2、标记/徽标数 Badge

图标右上角的红点、数字或者文字。用于告知用户，该区域的状态变化或者待处理任务的数量。

用法指南：

A. 当用户只需知道大致有内容更新时，应该使用红点型，如：社交中的群消息通知。

B. 当用户有必要知晓每条更新时，应该使用数字型。如：社交中的一对一的消息通知。

3、标签 Tag

进行标记和分类的小标签，用于标记事物的属性和维度，以及进行分类。

4、环形进度条 CricleProgress

用于展示操作进度，告知用户当前状态和预期。

用法指南：

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

5、轮播/走马灯 Carousel

走马灯，轮播图，常用于banner图的展示

6、卡片 Card

用于组织信息和操作，通常也作为详细信息的入口。

7、折叠面板  Collapse

可以折叠/展开的内容区域。

8、列表 List

单个连续模块垂直排列，显示当前的内容、状态和可进行的操作。eg：联系人列表。

用法指南：

A. 一般由主要信息、主要操作、次要信息、次要操作组成。

B. 主要信息和主要操作放在列表的左边，次要信息和次要操作放在列表的右边。

9、倒计时  CountDown

倒计时

10、步骤条 Steps

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

11、通知栏 NooticeBar

在导航栏下方，一般用作系统提醒、活动提醒等通知。

用法指南：

需要引起用户关注时使用，重要级别低于 Modal ，高于 Toast。

12、分割线 Divider

用于信息内容的层级分割，通常为1px的分割线

13、面板  Panel

用于页面区域内容的展示，可以自定义信息内容

六、其他组件

1、骨架图  Spin

在需要等待加载内容的位置提供一个占位图形组合。

用法指南：

A. 网络较慢，需要长时间等待加载处理的情况下。

B. 图文信息内容较多的列表/卡片中。

C. 只在第一次加载数据的时候使用。

D. 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

2、空状态  Empty

用于空白页面的占位提示

3、懒加载  Lazyload

懒加载其实就是延时加载，即当对象需要用到的时候再去加载。常用于图片资源的加载。

4、图片预览  ImagePreview

图片资源的放大预览

5、地址编辑  AddressEdit

用户信息地址的编辑

6、省市区选择 Area

省市区三级联动选择

7、宫格  Grid

在水平和垂直方向，将布局切分成若干等大的区块。区块中的内容应该是同类元素，如：都是图片，或者都是图标+文字。

8、回到顶部  Backtop

返回页面顶部的操作按钮

用法指南：

A. 当页面内容区域比较长时；

B. 当用户需要频繁返回顶部查看相关内容时。

写在最后

工欲善其事,必先利其器，充分了解每个组件所具备的功能和设计用法，能让你的设计效率提升，看完这篇文章，希望你可以在H5、小程序、APP界面设计师时，不会再被各种各样错综繁杂的组件弄得晕头转向，可以帮助你更好的选择所需要的组件。

UI组件源文件获取方式

↓↓↓

链接:：https://pan.baidu.com/s/1K_FbCDI7PaguJEw2UdetHA 

提取码：nt02

Powered by Froala Editor