精品网页设计欣赏及评析

《精品网页设计欣赏及评析》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、精品网页设计欣赏及评析1.商业清爽型国外现在较流行的风格，国内也有不少模范者，可是往往在色彩调配和细节方面有所欠缺。图一图二特点：利用方框构图，简介明了，图片一般大面积出现，但图片一定要结构清晰，色彩鲜明色彩方面多使用大面积浅灰度和白色，以衬托logo和配图的色彩鲜艳，配以高明度小小色块（如导航处）。因为结构构图简单，细节方面一定要讲究，不适宜有过于复杂的logo和点缀出现，多用简洁明快的几何图形结合。一般此类风格背景如果是彩色，都会是低纯度低亮度彩色，以反衬主题图片和logo。在大面积背景压住的情况下，图片明度越高越爽。画面应该有一个主色调。注意图二左下脚的logo，有意与背景色

2、调相同，以免抢了视觉中心，这是很多人常犯的错误。图三注意细节图案的使用，这是大多数设计者弱点所在，细直线条与箭头、方块、园点不要乱用，每个点的存在你都要有理由。2.商业门户型现在的商业门户网站在几乎都是三栏，上面是logo＋banner。其实门户网站因为信息大，更新频繁，在设计时应该充分考虑可扩展性，我认为可以充分利用下拉特性，充分考虑左上位置的设计，主体争取结构明了简洁。下面我们一起来看看几个门户网站的设计。图四所示的这个网站是卡通网站，广告栏很大，但通过精心设计使之醒目而不凌乱。图片统一使用斜角，统一又不呆板。图五所示网站使用曲线与直线的结合，蓝灰色主色，画面沉静而不脏，这里的

3、色彩难度很高，需要细心调试，色块分割，简单明了。图六所示网站主题部分简之又简，在背景上做足了功夫，轻轻的灰度变化，是现在国际流行的风格，高雅，不花，充分烘托主体。图四图五图六3.IT企业实用模板图七图八图九图十4.时尚企业网站模板图十一图十二5.主题型实用网站模板图十三上图所示模板其logo和图片以及其绿色的主色调与动物园的环境和业务非常贴切。美食业务主题网站，布局合理大方，整体设计“色香味”俱全，主题鲜明，功能齐全。6.学校教育型模板图十四图十五7.儿童主题型网站模板图十六图十七图十八图十九8.个人个性化网站模板以下的10个网页设计作品是ThemeForest上最受欢迎的优秀企业

4、网站设计模板的其中一小部分。它们风格低调沉稳，几乎只使用黑白灰三种色彩，却不雷同，并且在细节上都非常讲究。ThemeForest是非常值得网页设计师关注的高品质网站，其上的几乎每一个设计模板都称得上是杰出的设计作品，值得我们认真揣摩学习。这篇文章里我将根据自己的观点对这10个设计模板的设计思路和方法做一总结，列出其中的要点，挖掘值得我们在网页设计中值得借鉴的东西，希望能够对大家有所帮助。一、设计的目的是为了信息更好的传播1、整体风格感觉很干净，原因是整个页面近乎于白色，只用非常亮的不同层次的灰色来区分各信息区域。主视觉背景应用的灰色渐变颜色最暗的值也才是#F4F4F4。而灰色之上用

5、高饱和度和亮度的成色做跳出色，不至于让页面看上去灰灰的一片。下面的截图显示这个设计中使用的灰色是非常亮的，而跳出的橙色基本上使用了最大的色值。2、整个页面没有过多的设计元素出现，导航没有设计导航条，”Readmore”也没有做成按钮的样式。只是将文字、图片放置于页面上，通过元素之间的间距、文字大小、文字颜色来组织信息，尤其是各部分信息间较宽的留白，让页面也更有透气感。从这个设计我们可以了解到设计的核心目的在于为功能性加分，作为网页设计来说，就是更好的传递信息，就像百度联盟用户体验中心的主视觉上写的”让复杂的内容通过设计的手段达到最优的传播性。”而我们常常为了单纯的所谓”酷”和”炫”

6、的设计，通过深入的分析这个设计案例可以得到反思。3、整个页面为通栏设计，内容居中于930像素范围之内。这样的设计去除了左右的边框，更有透气感，是企业网站设计中常用的布局方法。4、设计中出彩的地方在于主视觉文案部分的大尺寸的字体，让整篇文字大小看上去差不多的页面有了视觉中心和层次感。5、亮度较高或者白色背景下图片边框的设计可以作为参考的设计样式。二、传统页面式居中布局1、和前一个设计类似，这个设计中的色彩思路是，整个设计灰度偏暗并且各层次之间反差较小，营造一种平静的基调，用亮度和饱和度较高的色彩跳出，打破整体灰色的沉闷，也让使用了色彩的信息文字更为醒目。2、主视觉部分幻灯片的样式，包

7、括当前图片状态（左下角小圆圈）、幻灯切换按钮（左右箭头）以及文案的表现方式可以作为一种设计方式参考。3、行为请求按钮区域（BuyNow）功能上的重要性在视觉设计上也得到了突出，区别于其他区域，这部分的背景添加了斜纹的材质，色彩上也更深一些。其他区域，例如下面的Portfolio和OurService信息区域部分用1像素的线隔开，既体现出隶属于不同的区域，又不割裂个区域之间的关系。4、深色背景下的图片边框设计方式很简单，加一个亮度稍高一点的色彩就可以了。5、信息关系差别