《条纹如何设计美丽的网站》(2017)

你是否曾经访问过一个网站，并对其优雅和简洁的设计充满敬畏之情？对我来说，那个网站就是条纹。Stripe是一家允许个人和企业接受在线和移动应用支付的公司。这听起来不像是一家网站设计精美的公司，但看看斯利普在他们的关于页面上是如何描述自己的。

我们认为建立互联网业务是一个根源于代码和设计的问题，而不是财务问题。

与其说设计是事后才想到的，不如说是把它当做斯利普的一等公民对待。当你浏览网站的页面时，你几乎可以感觉到花在重复设计和做细微调整上的工作时间。在这篇文章中，我将详细分析一下Strip是如何创建这些漂亮的设计的，并给网页设计师和开发人员一些提示和诀窍。

上图是“条纹”主登陆页面的设计。乍一看，这才是真正让我印象深刻的：

Stripe使用一种名为Camphor的字体。这是一种现代的、整洁的、无衬线的字体，由尼克·乔布斯于2010年设计。它真的在这里闪耀着光芒，而且在各种重量下看起来都很棒。

排版可以说是你设计中最重要的部分，因为它是你内容的媒介。条纹在使用不同的粗细和颜色来提供足够的对比度方面做得非常出色。这会把你的注意力吸引到最重要的事情上。

让我们看看怎样才能使我们的字体尽可能清晰。首先，我们将把我们的字体系列定义为Camphor以及一些后备字体。注意：樟脑不是免费的，如果你计划在生产中使用它，应该购买它。不过，我确实找到了包含字体的要点，您可以随意摆弄。

我们可以利用文本呈现CSS属性来允许我们选择质量而不是速度，以及一些特定于供应商的属性来使我们的字体更清晰。注意：这些应该适用于Mac上的Chrome、Safari和Firefox。

BODY{font-family：樟脑，Open Sans，Segoe UI，sans-serif；文本呈现：OptimizeLegiability；-webkit-font-smoting：抗锯齿；-moz-osx-font-smoting：灰度；}。

将鼠标悬停在按钮和链接等项目上时指示视觉响应可提供极佳的用户体验。在下面的示例中，您会注意到按钮在悬停时会稍微向上移动，并将颜色更改为较浅的紫色。长方体阴影也变得更加强烈。

按钮：HOVER{COLOR：#7795f8；Transform：TranslateY(-1 px)；长方体阴影：0 7 px 14 px RGBA(50，50，93，0.1)，0 3 px 6 px RGBA(0，0，0，0.08)；}。

这真的让人感觉这个按钮是要被点击的。这是一次美妙的经历。您可以在CodePen上查看代码以在此处重新创建按钮。

我个人很喜欢条纹网站的调色板。它很鲜艳，用一些漂亮的强调色吸引了你的注意力。

另一件让我印象深刻的事情是，他们的图像看起来质量很高。这是因为他们尽可能使用SVG(可缩放矢量图形)图像，而不是普通的.png或.jpg文件。这有很多好处。

主屏幕上显示的那个平板电脑？是的，那是一个经过缩放和旋转的.svg。这里是来自条纹网站的.svg文件。请注意，当您放大时，质量是如何保持清晰的。

动画是对已经很漂亮的设计的额外润色。在“条纹”的所有页面中，你会发现各种各样的动画，就像下面所示的那样。有些比另一些更微妙，但每一种都有其用武之地。

如果您从未使用过CSS动画，我写了一篇简短的文章，说明如何通过示例学习它们。

要想更详细地了解动画制作，我强烈推荐这篇博文，作者是斯利普自己的本杰明·德·考克(Benjamin De Cock)，他分析了他们的产品Connect的前端体验。

希望这篇文章能给你一些洞察力，让你了解Strip是如何设计他们的网站的，并激励你去创造自己的东西！这里有三个要点要留给你。