输入框常用于表单中明细项目内容的补充和对应的数据录入的功能；在医院的业务流程中这也是最基础的表单套件，多数情况都是以组合情况出现，基本是多行，或者多列的情况比较多；在长时间的使用中我们会产生很多问题；

设计时输入框的长度是不是固定的？

输入框输入的内容是不是有关联性，如果有，他应该如何关联

输入框如何放在容器中，与他对应的属性名应该如何放置？

什么时候使用输入框而不是其他的组件

......

基于以上的问题，且随着我们在不同的场景中深入使用，如何能够让用户拥有一份良好的用户体验变成了难题，或者换句话说，如何在不同的容器中准确的使用，让功能的体验变得和谐已经是重中之重了。

想要了解这个问题，我们需要了解输入框Input的使用场景，即是什么的问题，然后它具有什么特征，他是如何影响布局等等问题，结合上述描述；我打算从几个方面论证上述问题，首先就平常的用户画像中所面对的群体，输入框该有哪些输入特征，接着我讨论一下输入框（Input）在设计时的所遵循基本变量从而分析一下该如何使用及其为什么这么使用的原因，最后由对应这些基本变量所推导出较为通用的输入框在界面中的布局原则 。

那么输入框设计时候基本变量是什么呢？

我们打算从 输入顺序 ，输入位置 ，输入长度这三个元素开始讨论，在这之前我们先看看我们平常使用的基本输入框有哪些；即它是什么的问题

一 . 基础元素

任何一个组件都需要有默认，移入，禁用，错误和成功等状态的反馈

在一般的输入框的使用场景中，默认大小输入框使用的频次最高的，对应较大的尺寸一般使用在网页头部，或者使用在需要明显告知输入的位置，使用的频次是最少的，而对应的小尺寸的一般用于另一个组件，比如在table中的行内编辑

当然这种小尺寸使用的频次也是比较少的，但是与大尺寸一样，他们在规范中也是必须要有的 

我们不建议在组件之后添加文案，第一从设计的总体性来说这种用法是割裂的，如果从组件库的整体性来说前端开发会重复添加文案，复用性有限；

还是上面原因，组合式的设计组件可以添加到组件库，形成复用的概念，如果重复添加两个组件在设计的效率上会减少很多，而且开发的效率减少很多，而且从长远的角度看，不利于从长期积累中形成自己的对于用户的思考。

第一就是对于一些基本的字数长度或者数据的类型的用户提示我们并不需要用补充文字来告之，第二方面是没有必要动用过多的资源，成本低，再一个，更重要一点就是对应警告的这种提示会让用户变得紧张，所以并不是滥用的条件，需要克制

在医院的业务场景中，文书和表单的打印占有很大的一部分业务比例，在所见即所得的设计业务中，我们并不需要对应有边框的输入框。

这样我们就有了对应基本元素，那么在具体的元素如何呈现在页面中的设计原则；组件与组件的联系该怎么相互关联，他们之间的顺序又是什么样子的，他们的长度的信息和填写的舒适度又是按照什么原理？

二. 设计原则

在说下面的论述之前，我们有一个必须要明确的总基调或者说对应的设计总原则

在医院的设计场景中所有的组件的使用；都是注重效率为前提，在低成本和高效率的之间相互平衡

所以我们希望用户能够快速且准确把对应的信息填写完整

01.元素位置

我们可以先看一个页面

对于这个界面，第一眼看上去的感觉，好像也没有什么问题，但是仔细一看，用比较感觉性的话语描述就是感觉很规整，但是组件之间的关系不是很明确。我们做一下修改

在这个版本中我修改对应的输入框的位置，让整个视觉的中心来到了左上；这个时候我们会感觉到会舒服了一点，至少组件之间的逻辑更加清晰了一点 ，其实这里面我们需要保证亲密性的设计原则

如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。https://ant-design.gitee.io/docs/spec/proximity-cn 

我们可以分析一下，如下图：

看到上图中作为红色区域的整体, 从业务上他们应该是一体的，你可以理解这部分区域为视觉的中心，所以他的外边距应该是大于内部的边距这样我们会自然不自然的把内部看成一个有效的组合，这种设计思想我们可以从word的使用时候会设置页边距是一个道理；

但是你会发现我的外边距的距离并不一致；

这是因为人眼在观察电子设备的时候会习惯性的从左上部分开始获取信息的习惯；

Jacob Nielsen （尼尔森）首先提出该模式后并提供了眼球追踪研究结果，关注流顺序如下图。按钮跟随内容模式在以下的这个中被证明非常自然。

所以说在设计的时候能够可以让你关注或者需要填写的内容适当的处于视觉的左上，会更加有利于用户更快速获取信息；这一点在越大的背景的容器中这种设计者的故意你越感受的很明显

而以上所说就是组件的位置原则，首先他需要符合亲密性的原则，然后他需要符合人的浏览习惯，这样作为一个设计组件的位置信息我们就可以有一个明确的指导；这一位置原则也适用于不同的组件不仅包括输入框；

02.元素长度

我们再回到上面那个设计稿； 他是不是已经完事了？ 答案肯定是不 ！ 它还有修改空间，那就是长度；

很显然，落实到具体的设计项目中；我们发现，输入框的长度至少要符合一定程度上用户的预期；每一个字段就应该对应着差不多长度，而且从设计的布局效果上来看，这种长短不一的错落会比一种模式更有呼吸感；如图

由此，用户预期的长度应该是什么样的效果，假定每一个字段都有一个对应的预期的预期长度，那么从设计的指导意义上来说其实并没有意义；我们需要的应该是几种长度模式来概括出普遍的情况；这样我们就可以在设计和开发组件库的时候有据可循；当然最终的答案是有的；根据普遍的填写场景；我们可以定出大概几种尺寸；如上图；至于各种长度又是如何推导出来的你可以看这里 https://zhuanlan.zhihu.com/p/110096160 

3.元素顺序

上面我们已经论证长度和对应的元素位置；那么只缺少了对应的组件的前后顺序问题；如果需要论证顺序这个问题那就要结合具体的业务来表述了；比如这是一个对应的新用户注册页面中；我们需要用户把对应重要的信息先行填写；可选的信息或者不重要的信息后一步填写；这样我们试想一个场景；一个用户注册的字段假如有很多类型；而此时用户想快速填写一份表单由于设计原则从重要程度排列【那也就意味着选填的项目会一直在后面】，这样用户就可以用最少的注意成本在填写最少的类型上最终以最快速度保存。

三 . 总结

所以综上所述，我们输入元素的位置可以根据 元素之间的亲密性关系 来确定；再加上用户 浏览电子设备的使用习惯 元素就可以确定，接着我们通过 用户的输入期望，可以模糊的将输入框的长度分为几种类型，最后考虑到业务之间关系的重要程度和对应一些逻辑关系【比如需要先填什么才能后填什么的逻辑】，这三种设计原则的共同指导下；就可以获取到一个比较全面的设计规范 如上图；

微信公众号：设计一论

Powered by Froala Editor