飞鱼的声纳

10个儿童网站个案分析及设计特点总结

wantfee — Mon, 07 May 2012 10:15:55 +0800

一、温馨而柔和

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

二、万物复苏的春天来了

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

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

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

四、清新柔和

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

五、灵活的布局

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

六、热烈的气氛

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

七、清新淡雅的东方风格

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

八、前期创意的重要

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

九、安静的色彩方案

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

十、下半部分稍显破碎

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

无相关文章

两款不同质感的播放按钮（PSD文件）

wantfee — Tue, 24 Apr 2012 10:31:13 +0800

今天延续上篇文章涉及的内容，给大家提供两款我个人动手创建的播放按钮和它们的PSD文件。这两款播放按钮大小一样，颜色都使用了相同的橙色，但由于创建的高光和阴影的不同让它们在质感以及结构上看起来有所差异。左边的按钮晶莹通透，像是放置在页面上的感觉，而右边的按钮看上去结实而不透明，内阴影的添加让它看上去好像是嵌入在页面中一般。希望这两个简单的按钮能够帮助大家理解不同质感和结构的物体的高光和阴影的创建思路和方法。

下载

十一月 8, 2010 -- 如何在photoshop中创建一个网页按钮？ (5)

20个视频播放器界面欣赏及点评

wantfee — Sat, 14 Apr 2012 15:27:05 +0800

网页设计中非常细节的东西，比如就一个描边，有时就造成了用户心理感受上的差别，进而影响用户的使用偏好，直至对整个设计的成功与否以及作品的商业价值产生非常大的影响。类似于”千里之堤毁于蚁穴”和”蝴蝶效应”的感觉。夸大其词吗？绝对不！细节的力量我认为在网页设计中有着无穷的魅力。认真想想那些你个人认为优秀的设计作品，其中是什么东西打动了你？真的很多时候就是一种描述不出来的颜色，一些1像素的高光，或者是一种质感。例如下面的这20个网页视频播放器的界面设计，似乎一眼看上去差别并不大，但是如果让你必须从中选择一个最偏爱的，并且要付费购买的话，我想每个人都能做出自己的选择。然后你再想想为什么选择的是这个而非其他？所以我这里想要说的是，作为网页设计师，或者是UI设计师，我们需要不断的努力，常问自己一个问题”我是否有了掌控视觉设计的细节到比较准确的实现目标设计方案，从而引导用户的心理感受的能力？”我想，这是我们可以从这20个设计中学到的一点东西。

一、锋利的边缘

细微的浅灰色渐变、边缘2个像素的内发光、各控制按钮内阴影、1像素的边缘高光的组合是最常见到的设计方案之一，很经典，并且让这个播放器看上去感觉边缘锋利，能划破手指一般。

二、轻快

圆角黑色控制条背景调整到半透明，各控制按钮也没添加更多的图层样式，当鼠标离开画面的时候它就消失，看上去简单轻快的感觉。

三、遥控器

玻璃般光亮的控制条背景，较粗的线条描边，各控制按钮添加了1像素的深色描边。让人联想到耳机上的线控装置。

四、清晰明了

这是我个人最喜欢的设计风格，所有元素周围都有深色的1像素描边和细微的内发光效果，高光、描边、发光效果都控制在1像素之内，直角设计，并且添加了杂色的材质，让整个控制条看上去不会是光溜溜的感觉，而是清晰明了，硬朗，有质感的心理感受。

五、宽大的背景面板

宽大的面板让这个设计方案有一种一整块的感觉，好像一个简单的遥控器，玻璃质感，高饱和度的蓝色让重要的控制按钮醒目易见，音量调节界面的设计很有特点。

六、金属的、拉丝的质感

细看控制条背景有一种金属般的拉丝质感，进度条的滑动按钮也是金属的质感，底部的1像素高光让边缘有了凸出的感觉，播放进度条中间更深层次的1像素的凹陷给设计添加了更丰富的细节。

七、浓郁的黑色

浓的化不开的黑色是这个设计给人的直观感受，面板顶部凹陷的刻痕给面板厚重、实在的感受。三种设计方案让我们看到了控制按钮不同的组合方式。

八、清爽的味道

半透明的背景设计给了这个播放器清爽的味道。

九、粗糙的、草草一做的

我个人认为这是一个反面的案例，宽于1个像素的描边让设计界面看上去感觉笨拙和不够精致，很像是随随便便做一下的样子。

十、风格不统一

