UI 最佳实践问题：取消按钮或取消链接
我与一位同事讨论了表单中取消的“网络标准”是什么。在我们的讨论中，我们以“更改密码”页面为例。我们设计了“发送”按钮和“取消”按钮。两者设计相同。
他声称，在网络标准中，取消按钮不再是一个按钮，而是一个将用户转移到另一个页面的链接。在我看来，对于那些包含取消按钮的页面，它实际上是一个取消按钮，它可以重置表单和/或将用户发送到预设置页面。
谁是正确的？链接或按钮...或两者兼而有之？为什么？与决定此类标准的地方有任何链接吗？
兄弟，
Paul Peelen
编辑 我猜得票最多的答案就是“正确答案”？
I have a discussion with a colleague about what the "web standard" is for canceling in an form. In our discussion we have a "change password" page as example. We have a designed "send" button and "cancel" button. Both the same design.
He claims that in web standard a cancel button is no longer a button but a link transferring the user to another page. In my opinion, for those pages including a cancel button it actually is a cancel button which either resets the form and/or send the user to the prevision page.
Who is correct? Link or button... or both? And why? Any links to where this kind of standard is decided?
Br,
Paul Peelen
EDIT
I guess the answer with most votes will be the "correct answer"?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
这是针对这个问题的一些实际的初步研究，我不会在上面添加任何主观意见...
初级和初级Web 表单中的辅助操作 - 可能是我对这个问题遇到的最好的研究
重置和取消按钮 - 2000 年的一篇文章，指出重置功能是有害的，而取消功能通常是不必要的
确定–取消或取消–确定？ - 坚持标准顺序有助于可用性
我能给出的最佳答案 - 测试两者，看看哪一个效果最好。
顺便说一句，我不会称其为“Web 标准”，它对前端 Web 技术（HTML、CSS 等）有意义，我会说“UI 最佳实践”更适合。
Here is some actual primary research into just this question, I won't add any subjective opinion on top...
Primary & Secondary Actions in Web Forms - probably the best research I've come across into exactly this question
Reset and Cancel Buttons - an article from 2000, pointing out that reset functionality is harmful and cancel functions are often unnecessary
OK–Cancel or Cancel–OK? - sticking to a standard order helps usability
The best answer I could give - test both, see which one works best.
On a side note, I wouldn't call this 'web standard', that has meaning towards front-end web technologies (HTML, CSS etc.), I would say 'UI best practice' fits better.
为什么要让用户轻松撤消他们错误输入的所有内容？
为什么不防止表格意外取消呢？
为什么驾驶舱灯开关不在弹出按钮旁边？
通过使取消按钮与提交按钮不同，您可以轻松地传达出它们执行不同操作的想法。只要它看起来不像提交按钮，你就是安全的。
让它成为一个链接。
Why make it easy for users to undo all they've typed in by mistake?
Why not prevent accidental form canceling?
Why isn't the cockpit light switch next to the eject button?
By making the cancel button different from the submit one, you easily convey the idea that they do different things. So long as it does not look like the submit button, you're safe.
Make it a link.
表单设置中的按钮表示您将要执行涉及表单的操作；提交、清除、添加文件等。将取消按钮设为链接，表示您可以随时离开，不会产生任何后果。
Buttons in a form setting indicate you're about to do something involving the form; submitting, clearing, add a file etc. Making the cancel button a link, indicates you can leave any time you want, without any consequences.
没有这样的标准，只是常识的考虑。检查此链接：http://www.useit.com/alertbox/20000416.html
There is no such standard, just considerations of common sense. Check this link: http://www.useit.com/alertbox/20000416.html
我想说链接和按钮是完全相同的东西。按钮可以是链接，文本也可以是链接。
区别在于默认操作的焦点与其对应的焦点之间。
默认选项应始终处于焦点位置，而计数器选项应始终相对较近。
我所说的焦点对准是指“发送”按钮可以更大或更亮，只要它比“取消”按钮更明显即可。
您的朋友可能认为您应该因此使用文本链接，因为它确实遵循此方法。但是 CSS 按钮可以用同样的方式着色，使其不那么突出。
I would say a link and button are exactly the same thing. A button can be a link and text can be a link.
Where the difference lies is between the focus of the default action and it's counterpart.
The default option should always be in focus and the counter option should always be relatively close by.
By in focus I mean the "Send" button could be bigger or brighter as long as its more noticeable then the "cancel" button.
Your friend probably thinks you should use a text link for this reason as it does follow this method. But a CSS button can be colorized to be less prominent in the same way.
根本不要把它放在那里。用户习惯了这样的约定：如果他们不想去某个地方，他们会使用后退按钮。设计 UI 的工作是引导用户完成一个流程并让他们做出合乎逻辑的选择。您已经评论过自己说取消按钮可能会产生两种结果之一，但用户如何知道它是哪一种呢？有些用户可能希望它重置表单，从而使他们离开页面，反之亦然。
在我看来，您的表单不需要取消按钮，如果完全省略它会对用户有所帮助。
Don't put it on there at all. Users are used to the convention that if they are somewhere where they don't want to be, they will use the back button. Your job designing the UI is to guide a user through a process and allow them to make logical choices. You have already commented yourself by saying a cancel button could have one of two outcomes but how does a user know which one it is? Some users may expect it to reset a form and it takes them away from the page and vice versa.
In my opinion, your form does not need a cancel button and it would aid the user if it was just omitted completely.
重要的是用户不会错误地按下取消按钮。正如霍里亚所说，将其设为链接或按钮，但要使其不同，例如使用不同的颜色。不要将其称为“取消”，而是要明确按下它时会发生什么，例如：“返回上一页”。
顺便说一句，我讨厌有一个清除表单的按钮。完全没有必要。好在它不再那么常见了。
乔恩
The important thing is that the user doesn't press the cancel-button by mistake. As Horia says, make it a link or a button, but make it different, for example with a different color. Instead of calling it "Cancel", make it clear what will happen when you press it, for example: "Go back to previous page."
By the way, I hate it when there's a button for clearing the form. Completely unnecessary. It's good that it is not so common anymore.
Jon
我真的很晚才开始讨论，但是有些情况，特别是在基于 Web 的应用程序中，需要“取消”功能。在我看来，文本链接是首选，因为它与“提交”功能提供了充足的对比，这样用户就不会错误地单击错误的内容。
I'm really late to this discussion, but there are instances, particularly in web-based applications where a "Cancel" function is required. In my opinion a text link is preferred because it provides ample contrast from the "Submit" function so that users do not mistakenly click the wrong thing.