输入作为用户主动与产品进行的交互行为,由于用户需求不同,输入本身就带有很大的可变性与不可预测性。

简简单单的输入行为帮我们开启通往产品新世界的大门,然而缺少反馈设计的输入有时候却让用户不悦甚至迷茫。

相较于输入元件的设计,输入背后的设计才是真正需要设计师根据进一步思考用户的使用情境与行为而精心设计的部分。一、输入行为的载体
输入行为常见的载体是简洁的输入框元件,除了单一输入框的形式,还有与图标或按钮等交互元件的组合形式。这些元件分布在产品页面的各个位置,发挥不同的作用。

输入设计最常出现的位置在产品的搜索设计中,通常采用输入框、图标与文本三种元素相结合的形式。
另一种常使用的位置出现在页面评论处,采用输入框和占位文本结合的形式,在用户点击输入框后键盘自动唤起便于用户评论,同时输入框放大方便预览已输入的信息。以简书APP中出现的输入设计为例,来分析元件载体常出现的位置和形式:

在简信对话页面中,底部输入位置采用了输入框和文本相结合的形式;文章发布页中,采用分割线的形式,这种设计形式摆脱输入框的束缚,呈现出另一种视觉形式。二、输入行为的交互反馈
根据输入载体常出现的位置和形式,可以将输入行为在实际交互过程中的反馈分为:搜索反馈、字数反馈、内部反馈、即时反馈和键盘反馈。
反馈是设计细节上的升华,接下来将为各种反馈提供相对应的产品案例分析,逐一呈现给大家。01 搜索反馈
对搜索输入的设计应该引起我们足够的重视,简单的搜索框能让好的使用体验发挥到极致。同理能力越大,担任的责任也越多。
在豆瓣的搜索过程中,点击搜索框后,首先展示的是最近的搜索记录,展示最近搜索了哪些内容,通过回顾记录也加深对精彩的书或电影的印象。
在右侧的界面中,输入文字后会提供相对应的搜索建议,这种反馈帮助用户减少了完整输入的麻烦。我们只需要提供关键字,搜索建议就能够为我们提供需要的内容。

很多产品都在使用这种形式的反馈,例如百度的搜索引擎、万能的淘宝搜索,这种反馈对用户来说是友好而易用的,产品应该尽快普及这种反馈。02 字数反馈
字数反馈是产品为用户提供的一种明确的字数限制。在固定的空间中用明显的的反馈提示用户,以免他们疑惑为什么无法下一步输入。
在左侧的谷歌翻译中,能看到在输入框右下角显示了总字数的限制以及当前输入了多少文字,这种反馈为我们带来了很清晰的输入指示。

右侧的知乎个人资料编辑页面中,一句话介绍自己的字数限制在30个,当输入超过限制字数后就会弹出明显的反馈框提示不能超过限制。这种形式的反馈能让受众快速认识到当前输入存在的问题却不会打消输入的积极性。03 内部反馈
这里的内部反馈是指信息在输入框内的表现形式。当前很多产品的输入框的高度设计是动态可变化的,当文字超过一行便向上延展高度,至少可以显示三至五行,比如大家熟悉的微信就默认显示5行文字,超过则不再变化。
简书的评论输入框中,当文字超出输入框的范围,输入框右侧会出现滑动条,用户可以上下滑动查看内容,避免溢出框外的内容无法再被检视。

右侧Messages的输入框中,采用和简书不一样的反馈形式,当输入文字过多时输入框上方的边界没有完全切齐文字,故意露出文字下半部可以引导用户知道有更多的文字在上方。二者反馈的形式虽然不同,最终达成的效果却是异曲同工的。将这两种设计形式巧妙地结合在一起,输入反馈能达到事半功倍的效果。04 即时反馈
即时反馈就是即时校验。大家普遍不喜欢填完一个长表单并提交之后,才发现哪里填错了需要重新填写。在错误出现之后,界面应该在第一时刻将错误信息呈现出来,让他们能更早改正错误。 这种反馈屡见不鲜,但却不是每个都做得很好。
在慕课网的登录页面中,当输入手机号出现问题时,在输入密码前会出现紧贴着输入框的报错信息,立刻检验输入的内容是否正确,用户更快地被提醒错误并修正内容,让用户更有信心、更快地完成输入。

通常我们在设计时关注的都是输入错误状态下的红色反馈,实际上输入正确后绿色的成功反馈有时也很必要。05 键盘反馈
键盘反馈更像是不同输入框对应的键盘设计。不同的使用场景中出现合适的键盘也是设计中该考虑的部分,例如输入银行账号时对应的数字键盘。
左侧是汽车之家的注册页,点击快捷注册时,输入框获得焦点并唤起数字键盘,省去再次切换键盘的麻烦。付款时直接弹出数字键盘(指纹没被识别出来时),在微信红包的输入中,点击总数会弹出数字键盘方便直接输入金额。

对于数字键盘的安全性(习惯)与用户体验(虚拟键盘容易误触)间的平衡同样需要在设计中考虑。总结正确的时间该做正确的事,简洁的输入中应该使用恰当的反馈。
输入得到反馈好似用户有了一份可供参考的行动指南,使用起产品也会无所拘束,所以有时候看似简单的设计却能带来意料之外的收获。
希望文章对你有所帮助,欢迎分享给更多的朋友~

