书里面这部分叫序

先作个自我介绍，我是一名交互设计师，90后。

其实我不怎么喜欢编辑文章或写点什么，总觉得很难(lǎn)。但决定跨出这步，那就好好写了！

那这个就是前言

第一篇就想说说自己设计上遇到的交互事儿啊。

就先说一下最常见的表单。

表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。

表单由：输入框、单选按钮、开关、复选框、选择列表、按钮等组件组成。

当碰到表单设计的需求时，把问题按照优先级去排序，我认为需要考虑的第一问题是只需要用户输入什么，第二个问题通过技术的手段去考量是否可以利用最少的字段做最多的事儿，再把字段在先后逻辑上进行排序、把关联的信息成组，最终的目的是便于用户更快速的理解自己要输入什么。

今天就想专门写篇文章，来说说表单中重要的组件-输入框。

那再弄个目录

· 输入框元素

· 适量的减少输入项

· 标签的字数

· 对齐方式

· 选填与必填

· 信息分组

· 一列和多列

· 最后

输入框元素

标签[Label]、输入框[Input]、提示[Assistance]、校验[Validation]，这四个元素组成标准的输入框。

标签[Label]

它需要明确告诉用户输入什么

输入框[lnput]

它包括文本字段，数字字段，混合字段，密码字段等。

在移动端产品中，友好的使用系统键盘是提升体验的一个方法，在移动端应用中根据填写内容的属性，例如：填写手机号可以直接弹出系统的数字键盘；在web或桌面应用中可以配合自动填充选择也是提升体验的方法，例如：填写邮箱当用户输入用户名，出现自动填充的@域名。

对于不同的输入内容有着不同的解决办法，但最终的目的都是为了让完成表单变得更高效。

提示[Assistance]

让用户能在标签和输入框之间获取信息，帮助他完成输入。常见的几种方法：

把提示的内容置于输入框内，会把这个叫做暗提示[Placeholder]。

当输入框获取焦点时，出现文字气泡提示会叫做[Tooltip]。

当说明文案较长时，你可以使用一个icon图标去提示[Popover]。

当需要输入提醒，你可以将其放置在输入框附近[Help text]（位置不建议放在下放，建议把校验反馈放在输入框下方）。

以上四种是在提示的四种用法(还有更多)。对于不同的表单页可以利用不一样的方法去进行尝试。

校验[Validation]

用户厌恶当他们在填写过程中到等提交时才发现他们之前输入错了东西。

试想：这个表单有10项信息的收集，当我第一项填错后没有校验反馈，然后我继续表单填写任务，十项填写完毕后，点击[Submit]后，良心点的回滚到第一项输入框出现错误提示并获取焦点告诉我错了让我修改，恶心的停留在当前屏幕，整个人会懵为什么任务不能继续？然后就会思考是不是填写哪里出了错？再返回检查问题，这样效率就会下降。

点击[Submit]这种校验属于第二道校验：提交校验(复杂的校验，有些可能需要走后端校验)。所以当用户在输入框录入后完成失去焦点后就有义务告知所录入的内容是否正确/错误。

这是第一道校验：即时校验(利用前端校验比如：通过正则表达式校验手机号的位数，手机号的有效性等)。

这种方法允许用户更快的纠正错误，无需等待。文案的描述也应当更明确，告诉他们什么错了，这在输入过程中给用户带来更多的信心。

适量的减少输入项

尽量可能减少输入项个数，这样可使得表单更轻松，尤其是当我们需要向用户收集大量信息，根据实际情况考虑做减法，用最少的收集内容去做更多的事。

打个比方：现在有个表单，需要收集姓名、性别、出生日期、身份证号四个输入项。我们可以通过技术的一些手段从身份证号中提取出信息，那4个输入项就可以变成变成2个。身份证的倒数第二位可以判断性别：奇数是男，偶数表示女，出生年月大家都知道。

再来个比方：假设手机充值时需要选择手机号的归属地信息，是做一个城市选择列表让用户去选择？这我也不清楚手机号是不是有规律，如果没有，那不妨通过接口去查询用户手机的归属地，这样操作成本大大下降，归属地选择错误的可能也会下降。

结合不同的场景去思考会发现无限多的做法，减少输入项个数的目的也只是为了让完成表单变得更加高效。

标签的字数

标签不是暗提示或者帮助文本的信息，应该精简，简短到不能失去说明性的，这样用户通过快速扫描表单就可以了解自己需要填什么的预期了。

比方说：[请输入你的姓名]精简成-[姓名]等。

对齐方式

左对齐、右对齐、顶对齐三种我们不论在哪都可以见到的对齐方式。结合以上所说的表单元素接来下讨论一下三种对齐方式：

顶对齐

来源：uxmatters中提到的眼动实验

顶对齐的优点：相比其他两种对齐方式，它更适用于不同字数的标签，让标签和输入框更加紧密，标签的长度多变时也不会影响表单整体的布局，效率最高，但有个缺点：占用更多纵向空间（我觉得更适合移动端横向屏幕有限的情况下）。

例如：Material Design中的浮动标签就是很优秀的顶对齐输入框设计。

左对齐

来源：uxmatters中提到的眼动实验

左对齐的标签也是最常见的对齐方式，相比顶对齐：他的标签可读性变强了，也减少纵向空间占用。但是无法避免标签和输入框联系不紧密的这个劣势。在标签和输入框之间的可视距离远。

实操层：在长短标签的组合表单中，会使输入框离短的标签更远，这时就得想如何缩短标签的字数，如何精简出一个便于用户理解的标签。如果不去设计标签，那么效率就会变的缓慢。但是完成率缓慢，并不见得是一件坏事，尤其是表单需要重要的数据，如果需要用户提供敏感信息时，可以暗示用户放慢一点节奏，并确保他们正确的输入。

