什么使得有效的UI用于显示结构化分层数据的版本

Question

传统版本控制系统通过将Projects-＆gt; Folders-＆gt;左侧带树视图的文件和右侧的详细信息视图分组来显示版本控制信息，然后您将单击每个项目以查看该配置的修订历史记录历史。

假设我从面向对象的模型角度获得项目的所有历史版本信息（例如类 - ＆gt;方法 - ＆gt;参数等），您认为哪种方式最有效UI中的信息，以便您可以轻松导航和访问项目的快照视图以及历史版本控制信息？让自己处于这样一种状态，即您每天都在使用像您这样的工具，就像您目前正在使用SVN，SS，Perforce或任何VCS系统一样，这将有助于该工具的可用性，生产力和有效性。

我个人发现显示文件夹和上述文件的经典方式非常严格，而且对于显示深层嵌套逻辑模型效率较低。假设这是一个绿地项目而不受特定技术的限制，您认为我应该如何做到这一点？

我正在寻找想法和输入，以便为我的研究项目增加价值。随意提出您认为有价值的任何建议。再次感谢任何分享他们想法的人。

已编辑：为了提供更多信息，一个平均配置项，一个方法将嵌套在大约6个级别（project-＆gt; assembly-＆gt; module-＆gt; namespace-＆gt; type - ＆gt;方法，以及导航到其中的子项的更多级别），这一直是这种情况，不像在文件夹文件结构中，您偶尔在某些项目中具有深层嵌套结构。当您拥有多个级别时，树窗格将无法导航。恕我直言，树窗格在这种情况下也不太有效地呈现系统的整体结构。

Answer 1

茎叶图的变化怎么样？

http://en.wikipedia.org/wiki/Stemplot

这是统计学中的一个概念，但您可以扩充传统的树结构，在树中的每个文件的右侧添加一个版本列表。通过适当的对齐，我认为这可能是一个具有视觉表现力和可用性的解决方案。像这样：

* Root Directory
    * Sub Directory A
        * File A.A     | 1 2 3
        * File A.B     | 1 2
    * File A           | 1 2 3 4 5 6 7 8 9
    * File B           | 1 2 3 4 5

茎和叶图可以直观地显示文件被修改的次数以及快速查看（编辑等）和版本。

这可能只是数据的一个视图。您仍然会受到嵌套结构的阻碍，但如果您不得不忍受这种情况，也许这会有所帮助。

Answer 2

为什么不让用户选择他/她想要或需要的正确级别的详细信息，而不是试图选择一个表示方案来拟合GUI中的n级信息？

透视

Eclipse是允许用户define perspectives的一个示例（不是唯一的示例）。

  

在工作台中，Perspective功能用于控制模型和用户界面中项目的可见性   它控制您在模型中看到的内容（哪个项目，文件夹或文件）以及您在用户界面中看到的内容（哪些操作或视图）。
  通过这些控件，可以以适合用户任务的方式导航和修改工作区。

Perspectives可以轻松适应任何类型的分层信息显示。

每个任务的信息过滤

显示复杂信息的另一种有效方法是根据当前任务提出有效的过滤机制 每次用户切换到新任务时，各种信息树只显示相关信息。

例如，请参阅Mylyn：

  

Mylyn使任务成为IDE的第一部分，集成了ALM工具的丰富和离线编辑，并监控您的编程活动，以创建一个“任务上下文”，专注于您的工作区并自动将所有相关工件链接到任务处 - 手。
  通过减少信息过载，促进多任务处理和简化专业知识共享，您可以轻松获取所需信息并提高工作效率。

同样，这可以应用于任何类型的信息。

Answer 3

如果您正在嵌套6个级别，那么您可能会人为地混合多个问题。请参阅下面的5D型号。看起来你应该使用namespace-class-method作为 基本导航模型。您至少将代码结构与其在磁盘上的组织（文件和文件夹）以及映射到变体进行混合。像Pharo这样的Smalltalk IDE提供了一组代码浏览器，可以在几个维度上轻松导航，并提供一个浏览器构建工具包Glamour，使其可以用于其他导航维度。

