如何设计更好的表单 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


如何设计更好的表单

2019-8-14 分享达人 设计资源




如果您想订阅本博客内容,每天自动发到您的邮箱中,


介绍表单设计里经常会犯的错误~

无论是注册流程,还是信息输入的界面,表单都是产品设计里最重要的组件之一。本文重点介绍了表单设计里常见的注意事项。不过这些只是通用的规则,实际应用中总有例外~



少于6个选项的情况,建议全部显示

把选项内容放在下拉框里,不仅隐藏了选项内容,而且需要两次点击。如果大于5个选项,建议用输入选择器,如果超过25个选项,建议加上搜索功能~



输入框长度可以暗示内容长度

输入内容的长度决定了输入框的长度。这种做法适合应用在一些固定长度信息的情况,比如银行卡号、电话号码、邮政编码等。



标签顶部对齐

帝皇彩票官网 相比左对齐,标签顶部对齐的表单用户完成率更高。移动设备屏幕大小有限,顶部对齐的效果也更好(标签文案长度不可控)。然而在大量数据输入时,还是可以考虑左对齐标签,因为浏览更高效,还能节省高度。



不要把占位符当做标签

帝皇彩票官网 用户在输入的时候就会看不到标签内容是什么了。详见Nielsen Norman团队的总结。

*也可以参考Google的做法,默认把占位符当作标签,输入时标签移动到输入框上方



将复选框/单选框上下排列

上下排列方便浏览阅读,横向排列选项内容会被选框控件隔开。



指出错误在哪

告诉用户具体哪里出错了,以及错误的原因。



等用户填完了再进行验证

不要在用户正在输入的时候就去验证,除非这能帮到他。例如在创建一个有字数限制的密码~



不要隐藏帮助信息

尽量默认显示帮助信息。如果信息太复杂,考虑在输入时放在输入框的旁边。



不要用*星号表示必填项,标出选填字段

用户不一定知道星号代表什么含义。还不如明确的标出哪些是选填字段。



标签和输入框成组

标签和对应的输入框形成一组,他们之间的间距要比组与组之间的间距小,这样用户不会困惑标签是属于上面还是下面。



按钮的文案描述具体意图

比如按钮上的文字建议写“注册”,而不是“提交”。



主次按钮有层次区分


关系近的内容成组

太长的表单让用户感到不知所措。有逻辑地分组能让用户更快地理解表单。

转自:站酷-

蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务。

标签: 表单设计 « 让用户多走一步,让产品前进一大步 | 提高JS性能的12个技巧»


蓝蓝帝皇彩票官网 http://www.bjhbys.com

  1. 2019年11月(11)
  2. 帝皇彩票官网2019年10月(53)
  3. 2019年9月(48)
  4. 2019年8月(63)
  5. 2019年7月(59)
  6. 2019年6月(59)
  7. 2019年5月(31)
  8. 2019年4月(37)
  9. 2019年3月(43)
  10. 2019年2月(26)
  11. 2019年1月(45)
  12. 2018年12月(41)
  13. 2018年11月(40)
  14. 帝皇彩票官网2018年10月(29)
  15. 帝皇彩票官网2018年9月(40)
  16. 2018年8月(87)
  17. 2018年7月(107)
  18. 2018年6月(86)
  19. 2018年5月(110)
  20. 2018年4月(40)
  21. 2018年3月(35)
  22. 2017年8月(35)
  23. 2017年7月(45)
  24. 2017年6月(7)
  25. 2017年5月(27)
  26. 2017年4月(51)
  27. 帝皇彩票官网2017年3月(70)
  28. 2017年2月(65)
  29. 2017年1月(69)
  30. 2016年12月(55)
  31. 2016年11月(111)
  32. 2016年10月(92)
  33. 帝皇彩票官网2016年9月(53)
  34. 2016年8月(9)
  35. 2016年7月(4)
  36. 2016年6月(9)
  37. 2016年3月(19)
  38. 2016年2月(26)
  39. 帝皇彩票官网2016年1月(30)
  40. 帝皇彩票官网2015年12月(33)
  41. 2015年11月(35)
  42. 2015年10月(46)
  43. 2015年9月(43)
  44. 帝皇彩票官网2015年8月(40)
  45. 2015年7月(33)
  46. 2015年6月(46)
  47. 2015年5月(58)
  48. 2015年4月(70)
  49. 2015年3月(55)
  50. 2015年2月(17)
  51. 2015年1月(33)
  52. 2014年12月(21)
  53. 2014年11月(84)
  54. 2014年10月(94)
  55. 2014年9月(6)
  56. 2014年8月(1)
  57. 2014年7月(13)
  58. 2014年6月(66)
  59. 2014年5月(99)
  60. 2014年4月(88)
  61. 2014年3月(102)
  62. 2014年2月(68)
  63. 2014年1月(83)
  64. 2013年12月(106)
  65. 2013年11月(112)
  66. 2013年10月(61)
  67. 帝皇彩票官网2013年9月(20)
  68. 2013年7月(13)
  69. 2013年6月(27)
  70. 2013年5月(48)
  71. 2013年4月(39)
  72. 2013年3月(8)
  73. 2013年2月(20)
  74. 2013年1月(31)
  75. 2012年12月(33)
  76. 2012年11月(31)
  77. 2012年10月(23)
  78. 2012年9月(8)
  79. 2012年7月(14)
  80. 2012年6月(15)
  81. 帝皇彩票官网2012年5月(31)
  82. 2012年4月(24)
  83. 2012年2月(4)
  84. 2012年1月(8)
  85. 2011年12月(35)
  86. 2011年11月(32)
  87. 2011年10月(13)
  88. 2011年8月(1)
  89. 2011年6月(1)
订阅Rss
状元彩票开奖 迪士尼彩乐园 状元彩票开奖 福建11选5官网 状元彩票开奖 湖北快3走势 博发彩票开户 山东11选5开奖 桔子彩票官网 迪士尼彩乐园