高饱和度和亮度的黄色在深灰色背景下格外的抢眼，但是播放器颜色和背景色的对比度不够让两者有模糊在一起的感觉，另外，看上去类似显示器的亮度、对比度、和颜色的调节图标的玻璃质感和整个设计的质感不够统一。所以Dribbble上的作品也不是完美的无可挑剔，个别设计，比如我这里随便挑到的九和十应该说是做的不够好的设计。

十一、大小不统一

看来，包括这个设计在内都是不够好的案例，可以仔细观察这个设计，相较于狭窄的播放器来说，进度条有些过于宽了。控制按钮图标的大小也不够统一，除了心形图标，播放、高清、音量图标都稍微有点小，这些都是看上去不够用心的地方。

十二、时尚

大幅的画面，画面的斜纹，硕大的半透明背景的播放按钮，简单的播放条和控制按钮的设计，没有过多的图层样式，让这个设计多了一些时尚的感受。

十三、丰富的细节

简单的要会做，酷的炫的更要会做，注意观察透亮的播放按钮的细节，考虑一个问题”高光为什么要放在这里？这样做给了这个按钮怎样的质感感受？”然后把它临摹一遍，牢牢地记在脑子里，以后你就会做按钮了，就这么简单！再深入一个层次，同样的按钮，还能做出怎么样的质感来？我做了另外一个样式放在下面，看看这两个有什么质感上的差别？再想想还能不能做出其他的样式？

十四、中规中矩

这个设计中规中矩，时常见到的设计方案。

十五、杂色的质感

从技术上来和第一个设计方案差别不大，但是这个播放器的背景添加一定数量的杂色，让表面从光滑变为粗糙的质感。

十六、还是透明

这像是一个没做完的设计，很多设计元素，例如播放时间等都没有添加上，但是，如果说这只是一个开头的话，还是很不错的，播放器界面透明的质感和控制按钮的玻璃质感非常的统一，很漂亮。从这个案例也能感受到透明的风格总是比纯色的设计更清爽那么一点点。

十七、毛玻璃

高亮的边缘和控制按钮柔和的白色高光给了这个设计那么一点毛玻璃的质感，很特别。

十八、更高的透明度

相较于前面几个半透明的播放器背景来说，这个设计的透明度要更高，所以会有更加清爽、透亮的感觉。

十九、一个整体

这个设计有着值得借鉴的创意，那就是整个播放器控制按钮融合在一起，拉近了鼠标点击的距离，并且有着更加浑然天成的感觉。

二十、发光

鼠标悬停的效果不只是高亮，还可以让元素的四周扩散出一点点光晕出来，好像是灯被点亮的感觉，这也是细节上值得学习的地方。

三月 4, 2012 -- 10个精致的企业网站设计模板欣赏及点评 (12)

美德斯医疗法规咨询公司网站设计作品展示（商业作品）

wantfee — Tue, 27 Mar 2012 10:42:22 +0800

此网站是从事美国及欧洲等区域的医疗法规咨询的网站，已上线运营，但客户对于原网站的视觉表现细节不满意，所以要求在网站布局不变的情况下，改进网站的界面设计，另外在局部区域调整网站信息架构，比如把首页的主要内容区的两个视频放到主视觉部分，用切换的方式依次展示；去掉对网站帮助不大的原主视觉区域的滑动展示图片等内容。所以整个设计延续了之前的色彩方案，蓝色和绿色搭配，只做了些细微的调整，让整个的设计看上去更清爽一些。

一月 16, 2012 -- BuyUSA货源网设计作品展示（商业作品） (11)
十一月 16, 2011 -- 视频制作网站主页展示（商业作品） (11)

创建网页背景材质时常用到的4种方法

wantfee — Tue, 20 Mar 2012 17:51:07 +0800

在网页设计中创建背景材质通常是根据设计方向展开设计的第一步，也是确定设计基调的重要环节。虽然大多数情况下，网页背景材质是非常细微和低调的，但是由于整个背景的范围较大，所以会给人强烈的心理感受。所以这篇文章中，我会就网页背景材质创建过程中常用到的方法做一总结，希望对于大家在设计中的开头步骤能够给与帮助的参考。

一、使用现成的图案来创建网页背景材质。

1、下载现成的图案样式，或者自己动手创建图案，关于如何自己创建图案，之前我写的一篇文章《在Photoshop中创建多种样式的网格背景图案》以及《在Photoshop中创建不规则无缝拼接图案》可以作为参考。下载完或者创建好图案之后，在图层样式中选择图案叠加即可。虽然看起来是很简单的一个步骤，但是如果有了高质量的图案样式，效果非常显著。下面是我收集的一些经典的图案文件，其中包括五类图案样式。

