付款按钮设计的糟糕现状

如下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

 

这简直就是一团糟，我有一些理论证实为什么如此。

 

 

 

我在金融领域作设计作了很长一段时间。这不是我要作的事情，只是发生了一些事情。个人第一份金融工做是为first USA制做横幅广告。这不是一件使人向往的事情，但偶尔咱们也会获得一份有趣的工做。个人确获得了为Austin Powers VISA卡制做横幅广告的机会。

 

“奶奶须要另外一张信用卡” - 邪恶的艺术总监

 

 

 

我找不到广告来证实，可是这里是卡片设计的其中一张图片。疯狂：这是90年代的。通过此次艰难的实验，我还在其余金融机构工做过：CapitalOne,，MBNA，美国银行和其余一些机构。我迷失了方向，不过谢天谢地我作过不止这一种类型的工做。

 

在过去的几年里，我一直在作品牌方面的工做，电子商务是亚马逊这个新时代品牌生存的重要组成部分。试着跟上潮流，有许多办法来筹集资金。信用卡是最标准的，但自从我开始写这篇文章以后，PayPal，VISA Checkout，AMEX Express Checkout，Amazon Pay，Apple Pay，Bitcoin，Etherium，Litecoin，Venmo，Alipay，Android Pay等还有六种新方式都相继出台。他们都有一样的目标：得到用户的资金来换取商品或服务。每一个都有好处和缺点，大多数都是由付款方规定而设计的糟糕的用户界面按钮。

 

 

若是你以支付方的要求来设计一个结帐屏幕，则会出现和左侧相似的状况。看起来并不统一，每一个付款选项都在竞相争宠，包括（绿色的）“当即购买”按钮。那么用户如何决定哪一个是最适合他们的呢？

 

这里有那么一两个还能接受的按钮，但剩下的按钮设计更糟糕，看起来很别扭。

 

让咱们来分析一下吧。

 

信用卡

 

 

 

 

旧标准。全部信用卡都有所谓的“银行标志”。这些是你在现实生活中最喜欢的商业大门上的贴纸上看到的。这些宝贝已经转变成电子商务的小按钮，并且因为旧信用卡公司对这个新世界的发展速度反应过于迟钝，他们历来没有真正对这些标记的数字受权任何规则。你会看到网络上的各类各样的东西，而且一般是程式化的版本。我相信这会扼杀掉VISA, Mastercard, American Express and Discover的品牌，可是他们已经错失了这场游戏。

 

如下是亚马逊，Zappos，乐天，SimplifyCommerce和Apple等的一些例子。每一个品牌都有基本特征，但风格，形状和大小都不一样。设计团队根据本身的须要对这些设计进行了定制。

 

 

 

 

 

 

 

 

 

PayPal

 

 

 

我早期是PayPal的忠实粉丝。他们是第一个普遍使用数字支付选项的平台，而后它们发展缓慢而变得过期。

 

PayPal的按钮设计的太糟糕—没有办法。目前有三种不一样的官方PayPal按钮。

 

旧版本（官方）→ 点击此处

 

 

新版本（官方）→ 点击此处

 

 

新版的响应选项 → 细节分享

 

 

好消息是，PayPal彷佛最终选择更新他们的无响应按钮。问题是这个最近的版本有许多的限制，尤其突出的是按钮下的宣传语。这不是你能（轻易）关闭的。若是，基于一个很大的假设，PayPal能够改进这种近期的响应式按钮工具，并给予设计师更高的灵活性，那么也许在未来，咱们会使用它。

 

VISA Checkout

 

 

 

VISA已经花了一大笔钱来推销他们的数码产品，并且试验并不糟糕，但实际上并无比Paypal好。它仍然会把你带出商店外而后又诱惑你回来。VISA Checkout更严重的的问题是用户界面按钮是由历来没有作过检验流程的人所设计的。

 

品牌和知名度是最重要的元素 - 其余一切都浮云。这个双按钮形状不容易与页面上的其余元素对齐，也很大。当你用其余按钮垂直堆叠时，最终会出现奇怪的垂直间距。别尝试去使用这个了。

 

 

验收标志其实是至关不错的，有不少选项可供选择。这些至少是可行的。

 

 

个人猜想是，VISA向一家大型机构支付了一大笔钱，来设计这个好笑的按钮。他们如今投资的人知道他们投入了多少，因此留了下来。也就是说，直到新的首席设计官进来，并用新潮的想法改变了行政人员的观点。

 

