GUI 设计的最佳实践和原则 [关闭]答案

【问题标题】：Best Practices & Principles for GUI design [closed]GUI 设计的最佳实践和原则 [关闭]
【发布时间】：2020-05-17 19:31:03
【问题描述】：

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

请提交您认为实际上使事情真正有用的实践——无论如何——如果它对您的用户有用，请分享！

总结/整理

原则

亲吻。
明确并具体说明选项将实现的目标：例如，使用动词来指示选择之后的动作（请参阅：Impl. 1）。
使用适合用户需要/想要实现的明显默认操作。
使 UI 的外观和行为适合环境/流程/受众：独立应用程序、网页、便携式、科学分析、Flash 游戏、专业人士/儿童……
减少新用户的学习曲线。
与其禁用或隐藏选项，不如考虑在用户可以有替代方案的地方提供有用的消息，但仅限于存在这些替代方案的地方。如果没有可用的替代方案，最好禁用该选项 - 这会在视觉上表明该选项不可用 - 不要隐藏不可用的选项，而是在鼠标悬停的弹出窗口中解释它被禁用的原因。
如在广泛使用的成功应用程序中实施的那样，保持一致并符合实践和控制的放置。
引导用户的期望，让您的程序按照这些期望运行。
坚持使用用户的词汇和知识，不要使用程序员/实现术语。
遵循基本设计原则：对比（明显）、重复（一致性）、对齐（外观）和接近（分组）。

实施

（参见 paiNie 的回答）“尝试在对话框中使用动词。”
允许/实施撤消和重做。

参考文献

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]
格式塔设计法则 [http://www.squidoo.com/gestaltlaws]

【问题讨论】：

相关问题：stackoverflow.com/questions/51050/…
这是一个包罗万象的问题......再谈一点......我首先发布了 MVP.. 认为你对 UI 设计替代方案感兴趣。
我的最终目标是收集该领域使用的内容 - 不是教科书的学术观点，而是真正使事情真正有用的实践。
相关：What are some good usability guidelines an average developer should follow?

标签： user-interface principles

【解决方案1】：

我用我的奶奶测试我的 GUI。

【讨论】：

这个答案让我很开心。 :)

【解决方案2】：

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

表示使用

而不是

【讨论】：

我也喜欢这个，但我注意到你会得到老开发者的大量讨论。
是的，你是对的关于输入文本！但是 - 用户不阅读标题和文本，他们阅读按钮标题！
第二个对话框（“保存更改到”）不是 3 个单词，而是第一个对话框中的 22 个 - 没有人会读到这个。但是，第一个字幕要好得多！
我还发现 yes/no/cancel 比 save/cancel/no save 更合乎逻辑...即 yes/opposite/cancel 而不是 yes/cancel/yes 的对面 ...
大多数人只是阅读按钮文本 - 像 Yes/No/cancel 这样的内容可能指代任何内容，但 Save/Don't Save 非常清楚您在做什么。可以在按钮上方添加额外的文本，因为如果有人看到保存/不保存并期待其他内容（比如打印），那么他们会停下来阅读文本。你不能指望正常的用例是用户阅读对话框中的所有文本。

【解决方案3】：

遵循基本设计原则

C对比 - 让不同的事物看起来不同
R重复 - 在一个屏幕和其他屏幕上重复相同的样式
Alignment - 向上排列屏幕元素！是的，包括文本、图像、控件和标签。
Proximity - 将相关元素组合在一起。一组用于输入地址的输入字段应组合在一起，并与用于输入信用卡信息的一组输入字段不同。这是基本的Gestalt Design Laws。

【讨论】：

Robin Williams “非设计师的设计书籍：视觉新手的设计和排版原则”很好地涵盖了这些原则！ goo.gl/qoG0Q
喜欢这个首字母缩略词。当你完成后，你会说它看起来像 CRAP :p 吗？
@Chris 现在有一个更新的版本（2014 年第 4 版）Williams book。

【解决方案4】：

永远不要问“你确定吗？”。只允许无限制、可靠的撤消/重做。

【讨论】：