下载

2、如果下载的图案色调不符合设计要求的话，可以通过图层混合模式来进行调整。比如我们想要创建浅色的背景材质，但是手头的图案样式是暗色的，如果图案叠加的混合模式为正常的话，创建出来的效果如下图：

但是我想用这款图案做出浅色的背景来，该怎么做呢？这时候就可以通过调整图案叠加的混合模式来实现。在背景色不完全是白色的情况下，一般像上面的图案，通过调整混合模式到亮光就能得到如下图的效果。

3、还不满意的话，比如想要亮度再稍微再亮一点，还可以通过新建调整图层来实现。在这个例子中，使用色阶调整图层就可以实现我们的设计目标。你还可以通过添加黑白图层来给整个背景材质去色，通过色相饱和度图层调整背景材质的色相以及明暗值。

4、通过在图案图层上方新建一个颜色填充图层，调整该图层的图层混合模式，我们可以给图案图层添加一定的颜色。比如加一点黄色进去，或者加一点蓝色。当然这里我们依然可以通过添加色相以及饱和度调整图层来给本来是灰度的材质上色，具体方法就是在色相饱和度调整图层的对话框中勾选着色框，然后调整色相的滑动块来实现。

《在Photoshop中创建一个布纹材质的网页》可以作为这种方法的参考教程。

二、应用滤镜来创建网页材质背景。

在使用滤镜来给网页背景添加材质的方法中，最常见到的莫过于使用滤镜中的添加杂色命令来实现需要的效果了。应用步骤为，先将图层转转为智能对象，目的是方便随时调整滤镜值。然后应用滤镜>杂色>添加杂色命令即可，非常简单。一般来说，添加杂色时，滤镜数值的设置非常低，一般使用1%就够了，而且效果非常好，数值太大材质看上去不够自然。具体设置如下图所示：

杂色背景效果如下图：

三、使用笔刷来添加质感。

使用笔刷来创建网页背景材质也很简单，一般的步骤是，将前景色调整为白色，选择画笔工具，调整好大小，在新建的图层上随机添加一些笔刷效果，通过多建几个图层，调整不同图层的图透明度可以让添加的材质看上去更自然和真实。之后将图层的混合模式调整为叠加或者柔光让笔刷效果和背景更好的融合。下面的图片是添加了划痕和做旧效果的笔刷后，未更改图层混合模式之前和更改后的效果：

除了上面的做旧风格常用到这种方法外，笔刷方法的应用还常常出现在水彩风格的网页设计过程中，下面的这两个设计教程充分展示了笔刷在创建背景材质中的方法。

《在Photoshop中创建一个水彩风格的网页设计》

《创建一个作旧的，半透明的个人网页》

四、使用材质图片来创建网页背景

比如我们要让网页背景看上去是纸质的感觉。当然可以通过添加不同层次的滤镜效果模拟来实现类似于纸张的材质，但是相较于直接把一张纸质材质的图片拖到文档中，通过调整图层的混合模式以及上面提到的各种调整图层来实现的话，后面的一种方法做出来的效果往往要更真实和自然。类似的还有木质的背景材质的实现。《在Photoshop中创建一个游戏界面窗口》这篇文章很好的阐释了这种背景材质设计方法以及上面几种方法的综合运用。

下面的截图展示了木质背景材质的效果：

五、总结

实际上，在创建网页背景材质时，上面讲到的方法都会涉及到，只不过依据设计目标，有时只会用到其中的一种方法，比如杂色背景的话，应用添加杂色的滤镜命令往往就够了，有时却要复杂一些，可能上面的方法都会用得到。所以我们要依据总的设计目标来选择性的使用，但是这些方法不用说都是网页设计中必须要掌握的，这样我们的设计手法才能灵活多变。

十月 26, 2011 -- 在Photoshop中创建苹果的亚麻布纹背景 (14)
三月 25, 2011 -- 在Photoshop中创建杂色背景图案 (3)
三月 17, 2011 -- 在Photoshop中创建多种样式的网格背景图案 (18)
五月 12, 2010 -- 简单、快捷并且可收缩的Photoshop背景 (3)
四月 3, 2010 -- 4款有质感的图案 (0)

10个精致的企业网站设计模板欣赏及点评

wantfee — Sun, 04 Mar 2012 17:13:44 +0800

