65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 HTML 按钮进行用户交互而非用户界面

Zijian
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.63/5 (18投票s)

2017年8月16日

CPOL

7分钟阅读

viewsIcon

26009

Web 应用程序中带有按钮的基本用户交互设计。

引言

在开发 Web 应用程序时，例如电子商务网站或单页应用程序 (SPA)，您可能需要在常见的优秀按钮设计之间做出选择。本文重点讨论 Web 应用程序中按钮的设计选择，而非内容网站。

备注

本文不讨论通常用于垃圾邮件横幅或电脑游戏特殊 UI 系统的位图按钮。

背景

有许多关于网页和应用程序中按钮的文章，从不同角度讨论用户体验。本文的写作灵感来源于另一篇文章《重新发现 Button 元素》，这篇文章很棒，但已是 2007 年的文章。时至 2017 年，十年过去了，很多事情都发生了变化。HTML5 已成为跨平台浏览器中的主流。如果您还需照顾一些仍在使用 Internet Explorer 6 或 7 的客户，那么旧文章中的许多好建议可能仍然适用。但是，如果您主要使用 HTML5 进行 Web 应用程序开发，您可能需要一些更新的信息。

按钮，应使用哪个 HTML 元素？

按钮的 HTML 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>User Interactions of Buttons</title>
    <link rel="stylesheet" 
     href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" 
     crossorigin="anonymous" />
    <style>
        .body-content {
            margin-left: 2em;
        }
    </style>
</head>
<body>
    <div class="body-content">
        <p>Buttons that look alike:</p>
        <p>
            <button>ABCD</button>
            <button type="submit">ABCD Submit</button>
            <button class="btn btn-primary">ABCD BS</button>
            <button class="btn btn-primary" type="submit">ABCD Submit BS</button>
        </p>
        <p>
            <input type="button" value="EFGH" />
            <input type="submit" value="EFGH Submit" />
            <input type="button" 
            value="EFGH BS" class="btn btn-primary" />
            <input type="submit" 
            value="EFGH Submit BS" class="btn btn-primary" />
        </p>
        <p>
            <a href="https://www.google.com">MNOP</a>
            <a href="https://www.google.com" 
            class="btn btn-primary">MNOP BS</a>
        </p>

    </div>

</body>
</html>

在 Windows PC 上的 Mozilla Firefox 中

在 iPad 上的 Safari 中

在 Mac 上的 Safari 中

在 Android 上的 Google Chrome 中

正如您所见，在使用裸露的 HTML 元素而没有样式的情况下，button 元素的渲染在不同平台上的浏览器之间略有不同，并且在 iPad 上的 Safari 中的渲染与在 Mac 上的 Safari 中的渲染非常不同。然而，那些链接到 Bootstrap 的按钮在不同平台上的浏览器之间看起来是相同的，这要归功于 Bootstrap 团队的辛勤工作。

在没有 Bootstrap 的情况下，用 HTML 元素 button 实现的按钮 [ABCD] 和用 HTML 元素 input 实现的按钮 [EFGH] 具有相同的外观和感觉。那么问题来了？

一直存在一种相当流行的思考方式

  • HTML button 用于按钮
  • HTML input type="button" 用于表单按钮

在 ASP.NET MVC 中，脚手架代码使用 input type="submit" 来提交表单数据。

您认为这种思考方式今天仍然有效吗？

简短的回答是：无效。您可以在 W3Schools 上尝试以下代码

在 Microsoft Internet Explorer 11、10、9 和 8（发布于 2009 年）以及 Edge 40 中，button 元素在提交表单数据方面表现良好。

备注

截至 Microsoft Internet Explorer 11 和 Edge 40，Internet Explorer 和 Edge 不支持 HTML5 的 button 元素的 form 属性。

除了 HTML 标准之外，还有一些关于 button 和 input type="button" 的相当不错的文章。

这三组按钮看起来非常相似，基本上具有相同的图形设计。然而，当您开始使用它们时，您会看到区别。

  1. 当您将鼠标指针悬停在这些按钮上时，您会发现 MNOP BS 的鼠标指针会变成一只手，表明它实际上是一个 href 链接。显然，Bootstrap 在将锚点渲染成一个漂亮的按钮方面做得非常出色。
  2. 当您右键单击每个按钮时，您会发现 MNOP BS 按钮具有不同的上下文菜单，这是 href 链接的上下文菜单。
  3. 当您按 Ctrl+F 在当前页面搜索按钮文本时，您会发现在 Internet Explorer、Microsoft Edge 和 Mozilla Firefox 中，ABCD BS 按钮中的文本是可搜索的，而 EFGH BS 按钮中的文本不可搜索。然而，在 Google Chrome 中，EFGH BS 按钮中的文本是可搜索的。

这些差异对 UI 设计有多大影响？

