浅析传统风格网页毕业设计VIP

浅析传统风格网页设计以“千秋词君李煜” 、 “北京小吃”网站为例摘 要现代风格，简约、扁平化、有质感，拥有空间感，能够以少胜多；传统风格，也指中国风，包罗万象，既有繁复精巧，亦有淡雅意境。二者在网页风格设计中，并不对立，反而共生，以网页为载体，就要遵守其一定的内在规律，例如按照浏览者眼动规律来布局，根据传达给浏览者的信息来配色等，只有这样才能让传统风格成功的呈现在互联网上，一成不变的照搬必然会被用户拒绝甚至淘汰。本文以“千秋词君李煜”和“北京小吃”网站项目为例，同时辅以其他网站案例，介绍了传统风格中具有代表性的两个类型，通过浅析传统网页风格设计的特点和要素，总结如何在网页这一现代产物中更好的表现传统风格，以及怎样准确的向用户传达中国传统风格中的文化含义，加快传统风格设计的普及。关键词：网页设计 传统风格 信息传达 设计总说明本人的毕业设计是“千秋词君李煜”与“北京小吃”两个网站项目，这两个是我个人非常感兴趣的项目。李煜，世称南唐后主，是五代十国之一南唐的最后一位帝王，他的诗词，既有哀戚婉转亦有气势磅礴；他的一生，恣意放纵却可享国十余年，但早年丧兄丧父丧妻，中年流亡为质终死于毒酒；几句话不足以总结李煜充满传奇色彩的一生，不谈政治，私以为李煜是中国历史上任何一位帝王都不可比拟的。北京小吃，分为民间小吃和宫廷小吃。随着各个朝代不断更替与进步，现已传承有百来种各具特色并深受多方食客喜爱的口味与风格，譬如爆肚儿、炒肝儿、卤煮、豆汁儿、焦圈儿等等。凝聚了无数人的智慧，传承了中国 5000 年的文化。而且在很多小吃的背后，都有一段鲜为人知的小故事，或是带有传奇色彩的民间流传，或是跟慈禧老佛爷的逸闻趣事有关。所以北京小吃已经不单单是简单的小吃，而是一种代表北京的饮食文化。本次毕业设计的主要任务根据两个不同的项目会有所调整。首先是“李煜” ，因为在目前所有的受众群体中，知道和了解李煜的用户比较少，好在现在许多人都开始注重自身文化修养，所以我们从李煜的诗词入手，运用传统风格营造一种浓郁的文化气氛，既要符合李煜的个人气质，也要符合当今各种用户的欣赏需求，以此去吸引用户进一步的了解和关注李煜这个人物。其次是关于北京小吃。北京作为中国的首都，每天都迎接着八方来客。所以北京小吃这个带有浓郁文化的特色传承，也自然受到了更多人的喜爱与探寻。但至今为止互联网上还没有一个关于北京小吃的网站，实在可惜。本人想通过这个网站可以系统的梳理其种类和多方式去展现北京小吃，让爱吃、会吃的朋友们能够深入了解北京小吃与北京文化，有一个可以交流的平台，同时也要吸引更多不了解其中奥妙的民众来关注北京小吃，并深深的爱上它。在制作这两个项目时，我们选择了现在市场上主流的 HTML+CSS 样式，便于用户浏览和阅读信息，并配以 Flash 导入页，增加视觉效果。在“千秋词君李煜”这个项目中我们采用了淡然雅致的配色，其中导入页与首页各 1 页，5 个二级页面，21个次级页面，次级页面中共有 49 个内容页，共计 77 个页面；而在“北京小吃”中，我们采用了活泼鲜艳的配色，其中导入页与首页各 1 页，登录注册 1 页，4 个二级页面，10 个次级页面，32 个内容页，共计 49 个页面，其中有两个二级页面因有用户发言功能，需后台服务器支持，故只能做出一个模版，其中链接不可点击，如果可以点击内容会更加丰富。制作该网站时主要使用的是 Photoshop（用于界面设计） 、Dreamweave（用于网页制作）以及 Flash（用于界面主视觉 Flash 制作）三款软件。目 录绪论 .11 网页风格设计 .11.1 网页风格设计的概念 .11.2 网页风格种类 .12 传统风格网页设计 .32.1 传统风格网页设计 .32.2.如何选择传统风格网页设计 .42.3 传统风格网页设计的优势与趋势 .43 千秋词君李煜官方网站风格设计 .53.1 导入页设计 .63.2 首页设计 .73.3 次级页面与内容页设计 .8 3.4 淡然雅致风格设计应注意的细节 .94 北京小吃官方网站风格设计 .94.1 首页设计 .104.2 次级页面与内容页设计 .114.3 活泼鲜艳风格设计应注意的细节 .125“李煜”与“北京小吃”案例风格设计对比 .125.1 布局对比 .125.2 色彩对比 .135.3 传统元素运用对比 .13总结 .14谢辞 .15参考文献 .16绪论如今的互联网正飞速发展着，人们通过互联网不仅可以用传统的方式搜索所需信息，而且还可以通过它满足生活中的衣食住行。在如今的大数据时代，网站做为一个多元化的信息载体，在其中扮演着非常重要的角色。用户也不仅仅满足于简单的信息传递，对视觉和形式感也愈发重视。所以网站风格设计的未来发展趋势要注重更多的整体与细节，带给用户从视觉到心理的整体感受。所以丰富的带有创意性的迎合网民心理需求的网页风格设计越来越成为主流。而就在这样一个获取信息十分便利的时代，人们的内心也愈发浮躁，于是一种经过历史沉淀的文化正在悄然流行，它就是中国风。从服装到美食到艺术形式，都受到很多人的喜爱和研究，当然其中也不缺乏其他国家的爱好者。中国风，或者说中国传统文化正在以它自己的方式慢慢传播于全球，而我们的互联网发展也紧跟时代的步伐，中国传统风格设计的网站就是其中之一。将中国传统元素融入到现代网页风格设计中，是发展中国传统文化的又一个好的方式。本人选择这个论点为题目，也是希望能够更深入的去理解和研究文化的传承，并设计出更好的带有中国文化风格的网站。1 网页风格设计网页风格设计最能传递企业文化信息，好的网页风格不仅能帮助客户认识和了解网站背后的企业，也能帮助企业树立别具一格的形象。通过网页风格的独特，直接给自身网站和所处行业的其它网站之间营造出一种清晰的辨识度。随着互联网的影响力不断提升，网站成了企业让客户了解自身最直接的一个门户，通过自身网站的辨识度在众多网站中脱颖而出，迅速帮助企业树立品牌，提升企业形象。1.1 网页风格设计的概念网站风格是抽象的概念，一般是指网站的整体形象给浏览者的综合性惑受。每一个网站都有自己独特的风格，而拥有独立风格的网站会吸引越来越多用户的关注，从而提升自己网站的知名度。网站的整体形象包括页面的排版布局，形式，色彩，效果等。比如：我们觉得福娃的形象是生动活泼的而法官的形象则是专业严肃。每一个网站都会给浏览者留下不同感受。因此我们需要做到的是根据网站的定位不同做出每个网站特有的形式。除此我们还需要在风格上把握一下，网页上所有的图形、文字，包括背景颜色排版形式等等都要统一风格，这样网页才可以使浏览者看起来舒服、顺畅。1.2 网页风格种类网页风格按不同的分类标准可分为很多不同的种类，就本文而言，按照用途可分为以下六类。（1）时尚类（见图 1）：适用于精品、时尚、饭店旅馆、服饰、婚纱等产业。需要特别注重视觉的效果。时尚风格类型的设计特色呈现出简约、精致、高质感，比较少使用线条。另外照片的运用上建议使用高解析度、饱和度高、鲜明对比色为主，较能表现出高质感的感觉。图 1 时尚类网站（2）科技类：此类型一般适用于高科技、机械、电子、多媒体等产业。科技类型大多使用大量动画特效、多媒体音效及线条并结合主打商品或服务，来传达高科技感和专业度。（3）商业类：商业网站制作适用于任何类型的企业，是目前最普遍类型的网站。此类型网的风格偏向简单且网站动线明确为主，不做过度华丽的版面设计或使用过多的动画，以增加网站浏览速度而提高搜寻排名。（4）休闲类（见图 2）：适用于休闲农场、观光景点、户外餐厅等企业。此类型的网页设计大多会使用户外的素材，如蓝天白云、天空、树木、绿地等等来营造出休闲自然的风格，会让用户感受到。图 2 休闲类网站（5）活泼类：适用于主题乐园、童装、学校等客群以幼童或青少年为主的网站。（6）传统类：又称古典风，适用于企业形象或主要商品风格偏向中国风或欧洲古典风的网站。这种类型的网站设计会以复古风格结合的花纹底图或图藤效果来表现柔美复古感。若是属于中国风网站，通常在设计上会比较注重国画中“留白”的原则，同时辅以复古配色，以及水墨，毛笔字和印章烙印等图片来传达中国文化。2 传统风格网页设计2.1 传统风格网页传统风格是一个比较概括的分类，在传统风格中又分为中国风、日韩风和欧洲古典风。本文重点研究的是偏向中国风的传统风格，其中包含以下三种主要风格。淡然雅致风格（见图 3）：配色饱和度较低，多以淡色为主色调，配以国画、书法等素材， “留白”概念在此中能得到很好的诠释。图 3 淡然雅致风格活泼鲜艳风格（见图 4）：以较为鲜艳的色彩为主色调，有形式感，排版不过于正式，图片较多，内容丰富。图 4 活泼鲜艳风格沉稳大气风格（见图 5）：配色正式，能体现气势，如红+黄，紫+黄等，排版也突出对称和稳定性。图 5 沉稳大气风格2.2 如何选择传统风格网页设计首先，最重要的是根据网站所要传递给用户的信息内容来确定风格。以介绍人物的网站为例，假设此人是知名古诗词人，可根据其词风来确定。如词风清隽就选择淡雅风格，偏民俗可选择活泼的风格。要是换成企业类或机构类网站的话，还是以沉稳、大气风格为主；如果一个清隽词人的网站设定成沉稳大气的风格就会显得死板，难以吸引用户。2.3 传统风格网页设计的优势与趋势传统风格网页设计的优势：（1）突显网站的文化底蕴。只要和传统风格不过于相反的内容，同样可以使用。传统风格演变自中国五千多年的历史积累，其中网页设计的变化和统一、对比和调和、均齐与平衡，这些概念最早就来源于易经一书。（2）更适合文化类、机构类网站。现在很多此类网站仍使用单调的线条，内容与风格不匹配，反之如果使用传统风格，就会衬托出网站的整体氛围，让用户感觉更和谐。（3）属于中国独创。像时尚类、休闲类的风格网站并不能准确说出它们属于哪个国家，而中国传统风格有类似符号的性质，代表着中国文化，世界上绝无仅有。传统风格网页设计的趋势：（1）政府重视。现在，非物质文化遗产的传承受到了政府更多的支持和保护，并且我校还申请了国家级民族文化传承与创新教学资源库，越来越多的学生和青年人加入到非遗的保护、传承和发展的行列，随之传统风格的网页设计也会越来越普及。（2）国民重视。现代生活节奏的加快与生活的压力，让很多人开始回归简单与向往淳朴的生活方式，并开始注重本国的传统文化，而且人们获取信息最有效的途径仍是互联网。所以随着这种发展趋势和民众需求，中国传统风格网页设计也会得到很好的发展。（3）国外流行。虽然“中国风”为近年流行，可早在十七、八世纪的欧洲就兴起了“中国热” 。当时太阳王路易十四有一场聚会，他坐着中国的八抬大轿进入会场，从那时起很多人开始对中国有了了解，平民百姓也开始收集一些古玩等等。虽然如今传统风格网页设计在国外还不十分流行，但随着各国间的文化交流，当中国传统文化真正普及到全球那一天，相信关于传统风格的网页设计也会更加受到人们喜爱。3“千秋词君李煜”官方网站风格设计南唐后主李煜，唐末宋初，五代十国，生逢乱世。如果可以用一句话概括他的一生，那便是：“一代风流君不二，多情才子薄命王“ 。因为他的出生地是今江苏省，又因为他的词派是花间词，这些都与温润和淡雅结合了起来，所以把李煜的官方网站风格设定为淡然雅致是最恰当不过了。为了体现这样的风格理念，其设计所应用到的元素是来自于中国水墨画和江南建筑中的花窗。水墨画这种带有浓郁中国特色的艺术表现手法，可在网站设计中应用的元素，包括宣纸、山水、花草、墨韵、印章，和各种动物等等（见图 6） ；这些元素表现的意境也非常广泛，例如古朴、飘渺、优美、苍劲、生机勃勃图 6 水墨元素水墨画中可应用在网页设计的素材很多，意境也不局限于此，但传统风格并不是元素的叠加。 “意境是指抒情性作品中呈现的那种情景交融、虚实相生、活跃着生命律动的韵味无穷的诗意空间” ，这一点和网页设计中的对比与调和不谋而合。说起江南建筑中的花窗，就不得不说榫卯。榫卯是古典家具之魂，一榫一卯之间，一转一折之际，凝结着中国几千年传统家具文化的精粹，这种木材的精巧衔接，十分坚固牢靠，并且美观，花窗就是这样技术下的产物。在传统风格网站设计中，可以应用一些古建筑的元素，如宝塔、宫殿、拱桥等等，也包括花窗、屋檐、城墙这种小素材，这样有利于感官的虚实结合，只是不要太多，画蛇添足，少而精为佳。网页风格设计中可应用的中国元素还有很多，书法，和其他多样的绘画手法，但同样需要注意，传统风格的元素应用不是一味的重复，一般网站风格设计中，取一主要风格应用即可。（以下“千秋词君李煜”官方网站，简称“李煜” ）3.1 导入页（风格）设计导入页的效果要尽量丰富，因为它是用户对网站的第一印象，一定要吸引住用户的眼球。 “李煜”导入页的设计，采用纸张底纹，为使背景不单调，加上了水墨远山以衬托李煜为人性格的飘渺的感觉；上下封底是花窗元素，让界面看起来更整齐；进入时界面飘下花瓣，增加界面优美感；圆形墨韵按照笔序出现，然后淡入李煜本人画像，同时展开讲述他生平的一首诗，有一种既视感，舒缓的把用户带入到的李煜的世界当中去。为吸引用户视觉；在界面下方是一副滚动的韩熙载夜宴图 （描绘李煜宫廷生活的真实写照） ，画幅较长，在设计上丰富了页面内容，有图片支撑底部显得更稳定（见图 7） 。图 7 李煜导入页-第一步效果之后，进入导入页的另一个界面，整体变暗模糊变为背景，在这之上