英文原文：5 Design Tips Every Developer Should Know

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

其它翻译版本 (1) 加载中

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

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

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

1. 使用负空间 (Negative)

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

其它翻译版本 (1) 加载中

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

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

这里有几个技巧：

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

只是简单的使用间距，你已经在设计上百分百比其他开发者好了。 其它翻译版本 (1) 加载中

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

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

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

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

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

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

这是有几个技巧：

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

几乎在各种形式的设计中，初学者往往把所有的东西都搞得很突出。低调也是成熟表现，并且有助于突出最重要的部分。 本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务