UI设计，表单都是界面中最常见、最重要的组件之一。它们的应用范畴非常广，用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等等等，从数据输入到信息搜索，几乎无处不在。对于

　　在今天的文章中，你会看到许多关于表单设计的切实可行的建议，它们涉及到可用性测试、现场测试、眼动追踪以及用户反馈等多个不同的环节。

　　表单是同用户进行沟通的语言。和任何对话一样，它应当以符合逻辑的方式帮助双方完成交流。所以，你需要这么做：

　　·让问题保持直观的顺序。你应当站在用户的角度按照逻辑提问题，而非按照程序或者数据库的逻辑。如果问题之间没有逻辑存在，那么可以按照字母顺序来排布。

　　·以直觉的顺序组织选项。比如选项为日期的时候，按照周一周二周三这样的顺序来排布，而非乱序。

　　·时刻反思从用户那里获得的信息是否必要，如何使用。这样做是为了消除不必要的选项，提升完成率。

　　待填写的多列表单容易让用户漏填，并且打断填写体验。用户需要按照Z字形的轨迹来完成整个表单的填写，这样不仅影响整个书写路径，降低效率，而且具备一定的干扰性。但如果是使用单列的表单的话，这种填写路径是单一、直接而更为直觉高效的。

　　单纯减少输入的字段数当然是不够的，你还要注意用户填写表单的方式、内容和工作量。通过打字录入内容是一种高交互性的输入方式，出错率高，时间成本高，所以，应当尽量减少用户打字输入的情况，多用复选框、单选按钮、下拉菜单等选项来降低用户犯错的概率。

　　Baymard 研究所通过研究发现，如果一个字段和输入框相比太长或者太短，都会让用户怀疑他们输入的内容是否正确，而这种情况在CVV(信用卡验证值)之类的字段输入时，显得尤其明显。

　　为了保持良好的可用性，你应当那个输入框的宽度，让它尽量和输入内容的长度保持匹配，适当的保留空间，能让用户更加安心。

　　用户快速浏览表单是否足够方便?如果表单很难为用户快速扫视，那么填写所需的时间就更长了。所以，好看好填才是好表单设计的准则。Matteo Penzo 的文章曾经研究过表单中的表单和输入框应该如何布局才能让用户更好更快的浏览和填写，结论是标签应该置于输入框上方。

　　如果你想用户尽快浏览，让标签和输入框纵向排列，靠左对齐。请注意，这里说的是快速浏览。这样的布局方式的优势在于，它们不需要太多的横向的空间，用户无需左右扫视而只需要向下浏览就好了，并且这样的布局更容易构成响应式的UI，兼容不同的屏幕和不同的应用场景。

　　有些字段的填写需要用户进行精准的填写，但是要求用户输入特别精准或者特定格式的内容可能会在易用性上存在那么一点问题。如果你要求用户输入数字内容(比如电话号码)，那么最好是灵活多样的，支持多种不同输入方式和显示方法，让人更容易查看(而不是机器)，防止出错。

　　比如座机电话的格式常常为(777)666 – 5544，这样的格式更易于用户查看、记录和记忆。

　　设计师通常会将文本占位符放到表单内，作为额外的提醒，作为示例告知用户如何填写。当用户开始在其中输入的时候，占位符文本会消失。

　　有一些设计师会将出于降低表单长度、降低视觉混乱度的原因，将标签直接作为占位符置于输入框内。对于简单的表单设计，这种设计影响不大，当表单信息量大，内容类型多变的时候，这种方式就不合适了。这种设计的缺陷在于：

　　如果你仍然需要在你的表单中使用占位符，不妨让占位符以浮动标签的形式而存在。默认显示占位符，当用户输入的时候，向上浮动作为标签提醒用户。

　　正如同我在之前说过的，尽量避免在表单中加入可选填的字段。但是如果你非得加入，那么至少该明确哪些字段是可选，哪些是必填的。将选填字段控制在1~2个之内，并明确告知用户，这是可选的。

　　“重置”很容易让用户删除表单上所有内容并且从头开始，这样的风险太大了，在现实生活中这个按钮实际从来没有给用户以帮助，相反因为误触带来的伤害更多一些。

　　理想状况下，用户完成表单的填写，上传就可以完成任务。但是实际的状况下，错误不可避免。所以，当错误发生的时候，要以高度可用、可见的形式告知用户，有问题发生了，所以，你所提供的报错信息应当符合下面的规则：

　　·当用户输入字段之后，应该实时告知用户他们填写的信息是对的还是错的，而不是等他们完成全部信息填写之后再告诉他们出错了。

　　·报错信息应当一目了然，从用色、图标到文本都应当起到高亮的效果，而且报错信息应当靠近输入框，而非表单的底部或者顶部或者按键旁边。

　　填写表单的时候，用户的犹豫是不可避免的，我们应当尽量让这个过程变的便捷而轻松。我们应当让表单设计成为优势，而非弱点。一个高度有针对性的表单设计，贴心细致的细节和体验，坚持不懈的改良和调整，高效快速的提交，顺畅的流程，这些才是优秀表单应有的样子。

　　网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

　　随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...

　　每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...

　　今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...

　　你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...

　　二哈讲述了广告业务的流量提升，在讲述提升广告点击率的时候，提到了迎合用户喜好的概念，本篇就来说说如何迎合用户喜好吧。...

　　如何设计一个简单的新闻聚合产品？文章介绍了制作极简的新闻聚合产品的7步骤，好奇的你和我一起来看看。 你知道在三四线的县城，用户在哪里看新闻么？不是在今日头条里，而是...

　　响应式网页是一种对于设计的全新思维模式，响应是双方的，是互动的过程，在这个过程中设计师要考虑设备的性能、Dom节点数量、屏幕的大小等。 1、如何理解响应式设计（RWD） 响应...

　　产出不等于产品，在产品设计中可能我们无法使用户对产品完全获得宜家效应，但我们可以通过宜家效应的思路，一步步引导用户使用产品，为产品投入时间心血，为用户找到存在感和...

　　@Mockplus原型设计 ：许多人可能认为搜索框不需要设计，毕竟这只是两个简单的元素。然而，在内容繁杂的网站中，搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时，他们...