1、栏类:

状态栏

搜索栏

导航栏

标签栏

范围栏

通告栏

一般用于活动提醒或者系统权限申请等吸引用户关注但又不强制用户去处理的场景

操作工具栏

image.pngimage.png

2、控件类:

按钮

由文字或图标组成,按钮告知用户按下按钮后将进行的操作,我们可以把按钮理解为一个操作的触发器

弹窗

弹框可以让用户知道一些重要的消息,同时通过弹框为某些业务提供一个流量入口

进度指示器

image.png

加载

全屏加载、分步加载、下拉加载、上拉加载、预加载、智能加载(根据用户的网络情况,加载不同质量的图片内容),一般跟随着占位符

image.png

选择框(多选、单选)

页面刷新控件

通过loading加载动画使得加载过程更加具有情感化、人性化和品牌化
image.png

标签

image.png

红点/徽标/数字/Badge

引导用户点击,从而达到要给用户传达的信息
image.png

系统推送

系统推送让用户获取到APP要传达的信息,属于强提示类,用户通过推送消息进入App获取消息,提高产品的活跃度和使用粘性
image.png

文本输入框

image.pngimage.png

分段控件

展示统一模块下不同类别的信息或者筛选不用模块的信息
移动端界面元素 - 图14

页面指示器/页面控制器

移动端界面元素 - 图15

操作编辑菜单

image.png

操作列表

image.png

步进器(调数器)

由一个增加按钮、一个减少按钮、一个由按钮控制的数值组成

image.png

开关

image.png

滚动条

image.png

回到顶部

image.png

toast提示

image.png

筛选框

筛选同一模块下的不同类别的信息或者是快速启动某些常用的功能模块
image.png

选择器

通过滑动滑轮来选择时间、地点、人物等,滑轮可以承载很多类型选项
image.pngimage.png

键盘

  1. 默认键盘:常规的全键盘(九宫格键盘),不做任何限制
  2. 文本键盘:相比默认键盘取消了表情符号,适合输入密码
  3. 整数数字键盘:只能输入数字0-9
  4. 浮点数数字键盘:在整数键盘基础上增加了小数点
  5. 电话号码键盘:在数字键盘基础上增加了“*” 和 “#”
  6. 邮箱地址键盘:在常规全键盘基础上增加了“@”和“.”
  7. URL键盘:输入网址用的,在常规全键盘上增加或突出“.com”、“.”和“/”等
  8. 数字和符号键盘:相比数字键盘多了很多标点符号

键盘上除了输入内容的按键,可以对动作键的具体功能进行定制
image.png

滑块

image.png

分割线

image.png

字母索引导航

image.png

3、视图类:

列表视图

针对具体某个模块内容的信息进行分类,以列表的形式去呈现
image.png

卡片视图

根据页面内容的变化及时更新图片。适合以图片为主的内容,像新闻、美食、旅行、视频等经常使用
image.png

文本视图

image.png

活动视图

image.png

图像视图

image.png

地图视图

6BD47774-2584-4F21-8B19-808D6CB12C8E.png

集合视图

image.png