精品网页设计欣赏及评析

精品网页设计欣赏及评析1.商业清爽型国外现在较流行的风格，国内也有不少模范者，可是往往在色彩调配和细节方面有所欠缺。

图一图二特点：利用方框构图，简介明了，图片一般大面积出现，但图片一定要结构清晰，色彩鲜明色彩方面多使用大面积浅灰度和白色，以衬托logo 和配图的色彩鲜艳，配以高明度小小色块（如导航处）。

因为结构构图简单，细节方面一定要讲究，不适宜有过于复杂的logo 和点缀出现，多用简洁明快的几何图形结合。

一般此类风格背景如果是彩色，都会是低纯度低亮度彩色，以反衬主题图片和logo。

在大面积背景压住的情况下，图片明度越高越爽。

画面应该有一个主色调。

注意图二左下脚的logo，有意与背景色调相同，以免抢了视觉中心，这是很多人常犯的错误。

图三注意细节图案的使用，这是大多数设计者弱点所在，细直线条与箭头、方块、园点不要乱用，每个点的存在你都要有理由。

2. 商业门户型现在的商业门户网站在几乎都是三栏，上面是logo＋banner 。

其实门户网站因为信息大，更新频繁，在设计时应该充分考虑可扩展性，我认为可以充分利用下拉特性，充分考虑左上位置的设计，主体争取结构明了简洁。

下面我们一起来看看几个门户网站的设计。

图四所示的这个网站是卡通网站，广告栏很大，但通过精心设计使之醒目而不凌乱。

图片统一使用斜角，统一又不呆板。

图五所示网站使用曲线与直线的结合，蓝灰色主色，画面沉静而不脏，这里的色彩难度很高，需要细心调试，色块分割，简单明了。

图六所示网站主题部分简之又简，在背景上做足了功夫，轻轻的灰度变化，是现在国际流行的风格，高雅，不花，充分烘托主体。

图四图五图六3. IT 企业实用模板图七图八图九图十4. 时尚企业网站模板图十一图十二5. 主题型实用网站模板图十三上图所示模板其logo 和图片以及其绿色的主色调与动物园的环境和业务非常贴切。

美食业务主题网站，布局合理大方，整体设计“色香味”俱全，主题鲜明，功能齐全。

6. 学校教育型模板图十四图十五7. 儿童主题型网站模板图十六图十七图十八图十九8. 个人个性化网站模板小部分。

它们风格低调沉稳，几乎只使用黑白灰三种色彩，却不雷同，并且在细节上都非常讲究。

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、我个人其实更偏爱这种居中带有边框的设计，看上去信息更为集中。