以用户为中心,抓住细节才能抓住用户
标签类目:设计
2010年04月22日交互设计

没有评论
161 views

设计中的色彩:灰色

译自: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

翻转页面导航

UItrends上看到一个新的导航趋势的应用翻转页面导航。其实这个早期一直是photoshop表现视觉效果的手法,就像kate曾经提到过的,这种效果仅仅用来代表视觉隐喻,没有什么实际内容。

继续阅读 »

日本设计见闻录(上)

将本次日本自由行中有趣的设计整理了一下,分为购、食、住、行四部分。本篇将介绍前三部分。

东京是绝对的购物天堂,会让血拼族彻底疯狂。撇去商品极大丰富不说,购物环境也是非常赞。试举两例——

 

  1. LOGO设计
  2. 公车站牌很可爱
  3. 地铁站看到的森大楼(主建筑)像素画

继续阅读 »

改版,可以让设计先行

参与过很多次的改版。但这次的尝试是觉得比较成功的一次。
一个大新的网站,在新的内容、功能架构还没有正式出来之前,
界面设计可以提前模拟出未来。

在4个月前,我们做了一套网站可视化系统配色提案(节选):

前言
汽车生活是丰富多彩的,几乎包含了世界中的所有颜色
红绿灯是汽车生活的典型元素,蓝色也在交通指示牌中被经常使用。

颜色与心理暗示
不同的颜色搭配会有不同的心理暗示,
这一些暗示的产生是因为生活中的景物对心理认知的影响:

颜色与产品对应、区分
我们尝试将颜色、以及心理感受和我们不同的产品属性对应起来,
以让网友更容易的理解自己的在网站中的位置。

将颜色应用到不同产品
红、黄、绿,3中颜色在整个页面中起到点缀作用,更多的背景色、主色调是蓝色,
我们尝试A、B、C,3种不同的蓝色与红黄蓝的搭配。

前期界面模拟原型方案:
1

2

3

设计先行,很好的控制了后期的界面设计工作的走向。
每个频道根据自己的属性进行设计,很少出现领导,产品经理,部门内部关于设计的多余讨论。
沟通成本降到最低。

严格的控制下,最后的结果还是让人满意的:易车网新版

相关话题:网站改版 源地址:http://hi.baidu.com/ui88/blog/item/d07ab402a8158b054afb512b.html

返回顶部