qlineedit限制输入数字_请注意:输入设计需要这些交互反馈相关推荐

  1. python 键盘输入数字_九宫格键盘输入

    九宫格键盘输入 Letter Combinations of a Phone Number 给定一个数字字符串,返回数字可能代表的所有可能的字母组合. 数字到字母的映射(就像九宫格电话按钮一样)如下图 ...

  2. Java黑皮书课后题第4章:*4.11(十进制转十六进制)编写程序,提示用户输入0~15之间的一个整数,显示其对应的十六进制数。对于不正确的输入数字,提示非法输入

    *4.11(十进制转十六进制)编写程序,提示用户输入0~15之间的一个整数,显示其对应的十六进制数.对于不正确的输入数字,提示非法输入 题目 题目概述 运行示例 破题 代码 题目 题目概述 *4.11 ...

  3. 怎么解决运行时输入错误,请重新输入以及专业无法输入的问题

    #include<iostream> using namespace std; #include<string> #define MAX 1000     // 设计联系人结构 ...

  4. c语言实验输入数字星期输出英文,输入数字星期,输出英文

    Problem G: C语言实验--输入数字星期,输出英文(选择结构-switch) Time Limit:1 Sec Memory Limit: 64 MB Submit:205 Solved:12 ...

  5. 根据用户输入的账号和密码,确认是否成功登录?若正确,提示“恭喜您,登录成功!”;若错误,提示“账号或密码输入错误,请重新输入!”;若错误输入超过3次,则提示“今天输入已经超过3次

    根据用户输入的账号和密码,确认是否成功登录?若正确,提示"恭喜您,登录成功!":若错误,提示"账号或密码输入错误,请重新输入!":若错误输入超过3次,则提示&q ...

  6. java 文本框只能输入数字_怎么让文本框只能输入数字呢?

    增加了一些类,现在可以实现只可以输入数字这一个功能了 import java.applet.Applet; import java.awt.Button; import java.awt.Event; ...

  7. vueinput里只能输入数字_大佬们,vue里面 限制input只能输入数字怎么做啊?

    可以参考下面的,目前这个是限制,只能输入数字,小数点只保留2位,限制不能输入空格 new Vue({ el: "#app", data: { a: "" }, ...

  8. uni判断输入的是否是数字_如何判断输入的字符串是否为数字?

    问题阐述 在 C 中,如何判断输入的字符串是否为数字? 专家解答 1.知识点介绍 开发程序时,经常需要判断输入的字符串是否为数字,例如,判断输入的电话号码.货币金额和邮编等.在程序中判断是否为数字的方 ...

  9. python 键盘输入数字_python实现键盘输入的实操方法

    python实现键盘输入的实操方法 python中有指定的代码进行输入操作,所以今天就由小编来为大家介绍python怎么实现键盘输入. 第一首先打开电脑的python编辑工具. 再创建python项目 ...

  10. java文本框输入数字_Java 文本框输入数字限制以及输入数字大小限制

    问题: 之前我有一篇博文也写了这个问题,也是使用的字符串来控制文本框的输入数字 不过,那篇博文给的方法只能限制数字输入,以及数字输入长度的限制 今天给出可以限制输入数字大小的方法,例如:希望输入的数字 ...

最新文章

  1. 网络安全系列之七 网站提权
  2. linux删除某个用户的共享内存,删除Linux上的所有共享内存和信号量
  3. Linux 中的文件压缩与解压
  4. 实现 tomcat 热加载证书
  5. 《Finite-Element Neural Networks for Solving Differential Equations》梳理
  6. AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式
  7. 一个很不错的开发管理中文个人网站
  8. SELinux系列(二)——SELinux有什么作用
  9. 一个简单demo通过em实现‘响应式设计、em、文字图标svg’
  10. 计算机组成原理—基本概念(不基础的部分)
  11. 【BZOJ-1097】旅游景点atr SPFA + 状压DP
  12. TYVJ 4354 多重背包二进制优化
  13. 【遥感图像处理软件】ArcGIS Pro 使用总结
  14. 怎样设置有道词典屏幕取词后自动翻译?
  15. Android仿miui11风格,华为手机适配MIUI11图标风格主题-适配EMUI9.1/9.0
  16. 微博 用户画像_微博的用户画像是怎样构建的?
  17. 基于Echarts实现可视化数据大屏服务大数据可视化监管平台
  18. 大数据处理的基本流程是什么?
  19. 【星辰傀儡线·命运环·卷一 血鸦】 4 金盔少女
  20. 【CTF】咏春招新赛收获兼write up

热门文章

  1. 在Android studio环境下使用junit框架进行单元测试
  2. UVA 10369 - Arctic NetWork (求最小生成树)
  3. Android网络课程笔记-----完善GoogleStyleApp框架结构
  4. C#WINFORM控件之ComboBox
  5. 线程池的实现原理分析
  6. easyui刷新当前选项卡tabs
  7. SpringAop源码一:通知方法优先级
  8. DICOM中的入门概念
  9. FineUI之使用SQL脚本从数据库表中生成对应的输入控件
  10. JS学习之Object