你是对的，但我不认为这是现实的。实施回滚通常需要付出很多努力。
@Dimitri C.：如果您从 -1 天开始将其构建到设计中，则几乎没有那么多。例如，在文本编辑器中，您可以只创建一个隐藏目录并使用 Mercurial/Git/whatever 来跟踪潜在的破坏性操作。命令软件设计模式也很有帮助。 Google Mail 就是一个很好的例子：有没有注意到如果你删除一个线程就没有对话框？取而代之的是一个小的通知栏，上面写着：“您刚刚将一个线程移至垃圾箱。[更多信息] [撤消]”

【解决方案5】：

试着想想你的用户想要实现什么，而不是需求是什么。

用户将进入您的系统并使用它来实现目标。当您打开 calc 时，您需要在 90% 的时间内进行简单的快速计算，这就是为什么默认设置为简单模式的原因。

所以不要考虑应用程序必须做什么，而要考虑用户会做这件事，可能很无聊，并尝试根据他的意图进行设计，尝试让他的生活更轻松。

【讨论】：

【解决方案6】：

如果您正在为网络或任何面向前端的软件应用程序做任何事情，那么您真的应该为自己阅读...

Don't make me think - Steve Krug

【讨论】：

【解决方案7】：

Web 应用程序中的面包屑：
告诉 -> 该 -> 用户 -> 在哪里 -> 她 -> 在系统中

这在具有多个指向同一数据的路径的“动态”系统中很难做到，但它通常有助于导航系统。

【讨论】：

Jared Spool 对此进行了一些用户测试，并了解到只有精通计算机的人才使用面包屑。普通访客不会明白这个概念。
可能是这样。但是快速阅读 Spool 的文章uie.com/brainsparks/2005/09/26/value-of-breadcrumbs 给我的印象是他认为面包屑只是用户的导航工具。在我看来，它们也是一个很好的“页面标题”。另外，Spool 的文章远非科学……
我认为这些在某些桌面应用程序中实际上也很不错！

【解决方案8】：

我努力适应环境。

在开发 Windows 应用程序时，我使用 Windows Vista User Experience Guidelines，但在开发 Web 应用程序时，我使用适当的指南，因为我开发荷兰网站，我使用基于 Web Content Accessibility Guidelines (WCAG 1.0) 的 "Drempelvrij" guidelines由万维网联盟 (W3C) 提供。

我这样做的原因是为了减少新用户的学习曲线。

【讨论】：

【解决方案9】：

我建议通过阅读本书The Design of Everyday Things，对 GUI 设计有一个很好的了解。虽然主要的可打印文件是来自 Joel Spolsky 的评论：当应用程序的行为与用户期望的不同时，您的图形用户界面就有问题。

最好的例子是，当有人在某些网站上交换 OK 和 Cancel 按钮时。用户希望 OK 按钮位于左侧，而 Cancel 按钮位于右侧。所以简而言之，当应用程序的行为与用户期望的不同时，你就会遇到用户界面设计问题。

不过，无论您遵循何种设计或设计模式，最好的建议是在整个应用程序中保持设计和约定的一致。

【讨论】：

【解决方案10】：

尽可能避免让用户做出选择（即不要创建带有配置对话框的分支！）

对于每个选项和每个消息框，问问自己：我是否可以想出一些合理的默认行为来代替

有意义吗？
不妨碍用户？
很容易知道我将这个强加给他的用户花费很少？

我可以以我的 Palm 手持设备为例：这些设置非常简约，我对此非常满意。基本应用程序设计得很好，我可以简单地使用它们而无需进行调整。好吧，有些事情我不能做，事实上我不得不让自己适应这个工具（而不是相反），但最终这确实让我的生活更轻松。

这个网站是另一个例子：你不能配置任何东西，但我发现它真的很好用。

合理的默认值很难弄清楚，简单的可用性测试可以提供很多线索来帮助你。

【讨论】：

【解决方案11】：

向用户示例显示界面。要求他们执行一项典型任务。注意他们的错误。听他们的cmets。进行更改并重复。

【讨论】：

确保它是您客户的代表性样本。我们为此使用了一名实习生，我们必须给他们特别的指示，以包括超过 30 名人群。

【解决方案12】：

