欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

讲真,你真的懂得文本输入框设计的那些潜规则么?

发布时间:2017:11:16 14:04:06 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1217个文字,预计阅读时间4分钟
导语
文本输入框几乎是每个UI设计师都必须用到的设计控件,它们无处不在,对于用户体验的影响无疑是巨大的。虽然看起来很简单,但是一个设计成熟的文本输入框,其实是要满足许多“潜

  文本输入框几乎是每个UI设计师都必须用到的设计控件,它们无处不在,对于用户体验的影响无疑是巨大的。虽然看起来很简单,但是一个设计成熟的文本输入框,其实是要满足许多“潜规则”的,这些规则你是否都了解?

  当新用户开始使用一款APP或者入驻某个网站的时候,至少最基本的信息都需要通过文本输入来完成。产品经理、设计师和开发者也都明白,这才是最佳的解决方案。

  今天的文章,我们专注于文本的字段输入应当注意的一些核心因素。这些大都是最常见的规则,同时每一个规则都有一些值得注意的例外情况。

  文本输入框

  文本输入框是UI设计中最常见的控件,在绝大多数的场合用来给用户输入少量的文字。无论你使用的是哪个APP,大都需要你借助文本输入框来获取少量的个人信息(用户名等)。当你想要搜索某些信息的时候,打开谷歌,至少也要通过搜索框输入来完成最起码的搜索请求。

  

讲真,你真的懂得文本输入框设计的那些潜规则么?

 

  清晰

  清晰的文本标签

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

  

讲真,你真的懂得文本输入框设计的那些潜规则么?

 

  Apple iOS 中的搜索框同时放置了标签和放大镜图标

  清晰的标签让用户更加自信,正确理解,并且正确地操作。

  短文本标签

  标签并非帮助性的说明,所以你应该使用的是简短(几个字)的描述性的短语作为标签,以便用户能够快速扫视。如果有额外的信息,通过上下文或者额外的帮助性的说明来让用户有所了解,而不是超长的标签。

  

讲真,你真的懂得文本输入框设计的那些潜规则么?

 

  之前Amazon 的注册页面就因为超长的标签文本导致注册过程缓慢。目前的版本强多了。

  合理的输入框尺寸

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

  

讲真,你真的懂得文本输入框设计的那些潜规则么?

 

  输入框焦点

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

  

讲真,你真的懂得文本输入框设计的那些潜规则么?

 

  输入提示

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

  举个例子,电话号码的输入就存在多种不同的方式,比如我们常见的“+86”,而更多的情况下大家可能会直接输入一串11位的手机号,座机号码的情况则更加复杂,有的人习惯加上区号,而又的人则不会。面对这种复杂的情况,你可以通过设计输入框,加入输入提示来“格式化”输入内容。还是以电话号码的输入为例:

  这个输入框的电话号码格式已经固化了,让用户可以清楚的知道应该输入哪种类型,多少位。

  

讲真,你真的懂得文本输入框设计的那些潜规则么?

 

  这个输入框中加入了说明性质的文本占位符,清晰的说明了应当输入怎样的号码。它的缺陷在于用户输入的时候,占位符会消失。

  

讲真,你真的懂得文本输入框设计的那些潜规则么?

 

  帮助信息

  帮助信息(或相关文字)应当出现在需要的地方,比如表单中用文字说明为何需要填写信用卡号,以及生日日期填写之后的福利,又或者“服务条款”链接的存在。它们适时地出现,帮助用户解释了一些令人困惑的问题。一般说来,这类帮助信息最好不要超过100字。

  

讲真,你真的懂得文本输入框设计的那些潜规则么?

 

  仅限移动端:键盘类型与文本输入的匹配

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:APP消息推送功能之前端后台设计

下一篇:“歪?堂主说的三招搞定家居广告设计是真的吗?”

  • 18900 文章总数
  • 2374207访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信