有哪些关键的UI设计技巧是每个开发者都应该知道的呢？
虽然有很多面向开发者的UI资源（例如Joel Spolsky的《程序员的用户界面设计》），但我更感兴趣的是一份可以在1至2页内传达的清单。
我更关心实用的、日常使用的UI技巧，而非在UI设计会议上讨论的总体UI设计目标（假定至少有一个拥有良好UI感觉的人参加）。这样的技巧清单可能涵盖了日常程序员遇到的80%左右的情况。
19个回答
3
找到用户最常用的操作，然后将其变得最容易操作。
例如：我对微波炉设计有一个长期的抱怨。许多微波炉在使用之前要求您设置一个您从未使用过的时钟，并且每次停电后都会忘记，并且需要在难以使用的按钮上按下10个键才能完成此操作。
一个简单的可用性测试将发现微波炉上最常用的烹饪时间是标准的“一分钟”及其倍数。因此，理想的微波炉应该能够使用3个或更少的操作，在高功率下将产品烹饪1分钟。
对于一分钟以外，但在黄金“1”分钟内的时间，应该有略微更多的步骤，但不应太显著，并且只有在烹饪时间> 5分钟时才需要显著数量的操作。（这种情况相当罕见）
2个出色微波炉设计示例
1. 4个部件。门，温度拨盘，时间拨盘，时间点亮序列
温度拨盘是模拟的并持续存在于先前的设置中，具有变化的滑动范围。
时间拨盘是数字的，但模拟模拟拨盘，顺时针旋转拨盘会增加时钟时间（在拨盘下方显示灯光序列）。逆时针旋转拨盘会减少时钟时间。烹饪减少时钟时间。
关闭门并在时钟上有时间开始烹饪。打开门暂停烹饪。
标准操作：打开门，装载，转动时间拨盘，关闭门（或者选择首先关闭门，在> 1s时钟时开始烹饪）
2. 6部分，门，拨号，电源按钮，启动按钮，清除按钮，数字时间显示
未选择时间的启动按钮在高功率下烹饪1分钟。
在烹饪过程中按下启动按钮会增加1分钟的时间。
时间拨盘在会话之间持续存在。转动拨盘会导致将存储在拨号位置上的时间复制到数字计时器上。
在开始烹饪之前按下“电源”将：
1.如果还没有转动拨盘，则将当前存储在拨号位置上的时间复制到数字计时器上。
2.如果已经转动了拨盘，则将功率级别的选择减少1，或者如果在最低功率级别上，则返回到最高值。
在烹饪过程中按下电源会即时降低功率级别。
标准操作： 1分钟高温=按下启动按钮。
1分钟中高温=按下启动按钮，按下电源。
2分钟高温=按两次启动按钮。
任何时间在高温 = 转动拨盘直到满意，按下启动按钮。 任何功率级别的任何时间，转动拨盘直到满意，按下电源，直到满意，按下启动按钮。
例如：我对微波炉设计有一个长期的抱怨。许多微波炉在使用之前要求您设置一个您从未使用过的时钟，并且每次停电后都会忘记，并且需要在难以使用的按钮上按下10个键才能完成此操作。
一个简单的可用性测试将发现微波炉上最常用的烹饪时间是标准的“一分钟”及其倍数。因此，理想的微波炉应该能够使用3个或更少的操作，在高功率下将产品烹饪1分钟。
对于一分钟以外，但在黄金“1”分钟内的时间，应该有略微更多的步骤，但不应太显著，并且只有在烹饪时间> 5分钟时才需要显著数量的操作。（这种情况相当罕见）
2个出色微波炉设计示例
1. 4个部件。门，温度拨盘，时间拨盘，时间点亮序列
温度拨盘是模拟的并持续存在于先前的设置中，具有变化的滑动范围。
时间拨盘是数字的，但模拟模拟拨盘，顺时针旋转拨盘会增加时钟时间（在拨盘下方显示灯光序列）。逆时针旋转拨盘会减少时钟时间。烹饪减少时钟时间。
关闭门并在时钟上有时间开始烹饪。打开门暂停烹饪。
标准操作：打开门，装载，转动时间拨盘，关闭门（或者选择首先关闭门，在> 1s时钟时开始烹饪）
2. 6部分，门，拨号，电源按钮，启动按钮，清除按钮，数字时间显示
未选择时间的启动按钮在高功率下烹饪1分钟。
在烹饪过程中按下启动按钮会增加1分钟的时间。
时间拨盘在会话之间持续存在。转动拨盘会导致将存储在拨号位置上的时间复制到数字计时器上。
在开始烹饪之前按下“电源”将：
1.如果还没有转动拨盘，则将当前存储在拨号位置上的时间复制到数字计时器上。
2.如果已经转动了拨盘，则将功率级别的选择减少1，或者如果在最低功率级别上，则返回到最高值。
在烹饪过程中按下电源会即时降低功率级别。
标准操作： 1分钟高温=按下启动按钮。
1分钟中高温=按下启动按钮，按下电源。
2分钟高温=按两次启动按钮。
任何时间在高温 = 转动拨盘直到满意，按下启动按钮。 任何功率级别的任何时间，转动拨盘直到满意，按下电源，直到满意，按下启动按钮。
<之前选择的时间> 高功率 = 按电源键，按启动键
<之前选择的时间+1分钟> 高功率 = 按电源键，按两次启动键
如您所见，添加少量额外按钮可以增加大量表达和功能设计。
任何带有数字键盘以指定时间的设计，往往无法满足我的优秀设计标准。
需要注意的是，这些设计可能对一些人来说具有较高的学习曲线，但一旦学会，肌肉记忆使其本能化。相比于更（明显？）但过于复杂的设计，即使是经验丰富的用户也将反复花费繁琐的时间执行繁琐的任意操作，仅仅为了实现常见目标。
- Kent Fredric
3
听起来你需要一份我的微波炉说明书。当按下1-9按钮时，微波炉会自动开始烹饪相应的分钟数。0键添加30秒。如果你想要烹饪特定的时间，你必须先按下“烹饪”按钮，然后再输入确切的时间。 - BoltBait
我的微波炉和我父母的微波炉都很棒 : )。但是我遇到了一些非常复杂的邪恶微波炉，让我发疯。 - Kent Fredric
我同意，特别是第一个设计。我们以前有一个像那样的 :'( - fluffels
2
进行一些走廊可用性测试（就像您进行代码审查一样）。
即使只是与旁边的人进行一个非常快速的“嘿！试试这个”的可用性测试（如果可以这样称呼它），也会产生很大的差异。主要的问题是让除了你自己之外的其他人尝试你刚刚构建的UI部分。
令人惊讶的是，其他人使用您的新UI时遇到的问题有多少次，而且通常只需要几分钟就能找到最大的问题。
即使只是与旁边的人进行一个非常快速的“嘿！试试这个”的可用性测试（如果可以这样称呼它），也会产生很大的差异。主要的问题是让除了你自己之外的其他人尝试你刚刚构建的UI部分。
令人惊讶的是，其他人使用您的新UI时遇到的问题有多少次，而且通常只需要几分钟就能找到最大的问题。
- Wilka
0
我喜欢遵循以下准则：
- 标准化 - 遵循已知的标准/模式，重用你尊重的所有产品中的想法
- 简单化 - 保持你的解决方案简单易变（如果需要）
- 优雅 - 用最少的东西实现最多的功能
- Zamboni
0
关于日常用户界面网页设计和应用程序设计的一些简单技巧：
- 使用简单的静态草图开始初步的Web应用程序开发计划。 -不要给用户太多选择。相反，使用定制设计将用户引导到他们受益的路径。 -定义关键用户群体及其所做的旅程 -作为UI的一部分实践迭代设计，以确保投资回报率
- Alex
0
我的基本UI设计规则是让每个“页面”只完成一个任务。这使得页面简单，设计干净，应用程序更易于理解。
这种设计被称为归纳式用户界面。这里有一份微软在2001年发布的文档，虽然内容可能有些过时，但原则通常还是很好的。唯一需要注意的是，在这样设计时需要找到平衡点。如果过于简化，用户将不得不在各个页面之间导航以完成简单的任务，从而失去了理解性带来的生产力提升。
- NigelTufnel
0
如果您使用编辑器中的弹出窗口，请确保将插入点或状态返回到弹出窗口之前的位置。太多的程序只让您“悬挂”着，需要自己找回原来的位置。
- Uri
0
与其使用任意的“确定”和“取消”按钮，这些按钮在特定情境下可能会产生歧义，用户盲目地点击其中一个，不如将按钮包含简要说明它们所执行的操作。
[Ok, Please Cancel my subscription ], [ Please do not cancel my subscription ]
比...好得多
Cancel my subscription?
[ OK ] [ Cancel ]
这类故障通常会在 DailyWTF 上浮出水面。
- Kent Fredric
2
嗯...我的初始反应是不同意。我需要考虑一下这个作为一个通用规则/提示的适用性。我会说你的提示的适用性可能取决于引起（大概）对话的行动。 - Larsenal
1有没有任何情况，"确定"和"取消"比点击按钮实际要执行的操作更好？ - Steve Losh
0
- 尽量减少点击次数
- 保持一致的外观（文本大小，按钮...及其他控件）
- 尽量减少自由编辑... (例如在地址输入中...提供下拉列表中的州名...等等)
- 在国家列表的下拉菜单中...将居住国家放在首位...(有多少人因为美国被列在最后而不得不向下滚动而感到沮丧?)
- 一般下拉菜单可以按用户选择排序
- 任何时候都不要出现拼写错误；）
- 注意标注文本：对于电子邮件地址（将标题标注为电子邮件...相信我...我曾见过标题被标注为e_mail地址:)
- 金额货币符号必须统一，金额显示也要一致。例如： $12.15 ==> $12.15 $10.9 ==> $10.90
- 进度/状态栏
- 在用户点击OK/保存按钮之前使用Buddy标签指示错误字段（例如，对于电子邮件地址，如果没有“@”就没有必要等待用户点击OK然后告诉他们无效的电子邮件地址）
- 避免重复输入... (例如，在登录界面中使用记住我选项)
- 全球应用选项，让用户从前一个实例中继续
- 在网格中显示数据时...使用Excel样式的筛选选项
- 输入的默认值。
- user26506
3
我不同意第三点。我更愿意能够输入“IL”，而不是在列表中搜索它（阿拉斯加的人可能会持不同意见:-)。当然，在某些情况下，下拉菜单是有意义的，但我认为这不是一个好的经验法则。这真的取决于上下文。 - Bryan Oakley
你可以在下拉菜单中输入内容。如果你在大多数现代浏览器中点击或者通过Tab键切换到一个下拉菜单，并开始输入“Penn”（例如），它应该会自动选择“Pennsylvania”。桌面应用程序也应该尝试实现相同的功能。 - Steve Losh
@Steve Losh：有时候是这样的。我见过下拉菜单不允许输入的情况。此外，如果我按Tab键到一个下拉菜单并输入“IL”，它有时会选择路易斯安那州（即：它基于最后一个字符而不是每个字符进行选择）。 - Bryan Oakley
0
Grandma的测试。
这是我对于一个概念问题的称呼，“你的奶奶从未使用过电脑，仅会发邮件和查看www.cutecats.com，她能用吗？（假设她有使用该特定应用程序的现实知识）”。
所有常见的东西都应该很明显；没有黑盒子魔法带来的副作用。不常见的事情应该以用户之前使用过的常见格式让用户更容易接近。
清晰的标签，清晰的帮助文件路径，清晰的操作和明确的效果。
如果奶奶无法使用您的画图程序，那么您需要认真考虑您的UI界面。
- Vlion
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接