你想看看Richard Wettel所做的工作。 与Codecity类似的东西。使用OpenGL创建项目开发历史的3和4D（时间）显示。它是软件再造的研究的一部分MOOSE。

对于您的研究，您可能希望使用5维模型：

• 版本（想要改变）
• 状态（生命周期：创建，测试，部署，退休）
• 查看（要求，代码，测试，文档）
• 层次结构（模块，类，方法）
• 变体（大致相似，描述差异，产品系列）

大多数系统只处理其中一些维度。要处理所有这五个，您必须描述（修复）您的开发过程。如果这样做，您可以在UI中描述要支持的用例。如果没有，您需要一个5维柔性显示引擎。这不会那么容易使用。

参考：

管理设计数据：CAD框架，配置管理和产品数据管理的五个维度。
van den Hamer，P。Lepoeter，K。
飞利浦Res。，埃因霍温;

本文出现在： IEEE会议录 出版日期：1996年1月
卷：84，问题：1 在页面上：42-56
ISSN：0018-9219
引用次数：26
CODEN：IEEPAD
INSPEC保藏号：5175049
数字对象标识符：10.1109 / 5.476025
当前版本发布：2002-08-06

Answer 4

嗯，我会从每个分支的筒仓，垂直圆筒开始：dev，release，这里有一个或多个。您应该在视觉上放置历史上承诺该版本的版本。在这些版本之间，您可以进行任何最终循环的其他更改。

沿着每个循环，在筒仓外部有提交点，有x个更改。可视化它们在逻辑上被压扁，因为水果垂下来，从高层来看会有点乱，但水果的质地，颜色，图案，大小会让你感觉到发生了什么。同时将鼠标悬停在水果上将提供对提交的任何评论。

然后单击水果的茎，在此处将视图翻转为多个样式，但不是将层次结构导航到更改，而是使用更改来导航层次结构。左边有很大的空间，右边有很少的层次空间。将鼠标悬停在更改上将压缩层次结构。单击更改并冻结层次结构，然后您可以单击层次结构，然后再次转到筒仓视图，但这次使用文件/函数/显示的唯一内容。

--- --- EDIT 这是我正在思考的一种草图。我的想法是基于使用Mercurial作为源控制存储库。至少对我来说，了解每个版本中所做的各种变化会更有趣，这个想法可能与你拍摄的内容不相符。通过查看存储库应该能够表征和量化更改的各种更改，我认为比更改文件更重要。小点只是在方法本身内改变代码，或者可能在类中添加私有方法。当您放大水果时，它将填满空间，树干将消失或淡化为暗淡的水印或其他类似物。

希望这个粗略的草图能更好地传达我的想法。 alt text http://img704.imageshack.us/img704/9034/img0507h.jpg

Answer 5

如果您希望能够快速找到修改代码的位置，您可以使用图形表示，只有在选择一个足够的元素时才会转到树状表示（例如mcliedtk提供的表示）低级（命名空间或类型）。

对于每个元素，从较低级别到较高级别，计算修改百分比：

• 表示方法或属性：如果创建/修改/删除则为100％，否则为0％
• 表示类：所有包含元素（方法或属性）的平均值，如果创建/删除则为100％
• 更高元素的相同内容（如果创建/删除则为100％，否则为组件的平均值）。

现在你必须得到一个显示层次结构的表示 你可以（例如）使用径向的： 项目位于中心（即一个圆圈）。装配呈现为环形，每个装置占据相同的空间。第三级环表示模块，每个模块为其组装占用相同的空间（即，如果是4个组件，每个组件获得90°，如果组件具有3个模块，则每个模块获得90°的1/3） ， 等等。每个元素从其修改％获得一个颜色映射（0％=绿色=无修改，> 85％=红色=重复修改）

例如http://www.neoformix.com/2006/BB_TopicRadialTreemapImages.png或http://www.datavisualization.ch/wp-content/uploads/2009/04/stacked_wedge_01.png

在赞成方面，你可以快速地看到发生了哪些修改，以及在哪个级别 在负面，这提供了自参考日期以来的修改，并且修改一次或两次的文件与修改10次的文件相同。您可能还需要添加工具提示以方便导航，因为6级可能很快变得不可读（但之后您只能显示5个更高级别中的4个......）

问候
纪尧姆