如何绘制层次结构按钮集并且看起来不那么令人反感?

平面设计 图标 界面设计 批判
2022-01-18 15:46:19

我正在尝试创建一个可用于在分层数据中移动的按钮集,它看起来像一个万字符。我不知道如何纠正它。

在此处输入图像描述

在上图中,如果选择了“面板”并按下顶部按钮,它将选择“动画面板”。如果您单击左侧按钮,它将选择“脚本”。如果您单击右侧按钮,则不会发生任何变化,因为面板是列表中的最后一项。如果您选择底部按钮,则会选择“EventHandler”。

按钮集将位于标签的左侧。选择项目时将显示标签和按钮。例如,在网页中可能存在垂直或水平菜单项的列表。按钮集和标签将位于所选菜单上方。然后按“in”将选择第一个菜单项。选择“左”或“右”将在菜单项中移动。我希望这是有道理的。

有什么建议可以减少这种情况吗?

@PremierBromanov 的更多详细信息:
按照我现在的方式,我有 3 个标签连续排列,例如“Up”“L”“R”“Panel”。

在此处输入图像描述

我使用术语“上”、“左”和“右”,但“上”实际上是“移出当前行并返回上一行”。这些术语松散地基于它在水平布局中的显示方式(尽管在垂直布局中不再有意义)。

在 XML 中,它们使用分支节点和叶节点等术语。分支具有或可以具有叶节点。分层数据也使用术语父节点和子节点。在这种情况下,你有祖先和后代。你也有兄弟姐妹。它们是共享同一个父节点的子节点。

因此,在最后一种情况下,您可以拥有当前子节点的父节点、上一个兄弟节点、下一个兄弟节点和后代。你也可以有父分支,前左,下叶。在这种情况下,如果一片叶子有叶子,它将是一个分支。所以父分支,前一个叶子或分支,下一个叶子或分支,以及当前分支的叶子。

2个回答

你的箭头概念和你打算用它做什么似乎是合适的。从我所见,我猜你无论如何都没有太多的图标空间。

也许可以帮助您的只是使用更粗和弯曲的箭头来隐藏您不喜欢的效果。

下面是一个简单的例子:

小尺寸时,您可能需要根据自己的喜好和清晰度调整箭头。它与您的概念相同,但箭头不同。

示例箭头灰度

例子灰度大

箭头也可以是不同的颜色:

示例蓝色箭头

示例蓝色箭头大

您可能会考虑一种更简单的“扁平化”方法,使用纯粹上下遍历列表的按钮,而不管层次结构有多深,并为用户提供一种调整遍历速度的方法,例如四个按钮:

  • [上升更快]
  • [向上]
  • [下]
  • [下降更快]

“向上”和“向下”将逐项遍历,“更快”按钮将遍历文件夹到文件夹。