有关付款和地址表单的最佳做法

帮助用户尽可能快速轻松地填写地址和付款表单，尽可能提高转化次数。

Sam Dutton

设计良好的表单可帮助用户和提高转化率。一个小小的改变，大的改变！

试试看 ：如果您希望通过实操教程学习这些最佳实践，请查看此博文的两个 Codelab：* 付款方式最佳实践 Codelab * 地址表单最佳实践 Codelab

下面是一个简单的付款表单示例，它展示了所有最佳做法：

下面是一个简单地址表单的示例，演示了所有最佳实践：

核对清单

• 使用有意义的 HTML 元素：<form>、<input>、<label> 和 <button>。
• 使用 <label> 为每个表单字段添加标签。
• 使用 HTML 元素属性使用内置浏览器功能，尤其是具有适当值的 type 和 autocomplete。
• 避免将 type="number" 用于不应递增的数字，例如支付卡号码。请改用 type="text" 和 inputmode="numeric"。
• 如果 input、select 或 textarea 有适当的自动补全值，您应使用该值。
• 为了帮助浏览器自动填充表单，请为输入 name 和 id 属性提供稳定值，这些值在网页加载或网站部署之间不会改变。
• 当用户点按或点击提交按钮后，停用提交按钮。
• 在用户输入过程中（而不仅仅是在提交表单时）验证数据。
• 将访客结账设为默认结账方式，并在结账完成后轻松创建帐号。
• 以清晰的步骤展示结账流程的进度，并配有明确的号召性用语。
• 通过消除干扰和干扰因素限制潜在的结账退出点。
• 在结账时显示完整的订单详情，并轻松调整订单。
• 不要要求用户提供您不需要的数据。
• 除非您有充分的理由，否则请一次性输入姓名，除非您有充分的理由。
• 请勿将姓名和用户名强制使用纯拉丁字符。
• 支持多种地址格式。
• 考虑使用单个 textarea 作为地址。
• 使用自动补全帐单邮寄地址。
• 在必要时进行国际化和本地化。
• 建议避免查找邮政编码地址。
• 使用相应的支付卡自动补全值。
• 使用一次性输入支付卡卡号。
• 避免使用自定义元素，以免它们破坏自动填充体验。
• 在现场和实验室中测试：网页分析、互动分析和实时用户性能衡量。
• 在各种浏览器、设备和平台上进行测试。

注意 ：本文介绍的是地址和付款方式的前端最佳做法。未说明如何在您的网站上实现交易。要详细了解如何为您的网站添加付款功能，请参阅网络付款。

使用有意义的 HTML

使用为作业构建的元素和属性：

• <form>、<input>、<label> 和 <button>
• type、autocomplete 和 inputmode

这些控件可实现内置的浏览器功能、改进无障碍功能，并为标记添加含义。

按预期使用 HTML 元素

在 <form>中输入表单

您可能不想费心将 <input> 元素封装在 <form> 中，而是想完全使用 JavaScript 来处理数据提交。

千万不要这样做！

HTML <form> 可让您在所有现代浏览器中使用一组强大的内置功能，并使您的网站可供屏幕阅读器和其他辅助设备访问。此外，<form> 还可让您更轻松地为支持有限 JavaScript 的旧版浏览器构建基本功能，以及即使您的代码出现故障也能够启用表单提交，并且对少数实际停用 JavaScript 的用户而言也是如此。

如果您有多个页面组件用于用户输入，请确保将每个组件放入各自的 <form> 元素中。例如，如果您在同一页面上执行搜索和注册操作，则应将搜索和注册操作分别放入各自的 <form> 中。

使用 <label> 为元素添加标签

如需为 <input>、<select> 或 <textarea> 添加标签，请使用 <label>。

通过为标签的 for 属性指定与输入的 id 相同的值，将标签与输入相关联。

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

为单个输入使用单个标签：不要尝试使用只有一个标签来为多个输入添加标签。这最适合浏览器，也最适合屏幕阅读器。点按或点击某个标签会将焦点移到与其关联的输入源，并且屏幕阅读器会在标签或标签的输入获得焦点时读出标签文本。

