2014-5-9 蓝蓝设计的小编
转载蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的 BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
来源:http://www.uisdc.com/100-things-you-should-know-about-design
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
优秀的编码和优秀的UI设计之间是相辅相成的。不幸的是,视觉设计能力偏弱的人通常会觉得自己缺乏天赋,换句话说,就是人们要么觉得自己具有出众的美学天赋,要么就是这方面的白痴。对这个说法,我可不敢苟同。
如果你在一个小团队里面身兼数职,却又没有多少美学基础。又或者你觉得你们的项目在视觉上还有更多发挥的空间,那么这篇文章就是写给你的。蓝蓝设计将谈到传统的5个消除丑陋艺术设计的元素和原则(或者至少能够进行一定程度的掩盖)
大多数的开发者并不在意添加空白的像页边距,填充,行高,或者其他任何增加空白的CSS属性。识别出开发者设计的界面设计是很容易的:文本都是紧紧地挨着边缘的,没有任何留白,而且屏幕元素之间是通过直线来实现分割的,而不是空白。
<img style="border-bottom:0px;border-left:0px;widows:2;text-transform:none;text-indent:0px;font:12px/21px Arial, Helvetica, Arial, sans-serif;max-width:100%;white-space:normal;orphans:2;letter-spacing:normal;height:auto;color:#525252;vertical-align:middle;border-top:0px;border-right:0px;word-spacing:0px;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;" alt="'Two examples of space. The first box reads "Do you ever feel like the walls are closing in on you?" The second box reads, "Space... The final frontier."'" src="http://uisdc.qiniudn.com/wp-content/uploads/2013/04/space.png" />
可以看到,在上面的盒子中,文本紧紧地挤向了盒子的边缘,每一行之间也没有空白。相比之下,第二个就要易读多了,而且能够看得出是经过精心规划的。
在艺术领域,元素之间的这个区域就被称之为负空间,尽管在设计的其他领域,通常被称作“空白空间”。负空间能够使得浏览者迅速地识别设计的不同部分。同时也让文字更易读。
在音乐中,有一个概念,叫做力度(Dynamics,指随音乐强弱变化而变化的舞蹈动作或情态)。通过播放低声播放轻柔的部分,这样使得高音部分听起来更高亢,这样来增加情感,反之依然。在设计中的道理是一样的。当所有的东西都是重点的时候,就没有重点了。
这些字符是表示不同音乐力度的符号,从轻柔到高亢:弱,中弱,中强,强。在设计中,你可以通过颜色的明暗来调整视觉比重。图片下方的渐变被称之为价值量表。
明暗配合,一个用以描述颜色明暗的术语。把明调和暗调放到一起的时候,就形成了对比。比如说,一个表单中的指示文本可能没有表单的标签那么重要,因此,你就应该使用更小的字号或者灰色来显示相关的文本,而不是抢眼的黑色。如果表单用黑色加粗显示Email标签栏,你可能需要在底部添加一些补充说明,以让用户相信不会使用被提供的地址来干一些非法的事情。这一段提示性文字相对没有那么重要,因此要设置得比其他的稍“轻”一些。
当你在Treehouse编辑你的个人资料时,你可以为自己添加一个个性域名。深色的文本显示了你独特的名称,浅色的文字是URL的其他部分。
视觉上的重量感不是你要注意的唯一一件事。你还得确保明暗的正确搭配,这样的话屏幕上的元素就可以很容易地被区分开来。这是一种很常见的设计思路,因为较之色彩来说,人类的眼睛实际上对色彩的明暗更为敏感。
真实世界中的绝大多数东西都并非是完全平整光滑的。纹理会给你的界面带来多样性。即使你没有尝试使用拟物化(skueomorphism)来复制真实的表面,在不同的地方添加一些纹理也不失为一个好主意。纹理的灵感来源四处都是,纸张,金属,石头,都行。甚至连大块的文字也可以被认为是纹理化的。通常一点随机的噪点就能够把你的设计和其他那些平庸乏味的设计区分开来。
纹理能够让平淡无奇的对象变得具有自身的特点和生命力。
在网页设计中,最容易被忽略的艺术元素就是形状。世界上二维的形状似乎有很多,但是在HTML和CSS的世界里面更倾向于矩形。事实上,盒模型是CSS中需要掌握的最重要的概念。当你埋头写代码,正在试图连接一个数据库,或者正在调整背景的合适位置的时候,很容易就会将这样基础的东西抛掷脑后。在页面中,非矩形可以让重要元素吸引足够的注意力。
iOS中的这个箭形的返回键不但吸引力注意力,而且还能表达按钮实际功用。
仅仅因为我们大多数的工具是以矩形为基础的,这并不意味着我们不能打破常规,制作其他的形状。事实上,CSS让你稍作努力就能做出相对复杂的形状来。
在你花数小时时间去安排像素点进行页面细节设计之前,回过头去看看整体效果是很重要的。视觉平衡是用直接的语言很难传达的一个东西,但是又是一种能够被很快培养起来的才能。
在《星夜》中,梵高在画面的右边使用了一条上升的水平线来平衡左边的暗色形状。新月的光亮和独特形状控制住了右上角,和左下角的暗色空白相呼应。
平衡是思考设计构图和布局的一种方式。它是指在整个设计中不同区域的视觉重量的不同分布。正确应用这一点是很重要的:不平衡的页面会让人产生紧张感。在极少的情况下,你可以应用平衡来有意地制造紧张,比如为恐怖电影设计的网站,但是在大多数网页应用中,都应该避免这种情况的产生。
通常稍微看一眼就能看出页面的一边是不是比另一边显得更重。可能相比于设计中的另一边,一边的元素太多了,对比太重了,色彩太多了,等等。哪怕就是有页面的垂直滚动,考虑考虑页面中的上下平衡也是很重要的,不过这一点倒没有水平方向的平衡那么重要。
这些基本的元素和原则让你能够更容易地理解设计。他们当然不能赋予你某种神秘的艺术特异功能,但是却能够帮助你制作出一些优雅的页面。如果你还有一些类似的建议的话,我也很乐意从评论中看到。