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

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

输入元素成列的放置

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

把标题与输入元素分组化

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

避免全部使用大写字母

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

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

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

checkbox和radio纵向排列

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

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

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

把握输入表单元素的宽度

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

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

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

小结

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


MOCHIKO
318 声望29 粉丝

引用和评论

0 条评论