第2章 网页设计的风格创意(下)

《第2章 网页设计的风格创意(下)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第2章网页设计的风格创意（下）2.3酷站赏析从一个站点可以链接出N个站点，在这里，作者只罗列出一部分站点并附了图片，这些站点的页面设计可以堪称经典，所以在浏览的同时要留意它们的页面设计哦！图2-2-1www.kvad.com首页图2-2-2www.kvad.com栏目首页如图2-2-7和2-2-8-40-所示的是一位国外设计师的个人主页。这已经是第6个版本了，第5版本相当有名气。这位设计师的商业作品很不错，感兴趣的读者可以登录网站看一看。除此以外，设计师的个人作品更有特色，最近可能因设计师在图案设计和泥人角色设计上的尝试，使第6版本的网站

2、风格受到了图案设计和泥人角色的影响。图2-2-3www.kvad.com第5版中作品展示的页面提起如图2-2-9所示的第5版的这个页面，主要是因为它的色彩组合。主色是色调一致的红绿补色，若是没有黑色作为视觉中心，红绿的强烈对比一定会给人厌恶的心理感觉。黑色起了很大的色彩调节的作用，是一个难能可贵的色彩尝试。图2-2-4www.chrum.com首页-40-图2-2-5www.chrum.com导航效果如图2-2-10所示是一个全Flash实现的网站。飞行的火腿是导航开关，如图2-2-11所示，鼠标悬停时会出现多个选项。选择不同的“肉块”后

3、，画面跳转到其他场景。在新的场景中，如图2-2-12所示，标签和酱都是可选择的导航按钮，选择按钮以后出现如图2-2-13所示的展示页面，整个网站充满了趣味性。图2-2-6www.chrum.com栏目首页-40-图2-2-7www.chrum.com信息内页全Flash构架的网站在网络上十分常见，导航按钮被设计成千奇百怪的动态物体，这是网络新媒体形成的一大特点，但是对信息量大的网站来说，并不适用。图2-2-8madisonsbag.com首页如图2-2-14所示的是madisonsbag的首页，这是一个信息量很少的网站，除首页是彩色的画面

4、之外，其他的栏目只需要鼠标悬停在导航条上即可看到全部内容，如图2-2-15和2-2-16所示，感觉就像在首页的上面铺开一张半透明的纸，拿黑色钢笔随意书画一样。图2-2-9madisonsbag.com栏目首页-40-图2-2-10madisonsbag.com栏目首页这是一个很有趣的设计，仅仅通过使用Flash动态效果的导航，便把这样一个小巧的网站演绎的很别致。不仅解决了信息量小的问题，也使人感受到它的气氛和灵活。图2-2-11www.k10k.net首页-40-图2-2-12www.k10k.net栏目首页如图2-2-17和2-2-18

5、所示是著名的设计专业网络杂志k10k的网站，它带领起来的像素设计风格几乎席卷了全球各类信息类型的网站，是难得一见的优秀作品。k10k是一个十分典型的“色调统一，色相相反”的配色形式。网站中使用了多种色相，统一的色调减少了色彩对比关系，达到了一种柔和的视觉效果。此站点的其他方面也非常土粗，导航按钮的风格、框架结构的分割、插图与作品等都是像素风格的典范作品。图2-2-13olympic.org首页-40-如图2-2-19所示是奥林匹克网站。首页版式简介，以竖长方形图片分割，左侧为导航，右侧是新闻。图片部分依靠Flash技术每隔几秒更换一次，大

6、量的代表体育健儿、奥林匹克精神的图片在不停地翻滚。图片是这个首页的主要灵魂，它的色彩与内容变化直接影响页面给人的感觉，这种灵活的变换也给人一种活泼和多变化的感觉，无色彩的背景使图片更加醒目。标志位置居上、居中，五环图像很明确地告诉人们这里是奥林匹克中心。如图2-2-20和2-2-21所示，标志延伸到内页设计，标志的醒目给这个网站带来一丝与众不同的风采。奥林匹克网站有一种历史悠久的体育文化气氛，主要是色彩和插图的影响，以及标志位置的明视度高等原因。图2-2-14olympic.org栏目首页-40-图2-2-15olympic.org栏目首

7、页内页版式很有特色，左侧上部为导航，下部为插图。插图的艺术处理给棱角多的结构框架加入一些不同的元素，不仅给页面增加了艺术效果，还形成了特殊的页面风格。不同栏目采用不同的色彩，均是稳重、庄严的浊色系，配上深浅不同的米色及灰色，效果不俗。图2-2-16www.fairyfair.com十月迷情-40-图2-2-17www.fairyfair.com再演紫蜻蜓图2-2-18www.fairyfair.com草原小屋淑女屋是颇有名气的少女服饰品牌，如图2-2-22、2-2-23和2-2-24所示是它的公司网站。网站在用色上很讲究，尤其是主题服装展

8、示页面，每个页面的色彩和音乐都完全不同，与相关的主题契合。-40-图2-2-19www.andyfoulds.co.uk首页图2-2-20www.andyfoulds.co.uk鼠标悬停在栏目