发布时间：2020-6-8 分类： 电商动态
这是一团糟，我有一些理论来证明原因。
我一直在金融领域设计很长一段时间。这不是我要做的事情，只发生了一些事情。我的第一份财务工作是为第一个美国制作横幅广告。这不是一件令人满意的事情，但偶尔我们会得到一份有趣的工作。我确实有机会为Austin Powers VISA卡创建一个横幅。
“奶奶需要另一张信用卡” - 邪恶的艺术总监
我找不到要证明它的广告，但这是卡片设计中的一张卡片。疯狂：这是90年代。在这个艰难的实验之后，我还在其他金融机构工作：CapitalOne，MBNA，美国银行和其他机构。我迷路了，但感谢上帝，我做的不仅仅是这类工作。
在过去的几年里，我一直致力于品牌，而电子商务是亚马逊新时代品牌生存的重要组成部分。为了跟上潮流，有很多筹集资金的方法。信用卡是最标准的，但自从我开始撰写本文以来，PayPal，VISA Checkout，AMEX Express Checkout，Amazon Pay，Apple Pay，比特币，Etherium，Litecoin，Venmo，支付宝，Android Pay等有六种新方式。他们都是一个接一个地介绍过来的。他们都有相同的目标：获得用户的钱以换取商品或服务。每个都有优点和缺点，其中大多数是由付款人设计的差的用户界面按钮。
如果您根据付款人的要求设计结账屏幕，则会出现与左侧类似的内容。它似乎并不统一，并且每种付款方式都是竞争性的，包括（绿色）“立即购买”。按钮。那么用户如何决定哪一个最适合他们？
有一个或两个按钮是可以接受的，但其余的按钮更糟糕，看起来很尴尬。
让我们分析一下。
信用卡
旧标准。所有信用卡都有所谓的“银行标识”。这些是您在现实生活中最喜欢的商业门贴纸上看到的。这些婴儿已成为电子商务的小按钮，而且由于旧信用卡公司对这个新世界的速度反应太慢，他们从未真正授权这些标记数字的任何规则。您将在Web上看到各种各样的东西，通常是程式化的版本。我相信这会杀死VISA，万事达卡，美国运通和Discover的品牌，但他们已经错过了比赛。
以下是亚马逊，Zappos，Rakuten，SimplifyCommerce和Apple的一些例子。每个品牌都有基本特征，但风格，形状和大小不同。设计团队根据自己的需求定制设计。
贝
在早期我是PayPal的忠实粉丝。它们是第一个广泛使用数字支付选项的平台，然后它们发展缓慢并且已经过时。
PayPal的按键设计太糟糕了 - —没门。目前有三种不同的官方PayPal按钮。
旧版（官方版）→点击这里
新版本（官方）→点击这里
新版响应选项→细节分享
好消息是，PayPal似乎最终会选择更新他们的无响应按钮。问题是这个最新版本有很多限制，特别是按钮下的口号。这不是你可以（轻松）关闭的东西。如果基于一个很大的假设，PayPal可以改进这个最近的响应式按钮工具并为设计人员提供更大的灵活性，那么我们将来可能会使用它。
签证结帐
VISA花了很多钱来推销他们的数码产品，而且试验也不错，但实际上它们并不比Paypal好。它仍然会带你离开商店然后诱惑你。 VISA Checkout的一个更严重的问题是用户界面按钮是由从未完成检查过程的人设计的。
品牌和受欢迎程度是最重要的因素 - 其他一切都是阴云密布的。这种双按钮形状不容易与页面上的其他元素对齐，而且也很大。当您与其他按钮垂直堆叠时，最终会出现奇怪的垂直间距。不要试图再使用它了。
验收标志实际上非常好，有很多选择可供选择。这些至少是可行的。
我的猜测是，VISA向一家大型机构支付了大笔资金来设计这个荒谬的按钮。他们现在投资的人知道他们投资了多少，所以他们留了下来。也就是说，直到新的首席设计官进来并用时髦的想法改变了行政人员的观点。
Apple Pay
运行平板电脑的Apple并不是第一个使用数字支付的平台。然而，他们再次回来并做了一项了不起的工作，目标是所有竞争对手失去的商机。 Apple Pay（双字）按钮完全响应，有三种简单风格。徽标清晰而小巧。 Apple有两大优势。首先，iPhone的受欢迎程度很高，拥有一批经济实力强大的用户。其次，Apple支付的用户体验非常友好。您单击Apple Pay，弹出付款表单并确认您的指纹。完成。您不必离开代购源码网站，您不必分心，只需付费并享受它。
Apple Pay有白色和白色边框按钮
完整的Apple界面指南→这里
Masterpass
Masterpass与VISACheckout非常相似，而且非常糟糕。您首先想到的是UI准则是PDF而不是代码工具。再一次，我认为一个大型机构出售它们，现在它们被难倒了。这并不像VISA那么难看，但并不美观。至少是标准形状。
Masterpass按钮
AMEX快速结账
我们在用户界面上的尝试已被中途抛弃。如果您没有帐户，AMEX甚至不会看到他们的用户界面指南。尽管有很多尝试，但我不能保证不是这种情况。你可以尝试看到更多→这里。此按钮是一个很棒的功能，具有人工阴影和无响应功能。里面有按钮和路牌的按钮？这是用户界面版本的开头吗？
亚马逊支付
亚马逊处于电子商务世界，并且在不断发展。在所有在线销售中，43％的用户正在筹集科学资金。亚马逊支付的外观和感觉不断改进，文档已经过时。奇怪的是，这些新设计没有响应。看起来他们想拥有像VISA和masterpass这样的大品牌这样难看的按钮。渐渐火了吧？
最近的亚马逊支付按钮看起来像这样（也是金色和深灰色）
我仍然可以看到这些旧的亚马逊支付按钮
Android Pay
谷歌倾向于做正确的事情，AndroidPay也不例外。他们制作了一套完整的按钮，符合材料设计理念。当然，这些都是响应性的。您可以在此处查看文档。
Android支付按钮带有白色背景和带边框的白色字体
我们是如何做到这一点的，即将推出的是什么？
这些糟糕的设计是由被品牌要求误导而忽略最终用户体验的设计师制作的。优先级存在许多矛盾，投资和糟糕的设计限制了设计者创建令用户满意的支付体验的尝试。
比特币和其他新的支付方式总是在线。我无法预测哪些会吸引人，哪些不会吸引人。用户将确定他们想要什么，我们将处理它。
如何改善
在进入一个黑暗的角落之前深吸一口气，并为那些在你漂亮的设计中不起作用的按钮而哭泣。您不必使用品牌提供的内容。所有这些（甚至Apple）都会为您提供关于这些按钮如何显示的灵活性。如果你需要一些容器，它们看起来一样，试一试。
请记住，您需要在上线前获得所有发卡机构的批准：他们会审核您的设计，但不要害怕尝试除标准之外的其他内容。相信自己的直觉，设计出适合用户的作品。
请记住，我们花了很多钱来使这些东西变得富有成效。我并不是说你完全忽略了这个品牌：在一个好的设计中，权衡两者始终是关键。
阿迪达斯（移动）•••正在进行中
两个例子。首先是阿迪达斯，他们有定制的PayPal和Apple Pay按钮。这些不是出版商想要的，但他们尊重地修改按钮以匹配他们的用户界面，这看起来都很棒。另一个图像是我正在进行的项目。我们修改了PayPal和Visa Checkout以匹配Apple Pay按钮的形状。这样做是为了在这些“标记”之间建立一致性。并尽量减少混淆。此设计也得到了平台发布者的批准（但尚未形成），但可以完成。
将您的想法留在评论中，或者如果有一些我没有提及的付款按钮。
原作者：John Freeborn
原始地址：https://uxplanet.org/the-sad-state-of-payment-buttons-4d5cef3b9578
