今天这篇文章想跟大家聊一聊输入框的一些设计心得。这个看似简单的输入框也有一些门道在里面，值得我们探讨学习。下面从以下两大块来跟大家一起分析。

1.输入框的样式

2.输入框的设计要点

输入框的样式

要了解输入框的样式，首先要知道输入框的组成部分，这里我们将输入框分为三部分：

文本：包含标题，占位符，帮助提示，反馈等；
文本框
图标：装饰性图标，功能性图标，反馈性图标。

1、文本框与标题文字的组合样式

水平排列：左对齐/右对齐
垂直排列
标题内嵌：作为占位符
添加帮助提示

排版上需要注意多列内容如何展示才能在界面中显得更加和谐。

1、水平排列：左对齐/右对齐

适用于展示页面内容较多的情况

上面两类，右边采取了右对齐，标题与外框的距离显得参差不齐。且用户在阅读的过程中，会显得比较费力。

2、垂直排列

适用于展示页面内容较少的情况

3、标题内嵌

当上面两种状态都无法满足某个场景时，也可以把标题内嵌，作为「占位符」来使用。

这种方式虽然节省了空间，但只要用户点击输入框后，就看不到标题了。很多用户在点击输入框后会忘了标题是什么。所以可以尝试点击输入框后标题文字置于输入框上方。

4、帮助提示

由左图可以看到，输入框内默认文字可以作为一种帮助提示。但它不适用文字较多的情况，如果文字较多或者有几条帮助提示时，那么右图的展示形式会更合适。

帮助提示的另一种展现方式就是提供默认值。如姓名可这样展示：

2.文本框：

文本框的展现样式主要分为以下2种，整行输入或者分段输入

3.图标：

图标可分为装饰性、功能性、反馈性三类。

装饰性图标：我们通常用它代替标题。

功能性图标：其中最为常见的一种就是(快捷删除)，此外还包括，语音、密码显示/隐藏等。

反馈性图标：比如当我们填写完内容脱离输入框后，系统开始校验，并给出反馈的图标。

上面提到的帮助提示，在界面中空间不够，且又不能没有的情况下可以这样处理：

输入框的设计要点：

字符限制

大部分产品的登录注册页，当用户在输入手机号时，只要超过 11 位就会无法继续输入。这其实就是一种字符数限制，只是大家有了共识，所以并不疑惑为什么无法继续输入，甚至反而会觉得可以继续输入的产品做得不够好。包括在手机号输入框里可输入英文字母，这就是没有做好输入限制的典型问题。

输入反馈的规则逻辑

输入反馈可分为三个过程：输入前提示，输入中校验，输入后反馈。

输入前提示，很简单，看下面这张图：

这里输入验证码，看到后知道我的手机接收到了一条验证码信息，这条验证码是 4 位数的，所以只要在这个位置输入这个 4 位数验证码即可。

输入中校验：

那么在这个过程中，只需要校验验证码是否正确就可以了。

如果成功，则直接进入下一步；如果失败，则给予反馈提示：

这里的反馈样式要清晰易懂，利用反馈文本让用户知道为什么会出现问题，还可以增加反馈图标增强说明。

说完输入前中后的内容，我们再来细分下输入反馈包含哪些规则逻辑：

- 验证内容是否为空

- 验证内容是否违规

- 验证内容的格式

- 验证内容的长度

文字输入限制_输入框设计，设计样式及设计要点相关推荐

文字输入限制_从拼音输入法的兴起看汉字文化圈的衰落
曾经韩国的报纸是这样的: 现在的则是这样的: (上面两图均来自网络,如有侵权请告知) 二战之后,曾经广泛使用汉字的朝韩跟越南都走上了废除汉字之路.日本虽然依然使用汉字,却也发布了<当用汉字表&g ...
代码设计的基础原则_设计原则：良好设计的基础
代码设计的基础原则 As designers, it's our goal to pass information in the most pleasing way possible. Startin ...
学习ui设计_如果您想学习UI设计，该怎么办
学习ui设计 There is a question that is always asked when we want to learn something new. 当我们想学习新东西时,总会问一 ...
figma设计_如何在Figma中构建设计入门套件（第二部分）
figma设计 Figma教程 (Figma Tutorial) With this short, but informative Tutorial Series I aim to show you ...
figma设计_如何在Figma中构建设计入门套件（第1部分）
figma设计 Figma教程 (Figma Tutorial) Do you like staring at a blank canvas every time you start a new pr ...
tcp 接收端优雅的写法_如何更优雅地接收设计反馈
tcp 接收端优雅的写法重点 (Top highlight) It's rare to meet a designer that doesn't take pride in their work. ...
gui界面怎么分页_什么是用户界面和体验设计
本文译自 Mikos Philips 的 UI vs UX - A Guide to UI Design 因为发现仍然有小伙伴跑来问我比较基础的专业划分问题,所以翻译了这篇科普文. -- 用户界面 ...
access设计视图打不开_铁路桥梁BIM程序的设计与实现
商业化的设计平台虽好,但自主研发的平台有不可替代的优点商业化平台技术成熟.模型渲染美观,特别是在空间几何计算方面的优势非常突出,但同时也存在一些问题:(1)专业性设计功能完全需要二次开发:(2)不掌 ...
web前端项目实例网站_招聘 | 北京 | tSynsth系联设计建筑设计师 / 室内设计师 / 项目负责人 / WEB前端开发工程师 / 实习生...
关于我们系联设计(Tuning Synesthesia ,tSynsth, TS)是一支由多元背景的设计师与软件工程师组成的国际团队,致力于想法与过程让设计 "可持续". 系联专 ...

文字输入限制_输入框设计，设计样式及设计要点