5 篇博文 含有标签「案例分析」

每一张图片的色彩都有自己独特的个性，即使是表现同样主题的两张图片，比如秋日里森林的早晨，虽然可能都是偏褐色色调的，但色相、纯度、明度、搭配方法还是会有很大的不同，而这正是设计中从图片中提取色彩方案的魅力所在。如果将这些色彩应用到设计中的话，那每一个设计都可以做到绝对的个性化，起码在配色方面如此。因此在这篇文章中，我挑选了10张情绪上不同的图片，提取出它们的色彩方案，并进行分析，希望对于大家在配色方面有所帮助。

一、安静、温暖​

使用PS中"存储为Web和设备所用格式"的方法，将图片保存为png格式，颜色选择为8种颜色得到的色彩方案。由一组不同亮度、中饱和度的黄色和一个中饱和度和亮度的黄绿色搭配而成，给人安静、温暖的心理感受。

二、柔美、春天、女性​

花团锦簇、春意盎然的画面由两个明度偏低的黄色和一组明度较高的紫红色组成，这种色彩方案属于跨度较大的近似色搭配，两组不同的颜色在色环上跨度越大，画面会越生动，反之会越稳重。

三、纯净、简洁​

冬日里的白桦林图片中提取出的色彩是由一组低纯度、甚至于接近灰色的、不同明度的蓝色组成的色彩方案。使用这样的纯冷色调的搭配做出的设计会让人感受到一阵阵的寒意，但同时也给人纯净、简洁的感觉。

四、欢乐、节日​

节日般欢乐的色彩方案，由一组不同层次的天蓝色加上亮度、纯度很高的红色、绿色、紫色搭配而成，属于全色相的色彩搭配方案，适合表现欢乐、愉快的气氛。

五、明亮、爽朗​

这个图片给人明亮、爽朗的感受，提取出的色彩是蓝色和橙色的互补色方案，蓝色由一组纯度、明度由浅到深的色彩组成，搭配纯度、明度都稍低一些的橙色和与橙色接近的红色。补色的色彩方案由于两种互补颜色的冲撞，对比单一色相的色彩方案要显得更加有活力。

六、自然、质朴​

图片给人自然、质朴的感受，提取出的色彩方案是一组范围从黄色到绿色的近似色，黄色纯度偏低，绿色纯度偏高，因此绿色要更显眼一些。由于色相上的接近，这组色彩方案感觉平稳紧凑，反之色相上越跳跃，会加强冲突分离。

七、安静、神秘​

即将坠入黑夜的湖面景色透露出安静、神秘的气氛。一组不同明度的紫色、一组不同明度的红色加上一个浓浓的黑色构成了这幅图片的配色方案，值得注意的是，无论是哪种色彩，在自然界中很少有100%纯度的，就像这张图片一样，色彩的纯度都在中间甚至偏低一点的范围内，这也正是为什么过高纯度的色彩我们会觉得不舒服的原因。

八、平稳、柔和​

此插画的色彩方案以白色为背景色，采用了黄色和绿色的近似色搭配，色彩饱和度偏低，整体上给人平稳、柔和的感受。

九、忧郁、复古​

偏橙的红色和偏黄的绿色的配色方案，由于色彩的饱和度偏低，好似褪色的感觉，绿色的明度较低，感觉比较阴郁，整体上画面体现出一种忧郁和复古的味道。

十、清新、富有生机​

不同明度的黄绿色组成的一组色彩，属于同一色相的配色方案，给人清新、富有生机的心理感受。

大小石头，美丽花园​

喜欢这种风格的花园设计，拥有大片繁密的植物花园固然很美，但看多了也会审美疲劳，何况太多的植物有时却会伴随着潮湿、蚊虫和少许的压迫感，而上图这个花园的设计风格很容易让人联想到北方给人的感觉，空旷、干燥，但也不乏生机勃勃。细碎的灰色石子铺满整个庭院，散落几个类似磨盘的圆形石材，石材上架起锈迹斑斑的槽钢，中间填充大小不一的鹅卵石，为了让钢材的材质和细碎石子的材质视觉上过度的更柔和，在槽钢的下放也摆放上了一堆石头，至此，这个花园局部的结构已经完成，接下来该让植物出场了，很简单，随意的在碎石中点缀种类不同的几种植物，但是这其中最出彩的还是石碓缝隙中的几处植物，和石头搭配感觉似乎是自然生长出来的一样，很自然的感觉。

海滨城市的阳光露台​