以下的10个网页设计作品是ThemeForest上最受欢迎的优秀企业网站设计模板的其中一小部分。它们风格低调沉稳，几乎只使用黑白灰三种色彩，却不雷同，并且在细节上都非常讲究。ThemeForest是非常值得网页设计师关注的高品质网站，其上的几乎每一个设计模板都称得上是杰出的设计作品，值得我们认真揣摩学习。这篇文章里我将根据自己的观点对这10个设计模板的设计思路和方法做一总结，列出其中的要点，挖掘值得我们在网页设计中值得借鉴的东西，希望能够对大家有所帮助。

一、设计的目的是为了信息更好的传播

1、整体风格感觉很干净，原因是整个页面近乎于白色，只用非常亮的不同层次的灰色来区分各信息区域。主视觉背景应用的灰色渐变颜色最暗的值也才是#F4F4F4。而灰色之上用高饱和度和亮度的成色做跳出色，不至于让页面看上去灰灰的一片。下面的截图显示这个设计中使用的灰色是非常亮的，而跳出的橙色基本上使用了最大的色值。

2、整个页面没有过多的设计元素出现，导航没有设计导航条，”Read more”也没有做成按钮的样式。只是将文字、图片放置于页面上，通过元素之间的间距、文字大小、文字颜色来组织信息，尤其是各部分信息间较宽的留白，让页面也更有透气感。从这个设计我们可以了解到设计的核心目的在于为功能性加分，作为网页设计来说，就是更好的传递信息，就像百度联盟用户体验中心的主视觉上写的”让复杂的内容通过设计的手段达到最优的传播性。”而我们常常为了单纯的所谓”酷”和”炫”的设计，通过深入的分析这个设计案例可以得到反思。

3、整个页面为通栏设计，内容居中于930像素范围之内。这样的设计去除了左右的边框，更有透气感，是企业网站设计中常用的布局方法。

4、设计中出彩的地方在于主视觉文案部分的大尺寸的字体，让整篇文字大小看上去差不多的页面有了视觉中心和层次感。

5、亮度较高或者白色背景下图片边框的设计可以作为参考的设计样式。

二、传统页面式居中布局

1、和前一个设计类似，这个设计中的色彩思路是，整个设计灰度偏暗并且各层次之间反差较小，营造一种平静的基调，用亮度和饱和度较高的色彩跳出，打破整体灰色的沉闷，也让使用了色彩的信息文字更为醒目。

2、主视觉部分幻灯片的样式，包括当前图片状态（左下角小圆圈）、幻灯切换按钮（左右箭头）以及文案的表现方式可以作为一种设计方式参考。

3、行为请求按钮区域（Buy Now）功能上的重要性在视觉设计上也得到了突出，区别于其他区域，这部分的背景添加了斜纹的材质，色彩上也更深一些。其他区域，例如下面的Portfolio和Our Service信息区域部分用1像素的线隔开，既体现出隶属于不同的区域，又不割裂个区域之间的关系。

4、深色背景下的图片边框设计方式很简单，加一个亮度稍高一点的色彩就可以了。

5、信息关系差别较大的区域，例如底部的最新评论、最新小工具、关于我们以及联系表单部分用不同灰度的背景色彩区分开，并且在边缘用较宽的线条分割和过度。此处的图片边框使用了较背景更深的颜色，但添加了1像素亮度高于背景的外边框。从整体上看，此区域的重要性较低，所以你可以观察到联系表单的文字框并没有添加内阴影，提交按钮没有应用任何图层样式，这就是功能性在视觉设计上的表现。

6、白色的设计方案比深灰色的设计看上去更干净清爽，导航和行为请求部分用亮度较高的灰色区别，同样和背景颜色差别不大，让页面看上去更为清爽干净。

三、理性而硬朗的设计

1、相较于前面的灰色设计来讲，这种充满了渐变光和1像素高光线条的设计看上去理性而硬朗，原因是渐变类似于金属的表面光泽，而90度直角和1像素高光的大量出现好像元素的边缘锋利到能够划破手指一般。前面两个设计风格简洁所以不会出现过多的设计元素，而这个设计模板相较之下就要浓烈一些，所以无论是滑动展示区、图片边框还是”Read more”按钮都有更多的设计在里面。所以在设计中需要把握一个整体的设计方向，才能对于如何处理各个页面元素做到心中有数。

