文本输入框设计的详细解析.docxVIP

文本输入框设计的详细解析 一、信息输入前 1. 舒适的大小 输入框大小是否合适，以便完整显示那些最有可能出现的输入内容；表单输入框的大小往往会影响用户输入的心情。 设计考虑到网页无障碍阅读，即输入框文字的前景色跟后景色要有足够的对比度，提高可识别性。 1）输入框长度应符合用户预期 搜索查询输入区域的宽度应足够宽，以包含典型的字符。 如果“输入”字段太窄，则会降低可用性，输入框中文本字段可能的输入长度应该小于输入框本身的长度，这样不仅在体验上一致，而且在视觉体验上更加愉悦。 2）填充外观 灰色的填充使容器看起来像处于禁用状态，它的使用会让用户怀疑能否与之进行交互，发送这些混合信号会使他们在开始输入文本之前就感到困惑。 理想的体验是当用户识别你的文本字段就立即开始填写，空白是空虚的明确提示，它提示用户使用其输入来填充空白。 要获得可填充的外观，要使容器内部保持空白，并留有封闭的边框，使边框变暗，使用户可以将轮廓比作一个空框；它们吸引了人们的注意力并且易于识别，这正是用户所需要的。 要增强文本字段的可填充性，可以将其放在米色背景上，使空间更突出，并提供了一个文本字段最清晰的环境。 通过这种方法，用户在检查表单时可以更快地注意到填充和未填充的字段。 空白区域的亮度使输入文本和占位符文本具有更高的对比度，提高了可读性。 灰白色背景上放置的任何文本均可保持可读性，并且不会在视觉上与输入或占位符文本发生冲突。 2. 告知用户输入内容 当用户选中准备输入的时候，应当提供清晰的视觉提示，这样让用户明确知道自己的位置，这个就可以靠标签和占位符来实现；而不是迷失在茫茫表格中，这种细微的反馈会让用户更有掌控力。 1）填写标签要简洁 文字标签宜简短，尤其在移动端，尽量不超过六个汉字；英文标签不要所有字母大写，首字母大写即可。 过长的标签有两个问题：使填写的内容压缩、影响整页对齐。 平行排布优点是：符合视线规律、阅读更快。如果要填写的标签实在过长，检查一下是否说不清楚的可以用占位符分担描述下，或者采取垂直排布的方式。 平行排布优点是：对标签字数限制不严格。 2）占位符文本提示 占位符要简短，不要换行，若超出框，超出部分截断； 千万不要把占位符设计得像已经输入的文本，所以颜色要浅； 框多的时候尽量不要占位符，因为很多用户只是大致浏览； 针对色弱人士不适合用占位符，因为颜色较浅（这一点基本可以忽悠）。 电商、社区等内容导向型平台的输入框会存在内容推荐： 标签提示+占位符提示内文字补充说明告知效果更为强烈。（推荐使用） 3. 必要的说明 1）必填内容 ?到标签前后打了“ * ”号，?家便知道意思是必填；除了?星号，必填还可?汉字“（必填）”放在标签后。 我们在设计中，如果遇到??表单的?多数字段是必填，那么需要标出的不是必填，?是选填内容；也就是说，标出少的那?个，如果两者各占?半，那就随便选择了。 注意：有的页面不像表单页那样复杂，不必标出必填或选填，但应在所有必填项填好后，再点亮按钮跳转到下一页，如登录注册页。 2）格式提示 输入框内文字占位符提示； 格式拆分编辑。 举个列子：要求填手机号码时很多人往往会忽略区号的输入，因此很多输入框在设计时，会将区号单独提出来，避免此类错误的发生。 3）字数限制提示 一般以文案形式提醒，比如：在输入框后显示不得超过X字。 4）规则补充说明 一般在输入框下方以文案形式提醒，重要的提示可以标亮提醒。 有两种输入项目常常要加入说明： 专业性强，大众可能不清楚； 安全隐私或者金钱相关，有心理顾虑。 针对第一种，说明能减少输入错误，例如：银行转账不是及时就到，而是需要两小时；金额不是任意的，每天有上限，并且和所剩的余额相关。如果这些是在用户输入完才告知，或者报错，那么这个锅用户当然不愿意背。 针对第二种，有心理顾虑的，可以承诺不会对用户造成损失，或者找背书；下图最后一个解决方案已经通过华为严选产品安全认证，消除顾虑之后才能顺利进行下一步。 二、信息输入时 总的来说，优化输入框设计主要有三个方向： 提高输入速度 为用户输入提供引导帮助 直接有效的指出用户输入过程中的问题 重视每一个细节点上的用户的感受，优先关注让那些最常被用到的或者是对完成任务最为关键的输入框，这样产品才会被打磨的越来越精致。 1. 当前位置的提示 用户在选择输入框并输入内容时应获得视觉反馈，当他们删除输入内容并取消选择输入框时，他们还应该获得视觉反馈；当输入框正确执行视觉反馈时，用户将可以毫无困难地输入内容。 1）选择输入框并输入 当用户第一次将注意力放在文本框标签上时，他的边框应该看起来是深灰色的，以便于输入时将显示的黑色不同。 用户开始输入时，标签应该消失，但是用户只用鼠标点击文本框时，标签不会消失；但文本框应突出显示且标签应模糊显示，以使用户知道输入时该标签