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

第2章 网页设计的风格创意（下）2.3 酷站赏析从一个站点可以链接出N个站点，在这里，作者只罗列出一部分站点并附了图片，这些站点的页面设计可以堪称经典，所以在浏览的同时要留意它们的页面设计哦！图2-2- 1 首页图2-2- 2 栏目首页如图2-2-7和2-2-8所示的是一位国外设计师的个人主页。这已经是第6个版本了，第5版本相当有名气。这位设计师的商业作品很不错，感兴趣的读者可以登录网站看一看。除此以外，设计师的个人作品更有特色，最近可能因设计师在图案设计和泥人角色设计上的尝试，使第6版本的网站风格受到了图案设计和泥人角色的影响。图2-2- 3 第5版中作品展示的页面提起如图2-2-9所示的第5版的这个页面，主要是因为它的色彩组合。主色是色调一致的红绿补色，若是没有黑色作为视觉中心，红绿的强烈对比一定会给人厌恶的心理感觉。黑色起了很大的色彩调节的作用，是一个难能可贵的色彩尝试。图2-2- 4 首页图2-2- 5 导航效果如图2-2-10所示是一个全Flash实现的网站。飞行的火腿是导航开关，如图2-2-11所示，鼠标悬停时会出现多个选项。选择不同的“肉块”后，画面跳转到其他场景。在新的场景中，如图2-2-12所示，标签和酱都是可选择的导航按钮，选择按钮以后出现如图2-2-13所示的展示页面，整个网站充满了趣味性。图2-2- 6 栏目首页图2-2- 7 信息内页全Flash构架的网站在网络上十分常见，导航按钮被设计成千奇百怪的动态物体，这是网络新媒体形成的一大特点，但是对信息量大的网站来说，并不适用。图2-2- 8 首页如图2-2-14所示的是madisonsbag的首页，这是一个信息量很少的网站，除首页是彩色的画面之外，其他的栏目只需要鼠标悬停在导航条上即可看到全部内容，如图2-2-15和2-2-16所示，感觉就像在首页的上面铺开一张半透明的纸，拿黑色钢笔随意书画一样。图2-2- 9 栏目首页图2-2- 10 栏目首页这是一个很有趣的设计，仅仅通过使用Flash动态效果的导航，便把这样一个小巧的网站演绎的很别致。不仅解决了信息量小的问题，也使人感受到它的气氛和灵活。图2-2- 11 首页图2-2- 12 栏目首页如图2-2-17和2-2-18所示是著名的设计专业网络杂志k10k的网站，它带领起来的像素设计风格几乎席卷了全球各类信息类型的网站，是难得一见的优秀作品。k10k是一个十分典型的“色调统一，色相相反”的配色形式。网站中使用了多种色相，统一的色调减少了色彩对比关系，达到了一种柔和的视觉效果。此站点的其他方面也非常土粗，导航按钮的风格、框架结构的分割、插图与作品等都是像素风格的典范作品。图2-2- 13 首页如图2-2-19所示是奥林匹克网站。首页版式简介，以竖长方形图片分割，左侧为导航，右侧是新闻。图片部分依靠Flash技术每隔几秒更换一次，大量的代表体育健儿、奥林匹克精神的图片在不停地翻滚。图片是这个首页的主要灵魂，它的色彩与内容变化直接影响页面给人的感觉，这种灵活的变换也给人一种活泼和多变化的感觉，无色彩的背景使图片更加醒目。标志位置居上、居中，五环图像很明确地告诉人们这里是奥林匹克中心。如图2-2-20和2-2-21所示，标志延伸到内页设计，标志的醒目给这个网站带来一丝与众不同的风采。奥林匹克网站有一种历史悠久的体育文化气氛，主要是色彩和插图的影响，以及标志位置的明视度高等原因。图2-2- 14 栏目首页图2-2- 15 栏目首页内页版式很有特色，左侧上部为导航，下部为插图。插图的艺术处理给棱角多的结构框架加入一些不同的元素，不仅给页面增加了艺术效果，还形成了特殊的页面风格。不同栏目采用不同的色彩，均是稳重、庄严的浊色系，配上深浅不同的米色及灰色，效果不俗。图2-2- 16 十月迷情图2-2- 17 再演紫蜻蜓图2-2- 18 草原小屋淑女屋是颇有名气的少女服饰品牌，如图2-2-22、2-2-23和2-2-24所示是它的公司网站。网站在用色上很讲究，尤其是主题服装展示页面，每个页面的色彩和音乐都完全不同，与相关的主题契合。图2-2- 19 www.andyfoulds.co.uk首页图2-2- 20 www.andyfoulds.co.uk鼠标悬停在栏目上的效果图2-2- 21 www.andyfoulds.co.uk栏目首页如图2-2-25所示的andyfoulds.co.uk是全Flash技术构架的网站。网站信息量不大，给设计师带来很大的发挥空间。鼠标悬停时，如图2-2-26所示，背景图会折叠成不同的效果，单击导航栏目后跳转到如图2-2-27所示的内页。网站设计带有浓重的文化气息，颜色偏暗，导航色彩艳丽，正好与背景形成反差效果。整个网站看起来很现代，有些简约主义的特点，并且动感十足又十分时尚。图2-2- 22 首页图2-2- 23 栏目首页如图2-2-28和2-2-29所示是gem的网站。在图片较多的情况下，进行合理的图文排版成为了首要的工作。将数张图片以整齐有序的形式排列在版面上，称为块状组合；将图片分散于版面的各个部位，使版面成为自由的不呆板的形式，称为分散组合。块状组合具有鲜明的理性感，我们把一些图片很整齐地排列在同一版式内时，就像街区一样，把相邻的图片排列在一起，自然强调出垂直与水平的效果。按照这样的编排，文字与图片混编的情况就很少，往往是文字与图片分别编排，因此，看上去有理智和冷静之感。在版面上配置相同数量的图片，如果采用分散性的组合方式，马上就会给人自由、明快的印象，过分拘谨的感觉没有了，加上富有变化的文字形象，版面上会显得轻松、愉快。只是在设计时要主义变化和条理相