2、和前面的案例相同，不同信息区域用不同颜色做一划分也在这个设计中得到了体现，附属导航和联系信息位于页面的最顶部，属于第一个部分，也是色彩最暗的区域。Logo、主导航、主视觉属于同一个信息区域，是色彩最浓烈和醒目的区域。原因是这部分在显示器中处于第一屏的位置，要有一下子抓住人的效果。高亮的灰色区域是页面的主体部分，是主要的信息阅读区域，要给人柔和舒服的阅读感受；页脚以及版权信息部分是最后一个区域，色彩和前面的Logo、主导航以及主视觉部分相呼应，也起到视觉平衡的作用。

3、每一个信息区域的边缘都有非常清晰的1像素高光，Logo、主导航以及主视觉部分的背景也不是简单的颜色填充而已，而是叠加了类似于光线的效果，主视觉以及下面图片边框底部两侧的阴影让内容框有了中间突起的感觉。图片边框的效果更能够吸引人，页脚部分的背景也叠加了渐变，这些都给整个设计增加了质感。

3、和第一个设计一样，这个案例依然延续了通栏的设计布局。

四、黑白世界

1、企业网站模板从整体上来讲布局中规中矩，变化不多，色彩是比较低调的，以白色、灰色、以及饱和度和亮度较低的大块色彩应用居多，整体风格平静而简约。这个设计也延续了这种设计风格。

2、和上一个设计类似，这个设计没有过多讨论的地方。值得琢磨的是其中一些细节的设计，比如图片样式的设计：

内容框样式的设计：

分割线样式的设计：

五、不同层次蓝色的设计

1、布局上这个设计模板也采用了和案例一的直接将信息放置在背景上的布局方式。

2、色彩应用上，和前面的几个设计主打灰色不同，这个设计采用了不同层次的蓝色作为色板。虽然几个层次的蓝色并不完全属于同一色相，但是色彩跳跃非常小。背景是亮度和饱和度很低的蓝色，而侧边栏的内容框背景色彩更暗，页面上的链接文字、线条是高亮的部分，使用了亮度和饱和度都非常高的蓝色，和背景拉开大的层次，非常醒目。

3、和前面的几个设计风格相比，这个设计属于那种打眼一看看不太明白的那种，似乎有一点酷的感觉。所以如果你被告知要求设计一个干净、简洁风格的作品，做成这样应该算是跑题了。影响这种风格的元素一是由于整个页面属于暗色，二是页面上元素比较多，且形式不一。可以观察到，其中的图案样式有两种，斜纹和1像素的一黑一白点状图案。

在主页不同栏目的设计样式上不是以我们经常看到的矩形区域出现，而是几乎各不相同，其中的统一元素是斜边，在下面截图中我们都可以看到斜边的应用。

六、设计中留白和精致的体现

这个设计里我想要强调一下留白和细腻精致这两个设计要点。要让设计看上去清爽、透气，留白在其中的作用非常重要。不用多说，看看下图各设计元素之间的间距，你会发现设计师特别舍得在各元素之间留出空间来，然后我们再对比自己设计中经常使用的间距就能发现问题所在了。

要让设计看上去细腻和精致也不难，把”精确到每一像素”作为设计的座右铭，尤其关注元素边缘的精准度，以及所有其它的细节，认真观察这个设计中每一信息区域的1像素高光的边缘，按钮的样式，渐变和阴影的柔和，把这些东西掌握在手中，我们就能在作品的精致程度上进步很多。

七、时尚的弧形设计

1、整个设计由于版式和布局的不一般以及弧形边缘给整个设计增添了时尚的感觉。这是整个设计有创意的地方，所以这里带给我们的问题是：”我们应该在哪种设计要求下或者期望中考虑到使用弧形元素？”不能说只要与众不同，所以我不用直线，而用弧形，作为一个设计师我们要对各种布局、形状、色彩、材质带给人的心理感受有比较充分的认识和把控，这样我们才能够做到对于整个设计风格的走向有充分而灵活的掌握。

2、背景部分有3个层次，上半部分模糊的有空间感的图片，中间部分带有一点色值的亮灰色，底部是稍暗一些同样带有一点色值的灰色。重点是上半部分的模糊图片，虽然高斯模糊值不小，但是还能感受到图片中的空间感，这就使得整个背景在不抢眼的同时，有给整个设计带来透气的感觉。

3、页面割裂为两部分，主要内容区和左侧侧边栏，主要内容区为白色，侧边栏为比背景图片的色调更暗一些，色相接近的色彩，所以这里我们又可以观察到色彩上的三个层次，最亮的白色、中间调的图片色、暗色调的侧边栏。

