毕业论文-浅析传统风格网页设计

浅析传统风格网页设计——以“千秋词君李煜”、“北京小吃”网站为例摘要现代风格，简约、扁平化、有质感，拥有空间感，能够以少胜多；传统风格，也指中国风，包罗万象，既有繁复精巧，亦有淡雅意境。二者在网页风格设计中，并不对立，反而共生，以网页为载体，就要遵守其一定的内在规律，例如按照浏览者眼动规律来布局，根据传达给浏览者的信息来配色等，只有这样才能让传统风格成功的呈现在互联网上，一成不变的照搬必然会被用户拒绝甚至淘汰。本文以“千秋词君李煜”和“北京小吃”网站项目为例，同时辅以其他网站案例，介绍了传统风格中具有代表性的两个类型，通过浅析传统网页风格设计的特点和要素，总结如何在网页这一现代产物中更好的表现传统风格，以及怎样准确的向用户传达中国传统风格中的文化含义，加快传统风格设计的普及。关键词：网页设计传统风格信息传达设计总说明本人的毕业设计是“千秋词君李煜”与“北京小吃”两个网站项目，这两个是我个人非常感兴趣的项目。李煜，世称南唐后主，是五代十国之一南唐的最后一位帝王，他的诗词，既有哀戚婉转亦有气势磅礴；他的一生，恣意放纵却可享国十余年，但早年丧兄丧父丧妻，中年流亡为质终死于毒酒；几句话不足以总结李煜充满传奇色彩的一生，不谈政治，私以为李煜是中国历史上任何一位帝王都不可比拟的。北京小吃，分为民间小吃和宫廷小吃。随着各个朝代不断更替与进步，现已传承有百来种各具特色并深受多方食客喜爱的口味与风格，譬如爆肚儿、炒肝儿、卤煮、豆汁儿、焦圈儿等等。凝聚了无数人的智慧，传承了中国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次级页面与内容页设计..................................................83.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如何选择传统风格网页设计首先，最重要的是根据网站所要传递给