每个开发者都应该知道的 5 个设计技巧

伟大的程序和伟大的设计需要彼此协调合作。不幸的是只具备普通设计能力的人，总会认为自己缺少的是与生俱来的能力。换句话说，有一个普遍的认识，认为一个人要么生来就具有超然的审美能力，依靠后天的努力也还是无法具备这样的能力。我实在不能认同这样的观点。

其它翻译版本(1)

简单想一下：如果你从5岁开始就停止了书写，那么也许你一辈子都会害怕书写。设计也是一样的道理。大多数人从他们用手指作画时，就停止了他们创作艺术的权利。

幸运的是，学习永远都不会太晚。事实上，客观地说，人越成熟，学会一样新东西就会越容易。

其它翻译版本(1)

如果你是一个团队里的头头，或者你希望通过改善你的项目外观来使得你的项目变得更成功，那么这篇文章就适合你。这里有五项艺术设计原则能够避免丑陋的设计（最少能改善丑陋的设计）。

1. 使用负空间 (Negative)

大多数开发人员都不会留意像 margin, padding, line-height, 或其他能增加间距的 CSS 属性. 在开发人员设计好的界面上，你很容易看到这样的现象：文本通常贴着边框而没留有间距，行与行之间也紧紧挨在一起，不会留点空白.

其它翻译版本(1)

在上图的第一个框里，文字就是贴着边框，且每行之间没留空隙的例子。而第二个框的例子就明显比较容易阅读，并感觉是设计过的。

在良好的艺术设计领域里，各个设计元素之间区域被称为“负空间”，而在其他设计领域则通常被称作“空白区”。负空间可以让读者迅速识别设计的各个部分. 这也使得文本更容易阅读。

这里有几个技巧：

• 确保文本有足够的容身之地。它的四周都应该有合适的内边距。文本绝对不能挨着元素的边缘。
• 注意盒子中有盒子的外观。如果页面元素是通过边框而不是外边距来区别，会导致大量的嵌套的框。下一次当你想添加边框时，试着添加外边距试试。
• 额外送一个技巧：给元素的底部添加额外的间距。有时加一个小的视觉的升高会让它们在页面上看起来更突出。当艺术家打磨作品时，他们通常会使用这个视觉小技巧将底部打磨得比其它面都大。

只是简单的使用间距，你已经在设计上百分百比其他开发者好了。

其它翻译版本(1)

2. 通过不同值来建立对比度

在音乐上，有个概念叫力度。你在演唱一首歌的音调轻柔的部分，增加了点强音，那么这部分听起来就会响亮一些，反之亦然。在设计方面也是同理。当一个界面中的字体全部加粗了，那么就相当于没有粗体了。

上图中的字母就是音乐力度符号，从轻柔到高音分别是：弱，中弱，中强，强。在设计中，你可以通过使用光与暗的颜色来调整视觉冲击力。上图底部的灰度图，被称为值尺度。

“值”是一个术语，用于描述一种颜色的亮度或暗度。当一个浅色和一个深色紧挨在一起时，它创建了一个对比度。对比度可以帮助读者识别什么是重要的。例如，一个表单元素的说明文字可能没有一个表单的标签那么重要，那么这些说明文字你就应该使用一种更小的字体，或者使用灰色字体来装饰，而不是粗黑的字体。如果在表单标签上用黑色粗体字给出了一个电子邮件地址，你可能需要在后面添加一些补充说明文字，以确保读者，你不会使用他们提供的邮件地址来实现一些不可告人的目的。这种额外的文字并不重要，所以你应该使它看起来比其它的文字都“低调”些。

如上图，当你在 Treehouse 网站上编辑你的个人信息时，你可以为你自己输入一个特定的网址。其中黑色的文本是你的唯一的标识符，而网址中剩余的浅色文字则可以让你知道，你的网址最终看起来是什么样的。

设计中，文本的突出程度并不是唯一需要记住的事。你也要确认设计中的亮色与暗色有一个很好的搭配，以使得人们可以轻易地识别出设计中的不同的各个元素。这是一个有用的视觉工具，因为相对于识别出不同颜色的差异，人眼更易于识别出不同的亮暗对比度值的差异。

这是有几个技巧：

• 与你为代码写测试类似，你应该测试下你的设计。在发布下一个设计更新时，先看下它的灰度。很快你就能够看到最暗区域和最亮区域。如果所有东西看起来都是同样的灰度，那么就需要增加一些对比色了。纯色不能很好的区分各个设计元素的;对比色就不同了。
• 为你的网页截个图，并用图像编辑工具（如Photoshop)来调整（灰度的)曲线和级别值。有时你会无意发现通过简单的CSS调整就可以实现的更好的设计。

几乎在各种形式的设计中，初学者往往把所有的东西都搞得很突出。低调也是成熟表现，并且有助于突出最重要的部分。

3. 通过使用纹理增加多样性