4、文字在字体、大小、颜色上区分让文字在视觉上拉开功能性方面的区分。这些都是细节，但是体现出设计上的专业性。

八、柔和的亮灰色渐变

1、又是不同层次灰度划分信息区域的一个设计。主页中亮灰色搭配圆角的设计总给人一种柔和，圆润的心理感受。

2、这个设计中有很多有创意的地方，不仅让整个设计看上去别出心裁而且对于信息的传递起到了加分的作用，值得我们借鉴学习。例如，主页介绍公司业务和客户反馈的硕大的1、2、3三个序号；博客插图、日期、标题、日志附属信息的设计以及圆形的博客缩略图样式都是非常有效而且漂亮的设计。

九、不同页面不同的背景图片

1、我个人其实更偏爱这种居中带有边框的设计，看上去信息更为集中。而这个设计内容框下的一个页面一更换的大图片背景让设计更有趣味性，也更有空间感。

2、主内容区接近白色的亮灰色背景看上去更柔和，不那么刺眼，也让阅读更舒服，页面和各元素直角的设计让页面看上去更硬朗和现代。

3、灰色背景下设计师选择了用高饱和度和亮度的桃红色作为醒目的跳出色。重复出现的双线条作为划分不同区域的设计元素。

十、亮灰色和深灰色的对比

1、这个设计的杂色背景材质让背景看上去不是光溜溜一片，而更加柔和，看上却更人性化。

2、亮灰色和暗灰色的显著对比在划分不同信息区域中散发出和整体偏亮或者整体偏暗的设计独有的时尚的味道。

3、简单的色彩方案、圆角的设计元素、简洁的图标、无衬线字体等统一的设计风格构成了整个页面干净、简洁的心理感受。

四月 14, 2012 -- 20个视频播放器界面欣赏及点评 (12)
十一月 15, 2011 -- 如何在Photoshop中创建标签式按钮（附PSD下载） (15)
十月 20, 2011 -- 手把手教你设计一个电影导演工作室主页 (13)
九月 30, 2011 -- 苹果iOS和谷歌安卓用户界面风格对比及技术总结 (24)
九月 18, 2011 -- 10个精致的导航菜单欣赏及点评 (21)

免费下载：情人节日历壁纸及其PSD文件

wantfee — Mon, 13 Feb 2012 13:17:32 +0800

网页设计是UI设计的一部分，其中的思路和方法都是相通的，所以有时候拿图标的设计来练手是非常好的扩展网页设计思路，提高设计能力的方法。再将图标放置到背景之上，加上日历等其他附属信息也就是一张非常漂亮的桌面壁纸了。所以值此情人节到来之际，飞鱼的声纳首先祝有无情人的各位情人节都快乐！顺便将这款命名为《Steel Love》的壁纸提供给大家下载，大小不同的图片适合不同的显示器分别率，大家各取所好。另外将PSD源文件也提供给大家，希望各位喜欢。

JPEG图片：1024×768，1024×1024，1280×800，1280×960，1440×900，1600×1200，1920×1080

PSD文件：

valentine’s day wallpaper

无相关文章

BuyUSA货源网设计作品展示（商业作品）

wantfee — Mon, 16 Jan 2012 17:19:49 +0800

BuyUSA是一个提供美国日常生活用品代购的货源网，主要的代购产品分为四大类：母婴用品、宠物用品、衣帽服饰以及数码家电。客户要求设计能够体现美国产品优良质量的品质感，并且要求设计看上去给人温馨、专业、简洁的感受，文字使用英文来进行设计。所以在这个设计中，主要的考虑有这么几点：一、网站信息架构和功能性方面，由于网站有着非常强的功能性（来访问的人很可能就是要来下单的），所以信息表达的非常直接，主页的KV就是四类产品的分类图标，并且用直观的图片来展示相关内容，看上去一目了然。每个产品分类的内页就是相关品牌的展示，按照英文字母分类排列，便于访问者查找和了解。再进入每个品牌的页面是更为详细的产品介绍以及部分产品的展示和醒目的下单按钮。二、网站信息完整而详细的梳理会使得每个页面信息量不会太大，给页面留出呼吸的空间，让设计看上去更为简洁。三、中饱和度、高亮度的柔和的蓝色作为主色，让页面的感受更为清新，加上饱和度和亮度接近的补色橙色，让设计温暖和温馨起来。四、精心刻画每一个元素的细节，让设计上看去更专业并且具有品质感。

