数据录入是获取对象信息的重要交互方式,用户会频繁的增加、修改或删除信息。多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验

文本录入

输入框为用户提供了编辑文本的控件,是录入数据最基础和常见的方式

文本框(Input)

输入较少的字符总数,使用单行的输入形式
数据录入 - 图1

文本域(Textarea)

录入长篇幅的单一的文本使用多行的文本区域
数据录入 - 图2

提示与帮助

为提升数据录入效率,通常可以在输入框内增加暗提示以帮助提醒用户。
备注:
当输入框标签文案过长或英文环境下也可放于输入区域的上方,但在同系统中需保持统一
当说明文案较长时,你可以使用一个「信息」图标或者提示工具
对于那些短的输入提醒(短于一句),你可以将其放置在输入框的下方

搜索

搜索可以让用户在巨大的信息池中缩小目标范围,并快速获取需要的信息

选择录入

让用户在一个预定的范围中进行选择

单选框

单选按钮允许用户从多个选项中选择一个选项。Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多

复选框

复选框用于在一组可选项中进行多项选择时

开关

用于切换单个选项的状态。「开关」的内联标签应该显示清楚,例如:禁用/启用,不允许/允许等

选择列表

选择列表(通常称为下拉菜单)允许用户从列表中选择一个选项或多个选项,为用户在选项的数量上提供了更多的灵活性

滑块选择

滑块选择可以在连续或间断的区间内,通过滑动锚点来选择一个合适的数值。这种交互特性使得它在设置诸如音量,亮度,色彩饱和度等需要反映强度等级的选项时是一种极好的选择
注:在不要求精准数值的场景下用户使用「连续滑块」可得到更灵活便捷的操作;在用户需要精确数值时,可与「数字输入框」搭配使用

穿梭框

穿梭框用直观的方式在两栏中移动元素,完成选择行为

日期选择器

日期选择器为用户提供了一种可视化的方式去浏览和选择一个日期或者日期范围

文件上传

上传是将本地的相应信息(包含本地和云储存)通过网页或者上传工具发布到远程服务器上的过程

简单点击上传

一般用于单个上传且不需要预览效果的文件上传,点击按钮弹出文件选择框

显示缩略图上传

一般用于图片文件上传,用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后,上传按钮消失

拖拽上传

把文件拖入指定区域,完成上传,同样支持点击上传