注意 ：请勿单独使用placeholders（而非标签）。一旦您开始在输入内容中输入文本，占位符就会隐藏起来，因此很容易忘记输入内容的用途。如果您使用占位符来显示日期等值的正确格式，也是如此。这对手机用户来说尤其重要，尤其是当他们分心或感到压力时！

让按钮更实用

使用 <button> 作为按钮！您也可以使用 <input type="submit">，但不要使用 div 或其他某个随机元素作为按钮。按钮元素提供可访问的行为、内置的表单提交功能，并且可以轻松设置样式。

为每个表单提交按钮指定一个值，说明按钮的功能。对于进入结账流程的每个步骤，请使用描述性的号召性用语来显示进度，并使下一步显而易见。例如，将配送地址表单上的提交按钮标记为继续付款，而非继续或保存。

考虑在用户点按或点击提交按钮后将其停用，尤其是在用户付款或下单时。许多用户反复点击按钮，即使按钮运行正常。这可能会造成结账流程混乱，并增加服务器负载。

另一方面，请勿停用等待完成且有效的用户输入的提交按钮。例如，不要仅仅因为某些内容缺失或无效而使保存地址按钮处于停用状态。这对用户没有帮助 - 用户可能会继续点按或点击该按钮，以为按钮已经损坏。 相反，如果用户尝试提交包含无效数据的表单，请向他们说明问题所在以及解决方法。这在移动设备上尤为重要，因为在移动设备上，数据输入更加困难，缺少表单数据或表单数据无效，当用户尝试提交表单时，屏幕上可能不会显示这些数据。

注意 ：表单中的默认按钮类型为 submit。如果您想在表单中添加其他按钮（例如，显示密码），请添加 type="button"。否则，点击或点按该按钮将提交表单。在聚焦于任何表单字段时按 Enter 键会模拟点击表单中的第一个 submit 按钮。如果您在 Submit 按钮之前在表单中添加一个按钮，并且不指定类型，则该按钮将具有表单中的按钮的默认类型 (submit)，并在提交表单之前收到点击事件。如需查看示例，请参阅我们的演示：填写表单，然后按 Enter。

充分利用 HTML 属性

让用户可以轻松输入数据

使用适当的输入 type 属性在移动设备上提供合适的键盘，并启用由浏览器进行基本的内置验证。

例如，使用 type="email" 表示电子邮件地址，使用 type="tel" 表示电话号码。

适用于电子邮件和电话的键盘。

警告 ：使用 type="number" 会添加向上/向下箭头来递增数字，这对电话号码、支付卡或帐号等数据没有任何意义。对于此类数字，请设置 type="text"（或省去该属性，因为默认值为 text）。对于电话号码，请使用 type="tel" 在移动设备上获取相应的键盘。对于其他号码，在移动设备上使用 inputmode="numeric" 获取数字键盘。有些网站仍使用 type="tel" 作为支付卡号码，以确保移动用户获得正确的键盘。不过，inputmode现在已经得到非常广泛的支持，因此您不应该这样做，但一定要检查用户的浏览器。

对于日期，请尽量避免使用自定义 select 元素。如果实现不当，便会破坏自动填充体验，且无法在旧版浏览器上正常运行。对于出生年份等数字，请考虑使用 input 元素而非 select，因为与从长的下拉列表中选择数字来手动输入数字相比，手动输入数字更简单且不易出错，尤其是在移动设备上。使用 inputmode="numeric" 可确保在移动设备上正确使用键盘，并添加带有文本或占位符的验证和格式提示，以确保用户以适当的格式输入数据。

注意 ：datalist 元素可让用户从可用选项列表中进行选择，并在用户输入文本时提供匹配建议。在 simpl.info/datalist 中，尝试将 datalist 用于 text、range 和 color 输入。对于输入年份，您可以在 datalist-select.glitch.me 上比较 select、input 和 datalist。

使用自动补全功能来改进无障碍功能，帮助用户避免重复输入数据

使用适当的 autocomplete 值可让浏览器安全地存储数据并自动填充 input、select 和 textarea 值，从而帮助用户。这在移动设备上尤为重要，对于避免较高的表单放弃率至关重要。自动补全还具有多种无障碍功能优势。