在一个空气干净清新的海滨城市，能拥有这样一个一眼就能看到漂亮风景的露天，简直是一件难以想象的太过于美好的事情。不精心的打造这个露台花园，绝对是一件说不过去的事情。还好这张图片看上去是那样的完美，高处的藤蔓植物爬上了墙头，铺上了大面积的绿色，环绕在沙发四周最经常出现在视线里的是一大片黄色、紫色的花最为花园的中景，低处的镶嵌在石板中间的前景植物和墙角草也展现了良好的生长状态。这样漂亮的花园上再撒上明媚的春日里的阳光，不用说在这里小酌一杯，就是坐一坐就是一种无比美妙的体验！

随意自然的阳台花园​

只要花草长得好，随意一点、杂乱一点看上去还更自然，摆上一张桌子，两把椅子，再来一杯红酒，一本杂志就能带给人一段让身心放松的美好时光。

平面转化成立体​

扁平化设计风格，独特的地方在于富有空间感的火山和地心的插画的绘制让这个设计有了看点，也契合 Volcano（火山）这个主题。这样的 Banner 创意可以作为扁平化设计中的一种思路，把平面转化成立体，瞬间就能让设计高大上起来。

红色作为主色调，搭配灰色，没毛病。

让设计有文艺气息​

赏心悦目的设计，首页的版式布局很有特色，基本上是左边占据 2/3 的版面，右边 1/3，左右高低不一且三个信息区块样式各不同，给人自由、灵活的感觉。

主视觉区域 798 三个 3D 文字作为视觉的第一层次，细节丰富，大小各异、错落有致，文字上添加上欧洲的古典人物形象，艺术气息更加浓厚。再观察背景，云彩的添加给了 3D 文字空间感，感觉文字像是漂浮在了空中。最后是接近于灰色的背景色，仔细观看会发现背景色也添加了细微的渐变。整个主视觉区域的设计细节完美，3D 文字的设计应该是其中的难点。

光亮风格​

这是国内著名设计师辛旭起的设计作品。

整个设计给人可爱清新的情绪感受，这和设计的整体创意，以及设计中元素的选择、色彩的搭配、质感的表现是分不开的。

先来看设计的创意。“快速美白”无疑是整个设计的关键词，围绕这个关键词展开联想，我们可以看到设计中出现了与此相关的代表时间的钟表、代表美白变化的照片等设计元素，有些元素的选择虽然和关键词有一些的距离，例如画板、棒棒糖等设计元素，只是用来烘托气氛，但整体上的构思和关键词还是相关的。

再来看 Banner 部分的视觉设计。整个 Banner 视觉饱满，其中的元素较多，但按照信息内容来看，大体可以分为这么几个部分，一是画面中心的牙膏以及围绕在产品周围的钟表、照片、画板、椅子等元素，这是一个视觉部分，第二个部分是牙膏上面部分带有花朵、棒棒糖以及蝴蝶结陪衬的视频播放器，第三个部分是“一刷即白”的 slogan，最后左上角的兔兔爱表白的游戏快速通道是一个视觉部分，这几个部分从前至后分别有着从重要到次要的视觉关系。每一部分的设计都基本包含有三个视觉层次，拿最重要的产品部分的设计来说，牙膏作为前景元素是第一层次，周围的钟表、画板等元素作为中景可以看作是第二个层次，而背景的渐变、云彩、气泡等元素是第三个层次。视频播放器部分的设计也一样，无疑不规则形状的播放器是一个层次，棒棒糖和花是一个层次，而这些元素之后的背景又是一个层次。

配色是这个设计中的亮点，整体看上去丰富而不杂乱。从大的配色上来看，产品本身的蓝色是作为强调色的角色出现的，偏红的紫色和蓝色是邻近色，作为背景色来用，橙色和黄色又和红色临近，另外再搭配一点点的绿色，整个作为辅助色出现，整体的色彩纯度较高，因为都是邻近色，所以虽然纯度高，但看上去并不冲突，所以整个设计的配色感觉很丰富，没有单调的感觉。

从质感上来说，设计中大量使用了光亮风格的设计，这种质感的选择应当是从牙膏本身的双层的晶莹啫哩膏体中得到的灵感。网页的渐变色背景、导航栏边缘透明发光效果、视频播放器的镜面效果、牙膏的倒影、slogan 文字背景的渐变和光效，都是和这种光亮质感相契合的。

所以我们可以看到，单从视觉上来说，丰富的层次构成的饱满的画面，统一风格的设计元素，丰富的配色，统一的质感表现共同支撑起整个设计的气氛和味道，缺一不可，也体现了设计师视觉方面高超的控制能力。

木质的使用​

