基本交互
字体:对字体进行统一的规范
边框:对边框进行统一额规范,可用于按钮、卡片、弹窗等组件里
边框:实线、虚线
圆角:无圆角、小圆角(2px)、大圆角(4px)、圆形圆角(30px)
投影样式:基础投影、浅色投影
按钮:默认按钮、朴素按钮(颜色朴素)、按钮禁用(按钮不可用状态)、文字按钮(没有边框和背景色的按钮)、图标按钮(带有图标的按钮可增强辨识度)
文字链接:可用文字链接和不可用文字链接
交互样式
单选框:有一组备选项中进行单选,由于选项默认可见,不宜过多,选择过多建议使用选择器
多选框:一组备选项中进行多选,适用于多个勾选框绑定同一个数组的情景,通过是否勾选来表示这一组选项中选中的项
输入框:通过键盘输入字符;
基本输入框、禁用输入框、可清空、密码框、带icon的输入框、文本域、可自适应文本高度的文本域(根据文本内容自动进行调整)、复合型输入框(前置或后置元素、一般为按钮或者标签)、带输入建议(根据输入内容提供对应的输入建议)、输入长度限制
计数器:仅允许输入标准的数字值,可定义范围
可以定义递增递减步数和精度
选择器:当选项过多时,使用下拉菜单展示并选择内容
基础的单选、有禁用选项、禁用状态(选择器不可用)、可清空单选(选择器清空为初始状态)、基础多选(可以选择多个内容)、分组(备选内容进行分组展示)、可搜索(利用搜索功能快速查找选项)、远程搜索(从服务器搜索数据,按照输入关键字进行查找)
级联选择器:当一个数据有清晰的层级结构时,可通过级联选择器逐级查看并选择
可清空(设置输入框可清空)、仅显示最后一级(仅在输入框中显示最后一级的标签,而不是选中项所在的完整路径)、多选(开启多选模式)、选择任意一级选项(单选模式只可以选择叶子的节点,多选模式下勾选父节点真正选中的都是子节点,开启任意功能后,父子节点关联性取消,可以选择任意一项)、可搜索(可以快捷搜索选项并选择)、级联面板
开关:表示两个相互对立的状态间的切换,多用触发开关
滑块:通过拖动滑块在一个固定区间内进行选择
基础用法(在拖动滑块时显示当前值,可以使用默认初始值,也可以进行自定义初始值)、离散值(选项是离散的,可以选择显示或不显示离散点)、带有输入框(通过输入框设置精确数值)、范围选择(支持选择某一数值范围)
时间选择器:用于选择或输入时间
固定时间点(提供几个固定点供用户选择)、任意时间点、固定时间范围(开始时间和结束时间为固定时间)、任意时间范围
日期选择器:用于选择或输入日期
选择日(以日为基本单位,可以带快捷方式如今天、昨天、一周前)、其他日期单位(可以选择周、月、年等)、选择日期范围
日期时间选择器:在同一个选择器里选择日期和时间
日期和时间点(默认的日期和时间点、带有快捷方式的选择、设置的默认日期时间点)、日期和时间范围、
上传:通过点击或者拖拽上传文件
点击上传(上传图片列表缩略图、上传文件列表控制)
评分:给出功能的相关评分
默认不通过颜色区分,可以通过颜色区分、辅助文字区分、其他icon区分
穿梭框:对多个备选内容进行选择,可以通过搜索对数据进行过滤
表单:由输入框、选择器、单选框、多选项等交互控件组成,用于收集、校验、提交数据
表单的对齐方式:右对齐、左对齐、顶部对齐
表单验证:在防止用户犯错的前提下,尽可能让用户更早发现并纠正错误
数据
表格:用于展示多条结构类似的数据,可对数据进行筛选、排序、对比等操作
表格的展示:带斑马纹表格(使用斑马纹可以清晰区分不同行的数据)、带状态的表格(方便区分状态标识)
表格的操作:固定表头(纵行内容过多时)、固定列(横向内容过多时)、固定列和表头、流体高度、多级表头、单选、多选、排序、自定义列、展开行(当行内容过多并且不想显示横向滚动条时,可以使用行展开)、表尾合计行
标签:用于标记和选择
进度条:用于展示操作进度,告知用户当前状态和预期
线形进度条(百分比内显,可用于文件上传等场景)
环形进度条
树形展示:用清晰的层级结构展示信息,可展开或折叠
树形展示:全部展示、手风琴模式(同一级节点,每次只能展开一个)、节点过滤
树形选择:单选、多选
自定义节点内容:增加或者修改节点内容
分页:当数据量过多时,使用分页分解数据
分页展示:页数较少时、页数较多时、跳转页、跳转每页显示条数
标记:出现在按钮、图标旁的数字或状态标记
标记:用于展示新消息的数量,可以自定义最大值
头像:对图标、图片或者字符的形式展示用户或事物信息。
注意
警告:用于页面中展示重要的提示信息。
加载:加载数据时展示动效,在表格等数据中加载数据时显示。
消息提示:用于主动操作后的反馈。
弹框:用于消息提示、确认消息和提交内容
通知:悬浮出现在页面交流,显示局部的通知提醒消息
导航
导航菜单:为网站提供导航功能的菜单
展示方式:顶栏、侧栏以及折叠
标签页:分隔内容上有关联但属于不同类别的数据集合
展示位置:top、right、left、bottom
操作:动态增减标签页、自定义标签页
面包屑:显示当前页面路径,快速返回之前的任意页面
页头:通过页头的返回等操作直接返回上层页面
下拉菜单:将动作或菜单折叠到下拉菜单中
步骤条:引导用户按照流程完成任务的分布导航条,可根据实际场景设定步骤,步骤不得少于两步
步骤条中可以包含状态、描述等
其他交互
对话框:在保留当前页面状态的情况下,告知用户并承载相关操作
文字提示:常用于展示鼠标悬停(hover)的提示信息
弹出框:和文字提示类似
气泡确认框:点击元素,弹出气泡确认框
卡片:将信息聚合在卡片容器中展示
走马灯:在有限的空间内,循环播放同一类型的图片、文字等内容
展示:指示器(指示器显示在容器外部)、切换箭头、卡片化
折叠面板:通过折叠面板收纳内容区域
时间线:可视化地呈现时间流信息
分割线:区域内容分隔
日历:显示日期
图片:图片容器,支持懒加载、自定义占位、加载失败等
回到顶部:返回页面顶部的操作按钮
无限滚动:滚动至底部时,加载更多数据
抽屉:呼出一个临时的侧边栏,可以从多个方向呼出