网页设计中表单设计 第1篇
在web页面中，由于页面的关系，导致跳转页面与弹窗的横向空间较大，纵向空间不足，若出现较多的输入内容时，且不能采用分模块、分步骤、高级等交互布局时，有的设计师会采用双列或多列表单，以提高横向空间的利用，这也是可以接受的。此时，要注意列与列间距的合理性以及遵守用户的视觉流，可以参照菲兹定律。
但是作为表单，单列表单的浏览及填写效率是最高的。用户的视觉流较为顺畅，可以提升填写效率，同时能够减少用户的疲劳度。因此，建议表单多采用单列布局。
网页设计中表单设计 第2篇
我们都遇到过这样头痛的问题，当列表字段太多，一屏无法完全展示，这时应该怎么做？给表格设计一个左右滑动的滚动条？如果内容真的太多并且已经确定，这也未尝不是一种办法，但是，重新设计过表格的字段或许会更好，这个时候应该跟产品好好沟通了。有以下方法：
1、减少不必要的文字（如下图中表头的“全选”去掉）；
2、缩略内容或者用…省略后面内容，鼠标经过出现更多内容（如时间可以缩略后面的时分，鼠标经过出现具体时间）；
因为每个列表的宽度是可以拖动的，我们不能决定其固定的宽度，但每一行的高度可以设置一个值，建议所有元件的高度、宽度、间距的数值参数都设置为偶数。
那么问题来了，在响应式设计当中，可没有什么参数是固定的值，一般都是用百分比来设置。因为默认显示的数据条数在任何宽度的情况下仍然保持不变，因此当列表宽度缩小时，内容出现换行会增加高度而拉高整个列表的高度。值得注意的是，当其中一条数据的内容有出现换行而又有其他数据没有出现换行的时候，每一行的高度都应该按出现换行的且最高的高度保持一致，并且内容仍然保持垂直居中显示。另外，当前端做成这种响应式的列表时，一般不再让鼠标拖动列的宽度了。
同一组数据的不同宽度显示
当宽度拖到第三种情况，按钮也出现了换行，那每一行的高度都应该按照这个高度保持一致，即使有一些数据只有一个按钮/地址并没有出现换行，如图：
当然，如果你不想让内容出现换行，就可以用上面说的那三种方法来实现了。
不要再说为什么别人做的表格那么高大上，明明自己做的效果图还挺好看，为什么实现出来却那么丑，当你了解这里面的各种参数和逻辑，并且很好的跟前端沟通，参照以上规则，不管再复杂的列表都可以做的得心应手并且得以实现。
网页设计中表单设计 第3篇
弹窗并不是后台的专利，它在移动端更高频率的出现，例如活动页面的弹窗，趣味性就显得更重要了。
总结：
这篇文章主要跟大家分享的是，当开始网页后台项目设计的时候，保持跟产品和前端的良好沟通。确定风格后开始设计，并分享了3个主要的点：
1、 制作灵活又简洁的表格
2、 设计整齐并带有交互功能的表单
3、 选择友好舒适的弹窗
后台还有其他元件设计，欢迎大家共同探讨。
网页设计中表单设计 第4篇
任何高密度的操作，都会引起用户的不适。因此，在输入项的选择时，用选择来代替键盘输入。
作为同一类型的输入项，单选框与下拉选择框的优点类似，使用的场景有较大的差异。
单选框较为适合选项较少（少于五个），同时选择项之间较为类似，需要强调或对比时，可以优先考虑单选框。另外，当选项能见度和快速响应优先时，也建议优先考虑单选框。因为相较于下拉选择，用户可以通过展示出来的选项，直接选中目标选项，提升输入效率。
下拉选择框较为适合选项较多（超过五个），有默认选项，或者选择项之间有较大差异，同时下拉选择最好不要引起随后输入项数量以及页面的变化，否则下拉选择的收起以及页面的变化，易引起用户不适。
若选项过多，超过二十个，最好引入模糊匹配以及一定排序规则（首字母排序、数字排序等），方面用户提前预知选项的大致位置，或通过模糊检索找到相应的选项。
网页设计中表单设计 第5篇
反馈提示是页面系统对用户的输入给与校验，并对校验结果予以展示的提示形式。反馈提示是根据用户输入而显示的提示，出现在输入中与输入后，可细分为：即时校验反馈、局部校验反馈和全局校验反馈。
较为常见的即时校验反馈是根据输入字符数量而显示密码强度，从而时刻提示用户当前密码强度是否符合要求。该方式的校验条件多在本地，不需要实时向服务器发命令，以得到反馈。
网页设计中表单设计 第6篇
由于“标签左对齐布局”的优点（方便检索并且减少垂直高度），尝试纠正它的主要缺点（标签和输入框的分离）就很诱惑人。
一个方案就是增加背景色和分割线，不同的背景色产生了一列垂直的标签和一列垂直的输入框，每一组标签和输入框利用清晰的水平线分开。虽然这听上去不错，但是还是会存在问题。
对比之前的形态（用户主观的视觉区分），这增加了15个视觉元素：中间线、一个个有背景色的单元格以及一条条的水平线。这些元素会转移用户的视线，让用户难以聚焦到一些重要的元素上，比如标签和输入框。 正如 Edward Tufte 指出的：“信息本身存在差异，必然产生感官上的不同。”换句话说，任何对布局无用的视觉元素都会不断地扰乱布局。当你试着浏览左侧的标签就可以发现，你的视线总是被打断，停下来想那些水平线、单元格和背景颜色。
当然这并不意味着放弃背景色和线条。它们对于划分相关区域信息还是很有效的。比如一条细水平线或者一个浅浅的背景色，都可以从视觉上组合相关数据。背景色和线条对于区分表单的主要操作按钮尤其有效。
主次操作
一个表单的主要操作（通常是“提交”或“保存”）需要一个比较强的视觉比重（在上面的例子里用了亮色调、粗字体、背景色等等）。这相当于给用户一个提示：您已/即将完成填写表单。
当一个表单有多个操作，比如“继续”和“返回”，那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。
虽然以上内容可以更好的让你设计表单，但是组合布局、可视化元素以及内容，仍然需要经过用户的测试以及数据分析（完成度评估、错误报告等）。