输入框几乎每天都会接触到，但是看似简单的输入框，你真的会设计吗？
输入框的组成部分 
输入框包含的内容有三种：载体、文本、图标，细分下来是这样的：l文本：包含标题，占位符，帮助，反馈；l载体：文本框；l图标：展示型图标，操作型图标，反馈型图标。
不同类型的输入框组合 
组合一：文本框与标题组合组合能确保用户知道需要在文本框中输入什么信息，虽然看起来很简单，但排版上需要注意多列内容如何正确展示，涉及到用户的眼动行为。上面五种文本框与标题的排列是最常见的，不同的排列方式各有利弊。除此之外，我们有时还会加入占位符、帮助、默认提示来增加输入框的体验：组合二：文本框与图标组合图标可分为展示、操作、反馈三类。最早出现，最为常见的是展示型图标，展示型图标：通常用它代替标题，如：电话、邮箱等容易表达的图标。但用户个体认知差异，可能没办法猜测图标到底是什么意思，因此，现在很多产品开始在输入框里去掉展示型图标。反馈型图标：如填写完内容系统开始校验，并给出的反馈图标。操作型图标：常见的要数清除我们再总结一下输入框包含的内容：l标题：应该始终可见。l载体：文本框，样式可根据场景变化。l占位符：可作为提示，也可以提供默认值。l帮助提示：内容多可拆分，也可以融入操作图标中。l反馈提示：有正确与错误两种l图标：展示型图标，操作型图标，反馈型图标
输入框设计的8种情况 
↘开始输入↘输入部分数据后↘固定字符数量↘指定账号的输入↘即时校验↘异常提示↘特殊字符处理↘特殊账号输入↘是否提供选择输入开始输入开始输入后，提示文字消失。也有一些输入框是没有上方提示的，在输入时可能会造成用户不知道输入规则或者需要输入的内容是什么。在开始输入的阶段，要给出此状态下的提示，以及光标的位置。输入部分数据后输入部分数据后，通常输入框右侧会出现一个快速删除全部的图标，方便用户快速删除所输入的数据，而不是仅能依靠键盘上的删除按键一个个数据删除。固定字符数量当输入的账号的字符数需要在某个范围内的话，建议加上字符的提示，用户可以清楚的知道自己输入了多少个字符，还有多少可以输入。指定账号的输入通常在一些应用/网站中，会指定一些特殊的账号输入(后台较多)，例如某种特定格式的前缀或者是后缀，如KK开头的工号，或者是某种邮箱账号后缀。这时候为了防止用户输错，会在输入框预置前缀或者是后缀，用户只需要输入可变部分即可，简化了操作，降低错误率。如下图所示给出固定的后缀@qq.com。即时校验现在使用很多应用或者是网站上会有即时校验的功能，当用户输入时，如果账号正确/错误，都会即时给出提示，以便用户进行下一步操作。如下图所示，一般都是在输入框的右侧或下方标识出来账号是否正确等信息。异常提示异常提示包括账号不存在(未注册)、用户填写错误、字符位数超过限制等情况，这时候就需要给用户正确的提示，让用户快速更正所填的账号。下图展示的是一些常用的处理方式。(1)当用户输入规则外的特殊字符时，提示用户账号不包含这些字符；(2)用户输入的字符数量达到上限提示账号的长度；(3)账号不存在时，提示此账号未注册，其实还可以在提示文案中增加“注册此账号”的链接，点击即可跳转到注册页面。在这些提示中，需要注意的是，提示应该包括错误信息+改正方法两种或其中的一种，让用户知道自己应该怎么改正。特殊字符处理在输入框中特殊字符一般包括@ 和. 等，一般用户输入@可能是要输入邮箱，输入.有可能是网站后缀。所以最好提供快速输入的方法，让用户减少输入的字符。虽然现在一部分输入法中已经增加了这些常用的固定的一段字符的按键。但是还是建议在输入框中加入快速输入的方法，与其依靠这种具有不确定性的情况，还不如一开始就设计好。如下图所示，当用户输入@时，提供快速输入的方式。特殊账号的输入如果是电话号码或银行的输入，这种相对长一些的数字输入，尽量按照用户习惯的规则划分，如果将所有数字连着一起就会比较容易输错。例如电话号码的划分规则为344，所以用户在设计的时候可以在将电话号码间隔开，方便用户识别。例如银行卡通常的的划分是4444X，X就是最后一位数为少于4的位数。所以可以如下图的方式设计。是否提供选择输入在一些搜索框中，经常用到选择输入，例如一些推荐的搜索，推荐的标签、历史记录等，用户点击一下即可输入，大大减少了用户的操作步骤。这种方式现有的应用中也应用得非常广泛，最常用于搜索页面。如下图的知乎的搜索框和豆瓣的搜索页面，推荐一些热门话题，点击即可进行搜索。
- End -
移动文本输入框的探索设计
移动 APP 中输入框的设计
输入框设置输入数字的限制
 

