【问题标题】:Top tips for designing GUIs? [closed]设计 GUI 的重要提示? [关闭]
【发布时间】:2010-10-08 01:47:26
【问题描述】:

不久前,我读了一本名为 GUI Bloopers 的好书(在我失去它之前),其中充满了 bad GUI design 的示例,但也充满了有用的花絮,例如 不要称某事为 Dialog 一分钟后 Popup 下一分钟

对于设计/记录 GUI,您会给出哪些重要提示?了解您为将可读信息塞入尽可能小的屏幕空间而设计的小部件会特别有用。

我将用我自己的方法来解决这个问题:避免树木(例如 Swing 的 JTree),除非你真的无法避免,或者有无限的层次结构。我发现用户不觉得它们很直观,而且很难导航和过滤。

PS。我认为这个问题与this one 不同,因为我要求的是通才提示

【问题讨论】:

标签: java user-interface swing


【解决方案1】:

我个人遵循这些简单的规则:

  • 在整个应用程序中保持一致不要改变行为/布局
  • 信息流:从上到下从左到右(在西方国家)
  • 页面上没有太多信息(如 ppt 演示文稿)
  • 大写字母(老人也能看懂)
  • KISS(任何可以使用录像机的人都可以使用此页面/表格/等)
  • 使用蓝色、绿色等轻松的颜色(不是鲜红色或霓虹粉色)
  • 结构(当然可以改变,但作为初稿,大部分是这样):
    • 顶部 -> 导航/菜单
    • 左 -> 导航/信息
    • 中间 -> 内容
    • 底部 -> 状态
    • 右下角 -> 按钮

【讨论】:

  • 除非在您的目标平台上没有用于管理字体大小的系统工具,否则我不鼓励在没有充分理由的情况下使用“大字母”。
  • 好吧,我不同意“页面上没有太多信息(如 ppt 演示文稿)”:当您有大量数据要显示时(我正在考虑一个金融应用程序)什么是最好的:一个带有许多子面板和大量数据的大框架或一堆用户必须在其上导航的小面板???
  • 我认为这取决于用户的习惯。据我所知,“金融民俗”习惯于用大量的纸张和满是数字的巨大表格。所以最好在你的 GUI 中复制这些表。这也有好处,“老人们”更容易接受新的申请。如果您只有 5 (+/-2) 个类别,您可以在不同的面板中显示它们。正如我所说,这些事情取决于客户的意愿——如果他不确定:制作一个原型来向他展示应用程序的外观。
【解决方案2】:

我曾经从一位熟练的 GUI 技术主管那里得到一个相当具体的提示:

当您有一个带有按钮、文本字段、列表等的对话框/表单时,请尽量保持它们之间的空间一致和对称。例如,尝试在所有方向上使用相同的小部件之间的距离,如果通过增加组之间的空间将一组小部件与另一组分开,则尝试使该空间与组内控件之间的空间重复。例如,如果一个部分中的所有按钮在各个方向上相隔 16 像素,请尝试将更大的空间留给下一组 32、64、128 左右像素。

对于人眼来说,解释具有明显对称性的东西要舒服得多。

自从我尝试后,我一直使用这种方法,效果非常好。我什至返回并重新设计了旧的 GUI,并且惊讶地看到仅从这次调整中得到了如此大的改观。

编辑:

忘了提我从上述方法中学到的重要一课:

当您根据此系统安排所有小部件时(尤其是在重新处理旧的杂乱 GUI 时)您可能会用完空间,并且您的对话框需要膨胀。在某些时候,人们会觉得对话框变得太大(例如,阻止相关的背景 GUI 或相关的小部件最终彼此相距太远)。 这可能是一个很好的指标,您可能应该将对话框拆分为选项卡,将内容移动到菜单中,或者只是将其变成向导风格的概念等。

这与小部件间距无关,但涉及到“少即是多”的主题,供用户在任何给定时间进行交互。有趣的是,当你开始做正确的事情时,它会“激起涟漪”,有时会迫使你做更多的事情(有点像修复 const 正确性:p)。

【讨论】:

  • 当然。小部件对齐是另一个(相关的)领域,其中一点点工作会有很长的路要走。这两个细节可以使应用程序看起来更加专业,并且它们也有利于可用性。
  • 这是选择“正确”LayoutManager 的地方!当然,您不想使用硬编码的 XYWH!有些 LayoutManager 会自动对齐,有些则不会。
  • 还有一点是组件间的间距通常是平台相关的(在 XP 和 MacOS 上不同)。在 Java 6 中,支持该功能,而现代 PLAF 也支持该功能。再一次,您必须使用可以使用此信息的 LayoutManager。
【解决方案3】:

我的建议是 从 GUI 开发人员的角度来看

保持精简和简单

如果你的意思是从可用性的角度来看

尽快向实际用户展示并根据反馈进行改进

【讨论】:

    【解决方案4】:

    一旦你完成了设计:让几个人坐在你的软件前面,让他们尝试解决你的软件设计的任务(一个接一个,而不是一次完成......)。仅仅通过观看它们,您将学到的东西绝对是惊人的。

    如果可能,测试人员应与您的典型客户群的个人资料相匹配。为这种可用性测试找到的人越多越好,但在过去,即使每次产品迭代只观察少数人对我来说也非常有用。

    【讨论】:

      【解决方案5】:

      请记住,用户的目标不是使用您的程序。他们的目标是另一回事,而您的程序只是帮助他们实现该目标的工具。尽你最大的努力让他们成功和快乐。

      【讨论】:

      • +1。作为开发人员,很容易忘记这一点!
      【解决方案6】:

      不要更改默认颜色。这对色盲的人很重要。

      【讨论】:

        【解决方案7】:

        为了解决您对 JTree 的问题(我同意),如果您希望在您的应用中实现良好的 JList 和 JTable 交互,您应该考虑使用 glazed 列表:http://publicobject.com/glazedlists/

        通过对代码进行一些调整,您可以获得很多功能(例如可排序的表头)。

        除此之外,保持简单。

        【讨论】:

        • 现在 JDK(从 1.6 起)中似乎有很多由 glazed 列表提供的功能,带有 RowSorter 和 filter 类。
        【解决方案8】:

        我认为,在这个狭小的空间里,不可能给出设计好的 GUI 的提示(问题大到“我怎样才能写出好的程序?”)。但我可以指点一些有用的书:

        【讨论】:

        • 我不确定我是否同意你的看法。有很多提示可以提供帮助。 Dialog/Popup 建议让我看到了我没有想到的设计方面。提示越多越好
        【解决方案9】:

        使用尽可能少的 UI。

        我认为我们忘记了计算机是信息机器,即它们应该为我们工作

        在 iPhone 上看过 Shazam 吗?它几乎只有一个按钮。您按下它,将手机对准正在播放歌曲的扬声器,大约 10 秒后它会告诉您正在播放的歌曲。

        非常有用,几乎没有 UI。所有的艰苦工作都在下面进行。

        【讨论】:

          【解决方案10】:

          User Interface Design 来自 Joel Spolsky。 一个下午就能看完。

          【讨论】:

          • 一个下午?那时可能不值 80 英镑!
          猜你喜欢
          • 1970-01-01
          • 2018-02-28
          • 1970-01-01
          • 2010-09-12
          • 2010-09-06
          • 1970-01-01
          • 1970-01-01
          • 2010-09-28
          • 1970-01-01
          相关资源
          最近更新 更多