对于高科技日新月异的今天，你只需花少量的时间通过工作设计Dribbble仅仅为了了解他们，你就有一千种方法可以来创建一个按钮。这些方法很多都是完全相同的，只是偶尔有几个古怪的需要你更多的关注和了解他们的制作。利用新的奇妙的CSS3特性我们可以创造一些令人惊讶的优雅与时尚并存的按钮样式，这已经完全足够旧款式的浏览器了。你可能想创建属于你自己的CSS按钮，或者你可能喜欢你的布局工具上的搭配，但重要的是要仔细考虑你的网页语境中的按钮设计。 我们可以简单地实现一个预先设计的用户界面元素，网站有很多免费分享的PSD文件，这一切都太容易了（毫无疑问包含苹果启发的按钮）。但是，为什么不花一点时间来考虑一下这个按钮风格是否适合放入你设计的背景之下，考虑一下是否有更多的空间去创造一些新颖的东西？利用别人的按钮是好的，它可以节省时间，但有你没有花一点时间来了解和组成您的设计（或别人的）的更详细一点的按钮：他们是如何设计的？他们是否合适你的接口/背景/品牌？是否有空间创造一些独特的地方？我的按钮很突出？我需要初级，二次，三次按钮？他们看起来大不相同，彼此不够？他们看起来很光滑？！（为什么不这样做呢，我们都想设计很酷的东西好嘛？！）。这里有十个快速简单设计UI按钮的原则。我一直都想当一个UI设计师。我不想分享如何使用图层在PS图象处理软件中进行一些简单的设计想法。我觉得通用设计的原则，可以让你的按钮和其他的UI设计优化走的更远。
1.匹配的品牌
你的按钮配合网页的语境方式，这很重要。这可能意味着符合一个网站的整体风格，从某种形式的品牌指导方针或标志图形的方式等也许有一些突出的形状，你可以你挑选需要的纹理或设计风格。也许一个标志有一个圆形的方面，你可以拿起你这个按钮或其他潜在的形状进行比较选择。如果一个接口主要采用平面色彩。如果你能利用这个机会，通过接口，使用适当的形状，实验效果，着色或其他形式的点缀来延伸品牌
2.匹配关系
用photoshop打开psd格式的UI元素，你很容易实现梯度，阴影，斜面等效果。但是它是否是正确的选择，这不仅要符合网站品牌，而且也是整个界面中的一个按钮，它可能是一个一个需要移动的应用程序。所以你需要在网站上做点不同的东西和你的按钮或行动进行呼应。
3.有足够的对比度
有很多界面设计的灵感来自苹果IOS，特别是现在有很多的用户界面元素的PSD存在，我们可以在用户界面上使用一些小按钮等元素，发挥他们潜在的重要力量。你可以尝试使用不同的颜色，字体大小，空格等以确保你的按钮从中脱颖而出，展现粗界面的视觉重量。
4.考虑圆角或美观的按钮
根据以上描述，如果有UI元素在你设计的区域，考虑使用圆角按钮或者其他形状的稍微变化。这可以产生对比以确保呼应你下面的重要行动，同时也突出这些按钮的价值。
5.强调辅助用户界面元素
如果你想成为一个IOS灵感风格的设计师或者采用网上寻找的psd格式的UI元素，那么你的UI元素将主要以圆角矩形形状为主。例如，你的选择菜单，分段控制，自定义菜单可能都是相同的圆角形状，但是用更少的阴影，边界，锥，梯度或其他影响可以帮助减少他们的丰富性，这样反过来促进了按钮样式。
6.颜色匹配形成边界
我们可以看到按钮对网站界面可形成某种形式的边界。一般来说，如果你的按钮是较暗的背景，它使用一个黑暗的通用按钮颜色。如果你坚持使用前和使用它在一个黑暗的背景下，你发现再前者背景下它可以使按钮边有点脏，后者背景下可以让你的按钮很流行。我认为这是在处理Web设计边界的一般设计原则。
7.小心模糊的影子
如果一个元素使用比其背景再黑暗的阴影应该更加巧妙。类似的颜色匹配的边界，我非常认为这是一个适用于所有用户界面元素设计的一般原则。
8.小细节可以给你的启示
当用户点击时，一些小细节比如一个箭头可以给一些动作一个小的提示。例如，一个箭头在按钮上的文本指向右可能给用户某种运动或离开页面的提示。向下箭头可能表明一些内容将逐步披露，或者某种菜单将放开更多的内容。
9.考虑一级，二级和三级样式
如果你正在设计一个接口，它有很多动作和功能上都显示它需要建立一些视觉语言。考虑保留最强大和最大胆的色彩作为您的主要按钮的颜色。然后使用强度或饱和度逐渐降低的色彩，阴影，考虑减少尺寸，空格，以及点缀的文本尺寸和水平的进一步降低来区分众多按钮的视觉重量。
10.让你的按钮总是处于反馈状态
在设计工作结束后，你需要确保你的按钮设计能迅速在上下文中提供给用户所需的足够的反馈。在现实世界中用户通过按钮的各种状态使用它们，这是用户使用按钮工作的心理模型。阴影，边界和梯度等可以给用户一些简单的反馈
结论
作为一名网页设计师，在使用或依靠预先设计的风格和UI元素没有害处，他们显然可以节省很多时间。这些预先设计的UI元素有些可能制作的很完美，这也正是你正在寻找的，而且它还是免费的。然而，我认为更深入的了解设计流程和工艺这并不能阻止你的创造和你的设计方向。
UI设计师不可忽略的十大UI设计原则http://www.siweiw.com/sjinfo6182.html
网友评论