如何设计表单：表单界面视觉要素分析.pdfVIP

如何设计表单 ：表单界面视觉要素分析 在我为期不长的设计师生涯开始的时候 ，所 的设计全是一鼓激情以及直觉 ，凭着那么仅仅 一点的与生俱来 ， 出来的作品虽然还能过目 ，但无论如何谈不上优秀。也是不知道从什么 时候开始有了这样一种感觉 ：每一个设计方案都应该是有所依据的 。 开始觉得一部好的电影 ，应该没有一个多余的片段 ；一部好的文学作品 ，应该没有一句多余的语句 ；也同样 ，一份好的设计应该没有一个多余的视觉元素。 所以在表单设计中 ，每一个视觉元素都有其存在的意义。有时候为了深入理解其中某一元素在页面 中的意义 ，我会特意删除这个元素然后研究界面产生了什么样的变化。有点类似于数理统计中的控 制变量法。 在开始对表单设计进行研究之前 ，在下面这个登录界面的设计中 ，对其中各个视觉要素作如下命名 ： 0 1 标签和占位 以前在 表单设计的时候 ，经常纠结的一件事就是 ：标签要去掉还是保留。因为所有 界面设计的 同学都知道 ，标签和占位 都提示了该输入框输入的字段内容 ，有点重复啰嗦之嫌 ，所以觉得如果 将标签删除掉也未尝不可 ，如下图所示 ： 上面的这个画面看上去不禁要雀跃 ，因为画面对齐了 ，也更加简洁 ，似乎标签真的是多余之物 ，看 起来不无道理。事实上我个人在输入字段数少于三个的时候也经常采用这种设计方案 ，只是后来慢 慢发现 ，当输入字段多于三个之后 ，这种方案就会出问题了。如下图所示 ： 因为输入框在获取焦点并有内容输入的时候占位符就会消失 ，如上图中的用户输入到第五个字段内 容的时候 ，你真的还知道自己前面输入的和即将提交到服务器的都是些什么鬼吗 ？这个时候就会产 生混乱 ，甚至有不得不回去重新删除已经填写好的东西以看到自己填写了什么。 这种现象从心理学的角度来看 ，是因为人类的短时记忆局限。 人短时间内只能记住4到6件东西 ，即是传说中的“五加减一”原则。但因为在表单输入的时候需要动 用到记忆检索 ，占用了部分大脑功耗 ，“五加减一”将要大打折扣。所以表单设计上更加适用的是“二 加减一”的原则 ，即当用户需要输入字段多于三个的时候 ，就有必要留下标签一直给用户提示。 所以有些时候标签还是有必要留下的。因为 标签会始终如一地说明你输入的或者即将输入的是什么 内容。 虽然这么说来 ，但占位符与标签重复累赘的问题又如何解决呢。其于控制变量法不妨简单粗暴点将 占位符删除掉试试。如下图 ： 这样看上去也不是不行 ，内容也能说清楚 ，不会重复累赘。 但是一直说有源设计 ，HT ML5中特意加入的placeho lder占位符也一定有其原因的。事实上在 过 很多的表单页面之后就慢慢知道了 ，在很多社交网站平台里 ，用户所拥有的可能不仅仅是用户名 ， 还有注册邮箱、注册手机号码、昵称等等 ，到底哪个才是可以用来登录的 ？要让用户去猜 ，就是一 份失败的设计 ，所以这个时候占位符就发挥作用了。占位符起到进一步提示说明应该填写什么内容 的作用 ，如下图 ： 这样的设计用户一眼看上去就知道应该怎样填写 ，清晰明了。 只是如果同时保留标签和占位符又会重复累赘。特别是一些标签长度长短不一的场景下作排版设计 是件十分恼人的事 ，特别是到了移动端的时候就不知道排板得都是些什么鬼 ，如下图所示 ： 这样的界面看上去既重复又累赘 ，还无法对齐。所以必须在内容的排版上再想一下办法。 其中的一个设计方案是 ，将标签往右上移 ，放在输入框左上角 ，这样的设计使得界面更加整齐 ，用 户的视线方向可以一直从上往下 ，而不需要左右来回移动 ，视觉体验上也是一种优化。如下图 ： 上图的设计也算是其中一种解决方案吧 ，具体还是基于不同的场景再选择不同的排版方式。只是不 好的一点是你会发现整个版面看下来都是文字 ，界面死版 ，容易视觉疲劳。 我比较喜欢的一种设计方案是是将标签设计成图标 ，这样一来画面就显得灵活而且更加简洁。因为 图标的提示作用 ，输入框已有输入内容时用户也能很清楚已经输入的是什么字段的内容。如下图 所示 ： 02 输入框 表单设计中输入框的设计也依然是十分烦恼的事。以前在看过很登录界面的输入框 ，矩形的、圆角 矩形的、有边框的、无边框的、有底色的、虚线的、只有下划线的等等 ，自己在 设计的时候也常 常纠结于采用哪一种样式。为了 出更合理的选择 ，有必要深入理解一下输入框在表单设计中的视 觉意义。 还是那种方法 （控制变量法 ），尝试一下去掉输入框 ，如下图 ： 第一眼看到这个界面的时候 ，我的想法是“真不知道这个界面是 啥用的”。 虽然标签有冒号引出还有占位符的输入说明 ，仔细研究一下还是能够明白文本应该从何处开