为什么web的表单设计总是这么难？

摘：我以前没有做B端之前，觉得B端的产品都很简单，不过都是一些表单而已，不会有多难，真的做了之后才发现虽然看来看去大部分都是一些表单，但是理顺逻辑的同时把复杂的事情变简单，这本身就是一件不容易做到的事情。

最近在公司里一直负责后台网页的迭代更新，目标用户是公司的业务，我们一个组里光不同的项目就有五六个，其中包括新功能，更新迭代，网页转App等，都是管理平台的设计工作。

 

这些管理平台都有共同的特点：业务逻辑复杂，信息数据海量，而之前的页面因为没有考虑到使用场景和用户习惯，因此信息量更加庞大，这让我在做更新迭代的时候更加的难做。

 

我在设计后台的时候给自己设立了两个简单的目标：

1、保证功能完整流畅的同时易用性；

2、保证信息组织合理的同时可读性。

 

当然实现这些目标的时候也不是都一帆风顺的，谁还没走过点弯路呢~下面就用我的经验来告诉大家设计过程中的收获吧！

 

 

合理组织表单内容

后台的页面设计与我们平时见到的很多好看的数据可视化不同，大部分都是通过表单填写实现的，但是基于公司业务的特点，表单填写的繁琐和逻辑的复杂，让第一次看到要优化表单的我直接想逃跑~

 

 

如大家在图中看到的一样，所有的表单内容都罗列出来了，而且有的需要填写有的不需要填写，就直接混在了一起，我们业务用了很多年也是很厉害了。

 

 

可能第一次见这么厉害的表单，所以很快我的弯路就来了，当时我的想的是根据内容类型，关联逻辑将表单分成两个模块，毕竟比起一整个大任务，我们更愿意去完成小任务，就像我们设立小目标一样。然后我设计成了这样，如下图所示：

 

 

我弄完这一稿就觉得不太好，但我具体也不知道不好在哪，但首先可以肯定的是我的排列方式是不对的，因为依然阅读困难，其次我的标签对齐方式也有问题。

 

目前业内比较认可的标签对齐方式有顶对齐、左对齐、右对齐，因为第一次见到的复杂表单是左对齐，因此被我判断不适合目前的页面，但是不是真的不适合呢？我们来研究一下，如下图所示：

 

 

所以得出结论，当前这么复杂的表单，顶部对齐显然是不合适的，那么目前页面中的标签都较长，要填写的表单项数较多，综合考虑后，为了让用户在一屏环境下填完，我选择了更适合的标签右对齐方式。如下图所示：

 

 

如何最大限度的提高目前页面的信息阅读呢？跳出被原页面固定住的思维，我们可以将只读的和需要操作的区分，如下图所示：

 

 

这样整个页面的是不是遵循了我们之前说的目标：
1、保证功能完整流畅的同时易用性；2、保证信息组织合理的同时可读性。虽然走了点弯路，但是了解到了更多的知识，不过是真的烧脑。

 

 

逐渐展开额外内容

渐进展开额外内容也是应对复杂信息的一种手段。根据用户的需要，通过点击按钮，再出现更多额外内容，这样可使界面保持简洁，操作逻辑清晰。比如最近的界面中有关于信息补充的填写，默认情况下是只有一行填写项，如果需要填写更多的信息，点击添加就可以新增一条表单，如下图所示：

 

 

这个页面中我有一个很大的问题就是，用的1920的尺寸来做的，而且是铺满了屏幕，完全没有考虑到适配的为题，导致这个表单在平时业务用的屏幕上放不下，而业务们的电脑屏幕是1280。。。这里的1920的屏幕是之前的网页设计师定的，他走了之后就交接给了我，我傻不拉几的直接拿到就做了，前端开始写了才发现有问题，又跑去问前任网页设计师，尺寸大小是怎么定下来的，他说是问的前端，前端说要宽屏，可以自适应。。。 

 

 

其实业务霸霸们用的都是1280的悠久电脑屏，所以要么1360或者1440是我们比较适合的尺寸，我之前经常在定界面尺寸时犯难，不知道自己要定多大，其实我们可以看看用户用的大部分是多大尺寸的电脑就比较好确定尺寸了，很多时候我们要选最适合自己的，而不是最好的。所以我将界面改成了1360宽度的画板，参考阿里云、腾讯云和百度云等等，将界面信息重新布局，同时保证功能完整流畅的同时易用性以及保证信息组织合理的同时可读性。如下图所示：

  

  

  

划重点

我以前没有做B端之前，觉得B端的产品都很简单，不过都是一些表单而已，不会有多难，真的做了之后才发现虽然看来看去大部分都是一些表单，但是理顺逻辑的同时把复杂的事情变简单，这本身就是一件不容易做到的事情。最近写的都是一些项目当中遇到的问题，不是很厉害的设计的，但很多设计师多多少少都会遇到，希望能给大家带来帮助。

 

参考文献：

 

 

原文地址：
海盐社（公众号）

作者：潘团子