按钮设计_成功的按钮设计原则

按钮设计

如今，有上千种设计和创建按钮的方法，您只需要花费少量的时间就在盘球上的工作进行浏览就可以了解它们。 这些示例中的很多都是完全相同的，但偶尔会有少数人觉得他们在制作过程中有更多的关注和关注。

利用出色CSS3新属性，我们可以创建一些令人惊奇的优雅和时尚的按钮样式，而不必像图像那样虚张声势，并且可以为较旧的浏览器提供完全合适的后备样式。 您可能想直接在CSS中创建按钮，或者可能想要使用自己选择的布局工具，但是仔细考虑按钮设计在上下文中的生活很重要。

轻易获得一些慷慨的灵魂免费共享的预先设计的“ UI Elements PSD”，这太容易了（毫无疑问，其中包含Apple启发的按钮）。 但是，为什么不花一点时间来考虑上述按钮样式是否适合您的设计，并考虑是否有空间创建一些更原始的东西呢？

回收别人的按钮很好，可以节省时间，但是花一点时间来更详细地了解（或别人的）按钮的设计和组成也没有什么害处。 他们是如何设计的？ 它们适合界面/上下文/品牌吗？ 有机会创造独特的东西吗？ 我的按钮够显眼吗？ 我需要主按钮，副按钮，三级按钮吗？ 它们之间是否有足够的区别？ 它们看起来光滑吗？ （为什么不，我们每个人都想设计看起来很酷的东西，对吗？！）。

这是我在设计按钮时经常想到的十件事。 我不会分享有关如何在Photoshop中使用图层效果的想法，而是分享一些简单的常规设计原则，这些原则对于优化按钮和其他UI的设计大有帮助。

1.配套品牌

重要的是您的按钮必须与它们的上下文样式相匹配。 这可能意味着要适合调色板，图形样式或从某种形式的品牌指南或徽标中抢占先机。 也许有一些突出的形状，纹理或设计样式可供您选择。 徽标可能具有圆形的外观，您可以在按钮中或其他可能的号召性用语中进行选择。

如果界面主要使用纯色，则可能没有大的闪亮的类似Apple的按钮。 如果可以的话，请利用适当的形状，效果，色彩或其他形式的装饰，尝试将品牌延伸到界面。

2.匹配上下文样式

从上方继续，稍等片刻，然后再打开“ UI Elements PSD”。 容易找到渐变色，阴影，斜角等，但花点时间思考一下，不仅是匹配品牌的正确选择，还是按钮所在的界面以及是否需要过分“扣子”的选择都是正确的选择。

例如，在应用程序内和在移动设备上，按钮可能需要感觉特别像按钮，但是在网站上，可能仍有空间可以对按钮或号召性用语进行一些不同的操作。

3.确保按钮有足够的对比度

如此众多的界面设计受到Apple OS风格的启发，尤其是在许多UI元素PSD中，按钮可能会在UI中使用的其他元素中有些丢失，从而削弱了它们潜在的重要功能。 尝试使用颜色，大小，空格或版式，以确保您的按钮具有从界面其余部分中脱颖而出的视觉效果。

4.考虑圆形或整齐的按钮

从上面继续，如果您的设计中还有很多其他圆角UI元素，请考虑使用圆形末端的按钮或其他形状的更改。 这可以给您带来额外的对比，从而确保您的重要行动呼吁具有他们可能需要的突出地位。

5.不再强调辅助用户界面元素

如果您正在寻求操作系统启发的样式，或者正在使用预设计的元素PSD，则您的UI元素很可能主要是圆角矩形。 考虑减少对那些可以减轻“纽扣”感的元素的修饰程度。

例如，定制选择菜单，分段控件，自定义菜单触发器可能都具有相同的圆角形状，但是使用较少的阴影，边框，斜角，渐变或其他效果可以帮助减少其丰富度，进而提升按钮样式。

6.色彩匹配笔触/边框

我们在那里看到的大多数按钮上都有某种形式的边框或笔触。 宽松地说，如果您的按钮比它所位于的背景暗，则使用常规按钮颜色的深色笔触。 如果相反，则选择背景颜色较深的笔触。 如果您坚持使用前者，并在较暗的背景上使用它，我会发现它会使按钮边缘有些“脏”。 使用后者也可以使按钮真正弹出。 在处理网页设计中的笔触/边框时，我认为这是一般设计原则。

7.小心模糊的阴影

多年来，我一直宣誓效法“影子法”。 “阴影定律”规定，当元素比其背景浅时，阴影效果最好。 如果元素比其背景暗，则应非常巧妙地使用阴影。 类似于颜色匹配的笔触和边框，我非常认为这是适用于所有UI元素的通用设计原则。

8.微妙的图像可以给人以钱

除了可以使您的按钮与相似的UI元素进一步区分的另一个小细节之外，使用简单的图标元素（例如箭头）还可以使用户产生一定的操作感，并且对用户单击时会发生的情况有所保留 。

例如，在按钮上的文本后面紧紧指向的箭头可能会给用户带来前进或离开页面的感觉。 向下的箭头可能表明某些内容将在下面逐步披露，或者可能会打开某种菜单。

9.考虑主要，次要和三次风格

如果您正在设计一个界面，其中始终显示许多动作和功能，那么通过建立主要，次要，第三种以及可能更多的样式来用按钮建立某种视觉语言可能很重要。

考虑为主要按钮保留最强和最粗体的颜色，并在降低重要性时逐渐减少强度或饱和度。 除了颜色和阴影外，还应考虑减小大小，空格，文本大小和修饰级别，以进一步减轻非主要按钮的视觉重量。

10.始终做出反馈状态

的确，这确实是不费吹灰之力，但是在设计过程的最后往往会考虑这一点。 始终通过按钮所需的核心状态进行工作，以确保它们在上下文中为用户提供足够的反馈。 当用户通过按钮的各种状态使用按钮时，他们可能会对按钮在现实世界中的工作方式有一个心理模型。 一些带有阴影，边框和渐变之类的简单CSS调整可以为用户提供一些简单的反馈，并给人以惊喜的感觉！

结论

作为设计师，您将拥有自己的流程。 我会打赌很多时间，包括将头从屏幕上移回，稍微倾斜，斜视并说“是的，这是正确的！”。 这当然是设计乐趣的一部分，有才华的设计师往往会做到这一点正确，但是我认为对您正在做出的设计决策进行一些内部评论，审讯和推理总是很有益的。

重复使用或依靠预先设计的样式和UI元素没有任何危害，它们显然可以节省大量时间。 甚至可能有人完全按照像素的要求精心制作了您想要的东西，并且免费提供了它。 但是，我认为对正在创建的内容以及未来的设计决策背后的设计过程和Craft.io进行更深入的了解不会有任何危害。

翻译自: https://webdesign.tutsplus.com/articles/principles-for-successful-button-design--webdesign-6094

按钮设计