user-interface - 如何增强丑陋的窗口窗体的美感，其中包含太多(必要的)功能？

Question

我正在开发的软件的一个窗口对话框看起来有点像这样:(原始屏幕截图复制自 this coding horror post ，其他示例可在 this SO question 上找到)

问题是，所有选项都不能删除(那些可以删除的选项已经删​​除)，并且它们必须一目了然(即不允许使用选项卡)编辑:我'添加了一条评论，解释了为什么选项卡在我的特定项目中不是一个选项。

我尝试过使用颜色来添加图标，但这只是增加了整体感觉，就像有人在暑期实习期间使用 Visual Studio 表单设计器随机删除了控件。

如何在不删除功能的情况下使此对话框 更加用户友好 不那么可怕？

<小时/>

编辑:我采用的 GUI 示例有很多明显的设计缺陷(请参阅这些答案 1 2 )，但即使在修复这些缺陷之后(我已经在我正在开发的软件上完成了这些缺陷)，对话框仍然看起来很漂亮丑陋。

下面是另一个示例 ( credit )。控件(几乎)正确排列，使用了适当的控件等，但总体结果仍然看起来很糟糕:

_{(来源:judahhimango.com)}

Answer 1

考虑到这些限制，我认为您不会有太多选择。

一个好的起点是使对齐和控制距离相等，以增加整体对称性，最终目标是减少视觉困惑。

示例:

• 组框“特殊”和“运行选项”应具有相同的高度。
• “保存设置”和“退出”四个按钮之间的距离应相等。
• 所有按钮应具有相同的高度，如果可能的话避免自动换行。
• 对所有单行编辑框使用相同的高度。
• 配额标签及其文本字段应位于同一基线。
• 组框标题与其第一个控件之间的距离应相等(比较“运行选项”与“检索选项”)
• 总体上增加控件之间的距离，即使表单看起来不那么密集。

内容修复:

• 对相同的事物使用相同的标题/名称。例如，您使用“附加到logfile”，但使用“覆盖Logfile
”
• 使用相同的字符大小写，有时是“仅第一个”、“E非常单单个Word”，有时“它是 C 驼色外壳”。决定一种方案并相应地使用它(句子大小写和标题大小写是最常见的)
• 别装酷，“去2背景”看起来不太专业。
• 避免使用具有不可读快捷方式或根本没有内容的控件。如果用户必须在每个控件上停下来思考:“这个东西是做什么的？”，那是没有帮助的。

一些更激进/有争议的变化:

• 尝试使组框更加对称，可能会重新定位它们并使用相同的高度。如果需要，请使用两列复选框，这仍然比不均匀的组框看起来更好。
• 除非绝对必要，否则请从两个多行编辑框中删除水平滚动条
• 去掉“清除”按钮。对于左侧按钮的列表框，您必须提供一些其他方式来删除项目，也许也可以将其变成一个多文本框。
• 尝试用可勾选列表框或属性网格替换复选框集合。

经验法则:

想象每个控件的边界框的线一直延伸到到达表单边界。到达边界的不同线越少越好。 (因为正确对齐的控件会产生更多的事件线(-> 更少的独特可见线)

关于颜色和图标的使用:

仅仅添加图标和颜色并不能解决此类表单所存在的根本问题。它们都受到控件重载的困扰，添加更多控件只会使问题变得更糟，因为它们只会添加更多视觉噪音，但不会提供任何更多视觉提示。