关闭

交互设计拆解——文本框(三)

前面给大家梳理了一下文本框的拆解和基础的文本框布局方式,接下来就看看文本框的改良。都是小编精心整理的知识点,希望能帮助到大家。
前面给大家梳理了一下文本框的拆解和基础的文本框布局方式,接下来就看看文本框的改良。都是小编精心整理的知识点,希望能帮助到大家。

三、文本框的改良

当文本框横向布局或是纵向布局都很难解决具体场景问题的时候,更新颖的文本框交互形式就出现了。

最初的演变形式是众多的应用开始采用前导图标来替代标签文本,使用图标可以有效地解决标签文本导致的排版错落问题。
1这种方案在轻量表单中较为常见,一般都是在表单内容少、用户对于场景的熟悉度较高的情景当中(例如登录场景)。

因为每个用户对于图标的认知性存在差异,在生疏场景或表单内容过多的情况下,图标容易导致用户对文本框信息产生更多的认知成本。所以用图标来代替标签文本的普适性其实并不高。

于是后来 iOS人机交互规范 和 MD规范 都给设计师提出了一条指导建议:当占位符字段中不包含必要内容时,可以合理地使用占位符来承载标签文本。

例如 iOS 通讯录新增联系人,就采用了占位符承载标签文本的方式。
2但这种形式同样也存在一个弊端:用户一旦输入内容之后,占位符就被内容文本填充覆盖了,有时用户会忘记所填写的信息是关于什么内容,必须要清空文本进行重新确认。对于表单内容繁多或重要内容需要谨慎填写的场景,这样的交互其实还是有一些不妥。

于是乎,类似MD的指导规范下这样普适性较高的文本框形式就诞生了。采用占位符承载标签文本,并且在用户填写信息时,标签文本始终可见,由占位符转移到文本框顶部。
3这一文本框交互形式的诞生,不论是对于排版空间的节省、遵循用户眼动习惯、微动效提升文本框趣味性等方面,都得到了一定提升。并且许多应用开始进行借鉴效仿。

其实像以上这种巧用占位符的场景已经越来越常见了,占位符已经不再仅仅用来承载无用信息或提示性信息,也可以用于承载默认值,帮助用户自动填充,提高用户填写信息的效率(例如手游当中,创建账号时系统帮玩家默认填充一个可用昵称)。

但填充默认值的手法也不仅仅局限于提升用户体验和填写效率,甚至也被运用到了一些商业场景中。

例如淘宝、京东等电商平台,将商品名称作为占位符填充在搜索栏中,一方面给所推荐商品增加了曝光;另一方面,在用户直接点击搜索时,将会以当前占位符内容进行搜索,达到为所推荐商品引流的效果。
4
关于文本框的改良就总结到这里了,下篇文章给大家梳理一下关于“合理的反馈”的内容,感兴趣的话可以继续去看看。

以上就是“交互设计拆解——文本框(三)”的内容了,如果你还想了解其他相关内容,可以来产品壹佰官方网站。

0条评论 添加新讨论

登录后参与讨论
Ctrl+Enter 发表