关闭

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

上篇文章介绍了文本框的拆解,接下来就看看基础的文本框布局方式。内容有点多,都是个人的学习总结,大家可以简单看一下。
上篇文章介绍了文本框的拆解,接下来就看看基础的文本框布局方式。内容有点多,都是个人的学习总结,大家可以简单看一下。

二、基础的文本框布局方式

我自认为,激励设计师不停探索文本框新的交互形式的根本原因之一,一定包含总让人头疼的排版问题。在解决了基本视觉问题之后,才是思考如何设计文本框来提升用户的填写和使用效率。

例如前面我们所看到的最基础的文本框样式,如果简单地进行单列布局,自然而然会出现让众多设计师纠结的一个问题:标签文本究竟应该如何对齐?
1如果标签文本采用右对齐,标签文本的长短问题容易导致左侧的视觉隐形边界错乱,用户的规律眼动容易被打乱;

如果标签文本采用左对齐,文本的长短问题又会导致部分较短标签文本与容器间距增大,让用户从左至右浏览的效率降低,并且看起来不够协调。

于是乎文本框的布局方式有了进一步的演变:标签文本与容器顶端对齐。
2顶端对齐的方式使得用户眼动变得十分规律,竖直向下浏览可以便捷地理解标签文本并进行填写,文本的长短问题不再成为干扰设计师进行排版的一个纠结点。

但纵向布局的的方式只是把问题迁移到了另一个维度,那就是在表单数据量过多时,纵向布局会使得纵向空间耗损增加,用户需要不停地滑动页面才能实现表单的完整填写。

这么看来,文本框的布局需要多方位评估标签文本长度、表单数据量等问题,才能对具体场景进行有效设计。

关于基础的文本框布局方式就先讲到这里了,接下来要总结的内容就是:文本框的改良。由于篇幅较长,会在下篇文章中进行介绍,继续去看看吧!

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

0条评论 添加新讨论

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