思缘教程网欢迎你! 思缘旧版思缘图库思缘论坛软件下载网站登陆加入思缘

详解表单设计的常见错误与解法

文章来源于 知乎,感谢作者 Z Yuhan 给我们带来经精彩的文章!
思缘教程/前端设计/前端设计2018-11-13
无论是连贯试、分布式,亦或是单调的数据输入界面,表单都是数码产品的重要组成部分。这篇文章聚焦在表单设计中常见的该做和不再做的点上。这些都是通用的设计指南,但每条规则都肯定是有不适用的特殊情况的。

无论是连贯试、分布式,亦或是单调的数据输入界面,表单都是数码产品的重要组成部分。这篇文章聚焦在表单设计中常见的该做和不再做的点上。这些都是通用的设计指南,但每条规则都肯定是有不适用的特殊情况的。

最好单列排布

详解表单设计的常见错误与解法,PS教程,思缘教程网

多列会打扰用户的纵向动势【Z Yuhan:如果数量太多,双列并不是不可以】

左对齐

详解表单设计的常见错误与解法,PS教程,思缘教程网

用户完成左对齐的表单的效率比左右分布式的要快很多。

左对齐的形式要将不同的区域分离

详解表单设计的常见错误与解法,PS教程,思缘教程网

将文字说明和输入框靠近,确保高度间距足够,不会让用户困惑

英文避免完全大写

详解表单设计的常见错误与解法,PS教程,思缘教程网

因为大写更难阅读和扫视

选项少于6个时全部展示

详解表单设计的常见错误与解法,PS教程,思缘教程网

下拉框至少需要用户点两次,并且还将选项藏起来了。所以在选项达到6个或以上时才使用下拉框。当选项超过25个时需要加入搜索功能【Z Yuhan:这个数量也要看选项之间的关联,用户的熟悉情况等】

最好不要将默认文本当作说明文字使用

详解表单设计的常见错误与解法,PS教程,思缘教程网

用默认文本当作文字说明使用能节省空间,这一点的确很吸引人。但是这样会导致很多可用性问题。这些问题 Nielsen Norman Group 的 Katie Sherwin已经整理过了

单选/复选框最好垂直排布

详解表单设计的常见错误与解法,PS教程,思缘教程网

你可能感兴趣的教程
版权所有思缘教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa