网页类产品的基本交互方式

基本交互

字体：对字体进行统一的规范

边框：对边框进行统一额规范，可用于按钮、卡片、弹窗等组件里

边框：实线、虚线

圆角：无圆角、小圆角（2px）、大圆角（4px）、圆形圆角（30px）

投影样式：基础投影、浅色投影

按钮：默认按钮、朴素按钮（颜色朴素）、按钮禁用（按钮不可用状态）、文字按钮（没有边框和背景色的按钮）、图标按钮（带有图标的按钮可增强辨识度）

文字链接：可用文字链接和不可用文字链接

交互样式

单选框：有一组备选项中进行单选，由于选项默认可见，不宜过多，选择过多建议使用选择器

多选框：一组备选项中进行多选，适用于多个勾选框绑定同一个数组的情景，通过是否勾选来表示这一组选项中选中的项

输入框：通过键盘输入字符；

基本输入框、禁用输入框、可清空、密码框、带icon的输入框、文本域、可自适应文本高度的文本域（根据文本内容自动进行调整）、复合型输入框（前置或后置元素、一般为按钮或者标签）、带输入建议（根据输入内容提供对应的输入建议）、输入长度限制

计数器：仅允许输入标准的数字值，可定义范围

可以定义递增递减步数和精度

选择器：当选项过多时，使用下拉菜单展示并选择内容

基础的单选、有禁用选项、禁用状态（选择器不可用）、可清空单选（选择器清空为初始状态）、基础多选（可以选择多个内容）、分组（备选内容进行分组展示）、可搜索（利用搜索功能快速查找选项）、远程搜索（从服务器搜索数据，按照输入关键字进行查找）

级联选择器：当一个数据有清晰的层级结构时，可通过级联选择器逐级查看并选择

可清空（设置输入框可清空）、仅显示最后一级（仅在输入框中显示最后一级的标签，而不是选中项所在的完整路径）、多选（开启多选模式）、选择任意一级选项（单选模式只可以选择叶子的节点，多选模式下勾选父节点真正选中的都是子节点，开启任意功能后，父子节点关联性取消，可以选择任意一项）、可搜索（可以快捷搜索选项并选择）、级联面板

开关：表示两个相互对立的状态间的切换，多用触发开关

滑块：通过拖动滑块在一个固定区间内进行选择

基础用法（在拖动滑块时显示当前值，可以使用默认初始值，也可以进行自定义初始值）、离散值（选项是离散的，可以选择显示或不显示离散点）、带有输入框（通过输入框设置精确数值）、范围选择（支持选择某一数值范围）

时间选择器：用于选择或输入时间

固定时间点（提供几个固定点供用户选择）、任意时间点、固定时间范围（开始时间和结束时间为固定时间）、任意时间范围

日期选择器：用于选择或输入日期

选择日（以日为基本单位，可以带快捷方式如今天、昨天、一周前）、其他日期单位（可以选择周、月、年等）、选择日期范围

日期时间选择器：在同一个选择器里选择日期和时间

日期和时间点（默认的日期和时间点、带有快捷方式的选择、设置的默认日期时间点）、日期和时间范围、

上传：通过点击或者拖拽上传文件

点击上传（上传图片列表缩略图、上传文件列表控制）

评分：给出功能的相关评分

默认不通过颜色区分，可以通过颜色区分、辅助文字区分、其他icon区分

穿梭框：对多个备选内容进行选择，可以通过搜索对数据进行过滤

表单：由输入框、选择器、单选框、多选项等交互控件组成，用于收集、校验、提交数据

表单的对齐方式：右对齐、左对齐、顶部对齐

表单验证：在防止用户犯错的前提下，尽可能让用户更早发现并纠正错误

数据

表格：用于展示多条结构类似的数据，可对数据进行筛选、排序、对比等操作

表格的展示：带斑马纹表格（使用斑马纹可以清晰区分不同行的数据）、带状态的表格（方便区分状态标识）

表格的操作：固定表头（纵行内容过多时）、固定列（横向内容过多时）、固定列和表头、流体高度、多级表头、单选、多选、排序、自定义列、展开行（当行内容过多并且不想显示横向滚动条时，可以使用行展开）、表尾合计行

标签：用于标记和选择

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

线形进度条（百分比内显，可用于文件上传等场景）

环形进度条

树形展示：用清晰的层级结构展示信息，可展开或折叠

树形展示：全部展示、手风琴模式（同一级节点，每次只能展开一个）、节点过滤

树形选择：单选、多选

自定义节点内容：增加或者修改节点内容

分页：当数据量过多时，使用分页分解数据

分页展示：页数较少时、页数较多时、跳转页、跳转每页显示条数

标记：出现在按钮、图标旁的数字或状态标记

标记：用于展示新消息的数量，可以自定义最大值

头像：对图标、图片或者字符的形式展示用户或事物信息。

注意

警告：用于页面中展示重要的提示信息。

加载：加载数据时展示动效，在表格等数据中加载数据时显示。

消息提示：用于主动操作后的反馈。

弹框：用于消息提示、确认消息和提交内容

通知：悬浮出现在页面交流，显示局部的通知提醒消息

导航

导航菜单：为网站提供导航功能的菜单

展示方式：顶栏、侧栏以及折叠

标签页：分隔内容上有关联但属于不同类别的数据集合

展示位置：top、right、left、bottom

操作：动态增减标签页、自定义标签页

面包屑：显示当前页面路径，快速返回之前的任意页面

页头：通过页头的返回等操作直接返回上层页面

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

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

步骤条中可以包含状态、描述等

其他交互

对话框：在保留当前页面状态的情况下，告知用户并承载相关操作

文字提示：常用于展示鼠标悬停（hover）的提示信息

弹出框：和文字提示类似

气泡确认框：点击元素，弹出气泡确认框

卡片：将信息聚合在卡片容器中展示

走马灯：在有限的空间内，循环播放同一类型的图片、文字等内容

展示：指示器（指示器显示在容器外部）、切换箭头、卡片化

折叠面板：通过折叠面板收纳内容区域

时间线：可视化地呈现时间流信息

分割线：区域内容分隔

日历：显示日期

图片：图片容器，支持懒加载、自定义占位、加载失败等

回到顶部：返回页面顶部的操作按钮

无限滚动：滚动至底部时，加载更多数据

抽屉：呼出一个临时的侧边栏，可以从多个方向呼出