App设计体系之文本框

文本框(text field)使用场景多，常用于表单、注册登录、搜索框等界面，是不可少的界面控件之一。

1、标签(Label)

1.1 对齐方式

标签文字的对齐方式有左对齐和右对齐，移动端只适合用左对齐。

1.2 标签字数

标签文案尽可能简短，控制在6个字数以内，需要全部显示。

2、输入框/文本框(Text Field)

输入框有4种样式：填充、描边、下划线、无边框。

2.1 填充

2.2 描边/下划线

大多应用于登录注册页

2.3 无边框

无边框文本框大多应用在发布界面

3、占位符文本(Hint Text)

文本框内加入占位符文本引导用户填写，不宜过长，切勿超过文本框，文本内容可以是引导性文本或是情感化文本，引导性文本纯粹是为了告知用户应该输入什么内容，而情感化文本是为了引起用户共鸣。

占位符加上icon，起到修饰的作用，界面没那么单调。

4、可操作图标(Handle Icon)

在登录界面中，通常有2个操作图标：一次性清除和密码可见。

一次性清除：在输入框内容不为空时获得焦点，显示「一次性清除图标」，点击图标后，清空输入框内容，用户不必逐个删除。

密码可见：密码默认用 * 或 · 代替，点击「密码可见图标」后显示密码，让用户核对密码正确与否。

5、辅助文字

添加必要的辅助文字对界面内容进行更详细的解释说明，引导用户操作。

6、状态

文本框输入前后，有几种不同的交互状态：默认状态、输入状态、禁用状态、错误状态。

6.1 输入状态

a 输入框高亮表示输入状态；

b 密码有格式要求，满足一种，下方对应的提示则点亮。

6.2 禁用状态

未满足条件或不可用时为禁用状态，用户点击后给出禁用的原因，通常需要完成某个操作后才会变成可用状态。

6.3 错误状态

输入错误时，给出错误原因提醒用户。

7、实际应用

7.1 实时匹配关键词 

7.2 智能预设

优酷的搜索框内有占位符文本，在后台进行预设，用户不用输入内容，直接点击搜索即可。

7.3 输入框限制

a 聊天输入框超过5行，输入框的高度固定，5行以上的文字被遮挡住，被挡住的文字会露出半行，可下滑查看。

b 微博的发布界面，右下角数字告知用户已经输入多少文字，如果超过140字后，数字的颜色会变成橙色，起到警示作用。