it-swarm.cn

嵌套布局编辑器的UI范例

我有一个带有布局编辑器的应用程序,有点类似于Visual Studio中的WinForms编辑器-带有拖放小部件放置,属性面板等。

我添加了具有嵌套布局的选项,其中放置的“ NestedLayout”小部件(图像中的布局B)可以表示整个其他布局。

Sketch of nested layout editor

您将建议使用哪种界面来允许用户编辑这些嵌套布局?直接在现有框架中进行工作会很麻烦,因为许多顶级屏幕布局已经在使用许多屏幕资源。

可能的方法包括在顶部编辑器中加载最大化的嵌套布局(可能带有某种缩放过渡),在上方弹出一个新的编辑器,等等。

您是否看到过任何可以有效处理这种情况的编辑器应用程序示例?

6
kpozin

当出现上述屏幕时,我的第一个反应是双击嵌套布局进行编辑。我同意您的观点,让用户在现有框架中编辑嵌套布局不是正确的解决方案,这可能会使您的用户感到困惑。

我将以灰色或褪色状态呈现完全渲染的嵌套布局,并在鼠标悬停时显示一条消息,说明如何进行编辑(例如,“双击进行编辑”)。我也选择在第一个编辑器的顶部打开第二个编辑器,而不是使用缩放效果最大化嵌套的布局。我发现缩放效果虽然很聪明,但是却很容易使某些用户感到困惑-您必须非常小心地使用UI,以使他们不会怀疑发生了什么以及为什么所有小部件突然消失了。

3
Tania Gobeil

您是否看过所见即所得的网页设计工具如何处理iframe?通常,iframe(或其他嵌入式对象)被描述为非交互式对象,必须双击或激活该非交互式对象才能调出该特定对象的编辑器。对于iframe,我记得Dreamweaver之类的工具会弹出一个属性窗格,该窗格可让您从那里访问iframe的源页面。

它可能不是最佳的可用性,但是根据您的听众的不同,遵循所见即所得的约定可能是一个不错的选择。

您可能还会根据在父控件中呈现NestedLayout的方式来设置期望值。如果完全渲染,则用户可能希望能够与其进行交互。但是,如果只是带有图标的框架表示其状态为“小部件”或嵌入式对象,则可能会产生不同的效果。尝试在高保真交互式模型中进行测试,以查看人们的行为。这对于基于特定的测试场景(例如“与NestedLayout交互”)之类的远程可用性测试进行测试非常好!

2
Rahul

看一看 IntelliJ IDEA Java IDE。它有一个非常漂亮的GUI窗体嵌套布局编辑器,它支持相当有用的拖放编辑。

1
extropy

考虑表示可重复使用的* control * s。因此,您可以将第二个布局作为一个全新的布局进行编辑,但是可以在设计器的另一个标签/窗口中编辑,例如user control在Visual Studio上。如果用户不需要那么多空间,就不会在意较小的屏幕空间(也许它只包含两个按钮)。

0
Camilo Martin

首先,我要添加一个与上述类似的答案,例如,如果您双击一个复合对象,则将其显示为灰色,并锁定封闭的上下文。但是后来我意识到,根据您的应用程序的设计,您可能不想让编辑“布局B”变得太容易了。如果您在示例中显示的是通常在GUI编辑器中执行的操作,则表明我们在屏幕上看到的所有内容都在一个Object中。使嵌套布局易于编辑将促进向该对象添加越来越多的功能,从而导致布局A包含所有小部件。

长期而言,为嵌套布局的编辑设置一个温和的障碍将最终导致用户将实现分开,从而创建更好地封装的对象,从而更易于处理。

例如。 Qt Designer允许您在gui编辑器中编辑窗口的每个选项卡的内容,如果不注意,将获得一个实现窗口的所有选项卡的实现。这真的不是一件好事。

0
Harald Scheirich

Adobe Flash

您可以具有可以与之交互的构图(在Flash中称为“符号”)。在这些组合物中可以包含图层和其他组合。这种体验有些糟糕,因为Flash的使用速度太慢,并且UI过于复杂,按钮放置在错误的位置,并且缺少快捷键。但这是启发灵感的绝佳起点。

Interface Builder,World Craft和Adobe Flash之间的某种混合将用于编辑嵌套合成。

0
neoneye