UI设计输入框的细节有哪些
新闻来源:优漫教育
日期:2021-08-13
每一个细节都是一个合格的用户界面设计者的考虑范围。界面上,我们看到的一个常见元素,却经常被我们忽略,那就是“输入框”。在我们和用户进行有效交互时,输入框是一个元素。使用者通过输入资讯与企业沟通。
因此,输入框的设计将变得极其重要。当我们设计输入框时,我们经常需要遵守以下几条规则。今日,广州UI设计培训学校小编就来和你讨论一下。
一、标注键盘类型。
基于输入框的不同数据类型,为用户提供不同的键盘标注,如输入手机号是标注数字键盘等,用户将倾向于选择那些根据输入内容提供合适键盘的应用。
二、考虑键盘唤醒的状态。
左图:这样的布局看起来没问题,但是没有考虑键盘调到的状态,因为登录按钮会被屏蔽,操作成本也会增加。
中图:无论是否激活了键盘,页面的布局都不会发生变化。
右下角:当键盘唤醒时,页面向上提起,登录按钮就会泄漏。
三、减少用户输入。
添加一次清除按钮:当输入框内容不为空时获得焦点,显示清除内容的一次性按钮,无需用户一直按删除键,一个个字符删除。
智能预设:需要填写的表格,选取的表格最好有预设的初值或内容填入其中,既可以是建议,也可以是相关的推荐,这样可以帮助用户更加准确、高效地填写信息。常用的使用场景有搜索联想输入、地址定位等。
四、输入提示。
有多种方式显示数据。因此,当您设计输入框时,应该和用户输入信息的类型、格式相匹配。
01、当选择输入框准备输入时,应提供清晰的视觉提示,这样用户就能清楚地知道自己的位置,而不会迷失在茫茫的表格中,这种细微的反馈可以让用户更有主控。例如输入框外发光,或光标闪烁,变色、加粗等都行。
02、金额输入:当用户输入的金额超过千时,出现最高分位提示,每多输入一位,最高分随之增加。
03、通过设计输入框的格式来对输入内容进行“格式化”,让用户能够清楚地知道应该输入什么类型,多少位。
04、对于手机的输入设置为3-4-4格式,身份证输入设置为6-8-4格式,方便用户能清楚、及时地知道自己输入的号码有无缺漏。【对于身份证和手机来说,保存后可以把数字的中间数字改成*号,毕竟是敏感信息。
05、输入框的输入记录:增加输入框的内容,如登录用户名、手机号等,无需用户二次登录时输入,提高输入率,优化用户体验。
五、必要的描述。
01、不要过于依赖占位的文字和标签。输入框中的内容一旦输入,将无法看到占位文本,用户将无法检查输入的内容是否正确,第二个则当用户在输入框中看到提示文本时,他们可能会认为该文本框已预先填好而忽略了。浮动标签可用于用户填写当前文本框时,行内标签将浮动在文本框的顶部,以便用户在任何时候确认自己填写的内容是否正确。通常,当输入框中的数量超过两个时,内线标签将不再适用。
02、添加文字说明:比如专业性很强,对大众可能不清楚的文字解释:例如银行转账不能及时到账,需要两小时,金额每天有上限,且与余额有关。假如这些是用户输入完才通知的,或者报错了,那么这个锅用户当然不愿意背。比如说安全的隐私或者金钱相关,有心理顾虑,可以承诺不给用户造成损失,或者找人背书,这个方案已经通过XXX安全认证。在排除了顾虑后,可以顺利进行下一步。
03、帮助信息(或相关的文字)应该出现在需要的地方,例如:为什么需要填写信用卡号码的表单,以及填好生日日期后的福利,或者存在“服务条款”链接。这两种方法可以帮助用户解释一些令人困惑的问题。一般来说,此类帮助信息最好不要超过100字。
六、明确的反馈。
有关填写错误的描述应十分清楚,如登记时要填写密码,不要说密码安全过低,而要说密码必须超过8位,或者密码必须包含大小写和数字。
登记填写手机号码,当提示用户手机号码已经登记时,应提供跳转登录入口。
七、核实及时。
1、在用户填写完内容后立即通知用户是否输入内容正确,不要等到提交后才提示。
2、实时的页面内校验能立即告诉用户输入是否正确。协助用户及时修正,无需等待点击提交按钮。只要修正一处错误,那就容易,可以减少用户放弃的可能性。
八、输入限制问题。
如果输入框只输入一行,就不会有任何问题,但是输入多行时,如果UI设计培训学校输入框对字数有限制,而你没有把规则告诉用户,那用户就会很讨厌。
微信个性签名会在输入框右下角提示您还能输入多少单词;5行以内的输入框将自动撑起;如果超过5行,则输入框没有变化,超过5行文字被遮挡。但是微信这里有个细节体验并不好,因为遮挡的内容完全看不见。这种点唱法的聊天界面做得比较好,被阻挡的文字会露出半行,让用户知道原来上面还有单词。
发布微博时,会在右下角告诉你已经输入了多少文字,如果超过140字,颜色就会变成橘黄色,作为警告。知乎提问界面,在距离限制字数差10个字以内时,提示还差几个字;当输入超过限定字数时,会直接提示超过多少字。