有利于管理平台信息设计的五大技巧要点

首先我们来看下面这幅图：左边是Dribbble联合创始人设计师Dan Cederholm的办公桌，非常干净整洁。右边是天才工程师 Jim Williams的办公桌，大家第一眼感觉如何？是不是很凌乱。我们常说设计要谨记“Less is More”，简洁干净是人人都追求的，但有时有些复杂是不可避免的，比如下图中工程师的桌面。仔细观察其桌面，你会发现虽然这些物件看起来杂乱无章，但其摆放还是有规律可寻的。

我进入公司的两年时间里，一直在做管理平台的设计工作，而目标用户就是工程师。这些管理平台都有共同的特点：业务逻辑复杂，信息数据海量，而且还要考虑用户特定的使用场景和操作习惯。所以在设计中首要的两个目标就是：

1、保证功能完整流畅，同时兼顾易用性。

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

在实现这些目标的过程中，我总结了5条设计小技巧。下面，我将用一些产品实践和案例来详解设计过程中小技巧的应用。

一：合理组织表单内容

管理平台的功能大部分需要通过填写表单来实现，但由于其业务特点，它的表单填写内容繁多，逻辑复杂。若直接罗列所有表单内容，一定会让用户望而生畏，且容易出错。这时可以根据内容类型，关联逻辑等维度将表单分成多个主题，再根据前后逻辑关联性，将这些主题分到多个网页或单个网页的不同部分，如果是多个网页，最好配以进程提示，告知用户需要的填写步骤以及当前所处进度。有研究表明，比起完成一项大任务，人们更愿意去完成10个小任务，因为每完成一个小任务就能给人带来一定成就感。

云计算-云主机服务中，创建云主机的过程需要填写15项内容，根据信息类型和业务逻辑将内容分为了三类，再加上一个确认步骤，将整个表单填写分到了四个网页，虽然步骤变多，但却可以让信息更加有序，减少错误的发生。

运维平台中添加监控项需完成9项内容，但前后主题之间没有很强的逻辑关联，因此在一个网页中分成3个主题，即可添加成功。

二：选择合适的标签对齐方式

最贵的不一定是最适合自己的，标签的对齐方式也是如此。根据不同的使用场景也要选择不同的对齐方式。业界比较认可的标签对齐方式有顶对齐、左对齐和右对齐三种，Matteo Penzo的眼动实验比较了三种方式的完成速度，顶部对齐标签方式，标签移动到输入框需50毫秒，比左对齐标签方式(500毫秒)快了10倍，比右对齐标签方式(240毫秒)快了5倍左右。通过下表，可以看出三种对齐方式各有其优缺点。但有时，完成时间并不是表单设计的唯一考虑因素。

（引用自Justin Mifsud的《An Extensive Guide To Web Form Usability》）

对于简易表单可以使用顶对齐；对于较复杂表单，更倾向于选择右对齐，而对于布局复杂的表单则可以用左对齐的方式。

云计算-关系型数据库的创建实例中标签都较长，且要填写的表单项数较多，综合考虑后，为了让用户在一屏环境下填完，我选择了更适合的标签右对齐方式。

虽然标签右对齐比左对齐的完成效率高些，但若在布局复杂的情况下标签右对齐会让界面显得非常混乱，从而影响整体的信息浏览阅读。所以在布局复杂的表单中一般会选择左对齐。

当然，对于一些空间受限，内容又繁多的表单，还有一些创意的处理方法，如Matt D. Smith的设计。

三：渐进展开额外内容

渐进展开额外内容也是应对复杂信息的一种手段。根据用户的使用场景和习惯，将部分内容预先隐藏，在用户需要时，通过点击适合的控件，再出现更多额外内容，这样可使界面保持简洁，操作逻辑清晰。

云计算中创建安全组的表单，大部分用户创建一条安全组规则即可满足需求。对于有额外需求的用户可通过点击添加按钮来补充。这样在大多数情况下，页面简洁，而有需要时，也可以快速添加，不打断用户的操作流。

Airbnb个人资料表单的紧急联系人选项，默认情况只有一个说明，若需添加时，点击编辑才会展开更多内容。

云计算的时间选择控件，对多数用户来说，这些快捷选项基本满足查看不同时间范围内的数据变化，所以自定义时间范围就作为高级功能隐藏起来，如有需要通过鼠标点击自定义即可触发。

四：即时帮助和即时验证

虽然管理平台的用户多半都是经验型用户，但复杂的表单和特定的规则难免会让他们有困惑的时候。在输入框旁边适时地显示帮助信息，及时地告诉用户该如何填写，以此减轻用户的记忆负荷。同时，管理平台的表单内容通常会很多，如果在最后提交时才告知用户有错误，无法提交，想必此时用户肯定会怨声载道索性放弃填写。即时验证让长表单的填写成为一种实时沟通，它可以及时确认用户填写的内容是否合适，或者实时更新数据给用户填写参考。

填写集群的名称有其特殊的复杂规则，如果没有即时帮助，让用户每次创建都记住规则再来填写，显然不可能，而每一步的实时验证，可以补救用户在规则查看之余还会犯的错误，顺利完成任务。

每个用户的数据库服务器数量都有一个初始值，随着创建会逐渐减少，限制提示可以提醒用户填写一个合理的数值。

对于一些较复杂的表单项，也可以尝试在标签上添加提示。

而难以解释的表单项，除了文字提示之外，还可以尝试使用图片来表达。例如信用卡的CVC码，一般人都不清楚是什么，但用图片来表达就一目了然了。

五: 借助图形化表达

通常来说，文字可以准确地表达信息，但是过多的文字却会给界面带来阅读负担，若将部分文字信息通过图形化表达，则可以把信息更加直观、准确、清晰地传达给用户，以获得理解和共鸣，甚至快速地被记住。在表格中适当借助图标来代替文字还可以减少占用空间，让表格主次分明。

在云主机名称旁边放上云硬盘的图标，用户一目了然就可看出哪些云主机挂载了云硬盘，而无需再专门加一列数据，表明云硬盘的挂载情况。

性能监控平台的场景管理中，对每一个轮次都会有一系列使用频繁的操作，为了让用户可以快速找到，且不迷失在文字理解中，用图标来表示这些操作既美观又便捷。

sbb.ch的火车班次查询列表，很多信息会通过图标来表达，很大程度地缩减了占用面积。虽然有一些图标的认知需要一定的学习成本，但在熟悉之后，会让信息传达变得直观高效。

结语

以上就是我对管理平台信息设计的一点心得。虽然管理平台的用户受众面远不及内容型产品，但这些用户都是专业用户，对数据的操作和浏览有更严格的要求，如何在实现所有功能的基础上让用户觉得这类产品的使用是灵活且便捷，还有许多研究的点值得深入挖掘。