Delphi：应用程序中用户界面的新设计答案

【问题标题】：Delphi: a new design of User Interface in appDelphi：应用程序中用户界面的新设计
【发布时间】：2011-08-21 04:30:12
【问题描述】：

我需要您对如何组织和制作漂亮的图形用户界面提出建议。

现在我有这样的事情：

有一个树形视图（它需要很大的空间......）作为一个菜单，每个项目都有分配的框架。所有框架都有控制按钮（一个工具栏）和这个列表中的一些东西：列表视图、字符串网格、进度条、备忘录、丰富的编辑、网络浏览器、颜色选择器、列表框、标签、编辑等。

我没有足够的经验来创建一个好的、简单的图形用户界面，而且我不知道要做什么。

对我来说最困难的是我需要创建一个漂亮的 SDI，但现在的 UI 类似于 MDI（带有很多控件的框架而不是窗口）。

所以我正在尝试从其他软件复制 UI：http://www.addictivetips.com/windows-tips/150-best-windows-applications-of-year-2010-editors-pick/ + SCREEN SHOTS。但我找不到适合我的东西:(

补充：

我有一个使用玻璃效果的想法（“菜单”而不是左侧的树视图），但它看起来很复杂：玻璃上的按钮和下方的按钮（工具栏）。

另一个版本：

请告诉我该怎么做或给我一个方向。谢谢！

【问题讨论】：

您当前的 UI 看起来不错。 Glass 不会使任何 UI 更易于使用，它只是为了反击媒体中的 Mac bling 爱好者而发明的。
谢谢！我想要一些看起来不错的东西:)
我觉得不错。我建议您更喜欢文本而不是图标。除了少数众所周知的标准图标之外，图标很难解释。文字是传达意图的最有效方式。一本关于用户交互的优秀书籍是 Alan Cooper 的 About Face。
对于 UI 和 UX（用户体验）建议，您也可以访问 ux.stackexchange.com，那里有很多 ui/ux 专家。

标签： delphi graphics user-interface

【解决方案1】：

考虑到大多数显示器现在是 16/10 或 16/9，即不再采用 4/3 纵横比。

因此，将一棵树放在左侧，甚至将命令工具栏放在左侧而不是窗口顶部，并不会浪费空间。在这方面，您的第一个屏幕截图并没有更糟。我只写a log viewer with this design：日志事件有完整的应用程序高度。

Office 2007/2010 ribbon 例如看起来不错，但在日常使用中占用了太多垂直空间恕我直言。一些用户（包括我在内）对这个功能区感到沮丧。例如，我发现它在笔记本中不是很有用。最好的用户界面为内容提供了充分的空间，而不是命令。 Chrome 就是一个很好的例子。移动应用程序倾向于最大限度地利用可用空间。

只要我的 2 美分。

【讨论】：

他们引入丝带是为了回收一些垂直空间。遥测显示，大多数 Word 窗口都被额外的工具栏接管，例如杂技演员。可以通过双击选项卡来关闭功能区。解决这一切的简单方法是打开显示器！
@David 你是对的，这就是理论。但老实说，有多少 Office 用户知道这种双击选项卡的技巧，又有多少人使用它呢？ - 例如，我知道它，但从未使用过它......你听过多少次，像我一样，“我在新功能区中找不到这个 f...g 命令，而它在我的 Word 2003 子菜单...."。一个停靠解决方案，就像在旧的工具栏时代一样，并没有那么糟糕：根据您的屏幕停靠在左侧或顶部（或在右侧或底部，视口味而定）。
我不认为像您这样的高级用户是功能区的主要用例！我个人是功能区的粉丝，但主要是因为我根本没有使用过 Office。从来没有学过任何做事的方法，我发现丝带比搜索子菜单更容易。如果您知道旧方法，那么我敢肯定丝带将是一把扳手。我知道的一件事是我不想在 OrcaFlex 中添加功能区。现有客户会讨厌它。
有时我会错过功能区中的“搜索”功能......就像 Delphi 工具面板中的那个。
这就是为什么我总是购买 16:10 显示器而不是 16:9

【解决方案2】：

就个人而言，关于您的第一个屏幕截图，工具栏按钮太大了。即使乍一看，它们的存在也太强大了。

