3 篇博文 含有标签「Web」

平面转化成立体​

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

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

让设计有文艺气息​

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

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

光亮风格​

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

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

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

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

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

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

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

木质的使用​

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

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

一、布局

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

二、色彩

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

三、质感

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

四、元素

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

五、图文混排

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

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

六、避免重复

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

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

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

炫彩和透明风格的网页设计是我个人喜欢的设计风格之一。下面的设计作品和教程是我接触和收集到的这一类的设计风格的代表。这些作品和教程可以在我们动手创建个人的网页设计时给我们以启发，并且教会我们实际实现的技巧。总结起来，这些设计有着如下共同特点：

一、非常漂亮的抽象背景图片，内容以光晕、烟雾类为主。这些图片有着非常好的渐变，可以很好的和网页背景色融合在一起，便于后期代码实现实际的效果。在站酷上搜索这一类的素材，你会发现很多非常漂亮的图片可以用到你的设计上。

二、简洁的排版和字体。你会发现这一类设计页面上文字内容普遍较少，目的是突出吸引人的背景图片。元素与元素之间会留有充分的空间，这样会让网页看上去更有品味。文字会直接放置于背景图片之上，很少有过多的装饰元素。文字字体经常使用线条较细的字体，这样会更加凸显简洁干净的风格。

三、透明的内容区域。我理解，透明的元素不但给人高端、干净的感觉，还让背景图片能够透过元素凸显出来，减少因为元素的遮挡从而让原本漂亮的背景失去吸引力。

四、1个像素的高光。这样的细节绝对不可忽略，因为它给你的设计增加了品质感。只有在细节上做很多的工作，才能做出不一般的作品。

以下是这些设计作品和教程的截图：

温馨而柔和​

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

万物复苏的春天来了​

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

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

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

清新柔和​

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

灵活的布局​

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

热烈的气氛​

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

清新淡雅的东方风格​

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

前期创意的重要​

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

安静的色彩方案​

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

下半部分稍显破碎​

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