如果有适合表单字段的自动补全值，您应使用该值。MDN Web 文档包含值的完整列表，以及有关如何正确使用这些值的说明。

稳定的值

注意 ：除了使用适当的自动补全值之外，还应为表单字段提供 name 和 id 属性的稳定值（这些值在网页加载或网站部署之间不会改变），以便帮助浏览器自动填充表单。

账单邮寄地址

默认情况下，将账单邮寄地址设置为与配送地址相同。提供用于修改帐单邮寄地址的链接（或使用 summary 和 details 元素），而不是在表单中显示帐单邮寄地址，从而减少视觉干扰。

添加用于查看结算信息的链接。

如同为送货地址使用适当的自动补全值一样，请为账单邮寄地址使用适当的自动补全值，这样用户就无需多次输入数据。如果您在不同部分中对同名的输入内容有不同的值，请为自动补全属性添加前缀字词。

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

帮助用户输入正确的数据

请尽量避免因客户“做错了事”而“指责”客户。相反，应该帮助用户在出现问题时及时解决问题，从而更快速、更轻松地填写表单。在结账流程中，客户会尝试向贵公司提供产品或服务资金，您的工作是协助他们，而不是惩罚他们！

您可以向表单元素添加约束条件属性，以指定可接受的值，包括 min、max 和 pattern。元素的有效性状态是自动设置的，具体取决于元素的值是否有效，:valid 和 :invalid CSS 伪类（可用于设置具有有效值或无效值的元素样式）也是如此。

例如，以下 HTML 指定输入 1900 年至 2020 年之间的出生年份。使用 type="number" 可将输入值限制为仅包含 min 和 max 指定的范围内的数字。如果您尝试输入超出范围的数字，输入内容将被设置为无效状态。

以下示例使用 pattern="[\d ]{10,30}" 来确保支付卡号有效，同时允许有空格：

现代浏览器还会对 email 或 url 类型的输入执行基本验证。

注意 ：将 multiple 属性添加到带有 type="email" 的输入中，可以在单个输入中为多个以英文逗号分隔的电子邮件地址启用内置验证。

提交表单时，浏览器会自动将焦点置于必需值有问题或缺失的字段上。无需 JavaScript！

浏览器进行基本的内置验证。

进行内嵌验证并在用户输入数据时为其提供反馈，而不是在用户点击提交按钮时提供错误列表。如果您在提交表单后需要验证服务器上的数据，请列出发现的所有问题，并清楚地突出显示包含无效值的所有表单字段，并在每个有问题的字段旁边显示一条内嵌消息，说明需要解决的问题。检查服务器日志和分析数据中是否存在常见错误 — 您可能需要重新设计表单。

在用户输入数据和提交表单时，您也应使用 JavaScript 进行更可靠的验证。使用 Constraint Validation API（受到广泛支持），通过内置浏览器界面添加自定义验证，以设置焦点和显示提示。

如需了解详情，请参阅使用 JavaScript 实现更复杂的实时验证。

警告 ：即使客户端验证和数据输入存在限制，您仍必须确保后端安全地处理用户输入和输出的数据。切勿信任用户输入，因为这可能是恶意的。如需了解详情，请参阅 OWASP 输入验证备忘单。

帮助用户避免错过必要数据

请在输入中使用 required 属性来获取必填值。

用户提交表单时，现代浏览器会自动提示并重点关注缺少数据的 required 字段，您可以使用 :required 伪类突出显示必填字段。无需 JavaScript！

为每个必填字段向标签添加星号，并在表单开头添加备注以说明星号的含义。

简化结账流程

注意移动商务的差距！

假设您的用户存在疲劳预算。用完该存储空间，您的用户就会离开。

您需要减少阻力并保持专注，尤其是在移动设备上。许多网站在移动设备上获得的流量更多，但在桌面设备上获得的转化更多，这种现象被称为移动商务差距。客户可能只是更喜欢在桌面设备上完成购买，但移动转化率较低也会导致用户体验不佳。您的任务是最大限度地减少移动设备上未观测到的转化，而最大限度提高桌面设备上的转化次数。研究表明，提供更好的移动设备表单体验有巨大机会。

最重要的是，用户更有可能放弃看起来长、复杂、没有方向感的表单。当用户使用小屏幕设备、分心或时间匆忙时尤其如此。请求尽可能少的数据。

