上周，我请大家参与了一个关于特定设计模式的 小组设计项目：带功能的列表。 前提是
我们要解决的设计模式是带功能的列表。 想象一个包含五个名称的列表。 此列表的主要功能是点击名称。 列表的次要功能是列表需要易于管理。 需要某种功能来编辑和删除每个列表项。
反响非常热烈。 你们中有 **很多人** 提交了想法。 我只有一个奖品，所以我会在最后选出一名获胜者，但我也想介绍所有有趣的想法。
下面 **并非** 展示了所有提交的想法。 有许多解决方案我认为没有达到最初的意图。 如果必须点击名称才能到达可以编辑/删除的点，那么这算不上成功的尝试。 编辑/删除是次要功能，不应该取代主要功能。
悬停功能
我在 开头文章 中引用了 Zeldman 的一条推文，其中提到只有在悬停时才会显示的功能会失效。 他指的是移动设备，移动设备没有鼠标光标，而是依靠触摸。 这些移动设备 没有悬停状态，因此，如果功能仅限于悬停，用户将无法访问该功能。 很难保证一个界面只针对桌面设备，因为像 iPad 这样的设备几乎完全能够访问网页。 这并不是说“永远不要使用悬停”，而是说应该提供某种不依赖于悬停的备用方案，以适用于移动设备。
示例 由 Sean 提供。 一个功能有标签而另一个没有，这一点有点奇怪，位置也不合适。
示例 由 cancel bubble 提供。 它还具有基本的移动浏览器检测功能，可以将功能更改为始终存在。
示例 由 kil 提供。 虽然我认为样式并不成功，但它指出了有意通过接近性将编辑和删除功能分开的观点。
示例 由 Austin Knight 提供。
示例 由 Pete 提供。
编辑模式
我认为，为列表切换到“编辑模式”提供一个切换按钮是这种设计模式最成功的基础。 没有重复的图标，不依赖于悬停，也不需要说明。
示例 由 Jay Salvat 提供。 最基本的形式。
来自 Red 的类似 示例。
示例 由 Jonathan 提供。 iPhone 风格。
示例 由 Baylor Rae 提供
示例 由 RSBomber 提供。
Kirk Strobeck 创建了一个 PDF，描述了一个界面，该界面本质上是一个带有三种不同模式的列表。
批量编辑模式
批量编辑模式与编辑模式的不同之处在于，启用编辑模式后，所有列表项会立即变为可编辑状态。 这在某些特殊情况下可能很有用，但我认为在大多数情况下，用户会觉得这种方式不舒服（当他们试图编辑其他内容时，将他们满意的项目也置于编辑模式中会让人感到不安）。
示例 由 Justin 提供。
示例 由 Red 提供。
示例 由 Josh Brown 提供。
示例 由 Raymond Torres 提供。
拖动功能
拖动功能可以在网页或移动设备上实现，尽管实现的技术完全不同。
示例 由 Bart 提供。 向左拖动以编辑，向右拖动以删除。
示例 由 Greg 提供。
Miles Harrison 创建了一个 Flickr 集，展示了如何通过将拖动功能添加到列表项而不是将列表项拖动到功能上来颠覆拖动功能。
单击功能
示例 由 Alexandre Kilian 提供。 我提供的初始想法的变体，只是使用点击而不是悬停来显示功能。
示例 由 r3dsc0rpi0n 提供。 直接点击列表项以执行主要功能，点击列表项外部但位于其框内的区域以进行编辑。
示例 由 Damien 提供。 某种程度上结合了点击和始终存在的功能。 点击编辑时，从顶部向下滑动显示编辑区域。
示例 由 Hayden K 提供。
双击功能
我认为，在双击时显示功能的固有问题在于，它在网页上很少使用，因此需要说明如何使用。 对于如此简单的事情，不应该需要任何说明或任何学习曲线（无论多短）才能让用户理解。
示例 由 Jason 提供。 在模态弹出窗口中进行编辑。
示例 由 Justin Lee 提供。 Justin 提到了保存/放弃的功能。 直观的按键是 **回车** 和 **Esc**，但没有证明这些按键是否有效，这一点有点让人不安。
示例 由 Jay Salvat 提供
示例 由 Jay Salvat 提供。 双击滑动显示编辑面板。
示例 由 Jay Salvat 提供。
始终存在的功能
如果做得完美，始终存在的功能应该可以在这里工作。 我特别提到了重复的图标如何会造成视觉上的混乱，并且通常应该避免。 因此，“完美”意味着良好的位置和保持整洁。
示例 由 Boba 提供。 图标放置在不显眼的位置，并在悬停时淡化。 我为屏幕截图去除了默认的图像边框。
示例 由 Dave Blencowe 提供。 我认为这是一个始终存在的功能造成视觉混乱的例子。
示例 由 Marcelo 提供。 这并不完全是我认为的“始终存在”，但由于缺乏更好的分类，我将其放在这里。 复选框很有趣，但对主要功能的干扰太大。
示例 由 Kevin Sweeney 提供。
示例 由 Cory 提供。 Cory 的简单想法是，在移动设备上始终存在，而在桌面设备上使用悬停，并且基本上使用相同的设计。
示例 由 Graham Ramsey 提供。
其他
Bram Cordie 的 示例。点击特定位置会打开一个“拨盘”，从中可以选择其他功能。这个拨盘非常酷，我觉得它在触摸屏环境中会很不错，只要使用起来自然且不需要任何说明。
Stephen Gerstacker 的 示例。点击并按住以显示功能。它确实有效，但肯定不容易发现，需要说明。
获胜者
我将桂冠颁给 Jay Salvat。Jay 创建了各种精美的示例，包括第一个提交的编辑模式示例，而这正是我认为最成功的模式。祝贺 Jay！
祝贺，Jay！实至名归。你让它变得简单且实用。
我希望我有更多时间来玩这个，并且希望 Chris 会继续进行 UI 模式创意。这是一件非常棒的事情。
看到每个人如何以不同的方式处理问题真是太棒了，祝贺 Jay 和本文中提到的每个人。
啊，太可惜了，我开始得太晚了 :)
祝贺 Jay。
Apple UI – 忍者之道…
感谢 Chris 提及我的作品 :)
来自德国的问候，
Jonathan
祝贺，Jay。
很有趣，看看每个人如何对同一个问题采取不同的方法。
祝贺 Jay 拥有最佳的列表项带功能 UI。LT
这个小组项目是一个很棒的想法。我希望你会不时地提出更多这样的项目，Chris。
Jay 干得漂亮，直观且外观良好。
祝贺 Jay。我也认为他提供了最佳的解决方案…
这很好…请继续开展更多此类 UI 模式项目。
“……编辑模式，这正是我认为最成功的模式。”
我并不认为编辑模式应该被宣布为大赢家。这种模式失败有两个明显的原因。
1.当您有一个大型列表时，用户在查找所需项目时必须滚动浏览列表。现在，当他找到所需的项目后，突然决定要编辑/删除它。他现在必须做的是一直滚动到解锁按钮，解锁，再次搜索他想要的项目，删除它并锁定。
好吧，没什么大不了的，只需将解锁按钮固定并防止它随着列表一起滚动即可。但现在您有这个编辑按钮在屏幕上膨胀。
2.您仍在重复所有图标。
挑战明确指出“……重复图标是不好的……”。你唯一做的就是用另一个需要滚动/重复的按钮隐藏它。
抱歉说了这么多负面的，但这对我来说没有意义。
我的博客还没有建立起来，所以有没有地方可以进一步讨论不同的模式或特定模式？我的模式在实现方面还存在一些技术问题，希望能得到一些建议。
为了避免对我的拨盘模式的工作原理产生任何混淆，请在 Firefox 中查看它，并请更改说明。现在它说“点击特定位置会打开一个“拨盘””，这只有在确认删除时才正确。当选择一个选项时，您只需向正确的方向拖动。拖动而不是点击确实让它感觉更自然，并且不需要像很棒的编辑模式那样进行过多的点击。如果您使用除 Firefox 之外的浏览器，它可能会严重影响拨盘体验。
Bram，这些观察非常棒。我尤其担心第一个问题：这种模式需要过多的滚动或事先知道要做什么。不过，我认为对于你的第二点，当不需要时，他确实隐藏了图标，因此接近规范。
补充你的分析，我想指出，即使没有问题，从技术上讲，这些也不是设计模式：它们是候选设计模式。我意识到很多人会说这些是设计，它们是模式。但是，在该领域，“设计模式”一词有严格的定义。要符合设计模式，解决方案必须随着时间的推移而使用并证明其有用性。解决方案不能仅仅看起来有用，或看起来正确。设计模式背后的要点是，总是有很多可行的解决方案，但其中一些会产生负面影响。有关该理念背后的历史，请参阅克里斯托弗·亚历山大的著作。
问题 #1 可以通过一个覆盖的固定元素（包含编辑功能）来解决，该元素随着用户向下滚动而滚动，或者在用户向下滚动时“悬停”在列表上，或者作为列表上的长条来激活移动界面上的编辑功能。
问题 #2 如果用户最初没有经过任何思考就看到这样的列表，那么重复的图标就是不好的。如果他们点击编辑，那么他们期望某些事情发生，并且*需要*有一个明显的反应（即与编辑某些内容明确相关的图标/文本）。我看不到其他任何能够快速解释列表功能变化的选项。
Jays 获胜，不一定是因为它完全原创（像你的拨盘）或满足了*所有*要求，而是因为它在 UI 设计的第一规则“不要让我思考”方面最成功。
顺便说一句，如果你计划在未来的设计中使用该拨盘，我不会将“是”放在用户点击“删除”图标的同一侧，我可以想象有些人会意外地删除名称。
1. 我不希望一个大的编辑按钮一直浮在我的屏幕上。尤其是在移动设备上，我的屏幕空间已经有限。
2.如果用户想与某个东西互动，他会点击它。这时您向他展示所有他可以使用该点击项执行的操作。即使在编辑模式下重复所有图标也完全没有用。在这种情况下，我们有一个项目列表，它们都共享相同的功能。一旦我知道可以对其中一个项目执行什么操作，我就会假设其他项目具有相同的功能。
如果你想更进一步，你可以为每个项目添加单独的功能。并在用户请求与其交互时动态更改选项。
关于删除确认：我考虑过切换是和否，但我不想在用户必须连续删除一堆项目时减慢他的速度。你将一直用鼠标在左右之间来回移动。你意外地点击、按住、向左拖动释放并再次点击的几率非常小。习惯了双击的人不会对此有任何问题，因为在实际拨盘开始之前，我会检查手势是否与原始点击有足够的偏差。
实际上，所有模式增强的界面都会带来认知成本，因此它确实会“让你思考”，因为你必须记住你处于哪种模式。Jay 的设计通过仅在编辑模式下显示图标来提供帮助。但是，不要被愚弄，认为这个设计在用户体验方面已经完成了。
祝贺 Jay。实至名归。你做了一些很棒的东西。:)
祝贺 Jay！！！
祝贺 Jay。我喜欢你举办了这个比赛，因为它让 UX 设计师和其他人员看到解决问题的各种构思。它还强化了创新。
大家干得漂亮！
一个很酷的“比赛”想法，这是一篇有趣的文章，祝贺 Jay Salvat 提供了极好的解决方案。我只是想发表我的看法。
触摸设备应用程序一直使用触摸并按住来编辑，因此，这正成为一种常见且非常有用的在*触摸屏上*编辑事物的方式。它特别有用，因为您不必放弃任何屏幕空间。
此外，点击以编辑在触摸屏上也很烦人，因为例如，当您尝试通过拖动来滚动时，弹出的小菜单会很烦人（即使它在设备意识到您没有点击后会消失）。
但是，就像右键点击在计算机（桌面）上已经存在很长时间但从未在网络上变得有用一样，以同样的方式，点击+按住操作在桌面上永远不会简洁。
——
还有一件事。
我认为您创建的行为/UI应该完全取决于您首先编辑的是什么“东西”，以及它在应用程序中的用途/权重。
在大多数情况下，您应该能够从列表中以及从点击项目后访问的页面中编辑该项目。您还应该能够一次删除多个项目，因为当您需要删除 7 个项目，并且必须按住或点击图标，然后可能确认 7 次操作时，您很可能会发疯。（这也会给您的服务器带来更多压力）。
我认为编辑模式是一个很好的建议，但它确实占用更多空间，并且在列表变得非常长并且您必须首先找到编辑模式按钮的环境中也可能很奇怪。此外，它应该在顶部还是底部？
还有一些示例没有涵盖的一个方面是，随着应用程序的不断发展和功能的增加，您可能需要比编辑和删除更多的操作，那么您将把这些操作放在哪里呢？
这对于评论来说有点长了，所以我将在上面写一篇博文，甚至给出我的建议（哎呀，这是一个有趣的练习），并让您知道。
无论如何，非常棒的帖子。您获得了一位新的 RSS 订阅者，我将期待更多这样的帖子 :-)
“还有一些示例没有涵盖的一个方面是，随着应用程序的不断发展和功能的增加，您可能需要比编辑和删除更多的操作，那么您将把这些操作放在哪里呢？”
我计划通过添加操作选项来使我的拨号器更灵活。每个操作都有自己的图标和拨号选项卡。
例如，当您添加第四个操作时，拨号器覆盖的 270 度将被 4 而不是 3 除以确定拨号选项卡的大小。
这将涉及一些关于径向的数学运算，以计算选择操作时的鼠标位置，我仍然需要弄清楚。
关于点击并按住：Google Chrome 使用其历史记录按钮执行此操作。（点击返回，按住查看历史记录。）
这是我*讨厌* Chrome 的唯一原因。
在 Chrome 中，历史记录按钮上的点击并按住效果不佳，因为您必须按住并使用鼠标滚动列表。
并非每个用户的鼠标灵敏度都相同，因此很难微调这种点击并按住的行为。例如，鼠标灵敏度设置非常低的用户的鼠标无法一直滚动到底部，因为当他到达第五个元素时，他的鼠标已经到达了桌子的边缘。
点击并按住可以在以正确方式使用时在桌面环境中工作。
您可以通过允许用户在处理点击并按住操作时随意进行手势来做到这一点。这就是 Chrome 历史记录示例失败的原因，用户在按住鼠标并选择列表中所需项目时必须非常精确。
我设法通过使用用户按住时移动的方向而不是他精确悬停鼠标的位置来为我的拨号器规避了这个问题。这允许用户只需将鼠标向正确的方向轻弹，向西、向北或向东即可选择一个操作。
干得好！感谢 Chris 提供的有趣项目 :)
很棒的帖子;) 非常感谢..
耶！恭喜 Jay。我很高兴能参与其中。我从每个人那里学到了很多东西。:D
我将在未来的项目中使用我学到的知识。
这太棒了，Chris。请再写一些。（即使没有奖品！:D）
在触控设备上按住时会触发什么事件？
触控设备可以检测双击吗？
可以在触控设备上使用 :active 代替 hover 吗？如果您按住链接 2 秒而不是点击它，它会选择元素并使其处于 :active 状态？然后，您可以调整您的 suckerfish 菜单以使用 :active 而不是 hover 来工作。
这些想法再次让我想要某种 :click 伪元素，这反过来又让我想要一个完整的、但有限的、专门用于操作 .style 对象的 JavaScript 子集。
“在触控设备上按住时会触发什么事件？”
这是一篇描述 iPhone 如何处理它的文章。我认为没有每个触摸界面都使用的预定义触摸事件。
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
您好，不幸的是，我不知道这个比赛。我想提一下，我创建了一个基于您可编辑发票示例的数据表。最初，所有文本框都具有使它们看起来像标签的样式，当您点击其中一些输入时，它们会更改样式以看起来像文本框（就像您所做的那样）。谢谢
在相关说明中，虚假简单 来自 Usabilitypost 讨论了图标并非总是答案（并以 TweetDeck 为例）。
哦，还要恭喜获胜者！
（附言：Chris，这个问题让我想起了你的首页……你使用 jQuery“取消”了一些重复的元素）
拨号器 v0.3 Chrome 中的异常行为现已修复。Safari 仍然无法像预期的那样阻止文本选择。
哦，我喜欢这篇文章，很容易向下轻弹和略读。我一直喜欢模式的想法，因为它们基于用户操作而不是设计理念。有时在构建 UI 时显而易见是件好事。在 Web Courses Bangkok，我们始终努力教授简洁性是关键，但有时需要勇气才能做到如此简单……以及大量的 Jquery :)
恭喜 Jay :)
恭喜 Jay！
恭喜 Jay，干得好:) 作品非常棒 :)
“双击”在移动设备上不太起作用，是吗？我在我的 iPhone 上疯狂地点击着。
我现在来晚了，但这里有一个避免重复元素的有趣方法
http://typographica.org/
如果您将鼠标悬停在导航中的任何项目上，您会立即看到与“类型”的连接，因为它会变为红色。虽然这种“智能设计”可能无法应用于任何地方，但它肯定会对某些人很有趣。