用色彩打造专业视觉效果.pdfVIP

用色彩打造专业的视觉效果 上周看到这篇文章,很有收获.色彩的使用无论是在网站 是工作各个环节的沟通都很重要.好的色彩 可以让用户更舒服,更愉悦,同时营造更好的气氛.但同时很多问题需要在产品设计环节就该解决,否则 会遗留到视觉设计并且无法解决.这篇文章讲了很多基础理论和具体的方法论,尤其喜欢这种文章,翻 译出来… PS:文章很长,要有心里准备… 是什么能让一个设计看上去是协调的,有条理的,专业的?答案是”色彩”. 不是所有的项目都要用那种浅的”公司蓝”(co rpo rat e blue)才会看上去很专业.色彩规划(planning co lo r)就是建立一个描述有哪些色彩可以用以及如何使用的框架. 色彩是最难办的设计元素.“好”的色彩是像个人口味和感觉一样难以把握的,而且 有诸如对比度,显示 器校准等技术上的限制因素. 但是对于内容来说,色彩是至关重要的.如果你认为一个网站很重要,值得花时间来完善,那么用户通常 也会认为它很重要,会花时间来读.选择好的色彩就是为了达到这种效果. 在本文中,我们会回顾一些用来给你的Web设计建立漂亮的调色板的技术. 如果想让网站看上去是没有条理(unplanned)的,最好的办法就是随机选择颜色. 即使当用户第一次浏览网站的首页时,色彩也会影响到他们对于内容的态度.这个网站会让人兴奋吗? 可信吗?大胆吗(daring)?乏味吗?有政治倾向?很正式的吗? 跟印刷制品一样,色彩会影响人们对所见到的信息的理解. 找到合适的色彩并不容易,但是整体过程 是有迹可循的. 好的设计策略会包含一个配色方案(比如为了传达信息和营造氛围,色彩的可选范围.)以及这个方案的 具体安排. 让我们假设你需要设计一个专业的网站.(当然这个很有可能演变成一种喝酒游戏(drinking game):要 吗是客户要求网站是”专业的”,”简洁的”或者”现代的”,要吗就是”我喜欢这个网站,扒下来.”) 配色方案取决于网站的特点.比如,银行和花店的网站看上去都会很专业. 但是人们可能不会喜欢在一个”公司蓝”或银灰色的网站买花.或者想象一下美国银行的网站变成紫色 和黄绿色. 一个”专业”的设计会让用户觉得,这个网站是很严肃正规的展示它的主题,即便主题可能是很轻松的.无 论哪种色相(hue) 是色值(value),“专业”都意味 是协调的,有条理的,经过深思熟虑的 . 使用灰度 与色彩工作的最好方式就是从没有色彩开始. 将设计中的色彩移除之后可以暴露出问题的根本原因,而这些问题在开始考虑哪种黄绿色的色度( 深浅)更好看之前就该去解决.如果设计在黑白效果下就感觉不好,那就需要做一些改变了. 每个页面是否都有清晰的目标?设计是否能引导读者读完全部的内容?内容是引人入胜的,鼓舞人心的 是客观的传递信息?标题清晰吗?文字链是否与其他文字有对比?色彩可以加强这些效果,但是布局 ,样式和组织中的问题都无法单纯的通过色彩就能够解决. 如果要重新设计,请先去掉颜色.这个简单的去色行为真实的展示出网站的立足点.(事实上,重新设计应 该开始于重新评估你的目标和内容,不过这是另外一个故事了.) 有时,去掉色彩本身就是一种解决方案. 我曾经跟一个网站设计公司一起工作,重新设计他们的网站.对于这个项目,他们是很挑剔的,希望能 更好.但是如果你认为为你自己设计很难,试着与小组一起解决.在项目结束前,下班后我们之中的三个 人一边喝着酒一边看着第九稿设计. 我突然的把phot o ho p的图层都合并,然后点击”去色”把紫铜色和蓝色的设计稿变成黑白色.让每个人 都惊讶是,它起作用了. 那周结束之前,我们用红色强化后完成了一个”暖”灰色的设计.当先前的客户开始赞赏这个新的设计并 且接到更多其他的客户电话时,我们知道我们成功了. 用Phot o ho p的斜视滤镜来测试你的配色方案. 1. 用网站至少三个页面做截图.在Phot o ho p中打开 2. 每个截图都复制一下背景图层 3. 给新的图层做一下10px左右的高斯模糊 4 . 使用图像-修改-色调分离.使用8到12之间,或者使用滤镜-像素化-马赛克.使用15到30像素 这样可以看到真正的主色调.整个配色方案,用的越多的颜色,那个颜色在用户的印象中越重. 曾经网站的布局和组织过去都没有色彩,现在是时候来选一个调色板了.但是选哪个?用多少? 调整你的色相 色彩具有三个属性:色相,饱和度,色值(有时会叫做明度)(译者注: 想深入了解的话可以读这个:关于颜色 的基本理论) 饱和度是颜色有多浓:霓虹灯效果的颜色就是饱和度很高,而蜡笔的颜色就是饱和度低一些. 色值表示了颜色有多亮