每个开发人员都应该知道哪些关键的 UI 设计技巧？
虽然有许多面向开发人员的 UI 资源（例如，Joel Spolsky 的程序员用户界面设计），但我更感兴趣的是可以在 1 到 2 页中传达的项目符号列表。
我对更具战术性的日常 UI 技巧感兴趣，而不是 UI 设计会议（可能至少有一个具有良好 UI 意识的人参加）中涵盖的总体 UI 设计目标。这些技巧的集合可能涵盖了日常程序员会遇到的大约 80% 的情况。
David
问问题
6088 次
19 回答
33
- 使用标准菜单栏（出于某种原因，业余 GUI 设计师似乎喜欢在这里绘制自己的路线）。确保第一项是文件、编辑和查看，最后一项是帮助
- 不用担心颜色主题或皮肤；坚持与您的平台一致的标准外观
- 使用默认系统字体
- 使用与您的平台一致的菜单加速器
- 坚持久经考验的真实布局，顶部有一个菜单栏，底部有一个状态栏，如果需要，左侧有一个导航窗格
- 永远不要进行系统范围的抓取
- 如果您有选择，请调整所有窗口的大小。
- 使用单选按钮组来“选择一个”。始终确保默认选择其中之一。如果您希望用户不能选择任何选项，请为“无选择”添加另一个单选按钮
- 使用多组复选按钮来“选择零个或多个”
- 如有必要，限制输入（即：简单地忽略数字输入字段中的非数字），而不是等待用户输入数据，提交，然后弹出一个对话框说“嘿，不允许使用字母！”。如果他们不被允许，首先不要接受他们。
- 对你接受的输入要自由。看在上帝的份上，如果 SSN 字段遗漏了连字符，或者当您不想要它们时，请不要输入它们。电脑很聪明，让它弄清楚 xxxxxxxxx 和 xxx xx xxxx 和 xxx-xx-xxxx 都是有效的社会安全号码。
- 总是在长字段中允许空格，例如序列号和诸如此类的东西。如果允许用户以三个或四个为一组对数字进行分组，则数据质量会大大提高。如果您的数据模型无法处理空格，您可以在保存数据之前将其删除。
- 避免像瘟疫一样弹出对话框。除非绝对必须，否则切勿展示。如果您决定必须这样做，请停止并重新考虑您的设计，然后再继续。有时它们是必要的，但这些时间比您想象的要少得多。
- 注意键盘遍历。大多数工具包都试图让它正确，但总是仔细检查。用户应该能够使用 tab 键以逻辑方式遍历小部件。
当然，所有这些规则都可以被打破。但只有当你出于正当理由破坏它时才破坏它。
请记住，软件是用来帮助用户的，它应该做他们想做的事，而不是让他们做他们想做的事。
于 2008-11-12T18:49:06.290 回答
11
当您要执行将更改或删除信息的操作时，不要问“您确定吗”——用户将学会单击按钮作为操作的一部分。尝试在系统设计中允许“撤消”。
于 2008-11-12T18:48:01.677 回答
8
选择大多数用户会满意的默认选择。
于 2008-11-12T19:00:18.017 回答
7
始终为您的用户提供无需使用后退按钮的“出路” 。
最好的例子：
如果发生错误，请给他们一个链接返回到他们所在的位置（或至少到他们可以重新开始的位置）。
于 2008-11-12T18:50:12.670 回答
6
尽可能使用工具提示。令人惊讶的是，这些小家伙可以为最终用户添加大量帮助，而且他们对应用程序本身并不显眼。
于 2008-11-12T19:11:52.470 回答
5
在设计 UI 时，让它尽可能简单，但不要更简单。
于 2008-11-12T19:13:06.913 回答
4
- 询问用户，不要胡编乱造
- 简化 - 删除一个步骤，消除点击等。
- 熟悉可用性原则
于 2008-11-12T18:42:45.307 回答
4
我认为这个链接将是一个很好的起点，来自微软的“Windows Vista 用户体验指南：http:
//msdn.microsoft.com/en-us/library/aa511328.aspx
这可能非常接近您正在寻找的两页项目符号列表：“Top Violations”：http:
//msdn.microsoft.com/en-us/library/aa511331.aspx
非常实际的提示，例如：“如果窗口大小低于该大小，内容不再可用，请设置最小窗口大小。”
于 2008-11-12T18:57:26.057 回答
4
正确的制表位是必须的。
于 2008-11-12T19:02:49.757 回答
3
不要以基本的清晰度和可用性为代价来增加“可发现性”。
于 2008-11-12T19:08:52.040 回答
3
找到用户最常做的事情，然后让它成为最容易做的事情。
例如：我对微波设计有一个长期的个人抱怨。
许多人要求您在使用微波炉之前设置一个您从未使用过的时钟，并且每次断电时它都会忘记，并且需要在那些难以使用的按钮板上按 10 次按键才能这样做。
一个简单的可用性测试将意识到微波炉上最常见的烹饪时间是标准的“分钟”及其倍数。因此，理想的微波炉应该能够以 3 次或更少的动作以高功率烹饪产品 1 分钟。
对于一分钟以外的时间，但在黄金“1”分钟的 5 分钟内，应该有稍微更多的步骤，但不会显着增加，并且只有烹饪时间 > 5 分钟需要大量的操作。（这是相当罕见的）
2 个出色的微波设计示例
1. 4个部分。门、温度刻度盘、时间刻度盘、时间照明顺序
温度刻度盘是模拟的，并且与以前的设置保持一致，具有不同的滑动范围。
时间表盘是数字的，但模拟模拟，顺时针转动表盘会增加时钟时间（由表盘下方的照明顺序显示）。逆时针转动表盘可减少时钟时间。烹饪会减少时钟时间。
门被关上，计时开始做饭。开门暂停烹饪。
标准操作：开门、加载、转动时间刻度盘、关门（或可选，先关门，时钟开启>1s 后立即开始烹饪）
2. 6个零件，门，拨号，电源按钮，启动按钮，清除按钮，数字时间显示
没有选择时间的开始按钮以大功率开始烹饪 1 分钟。
烹饪时的开始按钮会增加 1 分钟的时间。
时间拨号在会话之间持续存在。转动刻度盘会将刻度盘位置上存储的时间复制到数字计时器中。
在开始烹饪之前按“电源”会
- 在未转动表盘的情况下，将存储在表盘位置的当前时间复制到数字计时器中。
- 如果拨盘已转动，则将功率级别的选择减 1，或者如果处于最低功率级别，则返回最高功率。
烹饪时按下电源会降低运行中的功率水平。
标准操作： 1 分钟高 = 按下开始。
1 分钟中高 = 按下开始，按下电源。
2 分钟高 = 按两次开始。
<anytime> 高 = 转动拨号直到满意，按开始。
<anytime> on <anypower> 转动拨号直到满意，按电源直到满意，按开始。
<previous selected time> on high = 按电源，按开始
<previous selected time + 1 minute> on high = 按电源，按两次启动。
正如您在此处看到的，添加少量额外的按钮，可以极大程度地增加表现力和功能性设计。
任何带有用于时间规范的数字小键盘的设计，都往往不符合我对良好设计的标准。
它指出，对于某些人来说，这些设计可能具有更高的学习曲线，但一旦学会，肌肉记忆就会使其成为本能。与更（明显？）但过于复杂的设计相反，即使是有学识的用户也将不得不反复花费大量时间执行乏味的任意操作，只是为了实现共同目标。
于 2008-11-12T19:25:17.933 回答
2
做一些走廊可用性测试（就像你做代码审查一样）。
即使是对你旁边的人进行非常快速的“嘿！试试这个”可用性测试（如果你可以这么说的话）也会产生很大的不同。最重要的是让自己以外的其他人尝试您刚刚构建的 UI。
令人惊讶的是，有多少次其他人在使用您的新 UI 时遇到问题，并且（通常）只需要几分钟就可以找到最大的问题。
于 2008-11-12T19:38:49.157 回答
0
如果您确实使用来自编辑器的弹出窗口，请确保将插入点或状态返回到弹出窗口之前的状态。太多的程序只会让你“悬而未决”，不得不找到回去的路。
于 2008-11-12T19:18:48.243 回答
0
而不是任意的“确定”和“取消”按钮，在给定的上下文中，这些按钮可能是模棱两可的，并且用户会盲目地点击一个按钮，这些按钮应该包含对他们所做的事情的简要描述。
[Ok, Please Cancel my subscription ], [ Please do not cancel my subscription ]
远胜于
Cancel my subscription?
[ OK ] [ Cancel ]
（这类故障经常出现在dailywtf上）
于 2008-11-12T19:28:30.020 回答
0
- 减少点击次数
- 统一的外观（文字大小，按钮..和其他控件）
- 最小化免费编辑...（例如：在地址条目中...在下拉列表中提供状态...等）
- 在国家列表的下拉列表中...首先列出居住国家...（你们中有多少人对美国被列在底部感到沮丧，您必须向下滚动？）
- 可以根据用户的选择订购通用下拉菜单
- 没有拼写msitake ;) 根本
- 注意标记文本：对于电子邮件地址（将标题作为电子邮件......相信我......我已经看到它作为电子邮件地址：）
- 金额的货币符号。统一数字显示金额.. ex: $12.15 ==> $12.15 $10.9 ==> $10.90 9.进度/状态栏
- 在用户单击确定/保存按钮之前指示错误字段的好友标签（例如：对于电子邮件地址，如果没有“@”，则无需等到用户单击确定然后告诉他们无效的电子邮件地址）
- 避免重复输入...（例如：登录屏幕中的记住我选项）
- 全局应用程序选项，让用户从上一个实例中离开的地方继续）
- 在网格上显示数据时... excel 样式过滤器选项
- 输入的默认值。
伙计们......请随意以正当理由冲掉上述任何一点！
于 2008-11-12T20:29:10.863 回答
0
祖母测试。
这是我对概念性问题的用语，“除了电子邮件和检查 www.cutecats.com 之外从未使用过计算机的你的祖母可以使用它吗？（假设她具有使用该特定应用程序的实际知识）”。
所有常见的东西都应该是显而易见的；没有什么应该是带有副作用的黑盒魔法。不常见的东西应该以用户以前使用过的通用格式访问。
清晰的标签，清晰的帮助文件路径，清晰的动作，清晰的效果。
如果奶奶不能使用你的画图程序，你需要真正考虑你的用户界面。
于 2008-11-12T20:38:48.613 回答
0
我的 UI 设计的基本规则是让每个“页面”完成一项任务，并且只执行一项任务。它使页面保持简单，使设计保持简洁并使应用程序更易于理解。
这种类型的设计称为感应式用户界面。这是微软在 2001 年发布的关于该主题的文档。文字可能有点过时，但原则通常都很好。唯一需要注意的是，在这样的设计中需要找到平衡。如果你过度简化了太多，用户将不得不到处导航以完成简单的任务，而在可理解性方面的收益将因工作效率低下而丧失。
于 2008-11-24T14:54:42.697 回答
0
日常用户界面网页设计和应用程序设计的一些简单技巧：
- 使用简单的静态草图开始初步的 Web 应用程序开发计划。- 不要让用户有太多的选择。取而代之的是，使用迎合设计来引导用户走上他们将从中受益的道路。- 定义关键用户组和他们的旅程 - 将迭代设计作为 UI 的一部分，以确保投资回报率
于 2010-01-12T20:20:41.117 回答
0
我喜欢遵循这些指导方针：
- 标准 - 遵循已知标准/模式，重用您尊重的所有产品的想法
- 简单 - 让您的解决方案保持简单且易于更改（如果需要）
- 优雅——用更少的东西完成更多的事情
于 2010-05-04T17:25:34.427 回答