将访客结账方式设为默认付款卡

对于网店，减少表单障碍的最简单方法是将“访客结账”设置为默认结账方式。 请勿强制用户在购买之前创建帐号。不允许访客结账是客户放弃购物车的一个主要原因。

来自 baymard.com/checkout-usability

您可以在结账后提供帐号注册选项。这时，您已经拥有设置帐号所需的大部分数据，因此用户可以快速轻松地创建帐号。

如果您在结账后提供注册选项，请确保用户刚刚进行的购买交易已与其新创建的帐号相关联！

显示结账进度

通过显示进度并明确指出接下来需要完成的步骤，您可以简化结账流程。下面的视频展示了英国零售商 johnlewis.com 是如何做到这一点的。

显示结账进度。

你需要保持动力！对于完成付款的每一个步骤，请使用页面标题和描述性的按钮值，以清楚地了解现在需要执行哪些操作，以及接下来执行哪个结账步骤。

为表单按钮指定有意义的名称，以显示接下来的功能。

对表单输入使用 enterkeyhint 属性，以设置移动设备键盘的 Enter 键标签。例如，在多页表单中使用 enterkeyhint="previous" 和 enterkeyhint="next"，为表单中的最终输入使用 enterkeyhint="done"，为搜索输入使用 enterkeyhint="search"。

Android 上的 Enter 键：“下一步”和“完成”。

Android 和 iOS 支持 enterkeyhint 属性。如需了解详情，请参阅 enterkeyhint 说明文档。

让用户可以在结账过程中轻松切换，轻松调整订单，即使他们处于最终付款步骤也是如此。显示订单的完整详细信息，而不仅仅是有限的摘要。让用户能够在付款页面轻松调整商品数量。结账时的首要任务是避免打断转化进度。

移除不想要的内容

移除视觉元素和分心（例如产品宣传内容），尽量减少潜在的退出点。 许多成功的零售商甚至取消了结账流程中的导航和搜索功能。

消除了结账流程中的搜索、导航和其他干扰因素。

在旅程中保持专注。这可不是诱导用户进行其他行动的好时机！

不要干扰客户完成购买。

对于回访用户，您可以隐藏他们不需要看到的数据，从而进一步简化结账流程。例如：以纯文本（而非表单）显示送货地址，并允许用户通过链接更改送货地址。

隐藏客户不需要查看的数据。

方便输入姓名和地址

仅要求提供您需要的数据

在开始编写姓名和地址表单之前，请务必了解所需的数据。 不要索要您不需要的数据！降低表单复杂度的最简单方法是移除不必要的字段。这也有利于保护客户隐私，并且可以降低后端数据费用和责任。

使用单一名称输入

除非您有充分的理由单独存储给定名字、姓氏、敬称或其他姓名部分，否则用户只需一次输入即可输入姓名。使用单一名称输入内容可降低表单复杂程度，支持剪切粘贴功能，并简化自动填充操作。

特别是，除非您有充分的理由，否则不要为前缀或名称添加单独的输入项（例如 Mrs、Dr 或 Lord）。用户如果需要，可以使用自己的姓名输入该网址。此外，honorific-prefix 自动补全功能目前不适用于大多数浏览器，因此为名称前缀或标题添加字段会破坏大多数用户的地址表单自动填充体验。

启用名称自动填充

使用 name 作为全名：

<input autocomplete="name" ...>

如果您确实有充分的理由拆分名称部分，请务必使用适当的自动补全值：

• honorific-prefix
• given-name
• nickname
• additional-name-initial
• additional-name
• family-name
• honorific-suffix

允许使用国际名称

您可能需要验证输入的姓名，或限制姓名数据可使用的字符。不过，在使用字母时，您需要尽可能不受限制。被告知您的姓名“无效”是很不礼貌！

验证时，请避免使用仅与拉丁字符匹配的正则表达式。“仅使用拉丁语”不包括姓名或地址中包含非拉丁字母字符的用户。请改为允许 Unicode 字母匹配，并确保后端安全地支持 Unicode 的输入和输出。 现代浏览器很好地支持正则表达式中的 Unicode。

错误做法

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

