避免界面设计的误区-从数据的三种状态谈界面设计
笔者曾经做过多年图形界面产品，包括开发和设计，也领悟了一些产品设计的方法论，整理出来同大家分享。
这篇文章想谈的是界面设计容易出现的一个误区。
先直接上干货，本文的观点：
观点
- 界面设计，本质上是解决人和数据的交互，主要就是数据的输入和输出
- 数据在其生命期，有三种状态，“输入” - “存取” -“ 输出”
- 不同的状态，应该有不同的表现形式，才是最适合的
- 好的设计，针对不同的状态，会让数据以不同的形式呈现
- 而不好的设计，会混淆搭配，比如以适合存储的形式来设计输入，输入的体验就不一定最优
接下来，使用一些例子来阐述这个观点。
起因
先谈谈我是如何意识到这个问题的。
职场人有件事情天天要做 – 写工作日志。
我公司工作日志，长这样
填写步骤如下
选择“项目”，类别，描述内容（输入文字），填写工时（输入数字）
但这个过程只定义了一个工作任务，经常我们一天可能会处理不同的工作内容，这样需要再新建若干项继续这个过程。
要正常填写一天的工作内容，需要操作十几次鼠标，并穿插多次键盘切换。
天下的工作日志都这几项，这个界面看起来也没有什么大问题。不过，没有比较就没有伤害，直到我有次在客户公司见到如下的工作日志界面。
这是S公司的日志填写界面，(客户系统不能截图，仅在excel中做了一个大概的样子）
可以看到，这个界面将类别直接展开，使用一个矩阵结构来填写，一次可以填一周，只用找到对应的格子填入工时即可。
一下子填写日志，简单的几次点击和输入就搞定了，以前要花几分钟的工作，十几秒就能搞定。
读者也许会发现一个问题，相对于之前的输入方式，这个界面没地方输入工作内容的详细描述，你少了一个输入项得瑟什么:)
不要着急，详细内容的输入，这个系统也用了一个巧妙地方式来解决，看下图
一个格子聚焦时，除了可以输入工时，旁边会浮现一个按钮，如果想输入内容，点击这个按钮，会有一个输入框弹出供输入。这样就可以输入文字描述了。
其实，项目和工作类别信息，已经是对工作的一个说明，工作日志最重要的是工时统计，详细内容不是必填的，不影响项目统计工作，因此一个使用频率较少的工作，多几步对效率影响不大。
讲到这里，还可以挑毛病，这样输入是快了，但我想看描述信息没地方看呀，还要一个个点到对话框才能看吗？
身为“别人家的日志系统”，当然不会留这个Bug，如果你想查看自己的日志，有专门的查看界面如下
在查看时，只显示你填写了工时的内容，过滤掉其它空白数据，同时类别，工时，描述信息三个属性一个不少，通过另一种矩阵方式呈现出来
在我研究使用了这个日志系统后，对比之前使用的系统，我折服于这个系统设计者的智慧，同时，也开始思考别人是怎么做到的。
两个日志系统，操作的数据内容是完全一样的，都是工作项目 工作类别，工时，描述信息四种属性。但是，后者对于输入方式做了特别的设计，使输入效率有了很大的差别。
我思考的结果就是前面提出的观点，通过数据的应用场景来设计界面。
数据的三态
数据，也可以理解为信息，在软件生命期，有三个阶段
不同的阶段，需要用完全不同的设计思路来思考。就像人在不同场合，适合的衣着也不一样，商务场合西装革履，高档宴会要晚礼服，沙滩穿岛服，泳池着泳装。你要是穿混了，就很别扭。
但是，在软件设计中，确实很容易混淆
对于第一种日志系统的输入界面，其设计思路就是把要数据的属性简单罗列出来，让用户一个个输，其本质是用数据存储阶段的思维在设计输入阶段的界面（程序员经常这么干，他们满脑子就是数据的格式:) ），而没有考虑效率要求
因此，本文所讲的界面设计的误区，就是，不要混淆数据的阶段和状态，到什么山唱什么歌，什么场合穿什么衣服
混淆的设计也不是不能用，但是体验不好。
我们再来看一个例子：
这是windows系统的图像文件属性信息框，标准的“属性名-属性值”方式呈现数据，这肯定是程序员设计的:)
我们来看看苹果，iPhoto App中的图片属性呈现方式
可以看到，其并不是“属性名-属性值”方式来显示内容，完全都没有“属性名”这说明这个值是什么意思，但通过界面排版布局，值的单位差异，结合一些图标，谁都看得懂这些信息。
Adobe的bridge软件，把这两种方式结合起来
对于不同的阶段，考虑的侧重点完全不同
- 输入阶段：要简洁，直观，高效，但有时简洁和高效是不能兼顾的，因此要考虑具体的用户场景
- 存取阶段：存取阶段其实包括“存”（一般是文件存储方式）和“取”（数据读取到内存中的数据结构形式），要考虑存储空间，读取效率，向上向下兼容性等等，这不是本文讨论的重点，略过
- 输出阶段：信息全面，清晰，美观，可读性好等
同一阶段的不同设计
即使在数据的同一阶段，根据不同的应用场景需求，数据的呈现方式也可以大不相同，而这，就是真正考验产品设计者智慧之处。
接下来，结合我之前做的一个项目管理软件 NPlan，谈谈针对同一数据类型，多种的呈现形式。
Nplan项目管理软件，可以访问网站 nplan.nuiengine.com 网站下载
项目管理的数据，同工作日志的内容一样，数据维度并不多。
- 项目由若干任务构成
- 任务由子任务构成，子任务是划分到每个人的任务
- 子任务主要也就由负责人，周期（开始时间-结束时间），完成程度，完成质量这几个指标构成
就这几个简单的属性，但不同的场景，呈现的形式千差万别
这是通过思维导图形式呈现的项目关系，重点是关注项目的任务分解和任务分配
这是通过甘特图形式呈现的项目关系，重点是关注项目的计划，周期
这是通过任务版形式呈现的项目关系，重点是关注项目任务完成程度
这也是通过任务版形式呈现的项目关系，但是用成员来分组，前面是用任务来分组。这个界面重点可以关注成员的任务分配和完成情况
这是通过日历形式呈现的项目数据，可以看到每天项目各任务的状态，项目组开周会用会很方便
看起来各个界面千差万别，但其核心数据就是我们刚才列出的:
项目-任务-子任务-责任人/任务周期/任务完成程度。
仅根据这些数据，就可以用这么多方式呈现，而且不同的呈现方式都有其应用场景。
写在最后
希望通过本文，大家在软件设计时，都能多思考，我设计的使用场景是什么，设计目标是什么，要给数据穿什么衣服，怎样设计可以最优的达到目标。 很重要的一点，设计某个阶段时，要忘记另外两个阶段，别惦记你的数据其它阶段穿啥衣服，别的阶段穿啥同你现在的阶段是没有关系的，否则会限制你的思维。