过去我一直从事底层数据处理、整体系统架构设计、系统间接口等设计工作，极少涉及界面设计，几乎是没有经验。 最近，在设计一个小型监控系统时，如何展示历史性能数据，引发了一场同事间关于设计的讨论，下面将展示其设计的心路历程。 常见展示方式 历史性能数据的展示，最简单、最常见的方式如下图：
例程来自与开源项目 flot （ Attractive Javascript plotting for jQuery ）的 example 。 CA Wily Introscope 几年前我在 CA 学习时，记得其产品 Wily Introscope 在性能展示界面中有一个时间标尺，使用时间标尺拖动时，整个页面中的性能数据都随时间标尺左右移动，让使用者非常方便。当时就留下来极为深刻的印象。 左侧时间标尺的左右移动控制展示时间的结束时间点，右侧下拉列表控制显示的时间范围。 这是一个 Java Swing 编写的客户端程序。 Flot 中的时间标尺
在下面的缩略图中，框选范围的操作，在体验上不是很好。 Amcharts for flex
amCharts 可以在时间标尺上直接拖动，修改时间范围，此操作比 CA Wily Introscope 在感知上更前进了一步。 HumbleFinance Humble Finance 的时间标尺放在了下面，并且时间标尺的边界更清晰。这是一个 JavaScript 实现。
我觉得这是一个非常优秀的样例了，于是就拿给同事观看，是否可以作为我们的设计样本。我的同事 Superman 立刻就提出了意见：“取消时间标尺，取而代之的是在界面上直接用鼠标按下后拖动的动作，鼠标中间滚轮的上下操作就是时间标尺的放大、缩小功能”。 再次与同事共同讨论，都觉得此操作比时间标尺更好；但又建议保留时间标尺及其功能，因为可以让用户知道所选择的时间范围。让用户知道自己所处的位置，是用户行为感知设计上的一条重要标准。 这个设计的实现样例是： Google Finance
平板电脑上的畅想 如果此图形移植到 iPhone 、 iPad 这样的触摸屏终端上，其操作方式应该是： 单手指的单向滑动，代替时间标尺的左右移动操作；双手指的分离运动，代替时间标尺的范围扩大操作；双手指的合并运动，代替时间标尺的范围缩小操作。
总结 界面的设计不是一蹴而就的，是经过大量的交流，渐进式的成长，最终我们交付了一个完美的解决方案。 除非注明，景天博客 文章均为原创。
