您所在的位置: 首页>行业资讯>山东网页制作中文本输入框设计的几点规则

山东网页制作中文本输入框设计的几点规则

发表于:2021-09-27 阅读:0 关键词: 网页制作 文本 输入 设计 几点 规则 文本 输入 设计 行业新闻
文本输入框设计,无论是网站还是APP,当新用户开始使用APP或在某个网站上定居时,大多数人都需要使用文本输入框来获取少量的个人信息( 用户名等)。 因此,整个页面上输入框的设计在用户体验中起着重要作用。 至 这似乎是一个简单的设计,但是成熟的文本输入框设计需要满足许多“隐藏规则”。 今天,我将跟随编辑方快了解这些规则: 至 清除文字标签 用户想知道他们输入的是哪种数据,因此他们自然需要文本标签来清楚地告诉他们。 当然,有时用户还使用与字段相关的图标来理解输入框中相应字段的含义(例如,用户通常会看到放大镜的图标并意识到这是一个搜索框)。 但是在大多数情况下,文本标签是必须的。 至 使用短文字标签 标签不是有用的说明,因此您应该使用简短的(几个单词)描述性短语作为标签,以便用户可以快速扫描。 如果有其他信息,请使用上下文或其他有用的说明让用户理解,而不要使用冗长的标签。 至 合理的输入框尺寸 如果输入框的大小是根据输入内容的长度和大小来设计的,则它更适合用户阅读和输入。 至 输入焦点 对于输入框,当用户选择并准备输入时,应提供清晰的视觉提示,例如发光的输入框或闪烁的光标。 至 输入提示 呈现数据的方式有很多。 因此,在设计输入框时,它应与用户输入信息的类型和格式相匹配。 但是,要获得完整的对应关系并不容易。 例如,有多种输入电话号码的方式,例如我们常见的“ +86”,在更多情况下,您可以直接输入一串11位数字的手机号码,而座机号码的情况甚至是 更差。 情况很复杂。 有些人习惯于添加区号,而其他人则不习惯。 面对这种复杂的情况,您可以设计输入框并将输入提示添加到“格式化”的输入内容。 至 提供舒适的点击区域 无论是设计网页还是APP,在点击手机屏幕时都应考虑用户的体验。 您需要确保用户单击输入框时的触发区域足够宽松并且不难单击。 一般来说,拇指的触发区域应该控制在45〜57px之间,但是在移动终端上,该控件看起来太大了,让人感到不舒服,因此您的文本框高度应该设计在32〜40px之间,因此 看起来足够友好,但不要太大。 至 字体大小 设置字体大小时,应确保字体足够大,并使其清晰易读。 在网页上设置正文字体时,最安全的选择是16px。 当然,大小的选择主要取决于实际的页面设计。 如果存在识别问题,则应将其调整得更大一些。 至 标签颜色 标签的颜色应遵循您的APP或网页的整体配色方案,并确保对比度(不要太暗或太刺眼)。 W3C对正文的对比度有以下要求: 较小的文字应确保与背景的对比度至少为4.5:1 ·较大的文字(粗体为14pt,常规为18pt)应确保与背景的对比度超过3:1 至 完美的界面充满了小细节,这个看似简单的输入框要实现良好的用户体验,必须遵守上述隐藏规则。 至