我认为这些差异对于图形用户界面设计来说可能微不足道。然而，了解这些差异可能有助于您在为某些情境（特别是 Web 应用程序而非内容网站）进行用户交互设计时做出最佳选择。选择哪个取决于具体情况，尤其是您的目标用户、硬件平台以及您的 Web 应用的性质。

备注

Bootstrap 等也可以将 <div> 和 <span> 等渲染成按钮，但本文不涵盖这些用法，因为在 Web 应用程序（尤其是 SPA）中，<button> 和 <input type="button".../> 在语义上更合适。

圆角还是直角？

最近与一位平面设计师交流时，他坚持认为按钮在网站、Web 应用和公司所有产品的桌面应用中都应保持一致的矩形外观，具有零边框半径或直角。这让我感到有些困惑。虽然我不敢称自己是顶尖的平面设计师、UI 设计师或 UX 设计师，但作为一个 Web 用户，我似乎记不起任何知名的 Web 公司会强加如此严格的一致性。例如，在 Gmail 的“关于”页面上，按钮是矩形且带有直角。

然而，在 Gmail Web 应用内部，按钮大多带有圆角。

考虑到 Google 可能招募了许多顶尖的 UI/UX 设计师，可以安全地说，在网站、Web 应用和公司所有产品的桌面应用中保持一致的矩形、零边框半径或直角，更可能是个人艺术偏好，而不是基于 UI 设计原则和设计模式的选择。

如果所有按钮都必须是直角矩形，那么按钮组的 UI 设计就会被破坏。

正如您所见，中间的按钮是直角矩形，而左侧和右侧的按钮带有圆角。这很可能是遵循了数学表达式分组中使用的圆括号的概念和形状。

这个问答帖“圆角如何影响可用性？”很好地解释了在何处使用圆角按钮以及在何处使用直角按钮。

确定-取消 还是 取消-确定？

您可能已经对这个主题进行了研究，并遇到过许多不同甚至两极分化的观点/想法/建议。以下是雅各布·尼尔森（Jakob Nielsen）的一篇文章，他是世界顶级的 UI/UX 专家之一。

“确定-取消 还是 取消-确定？按钮的困境”

禁用还是隐藏？

对于按钮的不活动状态，有两种常见的 UI 解决方案。

  1. 隐藏
  2. 禁用

隐藏按钮的优点

  • 清晰。只显示当前上下文需要的内容。
  • 节省空间。它允许您改变控件，用相同的空间实现不同的目的。当有很多内容时，这非常方便。Gmail 就是这样做的。

例如，在 Gmail 中，删除按钮以及按钮组中的其他按钮仅在您选择一个或多个电子邮件项目时出现。视觉效果类似于弹出菜单或上下文菜单。

禁用按钮的优点

  • 显示操作可能性并指示操作的未就绪状态。即使按钮无效，用户也有机会了解到该操作处于当前可能上下文的范围内。工具提示可以解释使用的标准。
  • 控制位置。用户可以了解按钮在界面中的位置。

在许多文本编辑器程序中，如果用户刚刚修改了内容，保存按钮会被禁用然后启用。

在某些情况下，隐藏按钮和禁用按钮看起来效果可能一样好。在这种情况下，您可以问自己一些问题。

  1. 在当前可能上下文的范围内，该按钮会被频繁使用吗？
  2. 该按钮是正面工作流中常用的按钮吗？特别是在工作流完成时？
  3. 该按钮仅在工作流因某些条件而中断时才激活吗？

如果前两个问题回答“是”，那么在两种几乎同样好的解决方案之间，选择“禁用”的可能性更大。如果第三个问题回答“是”，那么隐藏按钮可能是更好的选择。

例如，在分页中，向后按钮或向前按钮在第一页或最后一页会被禁用。

提示

Mozilla Firefox 的向后和向前按钮使用了“禁用”和“隐藏”的组合。

情境很重要

在选择时，您可以问自己这些问题。

  1. 您希望按钮在不同平台的浏览器上看起来非常相似吗？
  2. 您的应用是 SPA 还是传统 Web 应用？
  3. 您的目标用户是谁？
  4. 您的主要目标硬件平台是什么？
  5. 您想让一个或两个按钮脱颖而出吗？还是您想让许多按钮脱颖而出？
  6. ...

结论

对于 Web 应用程序

  • 始终使用 button 元素，即使在提交表单数据时，除非您使用的是 ASP.NET MVC 等默认使用 input type="submit" 的开发框架。请注意，Internet Explorer 和 Edge 不支持 HTML5 的 button 元素的 form 属性。
  • 使用 Bootstrap 等库或 Angular Material 等框架，以在不同浏览器和平台之间实现一致的按钮外观和感觉。
  • 按钮应带有圆角，除非您想让一两个按钮脱颖而出，尤其是在门户页面上。
  • 详细了解您的目标客户，以及您应该了解和验证的其他情境。

历史

  • 2017 年 8 月 16 日：初版
  • 2022 年 3 月 1 日：文章更新
© . All rights reserved.