今天这篇文章想跟大家聊一聊输入框的一些设计心得。这个看似简单的输入框也有一些门道在里面，值得我们探讨学习。下面从以下两大块来跟大家一起分析。
1.输入框的样式
2.输入框的设计要点
输入框的样式
要了解输入框的样式，首先要知道输入框的组成部分，这里我们将输入框分为三部分：
文本：包含标题，占位符，帮助提示，反馈等；
文本框
图标：装饰性图标，功能性图标，反馈性图标。
1、文本框与标题文字的组合样式
水平排列：左对齐/右对齐
垂直排列
标题内嵌：作为占位符
添加帮助提示
排版上需要注意多列内容如何展示才能在界面中显得更加和谐。
1、水平排列：左对齐/右对齐
适用于展示页面内容较多的情况
上面两类，右边采取了右对齐，标题与外框的距离显得参差不齐。且用户在阅读的过程中，会显得比较费力。
2、垂直排列
适用于展示页面内容较少的情况
3、标题内嵌
当上面两种状态都无法满足某个场景时，也可以把标题内嵌，作为「占位符」来使用。
这种方式虽然节省了空间，但只要用户点击输入框后，就看不到标题了。很多用户在点击输入框后会忘了标题是什么。所以可以尝试点击输入框后标题文字置于输入框上方。
4、帮助提示
由左图可以看到， 输入框内默认文字可以作为一种帮助提示。但它不适用文字较多的情况，如果文字较多或者有几条帮助提示时，那么右图的展示形式会更合适。
帮助提示的另一种展现方式就是提供默认值。如姓名可这样展示：
2.文本框：
文本框的展现样式主要分为以下2种，整行输入或者分段输入
3.图标：
图标可分为装饰性、功能性、反馈性三类。
装饰性图标：我们通常用它代替标题。
功能性图标：其中最为常见的一种就是(快捷删除)，此外还包括，语音、密码显示/隐藏等。
反馈性图标：比如当我们填写完内容脱离输入框后，系统开始校验，并给出反馈的图标。
上面提到的帮助提示，在界面中空间不够，且又不能没有的情况下可以这样处理：
输入框的设计要点：
字符限制
大部分产品的登录注册页，当用户在输入手机号时，只要超过 11 位就会无法继续输入。这其实就是一种字符数限制，只是大家有了共识，所以并不疑惑为什么无法继续输入，甚至反而会觉得可以继续输入的产品做得不够好。包括在手机号输入框里可输入英文字母，这就是没有做好输入限制的典型问题。
输入反馈的规则逻辑
输入反馈可分为三个过程：输入前提示，输入中校验，输入后反馈。
输入前提示，很简单，看下面这张图：
这里输入验证码，看到后知道我的手机接收到了一条验证码信息，这条验证码是 4 位数的，所以只要在这个位置输入这个 4 位数验证码即可。
输入中校验：
那么在这个过程中，只需要校验验证码是否正确就可以了。
如果成功，则直接进入下一步；如果失败，则给予反馈提示：
这里的反馈样式要清晰易懂，利用反馈文本让用户知道为什么会出现问题，还可以增加反馈图标增强说明。
说完输入前中后的内容，我们再来细分下输入反馈包含哪些规则逻辑：
- 验证内容是否为空
- 验证内容是否违规
- 验证内容的格式
- 验证内容的长度
相关推荐：
无感：UI底部标签栏设计总结​zhuanlan.zhihu.com
无感：移动端APP搜索框设计，全方位解析​zhuanlan.zhihu.com
无感：APP界面金刚区图标怎样做？金刚区全方位解析​zhuanlan.zhihu.com

	

