避免界面设计的误区-从数据的三种状态谈界面设计

观点

1. 界面设计，本质上是解决人和数据的交互，主要就是数据的输入和输出
2. 数据在其生命期，有三种状态，“输入” – “存取” -“ 输出”
3. 不同的状态，应该有不同的表现形式，才是最适合的
4. 好的设计，针对不同的状态，会让数据以不同的形式呈现
5. 而不好的设计，会混淆搭配，比如以适合存储的形式来设计输入，输入的体验就不一定最优

接下来，使用一些例子来阐述这个观点。

起因

先谈谈我是如何意识到这个问题的。
职场人有件事情天天要做 – 写工作日志。
我公司工作日志，长这样

这是S公司的日志填写界面，(客户系统不能截图，仅在excel中做了一个大概的样子）

可以看到，这个界面将类别直接展开，使用一个矩阵结构来填写，一次可以填一周，只用找到对应的格子填入工时即可。
一下子填写日志，简单的几次点击和输入就搞定了，以前要花几分钟的工作，十几秒就能搞定。

读者也许会发现一个问题，相对于之前的输入方式，这个界面没地方输入工作内容的详细描述，你少了一个输入项得瑟什么:)
不要着急，详细内容的输入，这个系统也用了一个巧妙地方式来解决，看下图

在查看时，只显示你填写了工时的内容，过滤掉其它空白数据，同时类别，工时，描述信息三个属性一个不少，通过另一种矩阵方式呈现出来

在我研究使用了这个日志系统后，对比之前使用的系统，我折服于这个系统设计者的智慧，同时，也开始思考别人是怎么做到的。

两个日志系统，操作的数据内容是完全一样的，都是工作项目 工作类别，工时，描述信息四种属性。但是，后者对于输入方式做了特别的设计，使输入效率有了很大的差别。
我思考的结果就是前面提出的观点，通过数据的应用场景来设计界面。

数据的三态

数据，也可以理解为信息，在软件生命期，有三个阶段

混淆的设计也不是不能用，但是体验不好。

我们再来看一个例子：

可以看到，其并不是“属性名-属性值”方式来显示内容，完全都没有“属性名”这说明这个值是什么意思，但通过界面排版布局，值的单位差异，结合一些图标，谁都看得懂这些信息。

Adobe的bridge软件，把这两种方式结合起来

Nplan项目管理软件，可以访问 站 nplan.nuiengine.com  站下载

项目管理的数据，同工作日志的内容一样，数据维度并不多。

• 项目由若干任务构成
• 任务由子任务构成，子任务是划分到每个人的任务
• 子任务主要也就由负责人，周期（开始时间-结束时间），完成程度，完成质量这几个指标构成

就这几个简单的属性，但不同的场景，呈现的形式千差万别

这是通过甘特图形式呈现的项目关系，重点是关注项目的计划，周期

这也是通过任务版形式呈现的项目关系，但是用成员来分组，前面是用任务来分组。这个界面重点可以关注成员的任务分配和完成情况

这是通过日历形式呈现的项目数据，可以看到每天项目各任务的状态，项目组开周会用会很方便

看起来各个界面千差万别，但其核心数据就是我们刚才列出的:

项目-任务-子任务-责任人/任务周期/任务完成程度。

仅根据这些数据，就可以用这么多方式呈现，而且不同的呈现方式都有其应用场景。

写在最后