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

2014-5-9 蓝蓝

转载蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供有效的 BS界面设计、 cs界面设计、 ipad界面设计  、包装设计、图标定制、用户体验、交互设计、网站建设  、平面设计服务

来源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

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

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

1.来点留白

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

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

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

下面是几点小建议：

确保文本有足够的“呼吸”空间。在区域的四边上都应该有合适的填充。文本不应该碰到元素的边缘。
注意“盒中盒”。当页面的元素之间是使用边框而不是页边距时，你得到的就是矩形的嵌套。下一次给元素添加边框的时候，试着添加边距来进行替代。
额外建议：给元素的下边缘添加一点点额外的空白。通常这样可以制造一些视觉上的抬升，使得这些元素在页面上看起来更轻。当艺术家在制作衬边时，他们通常会采用这一招来进行衬边以使底边看起来比其他边更大。仅仅合理地使用留白这一个方法，就已经能够让你比其他尝试做视觉设计的开发者做得好出100%了。

2.设置明暗以增加对比

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

The symbols for various dynamics in music.

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

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

Screenshot of the profile URL input box on the Treehouse website.

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

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

几点建议：

与编写代码要先进行测试一样，你也应该先对你的设计进行测试。在放出你的新设计版本以前，试着先用灰度模式来浏览你的网页。这样你就可以立马看出颜色最深和最浅的区域是哪儿了。如果每一样东西看起来都是一样的的话，那就该添加更多的明暗来增加对比了。单纯的色彩是不足以把不同的设计元素区分开来的；明暗配合更重要。
把你的网页截屏下来，然后使用像Photoshop这样的图片编辑工具调整曲线，色阶（level），看一下不同的效果。有时候，你会发现使用CSS进行一些细微的调整便能够让设计看起来更赏心悦目。几乎在每一种设计形式中，初学者都会禁不住诱惑而去调高明暗对比。将明暗调低是成熟的标志，同时也有助于突出设计中的重要部分。

3.用纹理增加多样性

真实世界中的绝大多数东西都并非是完全平整光滑的。纹理会给你的界面带来多样性。即使你没有尝试使用拟物化（skueomorphism）来复制真实的表面，在不同的地方添加一些纹理也不失为一个好主意。纹理的灵感来源四处都是，纸张，金属，石头，都行。甚至连大块的文字也可以被认为是纹理化的。通常一点随机的噪点就能够把你的设计和其他那些平庸乏味的设计区分开来。

A photograph of rust and dirt.

纹理能够让平淡无奇的对象变得具有自身的特点和生命力。

一些关于纹理的建议：

无论是象征意义上还是字面上，纹理都可以添加视觉上的丰富程度，同时还能让页面开起来更有深度。
如果你使用了渐变，或者许多细致的颜色过渡，那么你真的应该在顶部使用一些轻度的纹理，因为这样可以减少颜色的条带效应（Banding），让颜色过渡得更自然。CSS3中的Multiple backgounds 可以轻松实现这一点。
在CSS3里面使用多层背景也意味着能以最小的文件大小来实现纹理化。你可以用一个充满噪点的小方形重复来填充整个页面。然后，你还可以把这个小方块用到其他很多地方去。

4.用形状来表达

在网页设计中，最容易被忽略的艺术元素就是形状。世界上二维的形状似乎有很多，但是在HTML和CSS的世界里面更倾向于矩形。事实上，盒模型是CSS中需要掌握的最重要的概念。当你埋头写代码，正在试图连接一个数据库，或者正在调整背景的合适位置的时候，很容易就会将这样基础的东西抛掷脑后。在页面中，非矩形可以让重要元素吸引足够的注意力。

A screenshot of the arrow-like settings button in iOS.

iOS中的这个箭形的返回键不但吸引力注意力，而且还能表达按钮实际功用。

仅仅因为我们大多数的工具是以矩形为基础的，这并不意味着我们不能打破常规，制作其他的形状。事实上，CSS让你稍作努力就能做出相对复杂的形状来。

你为什么应该使用形状：

很多物体都是以矩形为基础设计的：电视机，桌子，房间，等等。即使你没有下意识去注意他们，弯曲的和不规则的对象更容易吸引眼球。试一试用独特的形状来代替像用颜色，明暗配合，或者简单地让元素在页面中显得更大这样的方法。
一个设计优秀的图标或者LOGO就可以被看作一个简单的形状，比如说苹果索尼公司的LOGO一样。在设计图标和LOGO的时候，第一步从一个纯粹的黑色形状开始。然后就可以自由发挥，添加任何颜色，任何形状。
额外建议：如果你在你的WebAPP中试图增加交互，但是访问者却不去点击你得按钮，试试使用不同的形状来进行A/B测试，例如，尝试用箭头来替代矩形按钮。或许刚刚开始的时候，看起来会有点别扭，但是这样可能能够吸引足够注意力。相似的，永远不要让工具限制了你的想象力。先设计，然后再去寻找那些可能的东西。

5.寻找平衡

在你花数小时时间去安排像素点进行页面细节设计之前，回过头去看看整体效果是很重要的。视觉平衡是用直接的语言很难传达的一个东西，但是又是一种能够被很快培养起来的才能。

The Starry Night

在《星夜》中，梵高在画面的右边使用了一条上升的水平线来平衡左边的暗色形状。新月的光亮和独特形状控制住了右上角，和左下角的暗色空白相呼应。

平衡是思考设计构图和布局的一种方式。它是指在整个设计中不同区域的视觉重量的不同分布。正确应用这一点是很重要的：不平衡的页面会让人产生紧张感。在极少的情况下，你可以应用平衡来有意地制造紧张，比如为恐怖电影设计的网站，但是在大多数网页应用中，都应该避免这种情况的产生。

通常稍微看一眼就能看出页面的一边是不是比另一边显得更重。可能相比于设计中的另一边，一边的元素太多了，对比太重了，色彩太多了，等等。哪怕就是有页面的垂直滚动，考虑考虑页面中的上下平衡也是很重要的，不过这一点倒没有水平方向的平衡那么重要。

让页面具有平衡感的几点建议:

画出一直延伸到页面中部一条垂直的线。是不是现在觉得这一边比页面的另一边看起来多了一些东西？设计不需要是对称的，但是至少左右应该有相同的比重。
从上到下浏览页面。这样可以阻止你的眼睛去阅读文本，解释UI小部件的作用。相反，你应该去关注页面中的大多数元素的堆放位置。如果你还不是很确定的话，也可以和第一点结合起来。

总结：

这些基本的元素和原则让你能够更容易地理解设计。他们当然不能赋予你某种神秘的艺术特异功能，但是却能够帮助你制作出一些优雅的页面。如果你还有一些类似的建议的话，我也很乐意从评论中看到。

分享本文至：

« 网页设计实用线上制作工具免费的响应式网页设计模板 »

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com