我做了多年的输入框设计，才终于懂焦点问题

我也是在接触前端后，才知道原来输入框有“焦点”这一概念，而且它对用户体验的影响相当重要。但是很多设计师都不了解这个，因为我们作为用户使用时，很难意识到它的存在。

 

获取与失去焦点

输入框获取焦点，即代表可以光标开始在输入框闪现，用户可以通过键盘打字。

如果是手机端，获取焦点的同时也会拉起键盘。

百度网页端 PC 版

百度网页端手机版

输入框
失去焦点，即代表光标不在该输入框闪现，用户无法通过键盘往里面打字了。

如果是手机端，失去焦点的同时也会收起键盘。

 

自动获取焦点

百度、Google 这类搜索引擎网站，都有自动获取焦点的功能。

也就是网站加载完毕后，用户不需要点击输入框，也能立即开始打字。

百度网页端重新加载后自动获取焦点

 

如果大部分用户打开页面后的第一操作就是往某个输入框打字，那么这个页面/窗口就很适合自动获取焦点。

例如知乎点击「写答案」后，输入框自动获取焦点：

知乎网页端

但是，这个功能对于移动端来说，需要更谨慎地使用！

因为移动端的输入框获取焦点后，会拉起键盘，这对界面的影响很大。

所以说百度的移动端打开后并不会自动获取焦点：

百度网页端手机版

而知乎点击搜索图标后，则会自动获取焦点：

知乎移动端

 

失焦后验证

输入框自动验证是个好东西，减少了用户试错的成本。

但是很多“自以为聪明”的输入框，会在用户每输入一个字后，就验证一次。导致用户字都没打完，就看到了错误提示。

自动验证的最好时机，就是输入框失去焦点时，因为这代表用户已经输入完成了。

当然，没失去焦点时按下确定按钮，也应该启动验证。

 

切换焦点

当需要填写的输入框很多时，用鼠标切换是很累人的。

PC 端有个 tab 键可以切换焦点，虽然估计大部分人都没用过。

手机端就没这个按键了，不过，我觉得单行输入框可以考虑价格回车键切换焦点。

iOS 14.4 键盘 & 知乎网页端

这一点华为手机厉害了，在输入框拉起键盘后，回车键会改成「下一项」，真希望大家多学学！

华为 P40 键盘 & 知乎网页端

 

总结

很多看似微末的细节，真的对用户体验影响挺大的。

输入框真不是个容易设计的东西，太多状态和错误了。

建议大家做这类设计的时候，多参考成熟的设计规范，例如 Material Design 不论在知名度还是完成度上都是顶尖的。

 

原文地址：
体验进阶（公众号）

作者：设计师ZoeYZ