logo标签列表

GUI设计的最佳实践和原则

user-interfaceprinciples
63

你最好的实用用户友好界面设计或原则是什么？

请提交那些你觉得真正有用的实践 - 无论如何 - 如果它能为你的用户工作，请分享！

总结/整理

原则

  1. KISS（保持简单愚蠢）。
  2. 在选项内容中明确具体，例如使用能说明所选动作的动词（见：实施1）。
  3. 使用与用户需求/目的相符的默认操作。
  4. 将UI的外观和行为适应于环境/流程/受众：独立应用程序、网页、便携式设备、科学分析、闪游戏、专业人士/儿童等。
  5. 降低新用户的学习曲线。
  6. 考虑提供有帮助的提示信息，而非禁用或隐藏选项，使用户可以选择其他选项，但前提是存在这些替代方案。如果没有可用的替代方案，最好禁用该选项-这样就可以视觉上表明该选项不可用-不要隐藏不可用选项，而是在鼠标悬停弹出窗口中解释为什么该选项被禁用。
  7. 保持一致性，遵循在广泛使用的成功应用程序中实施的惯例和控件位置。
  8. 引导用户期望，让您的程序按照这些期望行事。
  9. 遵循用户的词汇和知识，不要使用程序员/实现术语。
  10. 遵循基本设计原则：对比（明显性）、重复（一致性）、对齐（外观）和接近（分组）。

实施

  1. （见paiNie的答案）“尝试在对话框中使用动词。”
  2. 允许/实施撤销和重做功能。