这是一个属于儿童设计范畴的网页设计案例—好奇纸尿裤韩版设计，通过这篇文章的分析，尝试提炼和把握此类婴幼儿用品的设计风格和表现手法。

上面的图片选取了设计中的几个页面，包括首页和内页，纵观整个页面的设计，我们能够感受到这个案例柔和、可爱的设计情绪，这样的设计风格在涉及婴幼儿产品的设计中非常常见，是需要熟练把握的设计风格，通过分析我们来看看要实现这样的设计，这个案例是如何做的。我们一个方面一个方面来分析。

一、布局

先来说页面布局。此设计案例在布局上采用垂直划分的布局方式，首页上最左侧垂直区域放置导航、搜索、视频链接等信息，中间栏放置最新产品、俱乐部、社交平台及搜索表单，右侧为主要内容区，放置 Banner 图和分栏信息。内页根据页面信息的需要从首页的三栏变为了两栏，最左侧的导航栏保持不变，紧挨导航栏的是主要内容信息区域。垂直布局区别于常见的水平分割布局方式，带给整体设计新颖的感觉。

二、色彩

在色彩搭配方面，这个设计的色彩方案并不复杂，毋庸置疑，红色是作为主角色使用的，无论在导航条背景、按钮颜色以及标题颜色上都有体现，高纯度和亮度的红色在大面积的白色背景上显得非常显眼。木质的黄色和 banner 中幼儿皮肤的黄色作为配角色在色环上和红色临近，和红色相比较面积要小得多，搭配起来自然不成问题。大面积的白色是百搭，可以观察到 banner 中的幼儿的衣服、窗帘、沙发、地板的颜色也基本都接近于白色，目的是不扰乱整体的色彩搭配，从这里足可以看出设计师在控制色彩方面的用心。

三、质感

质感的选择也是值得注意的一个方面，也是整个设计的创意的重点体现。导航条部分布纹质感和中间栏部分木质的使用给整体的设计增加温馨、自然的情绪感受。创建布纹和木质的元素难度并不大，类似于这个设计案例中的导航条的质感设计只需要在 Photoshop 中创建类似的图案，然后应用在图层样式中即可。木质材质的创建也是同样的方法，只是创建无缝拼接的图案稍微复杂一点，我在之前的写的一篇文章《在 Photoshop 中创建不规则无缝拼接图案》中介绍了创建复杂图案的方法，大家可以参考。创建好图案之后再使用调整图层调整色相、明度、纯度就可以实现期望的结果。

四、元素

其它细节方面，为了营造柔和、可爱的感受，可以观察到形状元素中大量使用了圆角和圆形，包括 banner 上字体的选择，也可以看到圆角特征的存在。虚线元素也是值得注意的一个方面，无论在导航文字还是首页分栏信息的划分中的使用。都和整体柔和、可爱的设计风格相契合。另外在图片的使用中选择了较多的卡通图案，增强了可爱的设计味道。

五、图文混排

然后是各个信息元素的样式设计。在这个案例中可以看到无论是哪种类型的信息元素，无论进行了怎样的创意，基本都采用了图片加文字的设计方式。图片的使用让设计有了视觉焦点和看点。为了让设计更加生动活泼，大多数图片都经过了处理，去除了生硬的边框，这样和背景融合的更像一个整体。例如下面这个小栏目的设计：

由于内页的栏目和信息内容较多，图文混排的设计方式更是大大提升了页面的视觉效果，让整体的设计更加生动，视觉更加美观。可以想象，如果去掉了这些图片的搭配，这个页面将会显得单调而枯燥。

六、避免重复

在这个案例内页的设计上可以明显的注意到，每一个单独的信息内容的设计样式都是不同的，根据不同的信息内容的特点设计师都进行了不同的创意，保证了整个页面在设计方面不重复，有趣味。拿上图中最后一幅图来举例，整个主要内容区域的设计由以下四个部分组成，每一个部分的设计样式都独一无二，既符合整体的设计风格，又都有各自的特点。另外可以看到这四个部分的视觉比重从上到下不断递减，这和页面信息从上到下的重要程度的差别也是相吻合的。

建议大家对这些栏目的设计临摹一下，整理保存成 PSD 文件，这样做的好处是既开阔了创意的思路，提高了设计的技术，还可以在以后做类似风格的设计时将这些成型的东西直接拿出来用，大大提升设计的效率。

OK，关于这个设计的案例的分析就到这里，分析总结虽然重要但是一定不是最重要的，最重要的大家都知道，勤快一点，多动手是永恒不变的真理，唯此才能不断的积累经验，让自己提高。