一个努力中的公众号
表单
在网页中主要负责数据采集功能，用来收集用户的信息。
常见的表单
表单的组成
标签
输入字段
占位符
按钮
前导图标
后缀图标
帮助(图标) 
验证
反馈
01 标签
标签的目的是为了告诉用户这里需要输入的信息是什么。根据标签所在的位置，可将标签分为：
左标签
顶部标签
行内标签
1、左标签(标签左对齐、标签右对齐)
标签左对齐
需要更多的横向空间，需要控制字数，常常造成标签右边参差不齐。与输入字段关联性弱，会导致完成速度变慢。
标签右对齐
需要更多的横向空间，需要控制字数，常常造成标签左边参差不齐。标签与输入字段的距离一致，完成速度较标签左对齐稍快一些。2、顶部标签
顶部标签
需要更多的纵向空间，符合自然视线，适合字数不同的标签，好布局，完成速度最快。3、行内标签
行内标签
占用空间小，节省空间。在用户体验上不很是友好，不利于用户的短期记忆，在输入的时候，行内标签消失，会使用户对所填写信息产生质疑，我们要做的是降低用户的记忆门槛，而非增加。所以，如果需要使用行内标签，我们可以在行内标签前方放置前导图标来降低用户的理解成本。
02 输入字段
输入字段：用户输入的信息。此处主要介绍有关输入字段的以下几部分：
输入的顺序
设置默认选项
输入限制
键盘匹配
关于数字的输入
1、输入的顺序要按照从易到难的顺序进行。先必填后选填，先公开后隐私，将相关的字段按顺序进行分类组合，这样用户在输入信息时不会觉得门槛过高，可以很轻松的完成表单。
从易到难
先必填后选填
如果必填的字段很多，大量 “*” 会增加用户的认知负担，可以直接在选填字段后加入 “(选填)” 文本来帮助用户识别。需要注意的是：一个表单里不要同时出现 “*” 与“(选填)” 文本。
相关的字段按顺序进行分类组合
2、设置默认选项默认值可以节省用户的操作时间，减轻用户填写表单的负担。3、输入限制对表单输入的信息进行字数限制或格式的限制，避免输入非数字或者字数过长的数字。4、键盘匹配对表单自动匹配合适的键盘。减少用户的操作，提高完成速度。5、关于数字的输入常见的数字输入有手机号、身份证号、银行卡号、金额等。
金额
在设计包含金额输入的页面，我们往往会在金额的前面加上 “￥” ，由于 “￥” 是一个定量，价格是一个变量，所以包含金额的输入页面并不适合采用左标签进行设计，而是要采用顶部标签。由于 “￥” 是一个定量，所以， “￥” 和金额不可以放在一个图层，需要拆开单独进行设计。输入金额一般采用千分位分隔，也可以随着金额的输入出现高分位提醒，从而提高用户体验。
03 占位符
占位符：帮助用户了解可输入的字段类型和格式提示。
文字清晰明了
颜色不宜太突出
输入内容后消失
04 按钮
按钮：承载界面的交互跳转。
表单中的按钮有以下常用布局：
位于右上角的按钮
位于下方的按钮 
1、位于右上角的按钮
· 一般是文字按钮；
· 该按钮不会对用户的视线进行过多的干扰，可以使用户专注于表单本身；
· 适用于可以在一屏展示的表单。
2、位于下方的按钮
一般分为两种：一种是吸底按钮；一种是跟随表单，位于表单下方的按钮。
吸底按钮
· 用户不需要滑动到底部就可以进行点击；
· 按钮的优先级较最高，页面的所有信息，都将聚焦在这个按钮中，从而引导用户点击。
跟随表单，位于表单下方的按钮
· 最常见的布局；
· 符合用户自上而下的阅读顺序；
· 表单内容过长，需要进行一定的引导。
05 帮助(图标)
当表单理解成本较高或者辅助用户填写表单时，常常以图标的形式引导用户点击，点击后出现详细的解答(弹窗或者跳转页面的形式)。
06 验证
用户输入完成信息后的验证。
出现错误时需要告知用户原因和解决办法。
07 反馈
用户完成表单填写并提交后，无论成功或失败都需要及时反馈，告知当前的状态。
结语
最近参与的项目涉及到一些表单页面，所以我对移动端的表单设计做了一些总结。
感谢百忙之中抽出时间看完这篇文章的同学，以后我会不定期在公众号「初的设计小铺」分享有关UI设计和交互设计的一些总结。

简单来说输入框是一个单击鼠标会插入点光标的方框，我们可以直接在方框内输入框中输入文字或文本信息。但这个不起眼的方框却是用户与虚拟的互联网世界信息交流的重要枢纽。



密码输入栏

输入框一般由以下五部分组成：

1.标题：始终可见，不可缺失。

2.载体：文本框，输入信息的地方。

3.占位符：可做提示，也可作为提供的默认信息填写。

4.提示：（1）帮助提示、（2）反馈提示

5.图标：1.展示型 2.操作型 3.反馈型

输入框的交互逻辑

输入框的校验与反馈规则

1.输入前输入前，标题信息，图表信息，占位符必须提供清晰明了提示信息，以便于用户输入操作。

2.输入中

输入中必须实时效验用户所输入信息格式是否正确，文本大小写是否正确，所输入文本长度是

否符合规则，及时给予用户反馈。

3.输入结束输入结束应及时给予用户输入结果的反馈信息。如信息有误应给予用户错误内容。



自适应材料2输入



数据输入屏幕

更多UI素材APP模板到，搜UI网 助工具进行修饰即可，其实这只能

锻炼你的借鉴能力，当你的技法娴熟到一定程度，就可以尝试临摹。

通过临摹，一则用来强化技法层面的能力，二来也能提升初学者的创新能力。

临摹的内容，可以有两方面选择：一种是系统自带的图标，另一种则是行业牛人的设计作品，

捉摸他们的设计风格、思想和细节，都能加深对设计的认识。