数据正在读取中...

您的位置: 设计资讯 > 网站设计

掌握8个要点,设计友好的表单!

www.shejinet.com 2018-05-10 18:05 设计.世界 浏览(7144)

摘 要:虽然表单类型多样,有不同目的的、收集不同内容的、不同尺寸的,但是却有一些共同的基本的元素可以帮你的用户快速且顺利地填写它。
表单结构

虽然表单类型多样,有不同目的的、收集不同内容的、不同尺寸的,但是却有一些共同的基本的元素可以帮你的用户快速且顺利地填写它。

1.jpg

【亚马逊创建账户的表单】
1. 类别或者条目(Category or Section):它可以帮助用户快速理解表单的作用,同时,当你要收集的数据多于一个类别时,比如:个人信息、职业信息、财务信息等……对数据归类整理具有很大的帮助作用。
2. 标签(Label):它的作用主要是告诉用户,在这一栏需要填写什么。
3. 占位符(Placeholder):对于标签下需要填写内容的额外注释。
4. 出错信息(Error Message):当用户填写的信息无法被录入时给予反馈。
5. 提交操作的主按钮(Primary CTA button):放置于表单底部,用户用来提交填写好的表单的按钮。

表单状态
基本上来讲,
你的表单在用户使用过程中存在三种状态:
1. 默认状态:就是用户在填写前表单的状态。
2. 焦点状态:在用户正在填写的栏目上做着重提醒,这样可以帮助用户聚焦正在填写的栏目,哪怕他的注意力离开了屏幕一会儿,回来后也能马上找到刚刚正在填写的栏目。
3. 反馈状态:这种状态一般是给用户一些反馈信息(大多数是出错信息)。一般情况下,这种状态会出现在用户移至下一个填写区域的时候。另外,当用户提交表单时,如果系统无法马上验证信息,也会出现这种状态。

2.jpg

【表单的默认状态,焦点状态,反馈状态】
好的案例

1.表单要尽量简单
尽量让你的表单短且简单。收集必要的数据,避免重复的输入。比如,把“再次输入你的密码”这一栏去掉,而是在“输入密码”区域增加一个“密码可视”的按钮,让用户可以选择看到自己输入的密码内容。

3.jpg

Jumia和亚马逊不同的用户密码验证方式】

2.使用框内提醒
向用户反馈“输入错误”提示时,最好把错误提醒放在对应的输入框内。

4.jpg

【Facebook和亚马逊不同的“错误提醒”方式】

3.将相关信息分组
这一点很重要,把相关的信息分组,并将这些组按序列排列。这样可以帮助用户减少认知负荷,并能更加专注地填写当下的信息。

5.jpg


数据正在读取中...

[优秀设计师] DESIGNERS

  • 红蚂蚁文化
    地区:天津 • 天津
    QQ:2284475163
    电话:qq2284475163
    邮箱:2284475163@qq.com
  • 博文
    地区:广东 • 深圳
    QQ:705434715
    电话:17875048743
    邮箱:705434715@qq.com
  • 久形设计
    地区:广东 • 佛山
    QQ:2926679497
    电话:18927776245
    邮箱:2926679497@qq.com
  • 蜂鸟创意
    地区:河北 • 石家庄
    QQ:2950464750
    电话:15930133486
    邮箱:2950464750@qq.com
  • 泉榕工作室
    地区:福建 • 福州
    QQ:5758429588
    电话:15980203576
    邮箱:5758429588@qq.com
  • 大巢设计
    地区:山西 • 晋中
    QQ:845183776
    电话:15536393968
    邮箱:845183776@qq.com
  • 邹剑
    地区:广东 • 广州
    QQ:810199288
    电话:18379067575
    邮箱:810199288@qq.com
  • 知鱼工作室
    地区:辽宁 • 沈阳
    QQ:1660150137
    电话:
    邮箱:1660150137@qq.com
  • 创龙轩设计
    地区:广东 • 广州
    QQ:1219427856
    电话:13790850808
    邮箱:1219427856@qq.com

[优秀设计公司] COMPANYS

联系我们| 免责声明| 设计师| 设计公司| 手机版| 设计知识