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

表单设计的九个基本法则

发布时间:2018:01:31 17:26:55 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1195个文字,预计阅读时间3分钟
导语
在表单设计中,我们需要注意哪些内容呢?

  在表单设计中,我们需要注意哪些内容呢?

  

表单设计的九个基本法则

 

  表单是承载信息和展示信息的重要途径,因此我们在设计的时候要注意很多事情。

推荐阅读:如何设计一个交互好转化率高的表单

  首先我们要知道表单的组成:

  标签

  帮助文字

  输入框

  报错提示。

  

表单设计的九个基本法则

 

  那我我们在设计的过程中 到底要注意哪些事情呢?

  1、布局上

  我们尽量采用单列进行展示,建议这样做的原因一是能够方便用户进行浏览和输入,二是因为这样布局,能够进行响应式的开发,减少了成本。但是其自身也存在着缺点,当需要输入的条件过多时,用户需要拖动鼠标进行查看与填写。

  2、标签的设计

  标签的位置主要分成三种:左标签、顶标签、和内标签(图一、图二、图三、)。而关于是否要有必填和选填的存在,个人认为,选填是否存在是可以被考究的。

  

表单设计的九个基本法则

 

  左标签是目前比价主流的排布方式,主要适用于web端,建议将标签靠左对齐,因为不仅在界面上会显得比较争气划一,在用户对信息的提取和响应也会效率大大提高。但是它存在着一个比较尴尬的问题,也就是空间的占用上,用于web倒也没有什么问题,但是当如果用于移动端,则会出现需要左右滑动,信息填写被覆盖等问题。

  

表单设计的九个基本法则

 

  顶部标签很好的解决了左标签的尴尬处境,但是自身也存在着问题,也就是当需要填写较多信息的时候,出现滚动的场景几率也就相对较大。这里要注意的是在使用顶部标签的时候,我们要注意输入框与输入框之间的距离(如右图)。

  

表单设计的九个基本法则

 

  将标签放进输入框中是一个很好的解决方式,但是随之而来的还有,当我填写信息的时候,输入框任何指示信息也没有,会让用户产生困惑的心里,那我们要如何解决呢:如上图,我们可以将图标放入输入框中或者放在左侧。

  3、帮助性信息

  

表单设计的九个基本法则

 

  帮助性文字的展示一般采用气泡框进行提示(也有会先将一些提示性文字放在页面的顶端,但是这个要取决于文案的内容多少,以及重要程度。)气泡框提示的内容要求简洁易懂,鼠标放上去则迅速展开提示内容,鼠标移开则消失,注意:展开的时候不宜挡住当前输入区域,这么做的原因是让用户知道我处于什么地方,我在针对什么。

  4、输入框的设计

  

表单设计的九个基本法则

 

  在进行信息录入的过程中,,我们要保持输入框的独特性(录入前、录入中、录入后):录入前和输入中 我们要使输入框高亮、沉浸、悬浮、等方法,让用户只专注于当前的录入,录入后要给出反馈,是录入失败还是录入成功,当然这个要根据产品的特点,来进行控制。

  5、报错提示

  

表单设计的九个基本法则

 

  如上图,报错提示有很多种,要根据不同场景选择不同的报错提示,假如只是针对单个输入框的判断,则仅需在当前状态进行报错,文字提示和输入框颜色、样式、变化都可以。

  但是如果是重大操作结果报错,我们还是优先选择用模态框的方式进行报错,这样的好处是能更好的提醒用户错误的结果,也能中断用户的操作,让用户专心思考和检查之前的信息。

  6、自动配置。

  

表单设计的九个基本法则

 

  我们在设计的过程中,要尽量减少用户的输入次数,有些信息,我们可以通过自动补全,或者提供默认值等方式减少用户的输入时间,毕竟用户输入信息只是一个过程。

  7、尺寸和录入量、格式

  

表单设计的九个基本法则

 

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

看了这篇文章的人还看了

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

上一篇:设计实战:以不变应万变,交互规范的制作与思考

下一篇:如何画出专业的原型图?(上)

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

      统一报价,无隐形消费

    • 金牌服务

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

    • 售后无忧

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

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

    截屏,微信识别二维码

    微信号:13825575516

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

    优化二维码打开微信