编者话
移动端的用户体验是产品经理努力追求改善的方向。其中有一个难题是图和在移动端的有限的屏幕空间中，进行相对精准的收拾操作。本文主要针对的是文本输入框的用户体验设计，作者Sophie Paxton进行了较为详尽的设计探索。
第1种
第1种
与传统的文本输入框相比，这种输入框的最大优势在于：屏幕空间没有被标签文字所浪费，因为移动端的屏幕空间是非常有限的。从用户体验角度来看，这种设计非常优秀。因为当用户输入文字的时候，标签仍然可见，并且和用户输入的内容靠在一起。这种做法能够最大程度上发挥标签的价值。
第2种慢动画
第2种慢动画
或许有人会觉得标签的动画有点过了，这可以通过缩短动画时间来进行优化。
第2种快动画
第2种快动画
改进后的第2种是我最喜欢的方式。我认为从用户角度来讲，它既发挥了标签动画的可用性，又没让用户因为动画而过于分心。
第3种
第3种
第3种是最古老的节省屏幕空间的方法。它最大的缺点在于，在输入框上面要预留出一块空白。当页面中还有其他形式的表单控件时，（标签文字的不一致）会给人造成视觉上的不平衡。另外，这种方式也会拉长页面。
第4种
第4种
与第3种传统方式相比，这种方法是否存在优势还很难说。我能找到的唯一优势，就是用户在输入文字之前似乎有更大的可点击区域。但是这个问题本就不存在，因为即使用户点击/轻触标签文字，光标也应该能够自动定位到相关的输入框中。
第5种标签并列
第5种标签并列
当两个甚至多个文本输入框并列时，应该考虑的因素有：用户输入的内容不会被标签割裂，标签和输入内容之间应该有明显的区分。
题图：
Sad Stormtrooper/Memegenerator.net
原文链接：
https://medium.com/@sophie_paxtonUX/mobile-textfield-ux-8a5316245ae3
网友评论