成功的按钮设计的准则

只要你花一点点时间去 dribbble网站上去感受一下如今的按钮设计，你会发现，其方法多种多样。大部分的作品都是类似的，但是有极少部分的作品则更为优秀，设计者在创作上花了更多的心思和功夫。

利用css3的新属性，我们可以不借助丝毫图片，就创造出非常简洁现代的按钮样式。即便是在相对过时的浏览器中，也有可依靠的样式做辅助。你可能喜欢用css直接设计你的按钮，或者做平面的工具是你的选择。但是，事先想好你的按钮设计是如何融合于你的设计背景下是重要的。

用事先设计好的免费的“界面元素”（其中不乏类似apple的设计）当然是最容易的。可是，为什么不抽时间考虑一下你所选的按钮样式是否符合你的总体方案，并且想一想是不是有原创的空间。

重新使用别人的按钮设计是没什么问题，而且节约时间，不过花时间详细理解这个设计以及这个设计的组成元素也是有益无害的。它们是如何设计的？ 它们同整个界面设计，总体效果以及品牌相符吗？可否有机会创造出更独特的？按钮足够突出吗？ 需要有主要，次要和次次要的按钮之分吗？它们看上去各不相同吗？它们看上去美观吗（我们都想设计出酷炫的感觉，不是吗？！）

我在设计按钮的时候，时常会思考下面几样东西。我不打算跟你们分享我是如何操作photoshop，只是可以帮你优化按钮和界面设计的，一些大致的设计准则。

1.与品牌相符

你的按钮同整个设计样式的融合是重要的。这个可以是指按钮融合进当中的一个色系，整体平面造型或者是由商标或是品牌衍生出得一种形态。这其中也可能由一些突出的型态，质地你可以借来发挥。譬如你可以利用有圆形造像元素的商标作为灵感来创造你的按钮。

如果一个界面大量使用单色，那么类似apple的按钮可能就不太适合了。如果允许，你可以利用这个机会试试使用合适的形状，效果，色彩以及其他方式的装饰来把品牌造型延伸到界面造型中来。

2.与总体造型相符

接着上一点说，在打开你的“界面元素”psd文件之前，先停下思考一阵。虽然用渐变，阴影和斜角等等的效果很容易，但是想想它是否与你的品牌匹配，是否与界面协调， 以及是否需要设计成非常酷似按钮的造型。

在应用软件和移动电子品上，按钮可能需要设计成非常逼真的样子。但是有些情况下，你可能需要你的按钮做一些不一样的任务。

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

受到apple os 的设计造型影响，特别是很多界面元素psd的现成设计的存在，按钮在整个界面中变的有点模糊，渐渐的削弱了其潜在的重要功能。试着使用颜色，大小，留白以及字体来突出按钮的视觉份量，使它从界面中突出。

4.考虑使用形状明显的按钮

如果在界面元素里面有很多圆角的元素，不妨考虑用圆状的按钮或者稍作演变的形状。这样可以有更多的对比度，来保证你的呼吁行动的按钮得到明显的体现。

5.减弱次要的界面元素

如果你要力求到达受os影响的样式或者你是基于事先设计好的psd样板来开始做设计的话，你整个界面元素很可能大部分都是倒圆角的长方形形状做主打。试图减少在上面做过多的效果可以让它们看起来不那么“按钮化”。

譬如说，选择菜单，分类控制面板，订制菜单的设计可以都是类似的倒圆角形状，但是用更少的阴影，边缘线，斜角，渐变或者其它效果，可以帮助减弱它们的明显度，从而使按钮突显出来。

6.线条／边缘线的色彩搭配

我们看到大部分的按钮都含有某种方式的的边缘线， 如果你的按钮比背景色深，就用比按钮色更深点的线条做边缘。如果反过来，选择比背景色更深的颜色做线条色。我发现，如果你按照第一种方法，但是用在比按钮深色的背景上，整个按钮边缘会显得有一些“脏”。使用后者也可以突出按钮。我觉得这个是在网页设计中的边缘线设计上比较通用的原则。

7.谨慎使用模糊化的阴影

很多年来，我都一直信赖我的“阴影法则”，它指出在深色背景下的浅色元素上使用阴影最为恰当。如果是深色元素和浅色背景，阴影需要非常微妙。更上一条一样，我觉得这个也是一个对所有界面元素都适用的法则。

8.微妙的图解具有可供性

小细节可以让你的按钮在类似的界面元素与众不同，同样，图标的适用，比如箭头，也可以给予用户一些动作概念并且告诉用户点击之后的效果是什么。

举个例子，文字旁向右指的箭头给予用户离开此页面或者继续的感觉。向下指的箭头就代表一些内容会逐步显现，或者某种菜单会展开

9.考虑分第一，第二，第三层的体系样式

如果你设计的界面有许多持续出现的任务活动和功能需求，用第一，第二，第三，以及更多层次的按钮样式来建立视觉语言可能是关键的。

考虑把鲜艳大胆的色彩留给你的主要按钮使用，而依层次，逐步减弱力度和饱和度。同样来说，考虑缩小尺寸，留白空间，字体大小以及减少装饰效果，从而削弱那些次要按钮的视觉份量

10.按钮的状态反馈

这一点虽然根本不需要多想，但是却常常是到设计流程的最后一步才做考虑。在设计按钮不同的重要状态时，保证它能给用户提供足够的信息反馈。用户因为使用过不同状态下的按钮，很有可能已经在心中有一个模版了。用css在阴影，线条，渐变上做简单的改动就能使给用户简单的状态回馈，并使之眼前一亮。

结论

作为设计师们来说，很可能你们都有自己的一个流程。我打赌，大部分的时候你们会远离电脑，微微扭头，眯着眼睛看一下，然后说”这样差不多了“。这当然是设计的部分乐趣所在，有天赋的设计师只需要这样做就达到效果了。不过我认为对自己的设计选择做一次内部的评价，审视和推理总是好的。

重复使用以及借助事先设计好的界面样式是没什么不好的，它们可以节省很多时间。说不定那些无可挑剔的设计正是你想要的，而且还免费。但是，我觉得对设计流程和制作有一个更为深入的理解，以及为你以后的设计抉择做准备也是好的。

---

来自:http://webdesign.tutsplus.com/zh-hans/articles/principles-for-successful-button-design--webdesign-6094