我有许多图表要显示，每个图表都有相应的文本。
左侧区域的大小是您唯一的限制条件，如果您有关于如何使界面直观和刺激的建议（如果有任何矛盾？），我将不胜感激。
在这个模型中，基本上有两种模式：
1) 显示图形树形菜单（图 1）。用户点击一个标题，就会加载带有相应文本的图表。
2) 选择了一个特定的图表（图 2）。用户可以导航到相关图表或返回图表菜单。
一个问题是绕过模式 1 进入特定图形的用户：
应该如何设计界面以方便这些用户找到树形菜单？
...应该有一个树形菜单和两个分开的“面板”吗？
请建议可以在这种情况下工作的其他 UI 组件/布局。
【问题讨论】：
标签： jquery web-applications user-interface navigation
我认为您不应该将相同的页面区域用于导航和上下文信息。
恕我直言，您有多种选择：
1) 将图形选择控件放在可隐藏的层中（模式弹出窗口，或者 - 更好的是 - 标题下可访问的垂直滑动层：查看此处的“控制面板”http://www.tomstardust.com/），将图形信息留在它们所在的位置图2。
2) 将图表信息层放在图表下方，扩大可视区域。
在任何情况下，我的建议是始终可以访问主导航树。
【讨论】：
我将首先解决您的第二个问题。如果每个菜单项选择都用主题文本替换菜单，我看不出图形面板旁边的菜单面板有什么好处。用户必须单击一个链接才能返回菜单，一旦出现，我看不出他们需要继续查看图表的充分理由——他们点击了图表菜单，因为他们已经完成了图表。该应用程序将至少与仅作为菜单的主页一样有效（就更改图表的点击次数而言）。这将为菜单提供更多空间，以帮助用户选择图表（例如，显示完全展开的层次结构，以便一键选择任何图表，或为每个图表提供缩略图或摘要文本）。
单独的菜单面板可能在用户选择图表后保留会更好。这允许用户查看当前图表与其他一些图表的关系（例如，它们都是经济图表）并一键选择相关图表，这比必须先导航回图表菜单更有效。但是，全时菜单意味着其他面板的空间更少。为了在一个窗口中容纳菜单、图表和主题文本（后者在它自己的第三个面板中），您可能必须使图表更小，这意味着用户可能会丢失他们可能感兴趣的细节。或者，您可能会通过链接使文本可访问，用文本替换图形，但这会使获取文本变得更加困难，并破坏指向图形中特定特征的任何文本的有效性（例如，“注意 1929 年的... ”）。
所以你必须判断，菜单是否物有所值？如果您希望您的用户进行相对大量的导航，简要查看每个图表，通常不会阅读太多文本，然后转到下一个图表，那么全时菜单会更好。如果您希望您的用户进行相对大量的图表研究、检查细节、阅读文本并可能在几分钟或更长时间内操作图表，那么菜单的主页会更好。除了赌博之外，您对用户行为的期望应该基于用户研究：您的用户是谁，他们想要完成什么，以及他们在什么条件下工作。
您可以通过三个面板来提供以两种方式使用应用程序的能力，其中每个面板都是可调整大小和可关闭的窗格（对于图表，也是可缩放的），允许用户配置窗口以获得所需的平衡学习与导航。但是，您仍然需要默认配置，因此您仍然需要进行研究以确定您的大多数用户将如何使用该应用程序。
如果您有一个全时菜单面板，如果您希望用户通常在同一类别的图表之间导航，那么树形控件是很好的选择。树形控件只需单击一下即可放置相关图表，但可以将不相关的图表推到折叠下方，迫使用户在选择它们之前滚动（如果您可以显示所有图表而无需诉诸滚动，则永久扩展您的层次结构并显示所有图表 -如果不需要，不要让用户打开和关闭树枝）。如果 See Also 几乎总是该类别中的其他图表，则全时树控件可以消除对 See Also 链接的需要。
如果您希望用户跳转到任意图表，那么您可能希望将菜单层次结构实现为一组侧边栏或下拉菜单，以便最大限度地减少总导航工作量。如果用户知道他们想要的确切图表，那么有一个按名称排序的可滚动图表列表，最好支持预先输入。如果用户有时按名称选择图表，有时按类别选择图表，请在可按名称或类别排序的可滚动表格中列出图表。
为了解决您的第一个问题，如果您有一个全时菜单面板，那么您不必担心用户知道如何导航回它。如果您选择在主页上设置菜单，那么将徽标作为主页链接是一种广为人知的惯例。但是，您可能希望使用显式链接对其进行备份。我会用内容（例如，“All Graphs”）而不是它的实现（例如，“Graph Menu”，它可以解释为用于操作当前图形的菜单）来标记它（“Back to Graph Menu”？如果他们绕过菜单，没有返回任何东西）。我会将 All Graphs 链接放在 See Also 链接附近，以便这些链接强化多个可用图的概念。要建立与 See Also 链接的关联，您应该为 All Graph 链接提供相同的总体外观（颜色、下划线），尽管它可以更大或更粗以引起注意。
【讨论】：