精品网页设计欣赏及评析.docx

《精品网页设计欣赏及评析.docx》由会员分享，可在线阅读，更多相关《精品网页设计欣赏及评析.docx（21页珍藏版）》请在课桌文档上搜索。

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

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

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

4、的其中,小局部，它们风格低询沉稳,几乎只使用黑白灰三种色彩.却不雷同,并且在细节上都非常讲究.ThemeForest是非常值得网页设计师关注的高品质网站，其上的几乎每一个设计模板都称得上是杰出的设计作M，值得我们认真揣摩学习。这福文章里我将根据自己的观点对这io个设计模板的设计思路和方法做“总结,列出其中的要点，挖掘值得我们在网页设计中值得借签的东西，希熨能够对大家有所帮助.一、设计的目的是为了信息更好的传播THINKOUTSIDEOFTHEBOXWEBDESIGNCREATIVEIDEASWhatWeDoOOCOOThreeCoIufnnPOftfohOOOOOOWhKdOYoUEyourr

5、*y11rPtt6=XXK1.Ji一1DOOOOO1.1.1.J1.it三垂KE一Deve1.opmentgOPPomNCy.一1、整体风格感觉很干净,原因是整个页面近乎于白色,只用非常亮的不同层次的灰色来区分各伯息区域，主视觉背景应用的灰色渐变颜色以暗的侦也才是#F4F4F4而灰色之上用高饱和度和竞座的成色做跳出色.不至于让页面看上去灰灰的一片.下面的截图显示这个设计中使用的灰色是非常亮的,而跳出的橙色根本上使用了最大的色色.拾色器（词M色二匚只有Web颜色XS:100%a:48B:99%b:74R：253C：0%O1G:120M:66%B：0Y：100%WFD7800K:0%OH:2881

6、.:662、整个页而没有过多的设计元素出现.导航没有设计导航笈Readmore.也没行做成按钮的样式.只是将文字、图片放置于页面上.通过元素之间的间距、文字大小、文字颜色来组织信息,尤其是各局部估息间较宽的留白，让页面也更有透气感.从这个设计我们可以了解到设计的核心目的在于为功能性加分，作为网页设计来说，就是更好的传诩信息，就像百度联盟用户体蕤中心的主视觉上写的“让双杂的内容通过设计的手段到达必优的传播性.，-而我们常常为了单纯的所谢一酷“和”炫”的设计，通过深入的分析这个设计案例可以得到反思.3、整个页面为通栏设计.内容居中于93。像素范围之内.这样的设计去除了左右的边框.更疔透气感.是企业

7、网站设计中常用的布局方法.4、设计中出彩的地方在干主视觉文案局部的大尺寸的字体.让整篇文字大小看上去差不多的页面为了视觉中心和层次感.5、亮度较向或者臼色背忸下列图片边框的设计可以作为参考的设计样式.1.atestPostsSamp1.ePost61.oremipsumdo1.orsitametnec,ConsGCtetueradisdge1.tAeneancommodoIigu1.aeget.OSamp1.ePost5x1.oremipsumdo1.orsrtametnec.Consedetueradipisdnge1.itAeneancommodoIigu1.aeg钝ASamp1.ePos

8、t4/1.oremipsumdo1.orsitametnec.1Consectetueradpsdoe1.tAeneancommodoIigu1.aeget.二、传统页面式居中布局w*twaFe4tumCMW(MMn6OQOOTheBestTheme!(AVMYXY1.feMuat.UtstoketcurandyouwM1.ove1.h$hmc,1.EiftdR1.和前一个设计类似,这个设计中的色彩思路是,整个设计灰改偏暗并且各层次之间反差较小.营造一种平祥的基诩.用亮度和饱和度较高的色彩跳出，打破整体灰色的沉闷，也让使用了色彩的信息文字更为醒目.2、主视觉局部幻灯片的样式.包括当前图片状态（

9、左下角小圆圈）、幻灯切换按钮（左右箭头）以及文案的表现方式可以作为一种设计方式参考.3、行为请求按钮区域（BuyNow1.功能上的重要性在视觉设计上也得到了突出.区别于其他区域.这局部的背景添加了斜纹的材质，色彩上也更深一些.其他区域.例如下面的Portfo1.io和OnrService信息区域同都用1像素的线隔开，既表达出来讽不同的区域，又不割裂个区域之间的关系，4、深色背景下的图片边框设计方式很简单，加一个亮度稍尚点的色彩就可以了。Portfo1.ioBui1.t-inShortdeYoucaneasi1.yuseshortcodeviaiconsintexteditor.Easy1.Cr

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

11、12NewPageBui1.derJan06,2012AccessE1.ementsCo1.orJan061.20126,白色的设计方案比深灰色的设计看上去更干净清爽，导航和行为请求局部用亮度较高的灰色区别,同样和背景颜色差异不大,让页面看上去更为清爽干净.三、理性而硬朗的设计11mvm9*omouoMOCOamCYKARMA，S(IXUWX1.30EMectv20UrQjePAge1.ayout又70Shortcodesand20GM9CMfyr4*WpM*JtuwOffM1.rAMVteMaw9afmMaRWf*wIU*.*rf*na*a*3vmk*ya“i“WUV3,“nrw*wvfP*

12、O-tMW*Mfrmto3Knponnto*md,2O3X*W*nd50*OH,xtjmu11urev.toefeentum9W*ectifvcUnMKtVS11te*pwmPmHtnIjGDs，.UAW九、不同页面不同的背景图片1、我个人其实更偏爱这种居中带有边框的设计，看上去信息更为集中.而这个i殳汁内容框下的一个页面一更换的大图片背爆让设计更有趣味性，也更有空间感。2、主内容区接近白色的亮灰色背景看上去见柔和,不那么刺眼，也让阅读更舒晚,页面和各元素直角的设计让页面看上去更硬朗和现代，3、灰色背景下设计师选持了用裔饱和度和亮度的桃红色作为触目的跳出色。虫或出现的双战条作为划分不同区域的设计元素,1.atestNews.1.atestProjectsTwitterFeed十、亮灰色和深灰色的比照SPARKSPARKPricing25.WI*o*SPARKPricing1、这个设计的杂色背战M质让背景看上去不是光溜溜片，而史加柔和，看上却更人性化.2、亮灰色和暗灰色的显著比照在划分不同信息区域中欣发出和整体偏亮或者整体偏暗的设计独仃的时尚的味道，3、简用的色彩方案、陶用的设计元素、简洁的图标、无衬投字体等统一的改计风格构成了整个页面干净、简沽的心理感受。