今天聊一聊关于“输入框”的交互方式,小小的输入框,其实也是挺讲究的。

先来看看最常见的输入框形式。

嗯,这就是最常见的输入框之一,在这里就是藏着一个大学问;

 
刚刚我们看到的例子,是采用标签左对齐的方式;
而根据国外“ Matteo Penzo的实验研究

标签左对齐的输入框

从标签移到到输入框,所需要的时间为500毫秒

标签右对齐的输入框

从标签移到到输入框,所需要的时间为240毫秒

标签顶对齐的输入框

从标签移到到输入框,所需要的时间为50毫秒

综上,如果从效率方面考虑,标签采用顶对齐的方式是最佳的方案;
然而,顶对齐的方式也有弊端;
顶对齐的输入框,占用的垂直空间较多,更合适填写内容较少的页面;

其实,现在的输入框形式也不仅仅只有上面说到的三种类型;
还有一种 标签隐藏式

这种方式更常见于移动端;
它的优势是可以节省很多页面空间,同时让用户快速知道这个输入框是填写什么类型的内容;

标签隐藏式更合适填写内容较少的页面;
在输入内容后,可以将标签展示在输入框顶部,防止用户在检查输入内容时,不知道对应的输入框标签;

说到这,在真实项目中,往往还有各种输入框的提示内容;

最常见的就是这种“请输入XXX”的方式,提示内容放在输入框内;

这种方式的文案可以进一步优化的,如下所示:

会让用户更直观的了解到输入的格式限制;
如果用这种方式需要谨慎,因为用户在输入信息后,这些提示内容就看不到了,所以只合适一些简单的提示内容;
如果提示内容过多或者这个输入框需要填写的内容比较复杂;

建议采用如下方式:

在输入框后面,展示提示内容;

万一整个页面输入框很多呢?
每个输入框又比较复杂,都带有提示内容;
好吧,这就是最近做腾讯某个项目遇到的真实事;

可以采用如下的方式:

激活输入框时,才显示对应的输入框提示内容;
如果输入框失去焦点(填写完,输入点击别的地方等),则自动隐藏提示内容;
这样设计,页面视觉上会清爽很多;用户在填写内容时,也不会被其他项分散注意力;

完了,这就是今天聊的输入框内容;
一个小小的输入框,其实挺讲究的;
从标签的对齐方式,到提示内容的展示形式,还有各种漏填、错填、输入字符限制等;
这些都需要交互设计师去思考和设计的;