三月 27, 2012 -- 美德斯医疗法规咨询公司网站设计作品展示（商业作品） (6)
十一月 16, 2011 -- 视频制作网站主页展示（商业作品） (11)

和韩雪冬学到的网页设计点滴

wantfee — Wed, 14 Dec 2011 11:14:07 +0800

跟着韩老师学了一段时间的网页设计，觉得非常有必要把自己学到的东西梳理总结一下，一方面进一步巩固知识，另一方面和大家分享，下面是我的学习心得。

一、要把网页设计当成玩儿，而不单单是工作。

这其实说的是兴趣的事儿，作为网页设计师，一定要对网页设计感兴趣，你才能痛并快乐着，要不每天忙于应付客户交付的任务，就只剩痛苦了。韩老师现在还在给客户做大量设计的同时，有事没事的画个猪头或者煤气罐啥的，其实就是一种玩儿的态度。为啥做东西都挺累人了，他还要自己折腾呢？感兴趣呗！自己动手设计出来挺酷、挺炫的东西一方面会有成就感，另一方面也锻炼了自己的设计能力，所以如果我们对网页设计有兴趣和话，加上勤学苦练，进步一定非常快。

二、网页设计其实也是UI，所以要用做UI的概念来做设计

上面是韩老师作品中的元素截图，相信很多人都对这种酷炫的光效效果感兴趣而去临摹。但是其实就像韩老师教给大家的那样，技术上实现起来并不难，关键在于要对光效的理解到位。哪里是高光，哪里是阴影，哪里是反光要能够考虑到。拿第二张图片登录表单来说，顶部的左右两边的高光最亮的部分是白色的，这是一个层次，那么既然有这么亮的光线存在，那么必然在这些亮光周围有向外扩散的光晕，这又是一个层次，所以你可以看到这些高光周围的紫色是要比更远处的紫色浅一些的，所以你如果考虑到了这些东西，并且掌握了实现的技术，做出来的东西应该是很细腻漂亮的。而这些效果仅仅靠图层样式的参数调整是不能够实现的，如果我们仅仅死记硬背了几个图层样式的参数设置，或者在Photoshop中保存了一大堆图层样式，而没有真正理解的话，是不会有提高的。为什么韩老师做这种光效很厉害？我觉得和他一开始做UI设计有非常大的关系，做UI要考虑到很多关于结构、光效之类的东西，比起网页上的元素来说要复杂很多。下面是韩老师最近设计的煤气罐图标，我们可以认真观察，仔细考虑其中的高光和阴影，为什么高光和阴影放在这里？为什么是这个形状？明白了这些之后，网页元素上的光效看上去就比较简单了。所以多拿这种图形设计练手是非常好的提高设计能力的方法。

用UI的概念做网页设计的另外一个要点是细节。就像观止教育的优秀设计师辛旭起接受68Design采访时说的那样”我就拿一个按钮来说明，什么是按钮的细节？做出了颜色的渐变，做出了玻璃质感的高光，还需要什么？现在做出了三个面：亮部，暗部，高光。但是仔细想想：高光可能不止一处有高光，可以有多处光源，可以有多处高光。暗部不只是暗，它里面可能还会有反光，还有反射的物体，还有被反射的物体上面也有高光等等这些。把这些在这个按钮里有力的表现出来，这个时候，跟原来的按钮相比，就看到了细节。”要让设计出来的东西看上去漂亮，细节的表现是其中非常重要的一个方面。很多设计师在创建页面元素的细节时总感觉无从下手，不知道该做些什么，总被批评为设计粗糙，原因就在于想法还不够深入，看不到更深一层的东西，辛老师总结的这几句话算是给我们道破了迷津。

关于网页设计的细节，这里我要重点推荐我经常访问的两个关注细节的网页设计网站，一个是PremiumPixels，这是英国有名的网页设计师Orman Clark的个人站点，Orman Clark的这个网站主要关注的是wordpress主题的设计制作，他设计的wordpress主题虽然看上去界面没有企业站那样色彩丰富，效果炫丽，但是仔细观察，细节上都无可挑剔。另外Orman Clark会经常的把自己设计的PSD文件共享出来，供大家下载。所以这个网站上有很多的PSD源文件，而每一个设计的细节非常的讲究。所以通过研究源文件，我们可以很快把大师的技术学到手。