我会减小它们的大小。或者，当此程序针对儿童或触摸设备时，其他控件和字体大小应放大。

【讨论】：

谢谢！一个宝贵的建议。我会允许的！

【解决方案3】：

您正在尝试创建一个选项卡式应用程序，所以我建议使用某种选项卡控件。
甚至 Delphi 默认的也允许您将图片添加到选项卡中。

类似这样的：

一些注意事项：

应用的使用频率如何？

如果您的用户每天都在使用该应用，请尝试最大化可用空间，即将控件尽可能地缩小。
如果您的用户很少使用该应用程序，则将控件设置为大而明亮，标记每个按钮以使事情清晰，并花时间找出最小化的地方，这也意味着使用熟悉的用户界面元素。

您的目标是大象还是老鼠？
如果您的听众精通计算机（老鼠），您可以进行更多的实验和炫耀；如果您正在与永久初学者打交道，您将需要坚持基本的东西。

请记住，用户界面是一种合同
确保控件的行为与宣传的一样。如果某些东西看起来像一个按钮，让它表现得像一个按钮。不要将菜单伪装成列表框/树形视图。
菜单执行一项操作（它是一个隐藏按钮），一个列表框选择一个可以操作的项目。

我的看法
我不喜欢您的初始屏幕截图，因为它试图将选项卡/页面控件强制转换为树视图的格式，同时命名项目菜单。这导致界面笨拙。
我从未见过用于在视图之间切换的菜单，而树视图可以隐藏一个强大的小目标。最重要的是，它允许多重嵌套。
树是每个程序员都理解的概念，但在这个群体之外，很少有人会理解，恕我直言，不要在您的应用程序中使用树！并避免使用树视图。
这是一个糟糕的控制，因为：

它允许嵌套 > 2 我的书中的一个 NONO;
鼠标太小了，触摸板更糟；
前面的 [>] 符号是怎么回事，为什么我要折叠只有 1 层嵌套的树，而当我这样做时，[+] 在地球上的“主菜单”前面可见我的子菜单项不见了？

我喜欢你的最后一个版本，但是

每个按钮都需要文本标签；
使垂直页面控件看起来像某种标签页，这将使您的意图立即清晰；
我希望看到状态栏；
Glass 可能看起来很酷，但是让来自下方屏幕的垃圾在您的应用程序中闪耀肯定会让一切看起来很忙，如果您试图专注于这个特定的应用程序，这不是一件好事；
确保在所有面板之间放置分隔线，并确保通过设置beveled:= true 和width/height:= 5 以视觉方式突出显示分隔线这样您就可以真正点击该分隔线
info 面板有自己的标题，非常浪费空间。每个窗口都有一个几乎什么都不做的标题栏已经够糟糕了，不要增加非交互空间。

终于
照大卫所说的去做，买一本about face，这是迄今为止我见过的关于UI设计的最好的书。 http://www.cooper.com/#about:books

【讨论】：

非常感谢！一个非常非常有价值和完整的答案！如我所见，您在顶部有一个工具栏+一个页面控件。您是否使用工具栏作为主菜单和工作表而不是我的树视图？如果我在每个框架（或您的工作表）上已经有一个工具栏，并且在顶部有一个工具栏作为主菜单，它看起来会很好吗？
您如何看待“控制面板\系统和安全\管理工具”(Windows 7) 中的应用程序？几乎所有它们都有一个树视图，就像我的第一张图片一样。
关于缺少树视图 -> 我可以隐藏按钮、线条、增加项目高度（它允许使用大图像）。最后，这是一个华丽的菜单 :)
@maxfax，IMO 这是一个非常糟糕的 UI 设计示例。控制面板-> 系统页面看起来像一个网页，但左侧的链接打开了一个 windows '95 样式的选项卡式对话框，其中选项卡复制了初始页面上的超链接。真是一团糟！
@maxfax，我对树视图的不满主要在于它实际显示树的模式。在所有其他模式下，它实际上是一个非常酷的控件。

【解决方案4】：

第一张图片是带鼠标的标准桌面的最佳版本。

第三张图片非常适合带有触摸屏的平板电脑。但它需要一些改进。目前我看不到我现在在哪个页面上，甚至更多：没有迹象表明这些按钮实际上会切换页面。我想，你需要某种 tabcontrol。

【讨论】：