这个交互描述怎么写:InputText 输入框

本文从输入框的定义、使用场景、相关组件、交互说明都有详细的分析,作者还附上输入框的源文件供大家参考学习。往期回顾:交互控件科普系列!Banner 的常见样式和设计注意事项总结当你需要展示一段持续提示,却又不想打断用户操作。用 Dialog 弹窗会打断用户操作,Toast 又不够明显,Snackbar 会自动消失,那么不妨就来跟我一起认识下能满足该要求的 Banner 控件吧。阅读文章

本文从输入框的定义、使用场景、相关组件、交互说明都有详细的分析,作者还附上输入框的源文件供大家参考学习。

往期回顾:

定义

通过鼠标或键盘输入文字、字母、数字、符号内容。

使用场景

  • 填写表单时;
  • 需要输入文本数据时。

相关组件

  • 当仅需要输入数字时,使用 InputNumber 数字输入框;
  • 当进行搜索时,使用 Search 搜索框;
  • 当需要进行包含图片、文本等内容的复杂输入时,使用 RichText 富文本编辑器。

交互说明

1. CASE1 输入框高度说明

输入框根据行数分为三种类型:单行输入框、定高文本域、自适应高度文本域。

2. CASE2 输入框宽度说明

  • 输入框宽度根据实际情况确定,宽度固定无自适应;
  • 为方便阅读,不可过宽(具体宽度由 UI 定义)。

3. CASE3 输入内容说明

  • 可输入文字、字母、数字、符号;
  • 如无特殊说明,不可输入 emoji 表情;
  • 如无特殊说明,第一个字符不可为空格或回车;
  • 过滤文本样式、链接;
  • 输入的内容为保密信息时,显示圆点,不直接显示字符。

4. CASE4 控件状态说明

输入框共分为启用、聚焦、禁用、输入中、加载、报错、符合条件 7 种状态。

5. CASE5 暗提示说明

未输入任何内容时,输入框中需显示暗提示:

6. CASE6 字数限制说明

输入框必须对可输入的字数进行限制,分为以下两种限制方式:

源文件

下载链接: https://pan.baidu.com/s/1aq7dc2Iv3qpEF6g2PVF5uA 提取码: ridu

备用下载链接:https://share.weiyun.com/5xrRyZ0

欢迎关注作者的微信公众号:「愚者笔记」

相关推荐

  • 用4个经典的重量级产品案例,告诉你什么是标杆式体验设计

    今天和大家聊一个很多朋友常年卡在 P5/P6 需要关心的命题——如何从业务出发打造具有商业价值还能兼顾用户体验的设计,此篇不谈理论,就通过 4 个经典的重量级产...

    Border circle 18h_kitwish 2020-05-21 09:33:22 1 0 256

  • 爱奇艺 VR 设计实战案例:空间布局篇

    本系列文章旨在由浅入深、由理论到实践系统地介绍了本团队在近几年的设计工作中的一些经验总结和重点思考。本系列面向广大设计师,不论你目前在做什么领域/哪个端的设计,...

    Border circle 18h_8872 2020-05-16 16:05:52 3 0 177

发表评论