浅粉和浅蓝的对撞​

很别致的粉色系红色配蓝色的设计，从这个设计案例中同样可以的出来，北欧风格偏爱色彩纯度低的颜色，灰色的地面，大面积低纯度粉红色的墙面，搭配蓝色的沙发，清新活泼的感觉。

低纯度的粉色调​

北欧的家居设计风格透露出简约、安静之美。其中一个重要的原因是偏爱低纯度的色彩，就像这个设计，无论是地板、墙面、沙发、窗帘的色彩纯度都很低，再加上每个单品简单干净的线条，独特的味道自然流露。

补色的平衡​

简单的白墙白地，只靠软装来体现设计感，棕色为主色调，同色系的米色搭配棕色，补色浅蓝色作为平衡色平衡一下冷暖搭配。

原木的质朴​

明亮、质朴是这个设计带给人的感受，原木色的地板，微带色彩的墙壁，白色的门框，白色的踢脚线，近乎于白色的沙发整体营造出明亮的基调，原木色的茶几、藤椅、木门是设计中最深的颜色，房间中粗犷的木头柱子是最具个性的地方。

有力度的单色系​

偏灰的粗纹理木地板，略带暖色的墙面，白色踢脚线是整个空间的的设计基调。米色的沙发是整个画面的主角，也是主色调，至此，整个设计都是亮色调，浅色调的，接下来用深灰色的边桌、茶几、玻璃门柜、画框来搭配，整个客厅布置的层次感在米色和深灰色的强烈对比下立刻显现出来。整个的设计感觉很安静。

小清新的浴室​

整体上干净、自然、放松的感觉。色彩上，白色打底，地板、墙壁、柜子、毛巾都是白色，搭配主色自然感受的原木色，配合小盆栽的绿色作为强调色。质感方面，凸显原木的质感。形状线条方面：多为线条简洁的矩形，地板、墙壁、柜子、镜子等。

质朴而安静​

北欧风格空间设计能够打动人的原因，就是它常常带给人的质朴、安静、简洁的情绪感受。

如果你觉得这样的设计感觉稍稍有些闷的话，可以用纯度稍高一些的色彩和绿植来增加一些活力。就像这个设计中粉色和靠枕、蜡烛和房间里的绿植所起到的作用。

原木色的桌椅和吊灯是整个灰色空间中的主角，也是画面的主色调，用原木色做主色几乎是自然风的北欧风格永恒不变的设计原则。接近于黑色的花盆、边几、画框是画面中最深的颜色，但是面积很小，给整体设计增加质感的同时不至于让空间过于压抑，白色踢脚线和部分白色墙面可以让空间显得更加轻盈和明亮。

背景墙的浅灰色看上去非常安静，和木纹地板、浅灰色的地毯构成了整体设计的背景和基调。

温馨而柔和​

高亮度，低饱和度的黄色和绿色色彩营造出柔和温馨的气氛，重要信息部分用饱和度较高一些的绿色和红色跳出。而背景中随机大小的圆形叠加增加梦幻、可爱的氛围。其余的设计元素，例如云朵般的曲线边缘、logo和导航的针脚线、导航条背景的大头针、宝宝日记的贴纸、宝宝照片吊牌、以及文字标题的手写字体都围绕着整个设计风格来运用，营造出整体温馨的气氛。

万物复苏的春天来了​

这个设计看上去也是偏柔和的风格，像是刚刚到来的春天，到处都是嫩绿的颜色。色彩方案上使用了两种高亮度、中低饱和度的黄色和绿色的搭配，导航也用了连续的云朵状的弧形和手写的字体，增加可爱温馨的氛围。主视觉的插画对于整个设计氛围的提升起到了非常重要的作用，挂在树上的条幅写上了博客的Logo，增加了趣味。但是布局上类似于页面似的方方正正的布局却是中规中矩，缺少了创意和突破。

色彩鲜艳、阳光明媚的春天​

色彩饱和度和亮度非常高的天空、云朵、山峰、太阳、草地以及各种卡通动植物构成的插画背景是营造整体气氛的最主要的元素。为了让背景融合与整体设计之中，logo的条幅被小鸟衔着挂在空中，飞艇拉着搜索框也漂浮在蓝天之上。主内容区左侧的水彩墨迹和手印、右侧飞跃而出的动感的星形更增强了欢乐、可爱的氛围。云朵状的导航条和可爱风格的手写文字虽然略显粗糙，但是依然延续了同样的设计风格。主内容区两张阳光明媚、充满欢笑的家庭照片更是让人感觉春意盎然、暖意融融。