正确做法

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

Unicode 字母匹配与纯拉丁字母匹配的对比情况。

注意 ：您可以在下方找到有关国际化和本地化的更多信息，但请确保您的表单适用于拥有用户的所有地区的名称。例如，对于日语姓名，您应该考虑为姓名拼音创建字段。这有助于客户服务人员在电话中说出客户的姓名。

支持多种地址格式

在设计地址表单时，请务必注意地址格式多种多样，即使是在单个国家/地区内也是如此。请注意不要对“正常”地址做出假设。（如果您不确定，请查看 UK Address Oddities!！）

让地址表单更加灵活

请勿强迫用户试图将其地址挤到一个填满的表单字段内。

例如，不要在单独的输入内容中坚持使用门牌号和街道名称，因为很多地址并不采用这种格式，而且不完整的数据可能会破坏浏览器的自动填充。

请特别注意 required 地址字段。例如，英国大城市的地址没有郡/县，但许多网站仍强制要求用户输入郡/县。

使用两条灵活的地址行可以很好地满足各种地址格式。

<input autocomplete="address-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

添加标签以匹配：

<label for="address-line-1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line-1" id="address-line1" ...>

<label for="address-line-2">
Address line 2 (optional)
</label>
<input autocomplete="address-line-2" id="address-line2" ...>

你可以尝试混剪和修改下方嵌入的演示内容。

注意 ：研究表明，地址第 2 行可能会给用户带来问题。在设计地址表单时，请谨记这一点 - 您应该考虑替代方案，例如使用单个 textarea（见下文）或其他选项。

考虑使用单个文本区域作为地址

对于地址，最灵活的选项是提供单个 textarea。

textarea 方法适用于任何地址格式，非常适合剪切和粘贴，但请注意，它可能不符合您的数据要求，并且如果用户之前仅使用包含 address-line1 和 address-line2 的表单，则可能会错过自动填充功能。

对于文本区域，请使用 street-address 作为自动补全值。

以下示例表单演示了如何使用单个 textarea 作为地址：

对地址表单进行国际化和本地化

对于地址表单，请务必根据用户所在的地理位置考虑国际化和本地化。

请注意，即使使用的是同一语言，地址部分的命名也各不相同，而且地址格式也会有所不同。

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

呈现的内容不适合您的地址或没有使用您期望的字词，这可能会令人不快或迷惑不解。

您的网站可能需要针对多个语言区域自定义地址表单，但使用尽可能提升表单灵活性的技术可能就足够了。如果您不本地化地址表单，请务必了解可应对各种地址格式的关键优先事项： * 避免对地址部分过于具体，例如要求使用街道名称或门牌号。 * 尽可能避免将字段设置为 required。例如，许多国家/地区的地址没有邮政编码，乡村地址可能没有街道或道路名称。* 使用具有包容性的命名方式：“国家/地区”而非“国家/地区”；“邮政编码”而非“邮政编码”。

保持灵活性！上面的简单地址表单示例经过调整后，适用于许多语言区域。

建议避免查询邮政编码地址

某些网站会使用相关服务来根据邮政编码查找地址。对于某些用例，这可能是合理的，但您应该了解潜在的缺点。

邮政编码地址建议仅适用于部分国家/地区，并且在某些地区，邮政编码可能包含大量潜在地址。

邮政编码可能包含大量地址！

用户很难从一长串的地址中进行选择，尤其是在使用移动设备时，如果时间紧张或压力很大。让用户利用自动填充功能，点按或点击即可输入完整地址，整个过程更简单且不易出错。

单一名称输入支持一键式（一键式）地址输入。

简化付款方式

付款表单是结账流程中最关键的部分。付款表单设计不佳是导致购物车放弃的常见原因。细节层出不穷：小故障可能会诱使用户放弃购买，尤其是在移动设备上。您的任务是设计表单，以便用户尽可能轻松地输入数据。

帮助用户避免重新输入付款数据

请务必在支付卡表单中添加适当的 autocomplete 值，包括支付卡号、卡上的姓名以及到期月份和年份：

• cc-number
• cc-name
• cc-exp-month
• cc-exp-year