参考文献

  1. Windows Vista用户体验指南 [http://msdn.microsoft.com/en-us/library/aa511258.aspx]
  • 荷兰网站 - "Drempelvrij" 准则 [http://www.drempelvrij.nl/richtlijnen]
  • Web内容无障碍指南（WCAG 1.0）[http://www.w3.org/TR/WCAG10/]
  • 一致性[http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0385267746]
  • 不要让我思考[http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pdbbssr_1?ie=UTF8&s=books&qid=1221726383&sr=8-1]
  • 既强大又简单[http://msdn.microsoft.com/en-us/library/aa511332.aspx]
  • Gestalt设计法则[http://www.squidoo.com/gestaltlaws]
    • 相关问题：https://dev59.com/EnVD5IYBdhLWcg3wNY1Z - Marcio Aguiar
    这是一个相当全面的问题...请再聚焦一点...我先发布了MVP..以为您对UI设计方案感兴趣。 - Gishu
    我的目的最终是获取在这个领域真正使用的东西 - 不是教科书式的学术观点，而是实际使事情变得非常有用的实践。 - slashmais
    相关：*有哪些好的可用性指南是普通开发人员应该遵循的？* - Peter Mortensen
    19个回答
    58

    我用我的图形用户界面对我的奶奶进行测试。

    4
    这个回答让我今天过得非常愉快。 :) - mchlfchr
    53

    尝试在对话框中使用动词。

    这意味着使用

    alt text

    而不是

    alt text

    26
    没错，你关于忽略文本的观点是正确的！但是，用户不会阅读标题和正文，他们只会看按钮上的字眼！ - kzotin
    10
    第二个对话框上只有三个单词（“保存更改”），而第一个对话框上却有22个单词，没人会阅读这么多。不过第一个对话框的字幕要好得多！ - ya23
    1
    我也觉得是/否/取消比保存/取消/不保存更加合乎逻辑...即是/相反/取消而不是是/取消/相反。 - Rook
    8
    大多数人只会阅读按钮上的文字，比如是“是/否/取消”可能指的是任何事情，但“保存/不保存”就很清楚你正在做什么。如果按钮上方有额外的文本，那也是可以的，因为如果有人看到“保存/不保存”但他原来期望的是另一件事（比如关于打印的），那么他们会停下来阅读文本。但你不能指望用户在对话框中阅读所有的文本是正常使用情况。 - Tim
    @Idigas 在这种情况下，逻辑上的放置失败了。为什么是“是/取消/否定”更好呢？因为它可以弥补错误。如果用户意外地错过了肯定按钮并单击旁边的按钮，在 Y/C/O 排列中，他们刚刚取消了关闭操作；在 Y/O/C 排列中，他们确认了关闭操作但未保存，并且失去了所有更改。 - Travis
    显示剩余4条评论
    27

    遵循基本设计原则

    • 对比 - 使不同的元素显示出不同的外观。
    • 重复 - 在屏幕内及其他屏幕中重复相同的样式。
    • 排列 - 将屏幕元素对齐！这包括文本、图像、控件和标签。
    • 接近 - 将相关元素分组在一起。输入地址的一组输入字段应该被分组在一起，并与输入信用卡信息的输入字段组有所区别。这是基本的格式塔心理学设计法则。
    2
    罗宾·威廉姆斯的《非设计师的设计书：视觉新手的设计和印刷原理》以极佳的方式涵盖了这些原则！http://goo.gl/qoG0Q - Chris Hayes
    4
    像首字母缩写一样。完成后，你会不会说它看起来像“CRAP”（废物）呢？ :p - James P.
    1
    @Chris 现在有一本更新的（第四版，2014年）Williams书籍。 - bitFlipper
    25

    永远不要问“你确定吗？”只需提供无限可靠的撤销/重做功能。

    9
    你说得没错，但我认为这不太现实。实施回滚通常需要大量的努力。 - Dimitri C.
    @Dimitri C.：如果你从第一天开始就将其构建到设计中，那就不会有太多问题。例如，在文本编辑器中，您可以创建一个隐藏目录并使用Mercurial / Git /任何其他版本控制工具来跟踪可能具有破坏性的操作。命令软件设计模式也非常有帮助。Google Mail是一个很好的例子：您是否注意到如果删除一个主题，就没有对话框？相反，会出现一个小的通知栏，上面写着：“您刚刚将主题移动到了垃圾桶中。[更多信息] [撤消]”。 - Jörg W Mittag
    11

    尝试思考用户想要实现的目标，而不是仅仅关注系统的需求。

    用户进入系统使用它来实现目标。例如，当你打开计算器时，在大多数情况下你只是需要进行一个简单、快速的计算，所以默认情况下计算器会设置为简单模式。

    因此，不要仅仅关注应用程序必须做什么，而是关注将使用它的用户，他们可能感到无聊，并尝试根据他们的意图进行设计，让他们的生活更加轻松。

    8
    7

    网页应用程序中的面包屑导航：
    告诉用户她在系统中所处的位置。

    在具有多个路径到达相同数据的“动态”系统中，实现这一点可能很困难，但它通常有助于浏览系统。

    2
    Jared Spool 进行了一些用户测试，并发现只有计算机专业人士使用面包屑导航。普通访客不理解这个概念。 - Silviu Postavaru
    1
    可能是这样。但快速阅读Spool的文章 http://www.uie.com/brainsparks/2005/09/26/value-of-breadcrumbs/ 让我觉得他认为面包屑只是用户的导航工具。在我看来，它们也是一个很好的“页面标题”。此外，Spool的文章远非科学... - kosoant
    我认为这些在一些桌面应用程序中也会非常不错！ - paulm
    6
    6
    我建议通过阅读书籍《日常物品的设计》 The Design of Everyday Things 来获得关于 GUI 设计的扎实理解。虽然主要可打印内容是来自 Joel Spolsky 的评论：当应用程序的行为与用户预期不符时，你的图形用户界面就存在问题。
    最好的例子是，有些网站会交换 OK 和 Cancel 按钮。用户期望 OK 按钮在左边，而 Cancel 按钮在右边。因此，简而言之，当应用程序的行为与用户预期不符时，你就有了一个用户界面设计问题。
    尽管如此，无论遵循什么设计或设计模式，最好的建议是在整个应用程序中保持设计和惯例的一致性。
    3
    尽量避免要求用户做出选择（即不要通过配置对话框创建分支！）
    对于每个选项和每个消息框，请问自己：我是否可以想出一些合理的默认行为来
    • 有意义吗？
    • 不会妨碍用户吗？
    • 足够简单，使用者花费较少的时间学习吗？
    我可以以我的Palm手持设备为例：设置非常简约，我对此感到非常满意。基本应用程序设计得很好，我可以直接使用它们而不需要调整。好吧，有些事情我不能做，实际上我有点要适应这个工具（相反），但最终这确实使我的生活更加轻松。
    这个网站是另一个例子：您无法配置任何内容，但我发现它真的很容易使用。
    合理的默认值可能很难确定，简单的可用性测试可以提供许多线索来帮助你解决问题。
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接