设计文本输入框的技巧有哪些？

2021-06-13 分类：网站建设

文本输入框是大部分UI设计师都会用到的控件，虽然看起来很简单，但对用户体验影响还是很大的，之前创新互联分享过网页设计中文本输入框的参数说明，今天创新互联来说说设计文本输入框的技巧有哪些？

1、清晰的文本标签

用户想要知道他们输入的字段到底是什么样的数据，自然是需要文本标签清晰的告诉他们。当然，有时候用户也是借助字段相关的图标来了解输入框对应字段含义的(比如用户通常看到放大镜的图标会意识到这是一个搜索框)。但是在绝大多数的情况下，文本的标签是必须有的。清晰的标签让用户更加自信，正确理解，并且正确地操作。

2、合理的输入框尺寸

如果你的输入框尺寸是按照输入内容的长短、尺寸来设计的话，会更加适宜用户阅读和输入。

3、输入框焦点

对于输入框，当用户选中准备输入的时候，应当提供清晰的视觉提示，比如外发光的输入框，或者闪动的光标，都行。

4、输入提示

数据的呈现方式多种多样。所以，当你在设计输入框的时候，应当与用户输入信息的类型、格式相互匹配。不过要做到完全的对应并不容易。

5、可访问性

确保不同状况的用户都能无障碍地、轻松浏览和填写输入框，永远不要使用全部是大写字母的文本标签，这样的标签通常都很难快速浏览，因为字母的大小高度都是一致的，对于非英语言国家的用户尤其麻烦。

6、字体尺寸

在设置字体尺寸的时候，应该确保字体足够大，尽量让它们清晰可辨。网页上设置正文字体的时候，最安全的选择是16px，当然，大小的选取主要还是取决于实际的页面设计，如果识别性问题，应当适当调大一些。

7、标签颜色

标签的色彩应当依从于你的APP或者网页的整体配色方案，并且确保对比度(不能太暗，也别太耀眼)。W3C 在正文文本对比度上较小的文本应当确保至少和背景之间有4.5:1的对比度比率，较大的文本(14pt粗体，18pt常规)应当确保和背景之间的对比度超过3:1。

8、提供舒适的点击区域

无论你所设计的是网页还是APP，都应当考虑用户在手机上点击屏幕时的体验。你需要确保用户点击输入框的时候的触发区域足够宽松舒适，而不是很难点击。一般说来，拇指的触发区域应当控制在 45~57px之间，但是在移动端上，控件看起来太大会让人觉得不舒服，所以你的文本框高度应该设计在32~40px之间，这样看起来足够友好，又不会太大。

9、尽量减少用户输入

填写表单本身就是一件苦差事，绝大多数时候它都不会变得令人愉悦。因此，许多需要填写、选取的表单最好有预设的初始值或者内容填充在其中，这样可以让用户用起来更加方便许多内容和参数其实你可以通过其他的方式计算并获得(比如你可以根据用户的地理位置来帮他们填写邮政编码)，也可以通过之前在其他地方输入的数据来填补内容。

分享标题：设计文本输入框的技巧有哪些？
当前网址：/news33/117433.html

成都网站建设公司_创新互联，为您提供网站收录、建站公司、小程序开发、定制开发、网站维护、品牌网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容