Apple Pay

 

 

 

经营平板电脑的苹果公司并非使用数字支付的首个平台。可是，他们再次回归，作了一项了不得的工做，瞄准了其全部竞争者所丢失的商机。Apple Pay（两个单词）按钮是彻底响应，并有三种简单的风格。标志清晰小巧。苹果有两大优点。首先，iPhone的普及率是巨大的，有一群经济实力雄厚的使用者。第二，苹果支付的用户体验很友好。你单击Apple Pay，弹出付款表，并用指纹确认。完成。不用离开网站，不用分心，只是须要支付而后享受就好了。

 

Apple Pay有白色和白色边框的按钮

 

完整的Apple界面指南→ 这里

 

Masterpass

 

 

 

Masterpass与VISACheckout很是类似，都挺糟糕的。你的第一个想法是，UI guidelines是PDF而不是代码工具。再次，我认为一个大的机构出售他们，如今他们被难住了。这不像VISA那么丑，但也不美。至少是一个标准的形状。

 

masterpass的按钮

 

AMEX Express Checkout

 

 

咱们在用户界面上进行的尝试又半途而废了。AMEX甚至不会在你没有账户的状况下看到他们的用户界面指南。尽管屡次尝试，我也没法确保是否是如此。你能够试试看更多→ 这里。该按钮是一种具备人造阴影和无响应特征的奇葩。一个按钮，里面还有一个按钮和一个街道标志？这是用户界面版本的开始吗？

 

 

Amazon Pay

 

 

 

亚马逊正在电子商务世界并不断发展。在全部在线销售中，有43％的用户正在筹集科学资金。Amazon Pay的外观和感受正在不断的改善，文档已通过时了。奇怪的是，这些新的设计不是响应式的。好像看起来他们但愿拥有VISA和masterpass这样的大品牌同样如此丑的按钮。渐变的会火，对吗？

 

 

最近的亚马逊付款按钮看起来像这样（也是黄金和深灰色）

 

 

我仍可看到这些旧的亚马逊支付按钮

 

Android Pay

 

 

 

Google倾向于作正确的事情，AndroidPay也没有什么不一样。他们制做了一整套符合材料设计理念的按钮。固然，这些都是响应性的。您能够点击此处查看文档。

 

Android Pay的按钮，有白色背景和白色字体带边框

 

咱们是如何作成这样的，即将出现的又是什么？

 

这些糟糕的设计是由设计师制造的，他们被品牌要求给误导了，而忽略了最终用户的体验。优先考虑的事项有不少矛盾之处，投资与糟糕的设计，限制了设计师试图创建一个让用户满意的付款体验。

 

比特币和其余新的付款方式一直在上线。我不能预测哪些会吸引人，哪些不会。用户将肯定他们想要什么，而咱们会处理好。

 

如何去改善

 

在你进入一个黑暗的角落，为这些按钮在你美观的设计中不起做用而哭泣前，深吸一口气。您没必要使用品牌方提供的内容。全部这些（甚至苹果）都会提供给你一些灵活性，关于这些按钮将如何出现。若是你须要一些容器，它们看起来同样，试试看。

 

请记住，在上线以前，你须要获得全部发行人的批准：他们将审查您的设计，但不要惧怕去尝试标准之外的东西。相信你的直觉，并设计出适合用户的做品。

 

请牢记，咱们花费大量的现金使这些东西富有成效。我不是建议你彻底忽略品牌：在优秀的设计中，权衡二者是一向的关键。

 

 

adidas（移动）•••正在进行中

 

两个例子。首先是阿迪达斯，他们有自定义的PayPal和Apple Pay按钮。这些不是发行人所要求的，但他们恭敬地修改了按钮来匹配他们的用户界面，这一切看起来都很棒。另外一个图像是我正在开展的项目，咱们修改了PayPal和Visa Checkout以匹配Apple Pay按钮的形状。这样作是为了在这些“标记”之间建立一致性并尽可能减小混乱。此设计也获得平台发行人的批准（但还未成型），不过能够作到。

 

评论中留下你的想法吧，或者说说是否还有一些支付按钮我没有提到的。

 

原文做者：John Freeborn

 

原文地址：https://uxplanet.org/the-sad-state-of-payment-buttons-4d5cef3b9578

 

 

Mockplus作原型，更快更简单，如今下载Mockplus，免费体验畅快的原型设计之旅。