【译】在设计表单的时候应该注意的八点

原文:入力フォームをデザインする時に気をつけること8つ
地址: https://liginc.co.jp/395158
原作者:もーりー
翻译:章鱼小年糕(若有翻译错误,欢迎提出)

大家好,我是设计师もーりー先生。
最近接触了很多关于表单的设计,我在网上搜索了许多资料,这次接着这个机会在这里把所学到的一些点都一起整理一下。

输入元素成列的放置

因为网站本来就是从上到下浏览的,所以把输入元素成列的放置:
图片描述
图片描述

把标题与输入元素分组化

如果输入元素的标题(Label)是和输入元素成线性摆放的,记得给它们加上margin值为他们划分成一个个组:
图片描述
图片描述

避免全部使用大写字母

当元素标题要使用英语的时候,会有全部使用大写字母的情况。虽然有时候这可能会很酷炫,但是很遗憾这样会让人不好识别。
图片描述
图片描述

如果选项不超过6个就都展示

如果选项很多的话使用下拉框会比较好,但是如果选项并不多,全部把它展示出来也没什么难的。因为下拉框选择的话,必须要点击2次才能从选项里面选到想要的。
图片描述
图片描述

checkbox和radio纵向排列

为了说明,checkbox纵向排列会更加容易进行选择。
图片描述

错误提示为了醒目放在离输入框近的地方

这样是为了减少出错后定位到出错输入表单元素的时间。
图片描述
图片描述

把握输入表单元素的宽度

如果是输入像电话号码、邮件号码等数量少(或者固定)的文字情况,请配合文字数量调整输入元素的宽度。
图片描述
图片描述

不使用*来表示必填与非填项

用*来区分必填项目和非必填项目是很难让人理解的,所以对所有的情况最好是使用“必填”和“非必填”等字样来进行提示。
图片描述
图片描述

小结

怎么样?上面写的内容都是设计师的观点,在实际进行设计的时候或者在验证的时候还是要和程序员一起商量哦。
以上就是所要介绍的所有内容~
(年糕君:其实这是一篇非常小清新的内容,文字也很少,虽然也不是绝对的标准,但是也稍微有一点点小技巧包含在里面)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值