发表: 五月 19th, 2010 时间: 11:46 下午 作者: Internet
译自:Color In Design: Gray
中文:设计中的色彩:灰色
原作者:Jennifer Farley
请尊重版权,转载请注明来源!

在这个系列中,我们差不多了解了彩虹中的每 一种颜色及其在设计中的应用。在这篇中,我们将讨论一下七彩之外的色彩,让我们看一下灰色。灰色是一个平稳的、中立的色彩,它在网页设计中非常漂亮。它不 会激发非常强烈的情感(或许除了一种不好的心情),而红色、橙色或者紫色则会。它不像黑 色那么鲜明,但是一个非常暗的灰色可以做同样的事情。同样非常浅的灰色又不像白色那么死板,而且有的时候它还可以填补白色占据的空间。

灰色有正面和负面的含义。“灰质(Gray matter)”会联系到智商与脑力。不过好像灰色的贬义词比较多,“灰色”本身就被用于描述一些暗淡和单调的东西,比如灰色地带、灰姑娘、灰心等。公司 中常常是清一色的灰色西装。灰颜色的名字包括炭灰色、炮铜色、粉灰、苍白色、铅灰色以及蓝灰色。

设计中的灰色

使用灰色很 难会犯太严重的错误。它好像可以和任何色彩搭配。由于它的中立性,它常常被用作背景颜色。它可以让其它色彩突出。正如 前面提到的,你可以使用浅灰色替代白色或者用暗灰色替代黑色。要想得到一个更暖的更有泥土气息的灰色,使用灰褐色,它是一种带浅灰色的褐色。

使 用灰色和柔软的粉色可 以产生一种女性的感觉,而暗色搭配灰色可以产生更男子汉的感觉。暗灰和红色或橙色是一个特别吸引 眼球的组合。请欣赏下面的电影海报:

灰色系网站设计

300 Movie  Poster

灰色常常被用作作品集的背景色(无论是在线的还是离线的)。它允许照片、插画或其它的色彩元素走到最前面同时为作品集提 供一个坚实的支柱。让页面中的大部分布局使用灰色几乎可以使背景消失,从而使其它颜色的颜色真正的凸显出来。

使用灰色的网站设计

灰 色无论是作为背景颜色还是标题或者主字体颜色都很流行。这里是一些使用灰色的几个很不错的网站设计。

另外,灰色是极 简主义网站设计的首选色彩,这类网站通常(当然不是全部)会选用浅灰色作为背景色彩,然后选用深灰色作为主要的字体颜色。

Ok Cog Aoke

灰色系网站设计

Digital Podge 2009

灰色系网站设计

Eilersen

灰色系网站设计

Christopher Meeks

灰色系网站设计

Broader Sheet

灰色系网站设计

Ricardo Gimenes

灰色系网站设计

Ectomachine

灰色系网站设计

Jeff Finley

灰色系网站设计

Nokia Music Almighty

灰色系网站设计

文章来源:http://www.qianduan.net/color-in-design-gray.html

发表: 五月 19th, 2010 时间: 11:41 下午 作者: Internet
译自:Color In Design: White
中文:设计中的色彩:白色
原作者:Jennifer Farley
请尊重版权,转载请注明来源!


在过去的一个月里,我们讨论了设计中的色 彩,从红色开始,然后今天会以白颜色结束。白色和其它任何颜色都搭配的很好,它会被联系到干净、天真和清纯。新娘穿上洁白的婚纱是西方的一个传统,而在西 部牛仔的电影里面,坏蛋常常穿着黑色的衣服,而好人穿白色。

就 像黑色,白色是一个中立的颜色,常常被用作页面的背景色,印刷品中也是如此。有一个误解是白色是枯燥的,或者使用白色会显得老土,无创意,但是很多很多的 设计师使用了白色并创造了很漂亮的设计作品。

使用白色的最佳网站中有很多给人的印象就是“干净和简洁”。这类设计貌似很简单,但是它真的是 个挑战。最佳的设计通常是看起来不是被设计过的那些。

在设计中使用白色

白色有各种变色。白色包括古董白、乳白色、亚麻 白、米白色、纸色、雪白、珍珠白以及象牙白,它们会比纯白色显得更温和或不那么僵硬。很多白色可以和浅蓝色搭配成一个冬天风格的色盘,或者和黄色或粉色搭 配出一种夏天的味道。

少量的白色可以非常棒的点亮一个设计,也可以让暗色的红色绿色蓝色紫色 看起来更醒目。如果你是美国人、法国人、英国人、瑞典人(以及其它的一些国家),红色、白色和蓝色可以创建一种有爱国意义的色盘。黑色和白色是最有对比度 的组合,你可以用它传达一种严肃或者喜剧性的感觉。

使用白色并不是意味着一定是“极简的”。极简主义并不依赖于任何特定的颜色。同样,“空 白”也并不一定非要是在元素周围使用白色。你——设计师必须做出选择。

那么让我们看看一些使用白色的优秀网站。毫不意外,这些网站中的很多 都是用带有白色背景的照片或图片,以给网站添加一种比较“潮”的元素。

