文本
1、文本框
当可输入的字符总数较少时,使用单行文本。
限制上限输入的文字数量不可超过文本框的总长度。
2、文本域
当可输入的字符总数较多时,使用文本域进行显示。
符合预期当文本域输入的字符可能较多时,可适当增加初始面积。此外,需明确告知用户文本域可输入字符的准确数量和当前数量。
灵活可控提供文本域自定义高度的功能,保证输入的舒适性和可视性。
3、富文本
当需要输入大量文字并且存在排版、配图等需求时,使用富文本进行显示。
编辑能力提供较为全面的文本编辑操作;优先展示高频编辑操作,其余操作隐藏处理。
4、搜索框
通过文本输入帮助用户快速查找并聚焦关键信息,可使用搜索。
提供指引通过搜索框默认文案告知用户搜索的有效维度;根据需要给用户提供联想结果。
快速撤销需要明确告知用户应该如何退出搜索状态。
5、提示
提升用户输入内容的准确性和效率,可使用提示性文案的方式显示在文本区域。
默认文案在文本框和文本域内显示默认文案,告知用户输入规则;在用户还未输入任何字符时显示。
底部提示在文本框和文本域下方显示提示,对业务规则或输入目的等信息进行说明。
选择
1、单选框
引导用户在指定的选择范围内单选操作。
控制字数避免选择项过多给用户造成认知负担,选择项应控制在 2-5 个之间。
排列规则选择项名称不宜过长,应控制在 2-8 个字,当无法简单描述时应采用提示方式显示在所属选择项下方;当选择项存在提示文案或名称长度在 6-8 个字时,应竖排左对齐显示。
应用规则单选框为必填项;部分情景下,初始状态下需给用户默认勾选第一项。
2、复选框
多个复选框可表示用户在指定的选择范围内多选操作;单个复选框可表示用户在两种状态之间做切换操作。
控制字数避免复选框数量过多给用户造成认知负担,复选框数量不宜过多,当出现数量较多时,可尝试用过其他方式进行表现。
排列规则复选框名称不宜过长,应控制在 2 - 8 个字,当无法简单描述时应采用提示方式显示在所属复选框下方;当复选框存在提示文案或名称长度在 6 - 8 个字时,应竖排左对齐显示。
应用规则复选框可根据场景设置是否必填;初始状态下不可默认勾选某内容。
3、开关
对某功能进行切换状态的操作,需明确告知用户当前开关的状态。
4、滑块选择
滑块可满足用户对指定数值区间进行修改的操作需求。
数据粒度明确滑块可设置的数据颗粒度;根据数据颗粒度给滑块赋予吸附属性。
精确设置根据场景,给用户提供精确设置能力,提供输入框或进步器。
5、穿梭框
用于将数据在两块区域之间进行移动的操作。
上传
1、上传图片
帮助用户将本地图片快速上传至服务器。
图片要求明确告知用户上传图片的格式和质量的要求;告知用户上传图片的上限数量。
二次编辑提供用户对图片二次编辑的能力。例如:裁剪。
状态可控明确告知用户上传的状态。例如:上传中、上传失败、上传成功等。
可撤回已上传的图片均需提供删除功能。
2、上传文件
帮助用户将本地文件快速上传至服务器。
文件要求明确告知用户上传文件的格式和质量的要求;通过状态变化告知用户上传文件的数量限制。
状态可控明确告知用户上传的状态。例如:上传中、上传失败、上传成功等。
可撤回已上传的图片均需提供删除功能。