这样，浏览器就可以安全地存储支付卡详细信息并正确输入表单数据，从而帮助用户。如果没有自动补全功能，用户更有可能在设备上保留支付卡详细信息的实体记录，或者以不安全的方式将支付卡数据存储在其设备上。

注意 ：请勿添加支付卡类型的选择器，因为系统始终可以根据支付卡编号推断出此选择器。

避免对支付卡日期使用自定义元素

如果设计不当，自定义元素可能会破坏自动填充，导致付款流程中断，并且无法在旧版浏览器上正常运行。如果所有其他支付卡详细信息都可以通过自动补全功能获得，但用户不得不查找其实体支付卡以查询过期日期，因为自动填充功能对自定义元素不起作用，那么您很可能会失去销售机会。请考虑改用标准 HTML 元素，并为这些元素设置相应的样式。

自动补全已填充所有字段，但到期日期除外！

只需输入一次即可输入支付卡和电话号码

对于支付卡和电话号码，请单独输入：请勿将支付卡号码拆分为多个部分。这使用户可以更轻松地输入数据、简化验证过程并支持浏览器自动填充数据。对于 PIN 码和银行代码等其他数字数据，请考虑执行相同的操作。

请勿输入多个信用卡号。

仔细验证

您应该在提交表单之前实时验证数据输入。一种方法是在支付卡输入信息中添加 pattern 属性。如果用户尝试提交包含无效值的付款表单，浏览器会显示警告消息，并将焦点设置为输入。无需 JavaScript！

但是，pattern 正则表达式必须足够灵活，能够处理支付卡号码长度的范围：14 位（或更少）到 20 位（或更多）。您可在 LDAPwiki 中找到更多关于支付卡号码结构的信息。

允许用户在输入新的支付卡号时包含空格，因为数字卡在实体卡上的显示方式。这样对用户来说更友好（您不必告诉他们“他们做错了什么”），不太可能中断转化流程，并且在处理之前移除数字中的空格也很简单。

注意 ：您可能需要使用一次性密码进行身份验证或付款验证。但是，要求用户手动输入代码或从电子邮件或短信中复制代码不仅容易出错，而且会造成阻碍。请参阅有关短信动态密码表单的最佳做法，了解启用动态密码的更好方法。

针对各种设备、平台、浏览器和版本进行测试

由于表单元素的功能和外观可能会有所不同，并且视口大小的差异也可能会导致在定位时出现问题，因此请务必在用户最常使用的平台上测试地址和付款方式。BrowserStack 支持在各种设备和浏览器上对开源项目进行免费测试。

在 iPhone 7 和 iPhone 11 上显示相同的页面。
针对较小的移动设备视口减少内边距，确保完成付款按钮不会隐藏。

实现分析和 RUM

在本地测试易用性和性能可能很有用，但您需要真实的数据来正确了解用户的付款和地址表单体验。

为此，您需要分析和真实用户监控，即有关实际用户体验的数据，例如结账页面需要多长时间加载或完成付款需要多长时间：

• 网页分析：包含表单的每个网页的网页浏览量、跳出率和退出次数。
• 互动分析：目标漏斗和事件可指明用户在哪里放弃结账流程，以及他们在与您的表单互动时执行了哪些操作。
• 网站性能：通过以用户为中心的指标，您可以了解结账页加载速度是否缓慢以及如果加载缓慢，具体问题是什么。

与服务器日志、转化数据和 A/B 测试结合使用时，网页分析、互动分析和真实用户性能衡量会变得特别有价值，使您能够解答折扣代码是否增加了收入，或者表单布局更改是否提高了转化率等问题。

这反过来又为您确定优先努力、做出改变并奖励成功的坚实基础。

继续学习

• 登录表单最佳实践
• 有关注册表单的最佳做法
• 使用 WebOTP API 在网页上验证电话号码
• 创建出色的表单
• 移动表单设计最佳实践
• 更强大的表单控件
• 创建无障碍表单
• 使用 Credential Management API 简化注册流程
• Frank 的邮政地址强制指南针对 200 多个国家/地区的地址格式提供了实用链接和广泛指导。
• 国家/地区列表具有一个工具，可让您以多种格式下载多种语言的国家/地区代码和名称。

照片由 @rupixen 分享，Unsplash 用户。