移动开发解决方案之玩转输入框

在手机的世界里,一个应用程序的一个输入框它所承载的内容正好反映了交互设计的各种知识。
它所承载的内容正好反映了交互设计的各种知识。

比如如何输入,输入前要注意什么,输入的过程中要如何校验,输入完成会有哪些反馈。这一串内容其实就包含设计师设计一个功能时,所需要注意的所有信息。

比如如何输入,输入前要注意什么,输入的过程中要如何校验,输入完成会有哪些反馈。这一串内容其实就包含设计师设计一个功能时,所需要注意的所有信息。

1 输入框的组成部分

通常一个「输入框」包含的内容有两种:载体、文本。但随着用户使用产品的场景复杂化,输入框的内容也逐渐变得更为丰富,现在也包括了图标。

  • 文本:包含标题,占位符,帮助,反馈;
  • 载体:文本框;
  • 图标:展示型图标,操作型图标,反馈型图标。

2 最简单的输入框

在这里插入图片描述
这样一个组合,至少能确保用户知道需要在文本框中输入什么信息。

需要注意的是,虽然这看起来很简单,但在排版上需要注意多列内容如何进行正确展示才能在界面中显得更为和谐的问题,因为它也涉及到了用户的眼动行为。

在这里插入图片描述
右图中折线代表了用户的眼动行为路线
上面两类,左图虽然左对齐,但是标题与输入框的间距从整体上看,显得不够协调;右边采取了右对齐,但是标题与外框的距离又显得参差不齐,且用户在查看的过程中,会显得较为吃力。

所以出现了下图这样的组合:
在这里插入图片描述

这样的组合适用于少数内容的排版。

3 内嵌标题的输入框

在这里插入图片描述
这种样式的输入框,节省了占用空间,但是在用户输入的时候就缺少了提示,很多用户会习惯性点击输入框,但往往会忘了标题是什么,再想返回去看,也不知道如何才能让其恢复再出现了。

所以又出现了这样的形式:内嵌标题,输入时标题上移
在这里插入图片描述

4 占位符与标题

如果文字较多,那么右图的展示形式会更可取。

占位符的概念很大,不仅仅是占用某个位置,在占用的同时它需要提供自己的作用,因此除了代替标题,作为帮助提示,它还可以提供默认值
在这里插入图片描述

5 反馈型文本输入框

当我们填写完内容,脱离输入框后,系统开始校验,并给出反馈的图标。
在这里插入图片描述

除此之外,我们还能看到的一类图标是操作型图标,其中最为常见的还是要数「清除」了

在这里插入图片描述

6 总结

一个输入框,组成的部分如下
在这里插入图片描述

  • 标题,应该始终可见。
  • 载体,文本框,样式可根据场景变化。
  • 占位符,可作为提示,也可以提供默认值。
  • 帮助提示,内容多可拆分,也可以融入操作图标中。
  • 反馈提示,有正确与错误两种。
  • 图标,分为展示型图标,操作型图标,反馈型图标。

而在一次输入过程中,输入前提示,输入中校验,输入后反馈 结合输入框的组成部分而达到一种协合质感。

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页