网页制作中文本输入框设计的几点规则
作者：管理员 来源：本站 发表时间：2016/8/11 编辑：广州网页设计
文本输入框设计，不管是网站还是APP，当新用户开始使用一款APP或是入驻某个网站时，大都需要你借助文本输入框来获取少量的个人信息（用户名等）。所以输入框在整个页面的设计对用户体验有着重要的作用。
这看似简单的设计，但一个成熟的文本输入框设计则需要满足许多“潜规则”，今天就跟着方快小编一起来了解下这些规则：
清晰的文本标签
用户想要知道他们输入的字段到底是什么样的数据，自然是需要文本标签清晰的告诉他们。当然，有时候用户也是借助字段相关的图标来了解输入框对应字段含义的（比如用户通常看到放大镜的图标会意识到这是一个搜索框）。但是在绝大多数的情况下，文本的标签是必须有的。
使用短文本标签
标签并非帮助性的说明，所以你应该使用的是简短（几个字）的描述性的短语作为标签，以便用户能够快速扫视。如果有额外的信息，通过上下文或者额外的帮助性的说明来让用户有所了解，而不是超长的标签。
输入焦点
对于输入框，当用户选中准备输入的时候，应当提供清晰的视觉提示，比如外发光的输入框，或者闪动的光标，都行。
输入提示
数据的呈现方式多种多样。所以，当你在设计输入框的时候，应当与用户输入信息的类型、格式相互匹配。不过要做到完全的对应并不容易。
举个例子，电话号码的输入就存在多种不同的方式，比如我们常见的“+86”，而更多的情况下大家可能会直接输入一串11位的手机号，座机号码的情况则更加复杂，有的人习惯加上区号，而又的人则不会。面对这种复杂的情况，你可以通过设计输入框，加入输入提示来“格式化”输入内容。
提供舒适的点击区域
无论你所设计的是网页还是APP，都应当考虑用户在手机上点击屏幕时的体验。你需要确保用户点击输入框的时候的触发区域足够宽松舒适，而不是很难点击。一般说来，拇指的触发区域应当控制在 45~57px之间，但是在移动端上，控件看起来太大会让人觉得不舒服，所以你的文本框高度应该设计在32~40px之间，这样看起来足够友好，又不会太大。
字体尺寸
在设置字体尺寸的时候，应该确保字体足够大，尽量让它们清晰可辨。网页上设置正文字体的时候，最安全的选择是16px，当然，大小的选取主要还是取决于实际的页面设计，如果识别性问题，应当适当调大一些。
标签颜色
标签的色彩应当依从于你的APP或者网页的整体配色方案，并且确保对比度（不能太暗，也别太耀眼）。W3C 在正文文本对比度上有如下的要求：
·较小的文本应当确保至少和背景之间有4.5:1的对比度比率
这看似简单的设计，但一个成熟的文本输入框设计则需要满足许多“潜规则”，今天就跟着方快小编一起来了解下这些规则：
清晰的文本标签
用户想要知道他们输入的字段到底是什么样的数据，自然是需要文本标签清晰的告诉他们。当然，有时候用户也是借助字段相关的图标来了解输入框对应字段含义的（比如用户通常看到放大镜的图标会意识到这是一个搜索框）。但是在绝大多数的情况下，文本的标签是必须有的。
使用短文本标签
标签并非帮助性的说明，所以你应该使用的是简短（几个字）的描述性的短语作为标签，以便用户能够快速扫视。如果有额外的信息，通过上下文或者额外的帮助性的说明来让用户有所了解，而不是超长的标签。
合理的输入框尺寸
如果你的输入框尺寸是按照输入内容的长短、尺寸来设计的话，会更加适宜用户阅读和输入。输入焦点
对于输入框，当用户选中准备输入的时候，应当提供清晰的视觉提示，比如外发光的输入框，或者闪动的光标，都行。
输入提示
数据的呈现方式多种多样。所以，当你在设计输入框的时候，应当与用户输入信息的类型、格式相互匹配。不过要做到完全的对应并不容易。
举个例子，电话号码的输入就存在多种不同的方式，比如我们常见的“+86”，而更多的情况下大家可能会直接输入一串11位的手机号，座机号码的情况则更加复杂，有的人习惯加上区号，而又的人则不会。面对这种复杂的情况，你可以通过设计输入框，加入输入提示来“格式化”输入内容。
提供舒适的点击区域
无论你所设计的是网页还是APP，都应当考虑用户在手机上点击屏幕时的体验。你需要确保用户点击输入框的时候的触发区域足够宽松舒适，而不是很难点击。一般说来，拇指的触发区域应当控制在 45~57px之间，但是在移动端上，控件看起来太大会让人觉得不舒服，所以你的文本框高度应该设计在32~40px之间，这样看起来足够友好，又不会太大。
字体尺寸
在设置字体尺寸的时候，应该确保字体足够大，尽量让它们清晰可辨。网页上设置正文字体的时候，最安全的选择是16px，当然，大小的选取主要还是取决于实际的页面设计，如果识别性问题，应当适当调大一些。
标签颜色
标签的色彩应当依从于你的APP或者网页的整体配色方案，并且确保对比度（不能太暗，也别太耀眼）。W3C 在正文文本对比度上有如下的要求：
·较小的文本应当确保至少和背景之间有4.5:1的对比度比率
·较大的文本（14pt粗体，18pt常规）应当确保和背景之间的对比度超过3:1
上一篇：我对专题页面设计的几点思路
下一篇：渐变让网页设计更加绚丽多彩