日常用品的设计 - 唐纳德·诺曼

设计知识的经典和世界各地大学许多 HCI 课程的基础。您不会在 5 分钟内使用来自网络论坛的几个 cmets 设计出出色的 GUI，但一些原则会让您的思维指向正确的方向。

--

MC

【讨论】：

我要补充一点，他的情感设计也非常值得一读。

【解决方案13】：

在构造错误消息时，使错误消息成为这 3 个问题的答案（按顺序）：

发生了什么？
为什么会这样？
对此有什么办法？

来自“人机界面指南：Apple 桌面” 接口”（1987，ISBN 0-201-17753-6），但可以使用对于任何地方的任何错误消息。 Mac OS X 有一个updated version。微软页面 User Interface Messages 说同样的话：“......在出现错误消息的情况下，您应该包括问题、原因和用户操作解决问题。”

还包括程序已知的任何信息，不仅仅是一些固定的字符串。例如。对于错误消息的“为什么会发生”部分，请使用“原始光谱文件” L:\refDataForMascotParser\TripleEncoding\Q1LCMS190203_01Doub leArg.wiff 不存在”，而不仅仅是“文件存在不存在”。

将此与臭名昭著的错误消息进行对比：“错误发生了。”。

【讨论】：

【解决方案14】：

（从乔尔那里偷来的：o））

不要禁用/删除选项 - 而是在用户单击/选择时提供有用的消息。

【讨论】：

我也读过那篇文章，但认为它在大多数情况下都有效，但并非总是如此。在某些情况下，您必须隐藏/禁用菜单选项。想一想：您的粘贴菜单点始终可见并已启用，当您单击它时，它将显示一条消息：您没有可粘贴的内容。 :-)
我完全不同意 Joel 的罕见情况之一：禁用菜单选项会给出直接反馈 - “现在不可用”。为用户省去必须点击菜单来查找的操作（以及失望）。不过，隐藏菜单选项很糟糕

【解决方案15】：

正如我的数据结构教授今天指出的那样：向普通用户说明您的程序如何工作。我们程序员经常认为我们的程序很符合逻辑，但普通用户可能不知道该怎么做。

【讨论】：

【解决方案16】：

使用谨慎/简单的动画功能创建从一个部分到另一个部分的无缝过渡。这有助于用户创建导航/结构的思维导图。
在按钮上使用简短的（如果可能的话，一个词）标题，清楚地描述动作的本质。
尽可能使用语义缩放（一个很好的例子是缩放在 Google/Bing 地图上的工作原理，当您专注于某个区域时可以看到更多信息）。
至少创建两种导航方式：垂直和水平。当您在不同部分之间导航时为垂直，当您在部分或子部分的内容中导航时为水平。
始终保持结构的主要选项节点可见（在屏幕尺寸和设备类型允许的情况下）。
当您深入结构时，请始终保持可见的提示（例如以路径的形式）指示您所在的位置。
当您希望用户专注于数据（例如阅读文章或查看项目）时隐藏元素。 - 但是要注意第 5 点和第 4 点。

【讨论】：

【解决方案17】：

Be Powerful and Simple

哦，聘请设计师/学习设计技能。 :)

【讨论】：

【解决方案18】：

对于 GUI，标准是特定于平台的。例如。在 Eclipse 中开发 GUI 时，link 提供了不错的指导。

【讨论】：

【解决方案19】：

我已经阅读了上述大部分内容，还有一件事我没有看到：

如果用户打算只使用一次界面，那么尽可能只显示他们需要使用的内容是很好的。

如果用户界面将被同一用户重复使用，但可能不是很频繁，禁用控件比隐藏它们更好：用户界面的变化和隐藏的功能不被偶尔的用户明显（或记住）让用户感到沮丧。

如果用户界面将由同一个用户非常定期地使用（并且工作中的人员流动不多，即没有很多新用户一直在线）禁用控件绝对有帮助，并且用户将习惯于事情发生的原因，但会防止他们在不恰当的环境中意外使用控件并防止错误。

只是我的意见，但这一切都可以追溯到了解您的用户个人资料，而不仅仅是单个用户会话可能需要什么。

【讨论】：