Eva Solo

evasolo

The Typographic Desk Reference

tdr

Olive & Myrtle

olive

National Television

national

Alex Trochet

AlexTrochet

Jo Santana

JoSantana

This Is Grow

Grow

Instabox

instabox

Surfstation

surfstation

Made By Sofa

sofa

文章来源:http://www.qianduan.net/color-in-design-white.html

发表: 四月 14th, 2010 时间: 12:26 上午 作者: 设绘人士

打开浏览器欣赏网页,时常会发出这种感慨。这个界面设计的好看,这个页面设计的失败。那衡量一个网页设计好坏的标准到底是什么呢?只有懂得欣赏优秀网页设计作品的设计师才会提高的更快,因为从中可以借鉴到网页设计的精髓。便于转化成为自己的灵感,设计源于灵感,灵感源于借鉴。如何从中取其精华,使我们的视觉效果与众不同呢?简单总结下,有一下几个方面:

一、网页设计是否传达交互的概念,即引起浏览者强烈的点击欲望;能否传达出产品的特征,从视觉界面设计,就可以看出网站是做什么的,看到这个页面的视觉设计能让浏览者达到一种愉悦的目的。视觉创意独特而新颖。
二、合理的页面内容布局、良好的用户体验。网站主要内容突出,有主有次。符合特定群体的浏览习惯。
三、风格统一,色调专业。同个网站视觉风格要统一,色彩要以客户的行业色为基准。一种主色、一种辅色、一种点睛色。建议不超过三色,以免花哨。色彩背景和文字要容易辨别,便于阅读。内容等级决定字体、字号大小、粗细。

一名出色的网页设计师同时也应该是一名合格的人机界面设计师,因为无论从哪个意义上来说,网页设计是一种最典型也最流行的人机交互平台,它的载体就是网页。所以说网页设计也是人机交互界面设计。把握住网页设计好坏的标准,在以后的网页设计中更快更好的设计出独特的视觉交互作品。

四月 10

真实的视觉
发表: 四月 10th, 2010 时间: 8:20 上午 作者: 设绘人士
真实的视觉
真实的视 觉

推广专题设计在淘宝运用频率相当高,涉及面广泛,设计形式也丰富多彩,本期推广设计形式研究来讲解其中一种形 式:模拟场景设计.

模拟场景
模拟场景

模 拟场景设计的类别(全局场景模拟、局部场景模拟)

1:全局场景模拟:大量使用与主题相关的元素合成,并且有很连贯整体性的页面。

全局场景设计适用与大型促销活动,主题内容单一类的活动,页面内容元素丰富,但不适用与页面高度较长的活动。

此类设计形式能提升用户浏览时对主题表达内容的理解,感受设计师所想传达的信息氛围;
下图是《08年年终大促》活动的终稿,页面使用了全局场:
需求方要求:喜庆,奖品丰富。
基本构思:红色/黄色色调、幕布舞台与奖品。
页面从构思到实现基本没什么出入,将角度合适的奖品放置与有透视角度的舞台上,为了增加头部与页面整体的联系,左侧加了一地毯由舞台上方延伸下去

ad1
ad1

另 外,全局场景设计对页面主要内容表达的手法也很简单,通常将主题内容的光、影、透视角度、色彩反差等增强就能实现,
如下图:页面背景颜色使用绿色,视觉中心以反差较大的黄色做为主色,并且增加了高光,很容易将用户的眼球吸引至此。

吸引注意力
吸引注意 力

2:局部场景模拟:打破传统页面设计、布局形式,部分主要信息内容以真实视觉展现方式存在,用高 透视,高光影将其突出;

局部场景模拟适用与页面长度较高的类目促销活动、突发事件活动专题、单品展示、品牌宣传等。
下图中是《宝贝传奇—匡威》设计稿,
需求方要求:设计时间2天 潮流
基本构思:醒目的鞋子、潮流元素、方便后期延伸设计
设计时选择了一只角度合适的鞋子,经过阴影处理后让鞋子感觉真实存在页面上方,加以修饰达到视觉中心点突出的目的。

视觉中心
视觉中心

同 类手法中,也可以做为缩短设计周期的取巧办法。
下图中整页背景统一,页面中机车的角度真实,并且还有景深机车作为透视辅助,页面简洁但不失档次,页面主题性质也一目了然。

视觉引导
视觉引导

现 实生活中,我们的手机界面由原来的黑白数字屏幕到现在的真实触控,越来越注重用户体验,和使用的真实感,设计也这样;
传统的页面已经泛滥,如何让用户耳目一新?
如何能让用户在页面停留的时间更长?
如何让用户由原来的使用页面变成在使用的同时并能真实感受到一些什么?
这些应该是我们视觉设计师可以去多去考虑的,模拟场景设计在众多设计形式中相比,氛围感最强,视觉中心点最好控制,并且有推动用户对页面主题理解,不妨可 以多去尝试。

原文:http://ued.taobao.com/blog/2009/12/29/longyin_ture-viion/