大家好，让我们一起设计点东西！我认为一起尝试解决一个简单的设计模式会很有趣。
前提
我们将要解决的设计模式是 **带有功能的列表**。想象一下一个包含五个名字的列表。此列表的主要功能是点击这些名字。列表的次要功能是该列表需要可管理。需要某种功能来 **编辑** 和 **删除** 每个列表项。
假设该设计是为网络设计的，同时考虑移动网络体验。该设计不针对任何特定的移动平台。JavaScript 可用，但不是必需的。我们也假设我们在这里处理的是现代浏览器。这是关于探索一种设计模式，而不是处理浏览器兼容性。有方法可以使这些东西在旧版浏览器中正常工作，不要担心为这种情况处理它。
该功能也不需要真正起作用，只需要以一种明显表明其工作方式的方式进行设计。
示例
以下是上面我所解释内容的非常简单的示例。
为什么？
我认为这个问题特别有趣。一方面，它非常简单，但另一方面我发现它具有欺骗性地难。
这个想法的起源始于今年的 前端设计大会。我最喜欢的演讲是由 Sarah Parmenter 进行的，她谈论了 iPhone 应用设计。在她的演讲中有一小部分提到了不要重复功能性设计元素。我认为这个例子就像这个一样，是一个带有功能的列表。想象一下，如果每个列表项都有用于编辑和删除的可见图标。那会在你的屏幕上出现很多图标。莎拉说，这在视觉上可能让人不知所措，并且有更简洁的方法来处理它。我完全同意。在 iPhone 上，可以使用像滑动删除这样的原生手势。不幸的是，我们在网络上没有这种便利（至少很容易）。
我上面的一个小演示尝试通过仅在悬停时显示一个小“齿轮”图标来表示功能，从而解决图标过多的问题。将鼠标悬停在齿轮上会显示实际的特定功能。笨拙，你不觉得吗？还有这个
Big Z 的一个非常有效的观点。 源推文。
因此，重复图标不好，悬停功能也不好。这使得事情变得更难了，不是吗！
我还应该提到，我并不是想在这里从你们这些好人们那里勒索免费劳力。我现在没有这方面的具体需求。我只是觉得它很有趣，并且想在博客上尝试这样的一个小组项目。
参与
如果您对如何处理这个问题有一些想法，请在评论中留下您示例的链接。使用像 JS Bin 或 jsFiddle 这样的工具可以简化操作，但请随意将您的演示放到任何地方。
在一周左右的时间后，我会挑选一个人，我认为他做得特别好，并宣布他为获胜者。我有一个 1 TB Time Capsule（来自 Apple 的 WiFi 硬盘备份设备），我现在碰巧用不到，所以我将把它作为奖品送给获胜者。
Time Capsule 支持整整一个吉字节！？:)
已修复，谢谢。
好主意。在我们制作的应用程序中，我们经常遇到这些列表。我不知道是否有一种适用于所有列表的方法。
如果你看看 37signals 的产品，他们有两种解决方案。
一种是图标悬停在行的前面。这样做有效是因为控件始终靠近内容（因为内容是左对齐的），并且您可以在不覆盖任何东西的情况下填满整行，即使控件显示出来。
另一种解决方案是使用一个按钮，可以为整个列表打开或关闭控件。这可能是 Zeldman 最喜欢的。
Twitter（以及许多其他网站）使用在行末出现的悬停控件。
我个人喜欢悬停控件，但了解它存在的问题。
您好，
我现在没有太多时间，但是：为什么不简单地以 iOS 的方式做呢？
我的意思是
1. 在列表上方，右上角有一个按钮：“编辑”
2. 用户点击按钮，按钮变成“保存”，列表项在左侧有拖放处理程序，在右侧有删除按钮；如果需要重命名 - 它们可以在文本上具有点击编辑操作
3. 点击保存以保存所有内容
这是一个简单且通用的解决方案，并且 - 如果操作得当 - 可以非常漂亮。
我宁愿我们不要对这项任务太认真地对待 Zeldman 的建议。事实上，我甚至会说，如果他说它完全“失败”了，那么这条推文有点像在嘲讽。你无法在不悬停的情况下点击某样东西，并且我们多年来一直在网络上使用这种约定。我认为，认为用户会因为在悬停时显示了额外功能而跑回家哭泣，这太武断了。此外，像 Paul S 提到的第二种方法这样的回退可以作为移动设备的回退使用。
我同意你的观点，Kevin。但是，在这个例子中，我认为你必须退一步，看看应该用来让用户能够修改此列表的视觉提示。Chris 向我们解释了齿轮的确切功能。但是，在不知道功能的情况下，你会不会倾向于将鼠标指针移到齿轮上以显示编辑/删除菜单？从 UI 的角度来看，这是正确的想法，但它是解决问题错误的解决方案。我认为应该有一个更强的视觉提示，让用户立即知道他/她可以修改此列表。要么消除齿轮，只使用文本（无聊），要么保留齿轮，让文本在不悬停在齿轮上的情况下显示，要么让一个隐藏的元素在名称后面向下滑动，并提供编辑/删除选项和图形。选择是无穷无尽的，但我认为这才是我们让用户从 A 点到 B 点的方式。
你 *可以* 在不悬停的情况下点击某样东西。你可以使用 Tab 键定位它并按 Enter 键。
我同意。不要把我的 Zeldman 推文包含进来理解为悬停功能应该被放弃，或者在这个项目中甚至不应该尝试。只是应该考虑它。
所以，实际上它只需要有一个可靠的回退，正如 Kevin 所说。
当你在悬停某样东西时获得额外的信息时，视觉反馈才是有用的。我在评论中看到的悬停功能的实现，在第一次悬停后没有提供任何额外的信息。一旦你将鼠标悬停在一个列表项上，你就已经看到了所有内容。所有其他项将一遍又一遍地显示相同的编辑/删除/… 功能。重复？
当用户想要与列表项交互时，他首先要做的事情就是点击它。此时应该为他提供查看、编辑或删除它的选项。
除非悬停提供有关悬停项的额外信息，否则它将非常无用。
为“移动设备”提供一个回退是好的吗？它们不是增长最快的市场吗？如今，越来越多的台式机触控屏出现在货架上。
增长最快的市场 != 大市场
你完全可以有两个图标，而不是只有一个放在顶部或底部。一个铅笔图标表示编辑，一个 X 表示删除。就像 Herhor 说的，这些图标可以变成保存按钮。
另外，你可以直接将悬停改为点击来显示编辑/删除按钮，而不是悬停。
我同意凯文·斯威尼的观点。
对于这种功能，悬停是支持悬停设备的完美干净的解决方案。对于其他设备，提供回退应该不是问题 - 即使这意味着编辑/删除图标始终对它们可见。
不使用悬停，因为一些设备不支持它，就像不使用 CSS，因为有些人使用屏幕阅读器一样 ;)
不使用悬停，因为一些设备不支持它，就像不使用 CSS，因为有些人使用屏幕阅读器一样。
说得太好了！
我喜欢这条评论
“不使用悬停，因为一些设备不支持它，就像不使用 CSS，因为有些人使用屏幕阅读器一样”
但我认为它不完全正确。我的意思是，屏幕阅读器不像 iPhone、Android、iPad 和其他不支持悬停的设备那样多。而且，这种设备市场正在呈指数级增长，而使用屏幕阅读器的人数却没有增长。
我认为这个小组项目的重点是看看我们如何解决未来的问题。它是为了扩展和试验可能性，而不是试图找出例外情况。
仅供参考
我认为 Google 阅读器的方法是解决这个问题的最佳方式。我说的是左侧的订阅列表。在不悬停的情况下，它只是一列链接。当您将鼠标悬停在某个项目上时，会出现一个向下箭头，点击该箭头即可获得该项目的菜单。
对于没有悬停功能的触摸设备来说，这不是理想的，但可以推测谷歌已经为这些设备提供了不同的界面。我认为悬停是一个非常有用的工具 - 它不是错误，但我们应该意识到它并不适用于所有设备。
我认为，努力让一组操作（例如，编辑/删除）根据用户选择的数据行（无论是点击还是悬停）出现非常重要。我发现，根据 CMS 的不同，你可能会有很多操作，而不是只有 2 个操作，因此，保持你的选项开放，以便找到一种易于支持其他操作的解决方案，这是理想的。
让操作作为工具提示气泡出现在数据行的正上方怎么样？这样，操作就不会离指针当前位置太远，并且该行的數據仍然可见。
我完全同意杰西卡的观点，事实上，在我看到她的评论时，我正在写类似的评论 :)
对于只有 2 个操作的情况，保持简单，X 和铅笔图标应该足够了，你不需要其他东西。但我不同意每个元素的保存按钮（也许整个列表的全局保存按钮会更好？）
但是，如果操作的数量可能增加，这就不再适用......
我不太理解为什么每个人都试图为移动设备和普通设备制作一个版本……如果你有一个网站/应用程序具有如此花哨的功能，例如内联编辑，那就为移动设备构建一个第二个版本。
对于普通浏览器来说，悬停是添加半重要操作的绝佳方式，这些操作会破坏布局。如果你真的想在这样的页面上覆盖 iPhone（/类似的设备），让这些元素始终可见，并构建一个使用 iOS 方式的第二个版本 - iOS 方式用手指使用很方便，但在我看来，用鼠标使用就很糟糕了（用手指滑动删除？很棒，但用鼠标？不行）。
说点有用的
在不使用 iOS 方式（顶部编辑按钮）的情况下，覆盖这两个世界的最佳方式是双击一个元素进行编辑，单击一次触发链接，按住删除（并提示）。但是，你需要在列表上方解释这种行为（必须通过点击关闭的覆盖层）。
我自己也说不出更好的了。
我对使用双击实现额外功能有一些顾虑。我经常在阅读东西时双击（这是一个习惯，我用它来标记阅读位置），当它强迫我执行其他功能时，我总是感到很沮丧（我指的是你，字典定义……）。
也许，如果它只是和悬停一样（显示 2 个编辑选项 - 我认为你建议的是这样），但将选项锁定，以便在停止悬停后它们仍然存在，并在点击行外部时消失。
但是，如果不能通过行的图形设计本身来解释这种功能，对用户来说可能非常烦人。如果我每次访问网站都必须关闭一个覆盖层，我就不太可能经常访问该网站了。
如果你的 UI 需要在人们开始使用之前进行解释，那么它已经失败了。
你想要怎么设置样式都可以，但这是最简单、最明显的解决方案。
http://jsbin.com/obusi3/6
为什么你对台式机和移动设备采用相同的策略？我认为，当客户端是台式机浏览器时，使用悬停没有问题。当它是移动浏览器时，我会希望作为用户，可以使用点击而不是悬停，或者可以使用某种列表编辑模式。
我真的看不出重复功能设计元素有什么问题。我们往往坚持可用性和最佳实践，而忽略了人们习惯的东西，而习惯的东西往往是最有效的。这绝不是一个应该从全局角度提出的问题。有很多解决方案（应该有）。
如果我正在构建一个界面，它的目标用户是典型的白领，使用 Excel 电子表格的狂热用户，那么我将使用重复的功能元素，以表格结构进行构建。对于更精通技术的用户或移动应用程序，我将在点击时构建滑动元素的过渡，或使用悬停弹出窗口。
与任何设计一样，应考虑目标用户、复杂性（如果有 10 个功能会怎么样）以及界面将如何使用 - 是人们会花很多时间使用的东西，还是人们快速访问并想快速浏览的东西。
我认为最简单的方法之一（我很惊讶它没有被提及）是，你已经将列表显示为一列链接。用户知道这些是链接，因为它们应该被设置为呈现这种想法。
只需要允许用户点击用户名，然后弹出一个“编辑/删除”模式对话框。
如果链接当前链接到个人资料页面，则让它继续链接到那里，但如果你有编辑/删除的权限，那么所有可以编辑的显示字段都应该显示为输入框，并填写其值，以及清晰显示的编辑/显示按钮。
http://jsbin.com/ayola4/2/
快速而丑陋，但它可以完成工作。我没有时间设置样式。
但我完全忽略了任何删除选项。当然。
虽然我提交了自己的解决方案，但我也很喜欢这个解决方案。
为了简便起见，假设如果文本输入被清除，列表项将被删除。
起初我不喜欢这个解决方案，但现在我正在使用它，它真的很方便。
我知道史蒂夫·乔布斯如果这是 iPad 设置屏幕会同意，但我无法忍受它。感谢你把它列出来，因为之前有人提到它时，我几乎认为这是一个好主意。但是，这种策略让它更令人困惑。如果你点击编辑，你究竟在编辑什么？列表中的第一个人，整个列表，还是包含列表的小部件？这太不清楚了。你可以说点击编辑，然后选择要编辑的人，但现在你又添加了点击操作，而设计的重点是节省时间和点击操作。
我不确定我理解你的意思。这如何添加更多点击操作？这是一个非常简单的概念，阅读完你的帖子后，我意识到它可以为用户节省点击操作。
点击编辑。编辑列表中的任何名称（可以是一个，也可以是多个）。
完成操作后，点击保存。
你只需要点击两次就可以编辑一个或 5 个项目。删除操作甚至不需要额外的点击。在你点击“保存”之前，只需删除你想要删除的名称即可。
添加删除操作，你就可以开始使用了 :)
如何使用拖放功能，这样你只需要在列表底部添加“编辑”和“删除”按钮。当拖放到“编辑”时，它会出现在底部的一个文本框中。拖放到“删除”时，它将从列表中删除。然后，你可以在编辑（绿色）或删除（红色）时使用悬停来识别操作。不需要重复的图标，并且避免使用悬停来实现功能。
我认为这种方法的问题在于用户不会本能地知道他们需要这样做。
克里斯，好主意。我已经在脑海中有了想法。我现在就开始着手！
http://uxmyths.com/post/715009009/myth-icons-enhance-usability
一篇关于如何直观地使用仅图标功能的研究的有趣文章。我同意，如果移动不是主要考虑因素，那么悬停是完全可以接受的。泽尔德曼显然是处于移动状态。
结合想要将最具破坏性的按钮放在最远离焦点点的想法，我将这样做
http://www.designingdotgov.com/examples/list-with-functions/
IE7 中有一个小错误，显示了删除按钮，但我现在不想追踪它。
这完全是一个过于简单的解决方案——因此它可能是正确的！
该死。这正是我要做的，但我昨天不得不工作。:(
不过，我认为对于移动设备而言，这些按钮可以是永久的。
是的，悬停上的功能使它保持干净和整洁。对于这个特定的示例，你可以将名称链接到编辑，删除悬停选项中的编辑，并在上面添加一个标题，写着“编辑用户”。
这样一来，1. 如果你没有看到悬停，你就会有清晰的功能标签；2. 使悬停成为删除用户的快捷方式，无需点击用户，并且是可选的；3. 即使他们不能使用悬停，也并不重要。
我非常想看到桌面为这些类型的功能开发一些标准操作。以下是我提出的解决方案
http://jsbin.com/obusi3/18
它具有交互性，但众所周知，用户希望尽快到达目的地，这对于编辑和删除这样简单的操作来说，点击和移动次数有点太多。
为什么不直接用输入替换文本，而不是使用模态窗口进行编辑呢？
我看到的另一个问题是，你需要查看信息文本才能弄清楚它的工作原理，除非你让信息脱颖而出，否则人们不会知道如何使用它。
这会让他们思考太多。“不要让我思考”:)
我不同意这一点。我认为这次练习的重点是思考如何将新的操作引入这种类型的界面，这些操作在桌面上有效。这就是我处理它的方式。
太多的图标是我的问题，所以添加图标就是解决问题的错误方法。就像我们都知道在 iPhone 上滑动删除一样，我希望人们能够理解，在这里拖走就会删除。
至于模态窗口，我认为这无关紧要，因为它取决于需要编辑的内容。如果只是标题，那么内联替换将很棒，但如果是编辑他们的个人资料，比如，那么模态窗口将是最好的。
好吧，我总是对在网络上引入新的做事方式持怀疑态度，人们已经习惯了一些特定的做事方式。
我没有 iPhone（不认为它有用，lol，我只需要移动设备打电话和接电话），但据我了解，大多数应用程序都以相同的方式做事，并且有一些设计规则，因此用户以相同的方式与所有应用程序交互，而这在网络上并非如此，网络上有很多方法可以实现某个操作。
当你第一次使用 iPhone 时，我认为你会被引导如何使用它，但当你第一次访问网站时，你需要自己弄清楚，所以设计师和开发人员需要尽可能地让它易于理解，否则他们就会离开。
因此，我认为，与其想出新的方法在网络上进行操作，我们应该尝试改进人们已经习惯的操作，例如图标。
这只是我的意见。
你说得对，惯例绝对是一件好事。虽然 iPhone 体验绝对是你边走边学的东西，但对于新的操作来说，它更自然，因为多点触控本身就是一个新的操作。
对于这个特定的挑战，我想通了新的操作，因为惯例似乎在某些情况下造成了问题，在这些情况下，图标或文本链接用于标准应用程序操作项，而 Chris 在他的设置中描述的原因导致它们不起作用。
在合适的场景中（可能是网络应用程序），创建这些新的默认操作可能是一件好事。一旦你的用户学会了它们，他们的体验就会因此变得更好。
是的，如果做得恰当，与网络应用程序交互的新方法可以改善体验和效率，但我仍然更愿意使用他们已经知道的简单方法。
但如果我没有为技术用户或至少是年轻用户（这在当今实际上是一样的）制作应用程序，我不会这么确定是否使用新的、不熟悉的东西，即使它会在某个时候（当他们掌握了诀窍时）改善体验和效率。
有时候，即使是技术用户也无法在没有麻烦的情况下弄清楚它是如何工作的。今天发生在我身上一件有趣的事，我母亲想让我给她看她孙子的照片，这些照片在我姐姐的 Facebook 帐户上。所以我向我姐姐索要了用户名和密码，登录后，我对着那该死的东西看了 5 分钟，试图弄清楚如何进入她帐户的该死相册。最后，我又打电话给她，让她告诉我操作方法，原来我必须转到外部个人资料，然后转到照片。
为什么会这样？好吧，首先，我不使用那台吃时间机器、社交杀手、愚蠢的东西。但主要问题是我希望能够从主页上看到我的照片，它有所有那些糟糕的小部件，却没有办法访问照片，而我遇到的这个简单问题让我甚至不想创建自己的帐户。
结果米歇尔（假名）加入了“如果你不加入，你永远找不到真爱”这个小组，这比账户上的照片更重要。我不明白。
在我开始失去理智，发现自己在 4 个小时后仍在写关于 Facebook 如何在最重要的方面失败的文章之前（我的意见，不要杀死我，Facebook 粉丝）。
所以，回到新的操作讨论。我总是，总是，总是宁愿在每个项目上都有 4 个图标，知道它们是什么，距离我的目标只有一次点击，而不是使用例如交互式拖动删除，双击编辑的概念，这意味着更多的时间和更多的努力。我只是以你的概念为例，没有恶意：)
我知道在 Windows 上，你可以双击文件/文件夹标题来重命名它，并且可以将文件/文件夹拖到垃圾桶来删除它，但问题是 90% 的人（随便猜的）使用 F2 来启动重命名，并使用删除键来，好吧，删除。我们现在不能真的使用这两个，对吧？所以，我们与操作系统交互的方式不能作为与网络应用程序交互的概念。
可能是有史以来最无聊的评论，没有人会读它，但管它呢。提交评论……
波霸，我读了。:)
我尝试着解决这个问题，试图找出在没有可见图标杂乱的情况下，以及没有“悬停显示”解决方案的情况下，实现结果的最佳方法。
PS 我不认识任何人使用 F2 来重命名文件——事实上，这是我第一次听说你可以这样做！
:) 天哪，即使是我，在写完之后也不敢读它，我只是提交了它。
是的，我一直使用 F2，而且我很少用鼠标选择文件/文件夹，我主要使用箭头或字母，我鼠标的里程数真的很低，大部分都来自在线玩反恐精英。我就是不喜欢移动鼠标，也许这就是我不喜欢删除功能（拖放）的原因。:)
或者，也许我非常讨厌移动鼠标，是因为当我不得不移动它时，我不使用鼠标，而是使用触摸板或笔记本电脑上的任何其他东西。
哦，你确定双击重命名吗？我尝试双击桌面上的文件夹标题来重命名它，但它一直打开该死的东西。
波霸：你必须*缓慢*地双击——它更像是“点击两次”而不是“双击”。
我也发现键盘命令非常方便，但我认为我们可能是少数派。人们不再以这种方式学习——一切都以“点击”为导向。
哦，谢谢，明白了：) 慢双击。
但 F2 才是王道：)
如果你真的讨厌点击太多，你会喜欢我的解决方案。它可以完成所有操作，查看、编辑和删除，只需点击一次！是的，你没看错，一次点击！向下滚动到我的评论，或者直接访问 http://jsfiddle.net/7y8Bx/1/
嘿，不错的解决方案！我在制作自己的解决方案时没有看到它，它与你的解决方案几乎相同……
http://jsbin.com/obusi3/79
双击 = 编辑
将文本转换为可编辑的、预填充的文本输入……“模糊”以接受更改。（会考虑使用 ESC 取消编辑模式，使其保持在进入编辑模式前的状态）
按住并拖出父级 = 删除
创建一个克隆的拖动实例，如果将其移到父级的边界之外（用红色边框表示），则会将其从列表中删除。（会考虑在这里也使用 ESC 取消拖动）
我选择这个。
对于触摸屏来说，这可能是最好的选择。
+10
我做了一个小例子。
http://jsbin.com/obusi3/20
图标的透明度为 0.2，当将鼠标悬停在列表项上时，透明度变为 1。
1) 是的，Sarah 说重复图标是不可取的，但它们几乎不可见（但仍然可见，因此用户可以理解），因此它们在视觉上不会让人感到厌烦。
2) Zeldman 应该会对这个感到满意，不需要悬停即可看到图标。
我看不出这个有什么问题，它简单有效。
我喜欢它。我只是想看到针对简单、常见任务的操作，以便右侧可以留出空间用于表示网站或应用程序中更特定任务的图标。
谢谢。
在我看来，如果一个应用程序包含删除和编辑选项，它们与那些特定任务一样重要，因此应该将它们放在同一个区域，并且由于图标很小，所以这应该不是问题。
现在，如果一个选项不能用这样小的图标轻松描述，那么 alt 标签会帮助他们理解，或者由于那些 alt 标签工具提示很难看（在我看来），一个漂亮的 jQuery 工具提示就能解决问题。
这只是我的一点想法。
1) 不透明的图标通常表示在一般情况下会存在的动作不可用。
2) 此外，在将鼠标悬停时让图标不透明也会让人分心，特别是在使用触摸设备的情况下，你会上下滑动以滚动列表。
嗨，Chris！
这是我的修改版本。
简单但有效，恕我直言。
http://jsbin.com/obusi3/23/
哇，只需点击“修改”中的列表项即可删除它！这是故意的吗？看起来是一个危险的意外操作，否则我喜欢它。
哇，这太棒了，也许是因为效果。可发现性很好，而且它不依赖于悬停。
http://jsbin.com/obusi3/21/
为什么每个元素上都有选项？我创建了一个单一菜单，当用户点击列表项时，它会激活并定位自己。为了使菜单对每个元素都起作用，我存储了活动 LI 的索引，但这可以是列表项的其他更有用的标识符。
根据我的经验，这是最接近预期的一种简单解决方案，除了无论 Zeldman 说些什么（触摸界面需要不同的解决方案），如果在悬停时而不是点击时，并且按钮在列表项内，它会更容易被发现。
David，预期是，至少对于编辑菜单来说，将只有与该列表项相关的內容。你可以通过 AJAX 将该內容加载到一个容器中，或者你可以将它放在每个 li 中。对于像这样的小例子来说，这可能没有太大区别，因为重点是界面设计。
描述中没有任何地方说明编辑菜单会因元素而异；因此，我认为我的推理是合理的。
感谢你的评论。
这只是一个概念证明……有 bug ;)
这是另一个想法（双击一行）
http://jsbin.com/obusi3/26
我不喜欢你的解决方案，因为它需要用户额外点击（实际上无用）。恕我直言，这对用户来说很烦人，尤其是当他/她需要连续编辑几项内容时（比如点击，点击编辑，编辑，返回页面，重新点击，重新点击编辑，等等）。
我最喜欢的解决方案是在悬停时使用透明度。
非常刺激的主题和讨论 :)
好主意，但这在 iPhone 上行不通……确切地说，它在 iPhone 上行不通，我刚刚检查过。
Jay 的解决方案非常有趣。
我看到一个问题，你把图标分得太开了，我想它们最好的位置是尽可能靠近修改按钮（移动越少越好），因此在这个例子中，它们都应该在右侧。
我看到的另一个问题是，你需要让修改链接突出显示（就像你在这个例子中做的那样），以便用户注意到它，这首先将修改功能置于首位，如果用户的首要目标不是修改，那么这可能会分散他的注意力，使其无法完成首要目标。
你可能会得到很多过度设计的解决方案。这是一个纯 CSS 解决方案。
http://jsbin.com/edibe4
如果我误解了整个原因，那么我事先道歉。
我理解，这个概念应该是这样设计的，用户可以不用将鼠标悬停在上面就能理解可以编辑/删除这些项目，而你的概念需要悬停。
“假设设计是针对网络的，同时要考虑移动网络体验。”
移动设备不应该获得相同的体验/代码，恕我直言。移动版本可以获得一个单一的右侧图标（比如 Chris 的齿轮图标），当触摸/点击它时，它会将你带到另一个屏幕，你可以在同一个页面上编辑或删除条目。当你保存或删除条目时，你将返回到列表页面。
这是一个双重版本，webkit 浏览器获得模拟的移动版，FF 和 IE 获得桌面版。
http://jsbin.com/eteme4
悬停比点击更容易“发现”……想想看。许多提出的解决方案都没有显示出可编辑性的证据。至少在悬停时，你可以轻松地找到目标。链接的“下划线”暗示了动作。
是的。不错，简单、预期、可发现、可用。
喜欢所有关于用编辑和删除功能处理项目列表的不同想法，并且发现为用户提供某种指示绝对有所帮助。LT
我一直很喜欢 Mac 风格的按住鼠标按钮以显示上下文菜单的想法，所以这是我的尝试。
http://jsbin.com/ewiti3/3
只需点击并按住一行，就会显示“编辑”和“删除”按钮。这有点 hacky，但你明白了。我在 Chrome 和 Mobile Safari 中进行了测试。
这可能并不明显，但如果你用这种模式构建了整个应用程序，它可能就可以正常工作。
我本来想写一些类似的东西，但总的来说，这就是想法……
啊，在我看来，这个不太好用。
我认为期望用户知道按住列表项上的鼠标按钮很奇怪。首先，没有任何迹象表明你的列表可以编辑，更不用说需要按住它一段时间了。
与其他解决方案一样，这个解决方案需要点击两次才能完成操作。
怎么样才能像苹果一样，用一个单独的按钮进入编辑模式？然后，您可以通过点击文本进行编辑，它会变成一个文本框（可能是可编辑的？），您可以通过拖放排序，也可以通过按下关闭按钮删除。重复图标不好的原因是它很分散，如果它们只在用户关注列表时出现，那就没问题了。
这个问题非常有趣，我真的很享受尝试解决它。我找到了一个这样工作的解决方案
– 如果是支持悬停的设备，则通过 CSS 在悬停时显示每个项目的工具。经典。
– 在 javascript 中，我实现了简单地显示/隐藏触摸设备列表项点击时的工具。
– 之后，我尝试检测 body 元素上的悬停，如果触发，则解除绑定列表项的点击事件。
– 我还添加了一个小的“帮助”用于触摸设备用户。它显示类似“点击列表项以使用工具”的信息，并在 body 悬停时隐藏。这部分可能可以做得更优雅，但我只想展示原理。
我没有完善工具部分或实现从列表中删除项目或内联编辑名称，因为我认为这并不是问题的实际部分。你可以看看 http://jsbin.com/obusi3/36/
这是我自己的，所以使用 css
简单
http://jsbin.com/obusi3/44/edit
对不起
http://jsbin.com/obusi3/47
说真的，我会用一些 JS 和 jQuery 来做……
http://jsbin.com/obusi3/54
适用于 iPhone，而且看起来不错
我认为这是显而易见的方法……
可以更好，但是……我能在几分钟内做到的最好的 :D
http://jsbin.com/obusi3/57/
我喜欢。喜欢你的内联编辑代码。
条目 @ http://sandbox.syntaxmonster.net/uilist/index.html
我在这页上记录了一些关于这里使用的内容的笔记，因为我实际上去问了我另一半，征求她作为不使用电脑的人的意见！她绝对是以与我不同的方式做的，但现在看看。我喜欢它的简约设计。
这个也不错。
我会把添加按钮放在底部。
（或在右边，但仅当在两行之间插入新行时。）
并且已经用一个中立的人测试过了 [(一个非技术导向的生物)]
我也这样做，但对我来说并不理想，因为我在一个项目中工作了一周，然后当我展示给她时，她就像，“嗯，这很好”。
这是我在阅读本文后想到的
http://jsbin.com/obusi3/60
一个简单的编辑模式，它将所有列表项变成文本框，并在每行旁边显示一个删除图标。当然，在现实中，它不处理链接的去向，但那可以只是第二个文本框。
完成编辑后，您可以关闭编辑模式，就完成了！
有点像这样。
不错，但如果齿轮图标变成“保存”会更好。这样就可以清楚地知道如何保存编辑后的数据。
我的问题是，为什么你要让比如 PC 用户多点击一次才能显示编辑选项。她有鼠标，所以我们最好利用这个事实，因此使用悬停事件。
这是我的尝试！
我认为讨论的焦点是悬停还是不悬停，几乎所有人都忘记了最简单的 UI 元素：复选框！
http://jsbin.com/udama4
有趣的看法，Marcelo，虽然我认为单选框会是更好的选择（或单个选择复选框列表）。这样可以避免一次编辑多个项目的用例。
我认为这就是重点——能够编辑或删除尽可能多或尽可能少的项目。
对于一个小列表来说，这似乎有点过于繁琐，需要多个步骤才能进行更改。
感谢你的反馈！正如 Cory 所说，这就是重点 :)
而且 Cory，这多了一个步骤，但它比其他选项（如双击或悬停）更直观，更常见的编辑方式。我认为这是我看到过的唯一一种方法，用户可以一次编辑或删除多个项目。
天哪，嵌套评论让讨论有点难以跟踪，不是吗？
嗯，嵌套评论是为了让讨论更容易跟踪 :) 也许一个隐藏所有嵌套评论的链接会有所帮助。
但我在此发现了一个小错误，您看到了最后一条评论（我很久以前作为对评论的回复发出的），似乎出了点问题，现在它总是最后一条评论。
这是我尝试实现我认为直观的方案
http://jsbin.com/obusi3/79
双击 = 编辑
将文本转换为可编辑的、预填充的文本输入……“模糊”以接受更改。（会考虑使用 ESC 取消编辑模式，使其保持在进入编辑模式前的状态）
按住并拖出父级 = 删除
创建一个克隆的拖动实例，如果将其移到父级的边界之外（用红色边框表示），则会将其从列表中删除。（会考虑在这里也使用 ESC 取消拖动）
不错的实现
我开始了一个小的演示，我想分享一下。目前，它非常顶层，实际上只显示了如何显示选项。我将进一步完善它，以显示编辑和删除列表项的各个交互。
我认为“添加”功能也值得考虑，所以我也会将其包含在内。:)
http://www.reconstitute.net/demos/css-tricks/editable-lists/index.html
嗨，Kevin
很喜欢移动版本！虽然我期望的是按下文本/箭头后滑出新菜单。但它非常清楚应该做什么。没什么问题。
我个人认为，是的，图标/文本应该可见（您的普通/小版本）而无需悬停，并且在悬停时更清晰。无需点击。点击是为了执行操作，而不是为了仅使操作可用。
我认为这是目前最完整，流程最自然的例子，我会选择它。
谢谢！
哎呀。每个人都在我之前完成了这场竞赛。:)
干得好，Kevin。我认为你会赢。
http://jsbin.com/obusi3/83/
我的解决方案是：点击编辑 - http://css3art.dvp.sk/edit_list/ - 使用纯 CSS。
你会区分点击文本（查看项目详情）和点击其他地方进行编辑吗？
这个问题可以用其他设计技巧解决。这并非本文的主要问题（点击文本）。
我认为双击的概念很有趣，但一点也不明显。很难用图标形式来表示这一点，即使是动画也很难显示操作。这就让你不得不依赖文本描述，这需要用户更多思考。
有人可能想考虑合并的一种方法是，将光标更改为文本选择光标，并使用双击（或者可能单击更好）通过将其变成文本框来切换文本的编辑模式。
再说一次，这真的取决于需要编辑的内容。
它可能需要稍微长一点的学习曲线（想想几秒钟），但双击通过视觉上消除用户众多选项/选择来减轻用户的认知负担，从而营造出简洁明了的呈现效果，尤其是在主要意图是内容消费而不是编辑的情况下。拖动交互更直观，因为它符合大多数人的心理模型。我认为我们不必在每个可操作元素上用小图标来表示所有内容，才能让操作显而易见。如果用户花几秒钟时间阅读一个简短的句子（“只需双击编辑，拖动删除。”）并能够成功地与项目交互，我认为从那时起，他们就可以自由地与内容进行交互（亲自动手），而不是依赖代表性图标的界面充当他们的中间人。
而且我喜欢切换，就像 Peter Druska（我相信还有其他人）发布的那样。我能想到的唯一争论点是需要额外的点击。就我个人而言，如果像客户这样的某人询问为什么做出这样的选择，我会发现这种功能很容易辩护。
我不喜欢将图标分开，因为它违反了接近的基本设计原则（将类似项目放在一起）。在本例中，“编辑”和“删除”都是您可以在列表中的记录上执行的操作。如果您担心会犯错，那么您可以通过设计进一步区分，并在用户流程中添加确认步骤。
这是我的概念（没有代码），它可能解决这个问题
http://www.flickr.com/photos/mrharrison/sets/72157624877563691/detail/
有趣的想法。我可以想象有人不小心删除了东西，如果他们的手指从鼠标按钮上滑开了。另外，您要求他们必须精确地拖动，这会减慢速度。
如果您的手指从鼠标上滑开，这里不会发生任何事情。您需要在图标捕捉到十字准线的活动位置后单击一次，这也使精确拖动成为非问题。
http://jsfiddle.net/daB9C/
我的想法：无需 JS/jQuery 即可运行，但我并不喜欢我的解决方案……太多“删除”按钮。
（只在 Chrome 和 FF 中测试过）
取决于要显示的每个列表项的信息量。
我喜欢展开并突出显示选定的列表项以及“编辑”和“删除”选项。
这种方法确保用户知道他们正在处理哪个列表项。
这是一个快速（粗略）演示 - http://jsbin.com/obusi3/86
我几乎会选择你的解决方案，它是一个带有隐藏内容的列表。使用鼠标或指尖快速编辑/删除。
也许对于没有隐藏内容的列表，我会使用某种指示器，或者类似于这个
http://jsbin.com/obusi3/89/
在我看来，它适用于悬停和触摸界面，非常简单。
说明：编辑部分进行了粗略调整，在 Chrome 中，最近编辑的元素编辑按钮向下移动了：S，我无法弄清楚为什么
我改进了一下我的版本，使其支持多编辑等。
http://jsbin.com/obusi3/94
我刚注意到，由于将“删除”按钮放在“编辑我”按钮的正下方，删除列表中的项目立即被学习为双击操作，当您使用此列表 30 秒后，它变得非常直观。
这可能是这类事情需要牢记的东西。
另外，我不喜欢编辑时的“完成”按钮，太大，应该绝对定位在左侧，但我现在没有时间做更多了。
大家干得好
我在 iPhone 上测试过，它看起来很棒，只是它非常缺乏某个地方的小 x 按钮来清除文本值
PS：这里有不错的自动聊天：p
你好！
这里还有另一个想法
http://jsbin.com/obusi3/90
第一个（带有一些增强功能）
http://jsbin.com/obusi3/92
http://jsbin.com/obusi3/93
如果左边有图标，我根本看不到您的图标。
嗨，Jason！
双击一行时，该行会向左滑动，并出现两个图标 + 取消链接。
它在我的所有浏览器上都能正常运行。
当我单击所有示例的“修改”时，我得到以下内容：http://drp.ly/uWx3
我不明白
结果是：http://img210.imageshack.us/img210/1812/csst.png
图片只是需要一点时间加载。
我喜欢这个解决方案。简洁明了。
看起来不错，但我认为有两个缺点
1) 我不喜欢任何双击选项，它很难发现，而且肯定会导致来自困惑的客户的电话。
2) 控件会滑过内容。这样，就更难双重检查要删除的内容。
对于桌面设备来说这是一个不错的解决方案，但在 iPhone 等移动设备上根本无法使用……我刚试过。
虽然我认为它是目前评论中看起来最好的解决方案。
您好，
这是我的版本：http://jsbin.com/umagu4/2/
就像 iPhone 一样（编辑和删除按钮）。
甚至还有一些不错的 CSS3 渐变 :)
希望你喜欢。
来自德国的问候！
Jonathan
我非常喜欢这个，它解决了大多数问题，而没有造成太多新的问题。
执行得很好，Jonathan。您可以进一步改进的一种方法是在您单击“编辑”按钮时立即将焦点应用到文本字段！
我也认为 iPhone 列表方法是最佳选择。
– 它完成了任务，而且做得很好；
– 大多数人都熟悉它，如果没有，它也很直观；
– 不需要悬停状态；
– 仅在编辑模式下重复图标；
– 只能在编辑模式下删除东西，因此在查看模式下不会出现意外删除。
仅供参考。
忘记提了：它不需要单独的桌面和移动解决方案，它对两者都同样有效。
感谢您的评论。
我更新了我的版本，添加了焦点想法。
现在它非常适合 iPhone
http://jsbin.com/idemu3/
最后一个（我保证，最后一个）
iPhone UI 风格
http://jsbin.com/obusi3/96
（不是我最喜欢的）
这只是我正在考虑改变职业并只为乐趣而开发的原因之一，因为我们通过像 Zeldman 这样的推文使事情变得困难。
你怎么能说悬停是一个糟糕的主意？请解释一下
悬停效果本身并不是一个糟糕的主意，问题在于市场上越来越多支持互联网的设备没有直观的方式来原生支持悬停，即没有鼠标/指针的移动设备，因此如果您的应用程序的主要功能依赖于此效果，那么它对移动用户来说就不太容易访问。
不过，我认为这是一个供应商问题，而不是开发人员问题，因为悬停效果是一个 W3C 标准（并且已经存在一段时间了），应该由设备和浏览器供应商来实现支持标准的浏览器，并提供合适的回退机制。
虽然移动设备对于很多东西来说都是一个非常重要的市场，但不要忘记它占浏览量的 < 或 = 1% http://gs.statcounter.com/#os-ww-monthly-200908-201008
如果应用程序面向移动设备，功能不应依赖于悬停状态，因为触摸设备没有悬停状态。
没人说悬停是个坏主意。
好吧，是的，实际上他们（Chris）确实说这是一个坏主意。特别是考虑到触摸界面（iPhone）没有悬停功能。
我敢肯定 Chris 正在总结他评论上方来自 Zeldman 的引用。“只有悬停时才显示的功能”，这与“悬停很糟糕”完全不同。
我对这个的看法借鉴了一些 iPhone 风格。您点击顶部的一个按钮，上面写着“编辑”，它会在所有要删除的项目旁边添加一个减号。然后，如果您点击某个项目，就可以编辑它。
我还没有在移动设备上尝试过，但我假设这应该相当简单。无论是在桌面浏览器还是移动浏览器上。
http://jsbin.com/obusi3/101
我对“带有功能的列表”的看法.
它遵循“不重复功能性设计”和“悬停时没有功能”。
点击链接以关注它 :)
点击列表项中的任何位置以进入编辑模式，新值将在失焦时保存。如果新值为空，则列表项将被删除。
唯一的问题是：它的工作方式是否显而易见？:)
我不想不得不擦除它，并希望它保存为我的删除选项。而且我担心单次点击编辑模式与单次点击链接以访问链接之间的区别。我认为存在误触的可能性（尽管对于双击操作来说也是如此，因为许多老用户仍然双击链接）。
我认为本文的重点是鼓励人们摆脱标准的设计模式（双击、悬停等），并尝试创造一些不同的东西。
当然，从可用性的角度来看，我的演示失败了，因为用户可能会点击链接而不是进入编辑模式，反之亦然，但同时每个功能都“一键搞定”。
此外，恕我直言，它不是关于创建“一刀切”的版本，而是关于“这个版本完美地适合我的情况”。
顺便说一句，我修改了我的演示 :)
http://jsfiddle.net/Lzss5/130/
@r3d：当您谈论设计时，创造力很好，但设计模式是另一回事。人们期望看到某些东西。如果他们没有立即识别出某些东西的工作原理，或者难以掌握，那么他们就会不喜欢它。
UX 小组一次又一次地证明了这一点。
我认为这篇文章的重点是找到一种每个人都能立即/优雅地理解/使用的最佳方法。
我认为对于简单的列表来说，切换选项是最好的。它很容易发现，每个操作都清楚地标记，不依赖于悬停，并且您可以执行批量编辑。
但仍然存在一些问题。
1) 当内容非常宽，操作（编辑 - 删除）出现时会发生什么？内容是否重新流动（可能在新的一行）？或者它们是否漂浮在内容之上？
2) 如果您想编辑单个项目，则需要额外的点击（但我可以忍受这一点）。
但是，它对更复杂的列表有效吗？在 CMS 中，您可能会有多行操作的列表，例如移动、创建子项、编辑、删除和状态（活动/非活动）。悬停可能是一个选项，但重新流动将是一个更大的问题。也许是下一个群体设计产品的想法？
这是我的
http://blog.pressedweb.com/demos/list_design_pattern/
参见 Chris 的简短说明（来自上面）
“所以重复的图标很糟糕，悬停功能也很糟糕。这真是让事情变得更难了！”
嗯，我认为 Chris 只是在寻找最佳的设计模式。他只是在暗示专家遇到的问题。
试试这个
移动版（解决了悬停问题） - http://blog.pressedweb.com/demos/list_design_pattern/mobile.php
网页版（解决了重复图标问题） - http://blog.pressedweb.com/demos/list_design_pattern/web.php
我喜欢它们。我真的喜欢。但是（这是一个大问题），它没有解决提出的问题，这就是这整个页面发布的原因。如何在不重复图标的情况下优雅地完成它，并且消除对悬停的需要？...在同一个解决方案/GUI 中一起完成...
至少这是我对简短说明的理解。
从顶部数第五条评论
“…不要因为我包含了 Zeldman 的推文就认为应该放弃悬停功能，或者在这个项目中甚至不应该尝试。只是应该考虑一下。” - Coyier
是的，我刚看到他强调了这一点。但它仍然说它是“糟糕的”… 因此，如果您可以避免它，那么从普遍性的角度来说，它将是“好的”，或者至少是“更好的”。
这是我尝试的结果。如果我做的事情已经被做过，请原谅我，我没有时间查看所有以前的演示。使用 jQuery 完成。
http://jsbin.com/obusi3/110
添加了一些功能。我知道这不是遍历 DOM 的最有效方式，但我还在学习。
http://jsbin.com/obusi3/115/
我对可编辑列表的想法
Picasa 网页相册上的图片
这只是一个图片表示，因为我最近的编码很糟糕，虽然我的图片创建也同样廉价 :-)
笔记
* 使用表单框添加新条目。
* 将现有项目拖动到表单框中以编辑条目。
* 将现有项目拖动到底部以删除条目。
问题：此设计在较长的列表中将失败，除非编辑和删除区域固定到视点 - 否则您可能需要滚动很长时间才能到达顶部/底部。
受到 Apple 在人机界面指南中所说内容的启发
“在此操作的第一步中，用户会在屏幕上看到所需的对象。在第二步中，用户选择或指定该对象。在最后一步中，用户执行操作，无论是使用菜单命令还是通过鼠标或其他设备直接操纵对象。”
这是我的作品
http://jsfiddle.net/MG2XE/1/
我确实喜欢 Raspo 的作品。
嗨，
这是我的尝试
水平左右可拖动
使用 Jquery UI Draggable
（@Miles Harrison：喜欢带垂直滑块的图片设计）
喜欢这个。聪明且直观。
我也有一个类似的想法：http://jsfiddle.net/wkERr/3/
v 0.2
http://jsfiddle.net/R9kbF/
.3
稍微加了样式的版本。
（删除了 confirm()）
待办事项
– 添加已删除项目的查看功能。
– 真正的编辑模式
– 完全不同的东西
你们知道如何在不使用 .draggable() 函数的情况下，鼠标按下时禁用文本选择吗？
我真的很喜欢将所有项目选项都放在触手可及的位置。但我不想把东西拖来拖去。
我不是移动设备用户，但我认为，当使用触摸屏时，这种拖动设计将存在一个非常明显的问题。
假设您有一份包含 100 多项的列表，您希望在手机上显示，您将需要能够滚动浏览该列表。
我不确定大多数设备是如何做到的，您是否只是上下滑动屏幕，或者侧边有一个滚动条需要您使用？
使用滑动时，设备如何知道您是想滚动列表，还是在放下手指时拖动某一项？
当使用滚动时，您的屏幕会因另一个侧边栏而变得杂乱无章。
请看看我的 拨号器原型。它使用拖动，在只查看列表时不会使屏幕变得杂乱无章。
与其他拖动设计一样，我仍然需要找到一种方法，让移动设备清楚地知道，当手势开始时，我想要滚动还是操作某一项。双击并按住，点击次数太多。点击并按住，1 秒后弹出选项？这会导致交互延迟… 我仍然需要解决这个问题。
我已经解决了选择问题。如果有兴趣，这里有 新的 Fiddle。
我认为，在使用触摸屏时，这种拖动设计会存在一个非常明显的问题。
使用滑动时，设备如何知道您是想滚动列表，还是在放下手指时拖动某一项？
我相信肯定存在问题。
在我的设计方案中，我假设操作是在水平拖动时触发的，同时您仍然可以垂直滚动。
关于可拖动，我想您可以管理拖动释放，如果……您能吗？……需要深入研究一下……
等一下。
您用两只手指滚动，这相当于鼠标滚轮。
只需要任何触摸设备的多点触控支持。这很快就会实现。
能得到触摸设备高级用户的建议会很好。
“能得到触摸设备高级用户的建议会很好。”
这确实会有很大帮助，因为我没有支持触摸的设备来测试我的设计。
我担心触摸设备会遇到的一些问题：
- 拨号器与滚动冲突
- 手指遮挡拨号图标（我已经在拨号器的底部去掉了 90° 的区域，因为您的手指无论如何都会遮挡这个区域）
- 平均触摸屏是否足够灵敏，能够支持这种交互
如果您想进行自己的调整，请先分叉 Fiddle。否则我的更新编号会变得一团糟。
实际上，我的手机对悬停功能没有任何问题。我有一部 HTC Aria（运行 Android，但这无关紧要），它有一个光学轨迹球，就像鼠标一样，但您也可以在想要显示悬停的区域“长按”。当然，其他手机没有这个功能，因此我同意在制作 UI 时应考虑在悬停时显示它。我仍然认为不应该放弃悬停，它是一个很棒的极简主义工具，通常没有比默认显示更好的替代方案。
这是我的版本。
我尝试制作一些更动态、更易于使用的东西。
编辑和删除按钮正常工作。
http://jsbin.com/amequ3
我喜欢这些效果，但是如果有人真的想点击链接怎么办？
是的。我正在努力寻找更好的进入编辑模式的方法。
我认为同时编辑整个列表不是最好的方法。我正在努力寻找更好的按钮位置，缺少的取消编辑按钮，以及设计方面的内容。
我希望 Chris 在我发布新版本之前不要完成这项工作。
好的……新的版本：http://tinyurl.com/24z7vgg
（滚动到底部即可查看最后 3 张照片）
这是一个有趣的语义问题，因为我们显然正在处理列表数据，但“编辑”和“删除”功能需要可访问且语义上放置，实际上并不属于该数据集。一开始，我反对将这些功能作为列表嵌套在每个单独的姓名列表项下面，但鉴于它们是该小程序的主要功能之一，这可能是最好的方法。
我认为这里有些人说的可能是对的，除非您是 37 Signals 或足够大的人，能够向所有忠实用户解释自己，否则偏离标准惯例会让您陷入困境。
我遇到过这样的问题：我有一个列表，但操作太多，因此图标非常拥挤。我认为依靠悬停来显示操作也存在问题。
因此，我认为顶部唯一的“编辑”按钮（它切换到编辑模式，让您对每个列表项执行操作）可能是迄今为止我所见过的最直观、最简洁、最可靠的解决方案。
http://tinyurl.com/256ep37
它有点卡顿，但可以满足所有意图和目的。
解决方案很简单，它不使用任何悬停，也不将单个编辑按钮组合到所有条目中。
相反，它基于突出显示您要更新的词。它现在有点卡顿，因为如果您只突出显示一半的单词，您只能编辑那部分。此外，有时在突出显示后，您需要点击它，我有点喜欢这样。
但它完成了任务，我可能会在某个地方实际使用它。
只使用一次，但很棒 ^^ 我没想到会为了编辑而突出显示……
对我来说，它可以重复使用，只需要点击突出显示的部分。无论如何，那都是可以改进的东西。谢谢！
我的错 :D 我没有理解您真正想做什么 ^^ 棒极了！
一个小时的工作时间，
我仍在尝试绑定删除和修改… 我将在今晚或明天继续完善它。
http://jsfiddle.net/zjz9N/3/
欢迎所有评论 ^^
我刚回到家 ^^ 更改列表
– 添加了删除功能
http://jsfiddle.net/zjz9N/4/
我仍在完善修改… 这家伙很难设计…
嗯，我快接近最终版本了… 仍然需要完善按钮，以便显示/隐藏它们。
更改列表
– 为表单添加了向上和向下箭头
– 条目完全可编辑和可移除
– 如果鼠标离开，清除表单（如果鼠标进入表单，则触发）
– 优化 JS 代码
http://jsfiddle.net/zjz9N/15/
欢迎任何想法 :D
http://www.devseo.co.uk/examples/chris-coyier-example/ – 这是我的尝试。简单的“点击激活”功能，只需点击链接。然后您可以更改文本并更新，或删除此人。
我认为，由于事件绑定到链接，人们很可能会意识到点击链接会执行某些操作。如果启用了 JavaScript，它会在顶部放置一个不错的模态框，让您进行更改。
如果没有 JavaScript，您只需将其链接到编辑功能。我在我的 iPhone 上测试了它，运行良好 :-)
我认为，作为改进，您可以淡出整个屏幕，并将可编辑部分保留为“非模态”。我将在以后实现它，然后再次发布！
很棒，但我发现了一些错误
– 您不能修改条目两次
– 如果您尝试修改一个条目，并且您点击了另一个条目，按钮将在两个条目上显示
– 您无法添加条目（虽然我不确定是否有必要…）
除此之外，做得很好 :D 我无法使用图像，因为我使用了 JSFiddle。
我认为我现在已经修复了所有错误，感谢您发现它们！这表明我在上面花的时间很少 :-S
http://www.devseo.co.uk/examples/chris-coyier-example/
我将在以后看看如何添加添加更多列表项的功能
http://jsbin.com/obusi3/126/
好吧，我发誓这是最后一次尝试了。（但话说回来，我半夜会醒来，突然想到一个更好的主意）
我喜欢这种挑战，发现它们非常有用。
我希望我的设计能够拥有简单的用户级别、项目灵活性以及简单的功能。
希望我做到了 :D
界面相当直观（可以添加一些额外的样式或更大的按钮），而且所有的功能都正常运行，这很酷。不过，从用户的角度来看，我发现没有明显的“保存”或退出编辑名称的方式。最后我意识到只有在你编辑了名称并失去焦点后才会“保存”，但如果你没有编辑你点击的名称（比如用户只是随意点了一下），就没有办法退出编辑模式。我认为，一旦你加入这个功能，它就会非常稳定。
这是我的版本，在 Firefox 中效果最好，由于时间原因，我没有在其他浏览器中进行测试。
干净列表
我修正了一个我脑子里思考了很长时间的概念的原型。它离完成还很远，但我认为它足够实用以证明其有用性。
我并不确定该如何描述它。我只是称之为“拨号器”以便给它起个名字。但闲话少说，就像任何好的 UI 一样，使用它应该不需要任何解释，所以点击开始吧：JSFiddle
就像你们大多数人会注意到的那样，在尝试“拨号”时选择文本真的会破坏体验。如果有人知道是否可以通过某种方法禁用文本选择，请告诉我。这将是一个巨大的改进。
为了说明清楚，三个拨盘分别代表：读取、更新（编辑）和删除。所以我唯一缺少的就是创建功能，使其成为完整的 CRUD 操作。
我的未闭合链接标签自动闭合了，太棒了！
对于这里所有讨厌点击的人，看看我的 JSFiddle，你会感到惊讶。 只需点击一下就可以查看、删除和编辑！
不错！
我成功解决了选择问题。如果有人感兴趣，这里有 新的拨号器 v0.2，尽情享受吧！
目前唯一有效的操作是删除，为此我添加了一个确认框以防止意外删除。
其他操作尚未实现。我认为我会让它们保持开放状态。它们的实现取决于列表中的内容。我假设你不会仅仅把人们的名字放到列表中。我会尝试发布一个示例来说明查看/编辑的一种可能方法。
在非 Firefox 浏览器中，拨号器似乎会出现一些问题。所以，如果你遇到了任何问题，请尝试在 Firefox 中查看。
很棒！在 Firefox 中看起来非常棒。
我在想，也许
-快速点击触发操作
-持续点击几毫秒后出现拨号器
但也许，这样就可以了。
我还发现拨号器遮挡内容有点令人困扰，我建议
-更小的拨号器
-拨号器出现在光标上方
加油！
关于拨号器大小
目前我还在使用 PNG，但我计划使用无损 SVG 图像来代替。我所有的插图都是矢量图形，所以这应该不会太麻烦。
一旦将 PNG 替换为 SVG，我就可以根据需要进行任意比例缩放，而不会损失图像质量。这将允许我根据调用拨号器的可拨元素的大小来缩放拨号器的大小，并且它将始终看起来很棒！
关于拖动/滚动问题。
-持续点击几毫秒后出现拨号器
-移动距离大于拨号器大小时释放拨号器
“持续点击几毫秒后出现拨号器”
目前这看起来是最好的解决方案。不过，让我担心的是，它会延迟用户。所以，我还没有完全确定这一点...
“移动距离大于拨号器大小时释放拨号器”
正如你之前提到的，拨号器的大小需要一些微调，使其更小，并与可拨元素的比例相符。
更小的拨号器以及只在绘制的拨号器内释放的限制，将要求用户在选择选项时更加精确。
现在你只需要将鼠标/手指快速滑动到正确方向，而不用担心完美地点击拨号图标。这是这种拨号界面的最大优势之一。你可以随意滑动，只要方向正确，你就会得到想要的结果。
这是我的方法...
http://jsbin.com/eleqo4/2
如果出现问题，请见谅，我刚开始使用 jsBin...
要点
-手势：只点击/轻触（不拖动、双击等）
-颜色语言：绿色表示保存，红色表示删除（带确认），黑色表示撤销（中性）。
-键：ESC 表示撤销，Enter 表示保存。
致敬！
抱歉只填充了三个 LI... 我太懒了... :P
仅在 CHROME 中测试...
更新/修复错误
第一个版本有一些错误。
以下是新版本
http://jsbin.com/eleqo4/4
-之前你需要三次点击来确认删除：点击、删除、确认。现在只需要点击、删除，但你可以在反馈消息中选择撤销选项。
... 这是我的贡献
http://jsfiddle.net/fRD6h/
这里有一个重复的元素，但我认为最终是必要的。在这种情况下，复选框足够微妙，不会造成干扰，但如果你真的想删除某些东西，它又足够明显。
复选框也是我们都习惯的东西。 不要让我思考！
我尝试了一些不同的方法，但最终选择了这种方法，因为它具有以下三个关键功能
1. 轻松编辑一个或多个项目。它切换链接上的 HTML5 可编辑功能。
2. 轻松删除一个或多个项目。
3. 在鼠标和触摸设备上效果都很好。
我知道这个示例目前只在现代浏览器中有效，但它只是一个概念，通过一些额外的努力可以轻松地兼容 IE6。
希望你们都喜欢它，并希望听到你们对此的看法！
如果你正在滚动一个包含 100 多个项目的列表，并且你刚刚滚动到第 101 个项目，并且决定编辑它。你需要再次向上滚动到底部，解锁列表，然后再次向下滚动，寻找第 102 个项目，哦，等等，是第 99 个项目吗？
我们可以使用带有按钮的固定定位的头部，这样问题就解决了。
固定头部，我想不出更好的解决方案了！我真的很喜欢你的方法，至少算得上一些值得竞争的对手！
让我仍然困扰的是，要删除一个项目需要多少点击。1：解锁，2：选择，3：删除，4：再次锁定。
我惊讶于这里发生了多少有趣的事情。大家做的很棒！我计划在下周初对这次活动进行总结，并重点介绍所有有趣的想法。不幸的是，只能有一位获胜者。下次我得准备更多奖品。
我真的很喜欢 Jonathan 想到的方法，我觉得它可以解决我们试图解决的许多问题，而且没有过度使用。它在能够处理 CSS3 的浏览器中提供了很棒的体验，但在旧浏览器（比如 IE）中仍然很好看且功能齐全。这种方法也是台式机和移动设备的单一解决方案，可以通过使用百分比或 em 为基础的宽度进行扩展。
交换“编辑”和“删除”按钮在我看来更直观... 在尝试编辑时，意外删除的可能性更小（我在想移动设备上的粗手指）。如果发生了意外删除，我认为最好提供某种方法来恢复该数据并在需要时进行还原。总之... 这是我对 Jonathan 列表的略微调整版本
http://jsbin.com/ebama/2
很棒的工作！外观和感觉都很不错，而且使用起来很直观。点赞；添加提交更多列表条目的可能性，这将成为我的首选！
我本想快速制作一个我的想法的模型，但奇怪的是，一旦我开始动手，我就开始享受学习 jQuery 的乐趣，以至于我把它做成了几乎完整的东西。它功能齐全，但布局和样式还没有完全完善。我所做的是从标记中删除所有演示内容，并使其可以在同一页面上放置多次，同时将保存的值存储在 cookie 中，并在访问页面时读取 cookie。
这是标记的示例（完整的源代码可以在下面的链接中获取）
http://chartreuselabs.homelinux.org/csstricks-list/list.html
请告诉我你对设计的看法，以及我是否应该对其进行改进。
哇！21 个小提琴，我快接近尾声了……
http://jsfiddle.net/zjz9N/21/
只需要在列表很大时启用控件，这样你就不必返回到开头才能使用它 :D
关于这一点我要说的是（除了真的很喜欢它！），我会在悬停之前使图标更清晰一些，因为在我的显示器上几乎看不到它们 :-)
谢谢 :D
这是早期版本的遗留问题，控件稍微淡化了一些，所以你必须悬停它们才能使用它们。在新版本中，我改变了它的工作方式，但没有改变颜色 :P
感谢你的观察 ^^ 将在下一个版本中添加它。
喜欢那个。
对我来说就这些了 :D
http://jsfiddle.net/zjz9N/25/
我无法再进一步了（我非常喜欢 25 ^^）。可以针对智能手机进行优化，因为它不使用悬停（用 :active 替换为点击，很 fancy :P），但如果列表很长就不方便使用……
进一步升级
– 添加 jQuery 函数以修改 – 滚动到表单，修改然后返回列表项（索引很容易获取）
– 图标……
– 添加链接而不是纯文本的能力，只需要将 indexOf() 更改为获取第二个“<a ”而不是第一个。
– 可能是文本的颜色 :D 色轮时间！
还有其他想法吗？
这个处理起来很奇怪：首先你必须猜猜右上角的这个箭头可能是什么。 “X” 和 “#” 符号选择得也不好——图标会好得多！
抱歉，但由于可用性问题很多，这不会是解决方案。
也许是这样的（只是一个模型，什么都不起作用）
http://jsbin.com/obusi3/134
这里有一点说明：如果列表很长，这些标签/可拖动元素必须在列表滚动时始终可见。
它不依赖于用户自己猜测额外的动作（双击、右键单击等），也不依赖于悬停，这意味着你可以为桌面和移动设备都使用一个版本。
相当不错 :D
没有想到这一点 ^^ 但它能在手机上使用吗？对于 iPhone，持续点击被视为“复制”……其他智能手机我不知道。
不过，很不错 :P
谢谢 :)
至于手机——不知道，只能希望……:) 也许它们使用某种触摸事件而不是鼠标事件。
我制作了一个 PDF，它在这里 => http://cl.ly/60a7e23f3252abe33f9c
这是我想到的：http://jsfiddle.net/Jfcum/8/
将鼠标悬停在每个列表项上都会显示操作按钮，还会在文本下方加下划线，表示它也可以点击。
对于触摸屏设备的用户，相同的功能也绑定到点击/点击每个项目，这使得它对他们可用（在我的 iPhone 上测试过），尽管需要额外的操作。
到目前为止我最喜欢的！它能做到一切，看起来也很棒。干得好！
确实很棒！
我的贡献
http://jsfiddle.net/HAgz5/5/
一些要点需要强调
– 你可以编辑和删除多个项目（对于经验丰富的用户来说很好）
– 按钮出现在列表的顶部和末尾。
– 只使用了四个图标
– 要选中复选框，只需点击项目中的某个区域
喜欢这个想法，让我思考……
这是我的想法：http://dl.dropbox.com/u/6774619/List%20Functionality/test.html
适用于 iPhone 纵向视图……（横向视图只需要更多 css 微调，图像未优化，因此你可能会看到它们在 3G 上神奇地出现）
无限添加。删除空元素并防止添加空元素。内联编辑和多重删除。在 IE 中表现不佳（不过 IE7 最喜欢它，奇怪的是）
只依赖于单击，使其对触摸友好。
哇！我认为这是最好的 ^^
运行得很好，非常流畅，没有执行错误 :D 我的作品要达到这个水平还有很长的路要走……
无论如何，这项工作很棒！希望你能赢！
谢谢 Damien……不用担心，只要花一些时间和练习，就能更容易地将想法转化为切实可行的解决方案。
此外，我还做了一些改进
为浏览器用户添加了键盘快捷键，以便快速更改和创建项目。
对浏览器和手机的可用性方面的一些小问题进行了改进。
空白或空项目会自动删除。
还没有决定是否要解决排序问题。
感谢你的建议 :D
我只是注意到新版本中有一点小问题
– 当你点击修改时，当前值被选中，如果你按下 n（或 N），它会添加一个新行而不是输入新值。
自从你更新后，我只发现了这些问题 ^^
我已经从 jsbin/obusi….学到了足够的 jQuery 知识，它有很棒的文章。你们做得很好。你们已经给了我很多礼物。我希望现在我能成为 jQuery 的入门级高手。:)
如何预选一个项目，并显示所有额外内容。目的是直观地显示，无需阅读说明。
这是一个模型
http://img.skitch.com/20100924-k22tec1u2ujtafursrda2wcuqe.jpg
我没有编码技能，不知道这是否现实。
从代码角度来看，这很容易实现。
你希望那些大的浮动三角形留在最终的设计中，还是它们只是用来做说明？因为我认为给选中的项目一个与其他项目对比度更高的背景和文本颜色，就已经足够了。
三角形，更重要的是箭头，是为了让整个选择器看起来是可以移动的，而且没有哪个项目是预先选中的特别意义。
它应该看起来很明显，点击不同的名称就会突出显示该名称，按钮就会出现。
如果它不明显，那么设计就失败了。
我画的它们看起来有点笨拙。也许可以用更优雅的东西代替。也许只是一个带有箭头和突出显示背景的菱形。
我完成 JavaScript 后会添加一个链接。但我认为 Jim 的想法 非常不错。我认为这个想法也应该使用键盘快捷键。例如，第一个项目已经预选，所有图像都已预先加载（通过 CSS Sprites 减少 HTTP 请求并提高页面加载速度）。
然后，你只需要按下“向下箭头”按钮，它就会选择下面的那个，如果你按下“向上箭头”按钮，它就会选择上面的那个。 1-9 个列表项可以通过快捷键“Ctrl + (1-9)”选择，10-20 个列表项可以通过“Ctrl + Shift + (1-9)”选择。 最后一个项目可以通过“Ctrl + 0”选择[这个特定的和其他奇特的快捷键将在上面的/下面的说明中]。 要选择编辑或删除，一旦选择了所需的列表项，就可以按“Ctrl + 上箭头”选择编辑，按“Ctrl + 下箭头”选择删除。 删除将有一个提示框。 如果你选择编辑，文本将显示在一个文本框中，而不是文本本身。
对于支持鼠标悬停的计算机，可以使用鼠标悬停来显示功能。 比如，如果你将鼠标悬停在列表项上，列表项的背景颜色会发生改变，并且编辑和删除按钮会变得可见。 对于 iPhone 用户，列表项旁边会有一个径向滑块，它的工作原理就像经典 iPod（大约 160 GB 存储空间的 iPod）上的物理触摸式滑块一样。 你可以用手指在径向滑块周围画圆，然后选择下一个项目。 它应该像这样，如果你的手指画了 1/16 个圆的圆周运动，那么应该选择下一个项目。 因此，如果你用手指画了一个完整的圆，那么你将比你画圆之前选择的项目领先 16 个项目（当然是在滑块上）。 对于其他非智能手机，将会有一个版本，在这个版本中，点击编辑按钮会重复出现图标，这些图标将始终显示在手机的顶部（应该实现这一点，以便在所有基本手机中都支持）。
我希望大家都能理解我的意思，也希望我能赶在别人做出这个东西之前把它做完。
列表的 iPhone 版本也应该提供给 Android 手机和其他触摸屏手机设备。
“这个特定的和其他奇特的快捷键将在上面的/下面的说明中”
没有人会费心阅读说明或使用快捷键。 键盘快捷键可能是一个不错的补充，但如果你想让人们使用它们，它们应该尽可能明显。 Enter 确认，Backspace 删除，Ctrl+S 保存。 使用一些需要说明手册才能使用的奇特键组合没有多大意义，你希望你的界面能够开箱即用。
“对于 iPhone 用户，列表项旁边会有一个径向滑块。”
我对这个非常好奇。 是否可以在普通的计算机环境中使用它？ 我希望你能让它工作，这样我就能看到它在行动中！
Android 风格的 http://jsbin.com/obusi3/158
第一次使用的用户怎么知道当他按住鼠标按钮/手指时还有其他选项可用？
也许你可以在普通点击时让编辑和删除按钮闪烁一下？ 这样，用户至少会得到一个线索，表明还有其他功能可用。
根据你的建议，第二版 :) http://jsbin.com/obusi3/160
对我来说，最大的收获是：首先为移动设备设计，然后为屏幕提供一个备用方案。
我同意... 尽可能地为移动设备提供功能，因为它有最多的限制... 你总是可以利用浏览器的功能，而不会阻碍移动版本。
我的贡献
只有 html+css，所以按钮不起作用。
这里有一个[非常厚脸皮*]的例子
示例 1
要点
1. **预选一个项目。** 所有花里胡哨的东西都显示出来，列表的其余部分是清晰的。
2. **没有不熟悉的元素。** 我们知道如何使用按钮。
3. **没有说明。** 我们倾向于在阅读任何东西之前先点击一下，看看会发生什么。
4. **看起来很交互且可预测。** 不用点击任何东西，我们就知道如果点击会发生什么。
做一些可用性测试会很有趣。 找一个没有看过这篇文章的人（最好不是技术娴熟的人），让他们坐在网页前，然后告诉他们编辑列表中的一个条目。 看看会发生什么。
[*向 Chris 道歉，因为我在 scraping 发表文章后不久就拿走了他的代码。]
哇，好方法，对于涉及不同联系地点或位置的列表来说非常棒。
这是我的尝试，它使用拖放来执行操作
它让用户思考实用程序以及他们可以将它们应用到什么地方，而不是
反过来，从而摆脱了多个编辑删除按钮
http://jsbin.com/akora3/18
嘿 Chris！ 希望还不算太晚。 我一直在努力跟上高中的 AP 课程。 无论如何，我已经用我所剩的时间做了这个例子
http://www.exampleforchris.caulfielddesign.com/
我认为，如果我只对列表有一点了解，并且想要编辑，它应该像“点击一个按钮”一样简单。 所以，我坚持使用最基本的点击名称和选项下拉菜单，它们在自己的分区中。 再次点击名称以隐藏你的选项。
对于这些类型的事情，我觉得我们有时做得太过火了。 我们努力地为人们简化某些东西，结果却变得过于复杂。
希望还不算太晚！ 谢谢，
Kevin Caulfield
你好 Chris，
希望提交还不算太晚... 这是我的参赛作品
http://listdemo.igramsey.com/
我使用了标准的编辑和删除图标，你可以看到，点击编辑按钮会显示每个名称的可编辑输入。 整个过程都是用 jQuery 完成的。
注意：列表中的名称也可以通过拖放来重新排序（感谢 jQuery UI）。
有点晚了，但我希望你们还是喜欢它。
http://jsbin.com/ecima3
通过点击右侧的灰色块，功能适用于移动浏览器和桌面浏览器。
桌面设备上的特殊功能
在灰色块上按下鼠标按钮以访问删除和编辑功能。
在编辑或删除按钮上松开鼠标按钮以访问它们。
对于主要功能，请点击链接的名称（Jimmy Rockysocks、Suzy Sandstorm、...）。