layui 数字步进器_光音移动设计规范 — 表单类

表单在产品中主要负责数据采集功能。表单类组件指的是需要用户手动填写或者选择信息的组件。

光音移动端设计规范针对表单类组件，目前收录了8个(后续会增加)，分别为：

1、开关

2、单选和复选

3、步进器

4、滑块

5、单文本框

6、数字输入框

7、多行文本框

8、选择器

开关

定义：

开关组件是在仿照物理开关，让用户打开或关闭某个项目。

一般是用户的设置项，通常和列表相结合，放置在每个单元格的右侧，同时格内部允许再放置其他操作按钮。

开关应该有开和关两种状态，设计按钮时要避免状态和操作的歧义。

用途：

表示两种相互对立的状态间的切换，例如开/关、是/否状态。

1、基础类：

App最常见的开关样式，当开关开启时，所展示的开关颜色和产品的主色保持一致。

开关存在三个状态，分别为：开启、关闭和禁用状态(用户点击无交互事件)。

交互说明：

根据业务需要，需自定义选项默认开启还是关闭。点击开关按钮，进行开关的两种状态切换。

2、扩展类：

扩展类常见的有三类：

第一类：开启后出现解释，方便用户理解开关开启或者关闭所代表的含义。

第二类：带文字开关，解释当前开关状态，避免用户对开关状态理解错误。

第三类：带icon，通过icon的隐喻，进一步解释当前开关的状态。

关键信息及标注：

单选和复选

定义：

单选：单选用来表示单元格已被选中，通常在2个或2个以上的选项中进行单个选择时用到，当选项超过5个时，建议使用选择器。

复选：多选项中有选中态、未选中态、禁用态。一般放置在可选信息左侧(图片、视频等以宫格形式表现的选择页面除外)

用途：

单选：用于对一组选项中选择其中一项。

多选：1.在一组可选项中进行多项选择时；2.单独使用时可以表示是/否状态之间的切换。

1、基础类

单选组件，文字在左，单选在右边，如下图所示：

交互说明：点击整个条目选中或取消选中，并显示对应状态的标记，未选中