1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

不熟悉文本框交互设计?来看这篇全方位拆解!

时间:2020-08-15   分类:交互设计    作者:网络   来源:网络整理   点击:120

文本框的出现几乎可以追溯到可视化交互诞生的源头,是一个再经典不过的「鼻祖」控件了。我们每天都在和文本框打交道,不论你是产品设计者还是用户。 www.9fen.net

越是显而易见的东西越容易被我们忽略掉细节。今天就和大家一起来梳理一下文本框。

本文来自九分网络

文本框的拆解

文本框(Text Fields)根据 Material Design 指导规范,被拆解为七个部分。分别是:

内容采集来自9fen.net

不熟悉文本框交互设计?来看这篇全方位拆解! copyright 9fen.net

本文来自九分网络

当然,MD为我们展示的是已经经过其团队长期摸索之后,基于其平台规范下的标准样式。想要探索文本框的交互演变,我们还是要回溯到文本框最初的模样。

本文来自九分网络

不熟悉文本框交互设计?来看这篇全方位拆解!

内容采集来自9fen.net

九分网络

这就是一个文本框最基础的样式了, 一个标签文本+容器,已经基本可以确保向用户传递文本框最直观的信息。

www.9fen.net

但如今的文本框已经演变出了形形色色的样式和交互形式,究竟MD的文本框是如何演变到今天这番样子?下面我根据个人的拙见,一步一步从场景进行分析。 copyright 9fen.net

基础的文本框布局方式

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

例如前面我们所看到的最基础的文本框样式,如果简单地进行单列布局,自然而然会出现让众多设计师纠结的一个问题: 标签文本究竟应该如何对齐? 本文来自九分网络

不熟悉文本框交互设计?来看这篇全方位拆解! copyright 9fen.net

本文来自九分网络

如果标签文本采用 右对齐,标签文本的长短问题容易导致左侧的视觉隐形边界错乱,用户的规律眼动容易被打乱; copyright 9fen.net

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

九分网络

于是乎文本框的布局方式有了进一步的演变:标签文本与容器顶端对齐。 copyright 9fen.net

不熟悉文本框交互设计?来看这篇全方位拆解! 本文来自九分网络

copyright 9fen.net

顶端对齐的方式使得用户眼动变得十分规律,竖直向下浏览可以便捷地理解标签文本并进行填写,文本的长短问题不再成为干扰设计师进行排版的一个纠结点。 www.9fen.net

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

本文来自九分网络

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

九分网络

文本框的改良

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

copyright 9fen.net

最初的演变形式是众多的应用开始采用前导图标来替代标签文本,使用图标可以有效地解决标签文本导致的排版错落问题。

本文来自九分网络

不熟悉文本框交互设计?来看这篇全方位拆解! 本文来自九分网络

内容采集来自9fen.net

这种方案在轻量表单中较为常见,一般都是在表单内容少、用户对于场景的熟悉度较高的情景当中(例如登录场景)。

www.9fen.net

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

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

例如 iOS 通讯录新增联系人,就采用了占位符承载标签文本的方式。 www.9fen.net

不熟悉文本框交互设计?来看这篇全方位拆解! 内容采集来自9fen.net

copyright 9fen.net

但这种形式同样也存在一个弊端:用户一旦输入内容之后,占位符就被内容文本填充覆盖了,有时用户会忘记所填写的信息是关于什么内容,必须要清空文本进行重新确认。对于表单内容繁多或重要内容需要谨慎填写的场景,这样的交互其实还是有一些不妥。 www.9fen.net

标签: 优设 优设网 交互控件 控件设计 文本框设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----