大多数现实世界中的事物都不是完全平坦、光滑的。纹理可以增加界面的多样性。即便你不打算通过拟真设计复制一个真实的表面，在一些地方添加一点纹理也是比较好的做法。纹理的灵感到处都有，包括纸上、金属上还有石头上。即使是块状的文字，也可以看成纹理化的。大部分时候，一点点的随机杂色便足以让你的设计从其他平坦无趣的页面中脱颖而出。

其它翻译版本(1)

纹理赋予本来平凡无奇的对象以个性和历史感。

这里有一些关于使用纹理的建议：

• 纹理可以增加视觉丰富度，并且可以让页面看上去更有深度。
• 如果你使用渐变或者许多精细的颜色转换，那无疑你应该在顶部添加一些亮的纹理，这将减少色带，使得颜色的融合更加平滑。CSS3的多重背景样式让这更容易。
• CSS3的平铺背景使得纹理不需要尺寸很大的图片就可以实现。你可以画一个小的方块（大概256*256就够了），填充一些杂色、噪点，然后背景采用平铺（css中允许repeat）。这样实现图片的复用。

其它翻译版本(1)

4. 外形设计

在 web 设计方面，最易于被忽视的艺术元素是形状。显而易见，世界上有着大量的各种二维图形，但 HTML 和 CSS 却相当倾向于矩形。事实上，“盒子模型”就是一个需要掌握的最重要的 CSS 概念之一。当你淹没在代码中，试图去获取一个数据库连接来让你的程序工作起来，或者努力调整一个背景的位置时，你很容易忘掉一些最基本的东西。非矩形形状能够精确地展示出页面上的重要元素的关注点。

上图这个iOS系统中的箭头形状的后退按钮不但画出了关注点，也表达出了其功能。

仅仅因为我们的工具原先是设计来用于矩形的，并不意味着我们不能改变规则并制作出一些其它的形状。事实上，《CSS 能让你制作一些相当复杂的形状》 一文就在这方面做了一些努力并获得了成功。

下面是为什么要用形状的原因：

• 很多东西都是用矩形设计的，比如电视机，桌子，房子等等。即使你没有意识到，但曲线优美的或不规则的物体会显得很突出。如果你无法通过使用颜色、色彩对比度或让一个设计元素变得更大来突出一个页面元素的重要性，那么你可以使用一个特别形状来试试。
• 好的肖像设计或 logo 设计可以用一个简单的图形来标识，例如苹果公司或迪尼斯公司的 logo。在设计一些图标或 logo 时，通常都是从纯黑色的图形开始的。而阴影和色彩可以在以后再增加上去。
• 额外提示：如果你正试着为你的web应用程序增加关注度，而浏览者并不常去点击你希望点击的按钮，那么把按钮换成一个不常用的图形来试试（例如，用一个箭头状的按钮而不使用矩形的按钮）。即使开始看起来有一点点丑，但其可能会获得更多的关注度哦。

再提一个相关的注意事项，永远不要让那些工具束缚了你的想象力。先设计，然后再找出实际上可能是什么样的。

5. 平衡

在你花大量时间一个一个像素调页面细节之前其实还有更重要的事情要做——退一步看看你的全局图。视觉平衡是一个很难用清晰直接的言语讲清楚的概念，不过这是一种能被快速开发的直觉能力。

在梵高的“星夜”中，他用左边暗黑的尖角和右边生起的地平线平衡；右上角新月明亮的颜色和独特的形状与左下角的黑色相对。

平衡性是考察设计构图或者布局的一种方式。它指代一片区域相对于另一区域上的视觉加权数。理解这一点很重要：  不平衡的页面会带来一种糟糕的紧张感。在极少数情况下，你可以有意的通过调节视觉平衡度营造一种紧张感（例如恐怖电影网站），然而在多数实用网页应用中需要避免这一点。

通常情况下观察和认定一个页面是否左重右轻（或右重左轻）是比较容易的。可能是相对于另一边这边的元素排列、对比效果、着色等等更密。对比一下页面头部与底部的设计同样重要，尽管在一个带滑动条的页面上（大部分网页都是这样）这不及垂直对称重要。

让一个页面看起来更对称的的技巧:

居中打竖画一条直线。看上去是不是有一边比另一边更多东西？设计时不必完全对称，但内容上至少得两边都差不多。

试下将页面倒过来看看。如此一来你就不会盯着上面的文本和想搞明白上面的UI组件有什么用。相反，这时你就会忍不住关心上面的大部分页面元素是否正确。要是还有疑问，你也可以将这一条与上面的技巧一起用。

总结

以上基本的原理和原则会使设计变得更加得容易。它们当然不会给你带来神奇优雅的能力，但它们能帮你创建一些看起来舒适得体的web页面。如果你也有一些像这样的技巧，欢迎你留言，我将很乐意听取它们！

来源：http://www.oschina.net/translate/5-design-tips-every-developer-should-know?from=20130103