清新柔和​

大面积的低饱和度、高亮度、偏绿一点的蓝色给了这个设计平静和清新柔和的心理感受。再配合粉色系的红色、黄色、绿色的局部色彩，让整个设计摆脱了过于单调的色彩方案。其它在这个设计中值得关注的的设计元素有：1、类似于格子布纹的背景材质；2、云朵状的主内容区边缘；3、logo、导航文字、标题的手写字体；4、曲线吊牌和按钮；5、各个内容区域添加的低调的插画背景。

灵活的布局​

打破框架的信息布局方式和众多细碎的信息区块是这个设计给人的第一印象，不同信息区域的不同设计方式让人产生探索的欲望。可爱的风格贯穿于整个页面，白色和高饱和度以及亮度的绿色、橙色搭配又给了页面清新的感受。手绘风格的插画是儿童网站中不可或缺的元素，非常能够调动网站的整个气氛。圆形以及大圆角的边框设计样式也契合了整个页面的风格。不断出现的吊牌、打孔日历的设计相互呼应，并且起到了划分各个信息区域的功能性作用。最为重要的是，这个设计摆脱了前面几个设计主内容区大框架的限制，布局上更为自由，作为儿童网站来说，这是需要这样的创意方式。

热烈的气氛​

这是一个气氛相当足的全Flash韩文站点。气氛的营造和黄色以及橙色的大面积使用有着直接的关系。虽然主色调是这两种颜色，但是却并不仅限于这两种色彩的使用，粉红色、紫色、蓝色、绿色也都出现在了这个设计中，但是色彩比例上来说，它们要少得多，所以能做到在丰富色彩方案的同时又不喧宾夺主，冲淡或者相悖于整体的气氛。整个页面没有完全填充为黄色，底部页脚部分的白色既给类似于打开的贺卡的主视觉提供了稳固的水平面，也给整个设计增加透气的心理感受。大面积的渐变黄色背景中叠加了卡通图案，增添了设计层次，营造了设计的基调。Logo多色彩的拼图方案和背景的拼图图案相呼应，向下顺延视线的大圆角吊牌作为导航的设计样式，并使用了手写的卡通字体，右边相关活动内容的圆形吊牌也采用了类似的设计。可以观察到，圆角的白色描边在这个设计中重复出现，可以作为关于儿童的网站设计的细节考量。

清新淡雅的东方风格​

大面积的白色加上晕开的水彩背景以及主视觉部分温馨的家庭照片使得这个设计带给人柔和、清新的感受。页面上的元素，例如导航等没有做过多的修饰，这正是这个设计大胆的地方，而我们通常的想法却是不加点图层样式的效果就会觉得拿不出手，觉得这就不是设计。原因是我们头脑中没有设计的大方向所在，完全是被惯性盲目的驱使着往前走，最后设计成什么样子，走到哪里完全没有概念。而这个设计教会了我们更大尺度的设计思想，让我们尝试不同的设计方法，在设计上走的更远一些。

前期创意的重要​

蓝色的背景作为玩具陈列的展厅和主信息区域的色彩形成鲜明的对比，让主信息区域从背景中跳出来。类似于打开的玩具盒子的创意既和网站主题相关，又增添了更多的趣味，而这是在动手开始做具体设计之前完成的创意。所以要设计一个网站，在打开Photoshop之前的工作其实对于设计的走向起到非常重要的作用。这部分的内容包括研究阶段以及画草图，这是要设计一个优秀的网站必不可少的工作。

安静的色彩方案​

这是一个黄色、橙色到棕色色彩方案的设计案例。基本属于同一色相、不同层次色彩的搭配，所以整体上相较于多种跳跃较大的色彩方案来讲，氛围会安静一些。由于此网站的业务是提供婴幼儿的营养餐，所以暖色系的平静色色彩方案反而会更适合一些。

下半部分稍显破碎​

多种高亮度和饱和度的色彩的应用依然是儿童网站设计中最常见到的思路。此网站主页的信息量比较大，主视觉以上的部分结构清晰，视觉感受不错，但是主视觉以下的部分栏目过多，组织的不够清晰，显得有些破碎。”Play”、”Art”、”Music”和”Family”四个并列的板块如果在视觉上做到更为清晰的划分，标题文字跳出正文文字的包围可能视觉效果更好。但是可以看出设计师在主要信息区域使用白色以及亮度较高的灰色和多种色彩搭配，试图营造出清爽、干净的氛围。只是在信息的组织和视觉呈现上做的还不够，可以有更为深入和思考。