[每个开发人员都应该知道五个设计技巧.docxVIP

每个开发人员都应该知道五个设计技巧优秀的开发人员和优秀的设计师在工作中必须要默契配合，不幸的是，针对审美能力较弱的开发人员来说，他们通常会觉得自己缺乏天赋，或者压根就对设计 这事提不起兴趣。换句话说，大家可能都有这么一个观点：如果没有与生俱来的美学天赋，那么就必然没有审美能力。然而，对这个说法，我会在接下来的文章里帮 您扭转过来。你只要稍微思考一下就会发现：如果你5岁的时候就停止写作，那么你对写作可能就是一团糟，对于艺术设计，道理是一样的。大多数人都是在他们开始掌握画画的时候就停止创作艺术了。幸运的是，学习永远都不晚。并且从事实来讲，日渐成熟的你将更容易从主观观点中学习到客观的知识。如果你在一个小团队里面身兼数职，又或者你觉得你的项目可以取得成功，并且还有空间可以发挥的更完美的话，那么这篇文章就是写给你的。我们将谈到传统的5个消除恶俗设计的原则方法（当然我们也不迷信，但我保证至少能在现基础上，提升一个档次）1. 是时候来点留白了大多数的开发者并不在意添加空白的像页边距，填充，行高，或者其他任何增加空白的CSS属性。识别出开发者设计的界面是很容易的：文本都是紧紧地挨着边缘的，没有任何留白，而且屏幕元素之间是通过直线来实现分割的，而不是空白。可以看到，在上面的盒子中，文本紧紧地挤向了盒子的边缘，每一行之间也没有空白。相比之下，第二个就要易读多了，而且能够看得出是经过精心规划的。在艺术领域，元素之间的这个区域就被称之为负空间，尽管在设计的其他领域，通常被称作“留白”。负空间能够使得浏览者迅速地识别设计的不同部分。同时也让文字更易读。下面是几点小建议：● 确保文本有足够的“呼吸”空间。在区域的四边上都应该有合适的填充。文本不应该碰到元素的边缘。● 注意“盒模型”，当页面的元素之间是使用边框而不是页边距时，你得到的就是矩形的嵌套。下一次给元素添加边框的时候，试着添加边距来进行替代。● 额外建议：给元素的下边缘添加一点点额外的空白。通常这样可以制造一些视觉上的抬升，使得这些元素在页面上看起来更轻。当艺术家在制作衬边时，他们通常会采用这一招来进行衬边以使底边看起来比其他边更大。仅仅合理地使用留白这一个方法，就已经能够让你比其他尝试做视觉设计的开发者做得好出100%了。2. 设置明暗以增加对比在音乐中，有一个概念，叫做力度（Dynamics,指随音乐强弱变化而变化的舞蹈动作或情态）。通过播放低声播放轻柔的部分，这样使得高音部分听起来更高亢，这样来增加情感，反之依然。在设计中的道理是一样的。当所有的东西都是重点的时候，就没有重点了。这些字符是表示不同音乐力度的符号，从轻柔到高亢：弱，中弱，中强，强。在设计中，你可以通过颜色的明暗来调整视觉比重。图片下方的渐变被称之为价值量表。当你在Treehouse编辑你的个人资料时，你可以为自己添加一个个性域名。深色的文本显示了你独特的名称，浅色的文字是URL的其他部分。一些建议：● 与编写代码要先进行测试一样，你也应该先对你的设计进行测试。在放出你的新设计版本以前，试着先 用灰度模式来浏览你的网页。这样你就可以立马看出颜色最深和最浅的区域是哪儿了。如果每一样东西看起来都是一样的的话，那就该添加更多的明暗来增加对比 了。单纯的色彩是不足以把不同的设计元素区分开来的；明暗配合更重要。● 把你的网页截屏下来，然后使用像Photoshop这样的图片编辑工具调整曲线，色阶（level），看一下不同的效果。有时候，你会发现使用CSS进行一些细微的调整便能够让设计看起来更赏心悦目。几乎在每一种设计形式中，初学者都会禁不住诱惑而去调高明暗对比。将明暗调低是成熟的标志，同时也有助于突出设计中的重要部分。3. 使用纹理增强设计感真实世界中的绝大多数东西都并非是完全平整光滑的。纹理会给你的界面带来多样性。即使你没有尝试使用拟物化（skueomorphism）来复制真 实的表面，在不同的地方添加一些纹理也不失为一个好主意。纹理的灵感来源四处都是，纸张，金属，石头，都行。甚至连大块的文字也可以被认为是纹理化的。通 常一点随机的噪点就能够把你的设计和其他那些平庸乏味的设计区分开来。纹理能够让平淡无奇的对象变得具有自身的特点和生命力。一些关于纹理的建议：● 无论是象征意义上还是字面上，纹理都可以添加视觉上的丰富程度，同时还能让页面开起来更有深度。● 如果你使用了渐变，或者许多细致的颜色过渡，那么你真的应该在顶部使用一些轻度的纹理，因为这样可以减少颜色的条带效应（Banding），让颜色过渡得更自然。CSS3中的Multiple backgounds 可以轻松实现这一点。● 在CSS3里面使用多层背景也意味着能以最小的文件大小来实现纹理化。你可以用一个充满噪点的小方形重复来填充整个页面。然后，你还可以把这个小方块用到其他很多地方去。4.