另外一个关注细节的优秀的网站是Dribbble，这是一个优秀设计师展示作品的平台，几乎每一个设计的细节部分都无可挑剔，仔细分析这其中的优秀作品，我们都可以在创意、配色、更重要的是细节方面提高很多。之前我挑出Dribbble上的10个导航设计进行了详细的分析，写了一篇文章《10个精致的导航菜单欣赏及点评》，大家可以参考一下。下面是我从Dribbble上随便摘取下来的设计作品，大家可以看到这些作品在细节方面的完美表现。

三、技术要积累并且熟练掌握。

拿韩老师的作品中用到的技术举几个例子来说，在这个游戏网站中，主要用到了下面几种技术来实现最终的效果：

1、用动感模糊滤镜做出来下雨的效果，喷溅笔刷做出来的打在巨人头上和肩上的雨水溅起效果以及图层叠加做出的地面的雨水漫过巨人脚面的效果。

2、用素材结合蒙板技术实现的巨人手中的火球效果以及巨人身后的山峰和闪电的效果。

3、套索工具和笔刷实现的顶部导航的岩石纹理的效果。

4、图层样式和笔刷做出来的Logo效果。

5、渐变映射为整个场景调色的技术。

所以如果这些实现的技术我们都没有熟练掌握的话，先不谈创意，就让你临摹一个类似的效果也不见得我们都能做得很好。这里我们又要谈到细节的问题，课堂上，韩老师给我们看过这个设计的PSD文件，单单是巨人的一只手里的火焰效果好像就用了将近20个图层，所以为什么韩老师做出来的这个场景看上去很真实，我觉得讲究细节是其中的一个非常重要的原因。所以我们做设计一定要有耐心，要有把即使一个小小的箭头都要求看上去完美的精神，做出来的东西才能经得起众人挑剔的眼睛和品味的检验。

四、认真细致的分析每一个优秀作品，让自己不断提高。

每个设计师的电脑里都保存了很多漂亮的网站截图，但是这些设计作品我们有时候并没有挖掘它更深层次的功效。既然这些都是我们看得上的好的设计作品，就应该多分析别人为什么以这种方式创意？为什么选择这种颜色？为什么这么布局？如果是我做这个设计，我会怎么做？和别人相比差距在哪里等等这些问题，借鉴别人的长处。我的方法是用马克鳗将这些值得学习的地方都标注下来，保存成图片，以便随时学习查阅。下面是我平时分析的一些东西，供大家参考（点击缩略图查看大图）。

无相关文章

视频制作网站主页展示（商业作品）

wantfee — Wed, 16 Nov 2011 17:52:47 +0800

这是最近帮客户设计的有关视频制作的网站的主页，共做了3种颜色的版本，每一种版本使用了两种近似色来搭配。设计中，为了达到提高访客的转化率的目标，所以主要考虑了AIDA（注意力、兴趣、期望、行动）的销售方法来进行页面布局设计。材质上运用了我之前文章中提到过的强质感高光风格的表现方法，最终目的是让网站看上去简洁和专业。

三月 27, 2012 -- 美德斯医疗法规咨询公司网站设计作品展示（商业作品） (6)
一月 16, 2012 -- BuyUSA货源网设计作品展示（商业作品） (11)

飞鱼的声纳

10个儿童网站个案分析及设计特点总结

相关文章

两款不同质感的播放按钮（PSD文件）

相关文章

20个视频播放器界面欣赏及点评

相关文章

美德斯医疗法规咨询公司网站设计作品展示（商业作品）

相关文章

创建网页背景材质时常用到的4种方法

一、使用现成的图案来创建网页背景材质。

二、应用滤镜来创建网页材质背景。

三、使用笔刷来添加质感。

四、使用材质图片来创建网页背景

相关文章

10个精致的企业网站设计模板欣赏及点评

一、设计的目的是为了信息更好的传播

二、传统页面式居中布局

三、理性而硬朗的设计

四、黑白世界

五、不同层次蓝色的设计

六、设计中留白和精致的体现

七、时尚的弧形设计

八、柔和的亮灰色渐变

九、不同页面不同的背景图片

十、亮灰色和深灰色的对比

相关文章

免费下载：情人节日历壁纸及其PSD文件

相关文章

BuyUSA货源网设计作品展示（商业作品）

相关文章

和韩雪冬学到的网页设计点滴

一、要把网页设计当成玩儿，而不单单是工作。

二、网页设计其实也是UI，所以要用做UI的概念来做设计

三、技术要积累并且熟练掌握。

四、认真细致的分析每一个优秀作品，让自己不断提高。

相关文章

视频制作网站主页展示（商业作品）

相关文章