每个开发人员应该知道5个设计技巧

优秀的编码和优秀的设计之间是相辅相成的。不幸的是,视觉设计能力偏弱的人通常会觉得自己缺乏天赋,换句话说,就是人们要么觉得自己具有出众的美学天赋,要么就是这方面的白痴。对这个说法,我可不敢苟同。

你只要稍微思考一下就会发现:如果你5岁的时候就停止写作,那么你对写作可能就是一团糟,对于艺术设计,道理是一样的。大多数人都是在他们开始掌握画画的时候就停止创作艺术了。

幸运的是,学习永远都不晚。并且从事实来讲,日渐成熟的你将更容易从主观观点中学习到客观的知识。

如果你在一个小团队里面身兼数职,却又没有多少美学基础。又或者你觉得你们的项目在视觉上还有更多发挥的空间,那么这篇文章就是写给你的。我们将谈到传统的5个消除丑陋艺术设计的元素和原则(或者至少能够进行一定程度的掩盖)

1.来点留白

大多数的开发者并不在意添加空白的像页边距,填充,行高,或者其他任何增加空白的CSS属性。识别出开发者设计的界面是很容易的:文本都是紧紧地挨着边缘的,没有任何留白,而且屏幕元素之间是通过直线来实现分割的,而不是空白。

每个开发人员应该知道5个设计技巧,PS<a href=/photoshop/ target=_blank class=infotextkey>教程</a>,

可以看到,在上面的盒子中,文本紧紧地挤向了盒子的边缘,每一行之间也没有空白。相比之下,第二个就要易读多了,而且能够看得出是经过精心规划的。

在艺术领域,元素之间的这个区域就被称之为负空间,尽管在设计的其他领域,通常被称作“空白空间”。负空间能够使得浏览者迅速地识别设计的不同部分。同时也让文字更易读。

下面是几点小建议:

确保文本有足够的“呼吸”空间。在区域的四边上都应该有合适的填充。文本不应该碰到元素的边缘。

注意“盒中盒”。当页面的元素之间是使用边框而不是页边距时,你得到的就是矩形的嵌套。下一次给元素添加边框的时候,试着添加边距来进行替代。

额外建议:给元素的下边缘添加一点点额外的空白。通常这样可以制造一些视觉上的抬升,使得这些元素在页面上看起来更轻。当艺术家在制作衬边时,他们通常会采用这一招来进行衬边以使底边看起来比其他边更大。仅仅合理地使用留白这一个方法,就已经能够让你比其他尝试做视觉设计的开发者做得好出100%了。

2.设置明暗以增加对比

在音乐中,有一个概念,叫做力度(Dynamics,指随音乐强弱变化而变化的舞蹈动作或情态)。通过播放低声播放轻柔的部分,这样使得高音部分听起来更高亢,这样来增加情感,反之依然。在设计中的道理是一样的。当所有的东西都是重点的时候,就没有重点了。

每个开发人员应该知道5个设计技巧,PS教程,

这些字符是表示不同音乐力度的符号,从轻柔到高亢:弱,中弱,中强,强。在设计中,你可以通过颜色的明暗来调整视觉比重。图片下方的渐变被称之为价值量表。

明暗配合,一个用以描述颜色明暗的术语。把明调和暗调放到一起的时候,就形成了对比。比如说,一个表单中的指示文本可能没有表单的标签那么重要,因此,你就应该使用更小的字号或者灰色来显示相关的文本,而不是抢眼的黑色。如果表单用黑色加粗显示Email标签栏,你可能需要在底部添加一些补充说明,以让用户相信不会使用被提供的地址来干一些非法的事情。这一段提示性文字相对没有那么重要,因此要设置得比其他的稍“轻”一些。

每个开发人员应该知道5个设计技巧,PS教程,

当你在Treehouse编辑你的个人资料时,你可以为自己添加一个个性域名。深色的文本显示了你独特的名称,浅色的文字是URL的其他部分。

视觉上的重量感不是你要注意的唯一一件事。你还得确保明暗的正确搭配,这样的话屏幕上的元素就可以很容易地被区分开来。这是一种很常见的设计思路,因为较之色彩来说,人类的眼睛实际上对色彩的明暗更为敏感。

几点建议:

与编写代码要先进行测试一样,你也应该先对你的设计进行测试。在放出你的新设计版本以前,试着先用灰度模式来浏览你的网页。这样你就可以立马看出颜色最深和最浅的区域是哪儿了。如果每一样东西看起来都是一样的的话,那就该添加更多的明暗来增加对比了。单纯的色彩是不足以把不同的设计元素区分开来的;明暗配合更重要。

把你的网页截屏下来,然后使用像photoshop这样的图片编辑工具调整曲线,色阶(level),看一下不同的效果。有时候,你会发现使用CSS进行一些细微的调整便能够让设计看起来更赏心悦目。几乎在每一种设计形式中,初学者都会禁不住诱惑而去调高明暗对比。将明暗调低是成熟的标志,同时也有助于突出设计中的重要部分。