关闭

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

文本框的出现几乎可以追溯到可视化交互诞生的源头,是一个再经典不过的“鼻祖”控件了。我们每天都在和文本框打交道,不论你是产品设计者还是用户。然而,越是显而易见的东西越容易被我们忽略掉细节。今天小编就和大家一起来梳理一下文本框。
文本框的出现几乎可以追溯到可视化交互诞生的源头,是一个再经典不过的“鼻祖”控件了。我们每天都在和文本框打交道,不论你是产品设计者还是用户。然而,越是显而易见的东西越容易被我们忽略掉细节。今天小编就和大家一起来梳理一下文本框。

文本框的拆解

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

2.前导图标(Leading icon)

3.标签文本(Label text)

4.输入文本(Input text)

5.尾随图标(Trailing icon)

6.激活指示器(Activation indicator)

7.帮助文本(Helper text)

当然,MD为我们展示的是已经经过其团队长期摸索之后,基于其平台规范下的标准样式。想要探索文本框的交互演变,我们还是要回溯到文本框最初的模样。
2这就是一个文本框最基础的样式了,一个标签文本+容器,已经基本可以确保向用户传递文本框最直观的信息。

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

关于文本框的拆解就介绍到这里了,接下来要介绍的内容就是:基础的文本框布局方式。那么,文本框的布局方式有哪些呢?下篇文章给大家详细的梳理一下。

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

0条评论 添加新讨论

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