右对齐

来源：uxmatters中提到的眼动实验

右对齐字符是第二常见的对齐方式，相比顶对齐和左对齐涵盖了他们部分优点：和输入框联系紧密，也减少纵向空间的占用。

标签和输入框显得更加紧密了，将相关联信息放置接近的这一原则也不是新的理论，实际上它接近格式塔心里学中的接近性法则。

对于较短的表单，右对齐的字符也可以完成的很快。但是标签的可读性会减弱，这种对齐方式在左侧边缘的标签看起来不舒服，更难阅读，同时也需要去注意标签字数。

格式塔心里学中的接近性法则：

“接近性法则”指出当对象彼此接近时，他们往往被认为是一个整体。基本上相近是在一起的。如果我们使用清晰的结构和视觉层次，我们将不再被有限的用户认知所指责，所以他们才能快速辨认和给出反应。

——原作者：Norbi Gaal    翻译：Tiger, Run! 原文链接：https://uxdesign.cc/ux.. 来源：知乎

对齐方式总结

如何希望用户快速扫描表单，把标签放在输入框上面，这种布局更便于眼睛向下扫描页面。

如果你希望用户仔细得阅读，把标签放在输入框的左侧，这个布局扫描较慢，向下向右(Z的形状）的眼动。

如果表单中需要填写的内容比较少，也可以使用内联标签(登录注册)，但如果有输入信息较多，切记别用！虽说这是很受欢迎的输入框做法 ，他们也很美观，但当用户点击输入框，标签消失就无法对应了，用户因此会不知需要去填什么(可以尝试把暗提示[placeholder]改成和标签一样内容)。

但这么做会产生另一个问题，当用户看到一个输入框内已经填写了内容，而填写完内容，标签就消失了，需要回忆再复查表单信息，此时就显得很困难了。

选填与必填

在表单中尽量避免选填字段，但是如果选填字段是真实有需求的，但不一定需要收集时，把必填和选填做出区分，不能为空的必填字段规范使用星号(*)指出。

对于表单中必填vs选填数量上我是这样看的：

1.必填＞选填时，在选填项上指出(选填)；

2.必填＜选填时，在必填项上指出(*)；

3.必填=选填时，在选填项上指出(选填)或在必填项上指出(*)；

4.全必填时，无需指出(*)即可，全部(*)会增加表单的信息量；

5.全选填时，先考虑这个表单是否有必要去做，有必要就在更高一级上指出(选填)

还要个原则：优先级上必填项＞选填项

信息分组

根据用户的认知将相关进行分组，分组后的相关信息还能帮助用户弄懂哪些是必填和选填。

一列和多列

表单不建议有多列，如果水平放置输入框，用户必须Z形的眼动进行扫描，会减缓理解速度和弄乱清晰的完成路径。垂直向下放置的表单在页面完成路径是垂直向下的。

最后：

结合场景，通过思考和研究可以探索出一个好的表单(输入框)。在设计上可以采用很多方案，同时也需要经过不断的测试去做出调整。

根据需求和使用平台(App/Pc/H5)可以在基础的表单(输入框)原理上做出很多变化(开始填写时已预填了信息，在移动端需要修改时逐字删除太麻烦了，可以考虑在输入框内加个x的icon，点击icon即清除输入框中的所有内容等等)，但是唯一不变的是让完成表单变得更愉快高效，也是初衷。

参考书：《Web表单设计》、《交互设计精髓》

文章：Designing More Efficient Forms.

这阵子空下来在想一个问题，交互设计到底是什么？也展开了很多问题。

---

交互设计是什么？

我觉得是两个动作组成的一个词儿，有“交互”和“设计”。

首先什么是设计？

我认为设计的目的是解决问题，因为产生了问题同时再去发现问题，所以有了设计这个行为，又有了很多人在做解决问题的事儿，就有了设计师这个职业。

交互是什么？

交互是无处不在的，哪怕是电梯的楼层按钮，一个微波炉，一个导航等等。就看一下咱们的数字产品。我觉得交互是结合产品本身，去为目标用户的目的设计出高效的功能。

那谁是目标用户？他们的目的是什么？高效的功能是什么？

“目标用户是什么”、“目的是什么”这两个能通过定量、定性的用研方法，结合用户模型等一系列方法可以得出。

“高效的功能是什么”，我觉得所有的功能可以理解成一个工具(结合生活讲，有可能是一本书，或者一个锤子或是其他等等)，这个工具目的是可用、合理，且能让用户更高效的完成自己的目的，在完成目的的同时可以收获惊喜和愉快。

惊喜和愉快是什么？

我觉得有个很难量化也很难标准化的一个术语，叫用户体验。我想这就是在交互设计这环中能有所支撑的一部分“用户体验”了吧

我是一名交互设计师(自豪脸)，我觉得无论什么设计始终都值得敬畏，最近闲着又刷了一遍《交互设计精髓》，前言中有句话说的超棒：

交互设计本身也是一项人文事业，与产品和服务互动的是人，交互设计的首要目标是满足人的需求和欲望。理解这些目标和需求的最佳方式是把他们当成故事——逻辑和情感随时间而演变，要回应用户的这些的这些故事，数字产品必须表达自身的行为故事，不仅要在逻辑、数据条目和展示层次做出恰当的回应，还要在更加人性化的层面有所响应。   

——Alan Cooper

第一次写文章，如果你看到这里会发现没什么图，我其实是为了营造干货气氛克制自己不插图(其实是不想插图)。到这也就看完了我叨逼叨，也不知说恭喜你还是佩服你…总之先双手合十的感谢你。

以上的观点从我个人总结出发，虽说文笔拙劣，但是如果你有不同的意见，欢迎交流～