1、本科毕业设计（20届）北京现代设计研究院网站设计所在学院专业班级工业设计学生姓名学号指导教师职称完成日期年月I摘要摘要在这电子商务时代，设计一个能吸引浏览者并让其对企业产生良好印象的网站十分具有研究意义。企业文化通过优秀的WEB设计来展示，在视觉化的今天更好地演绎了注意力经济。本文对北京现代设计研究院的网站设计做了具体的阐述，给出了明确的设计方法思路。文章主要分析了网站的需求、用户及用户特征、色彩在标志及网页设计中的应用、网页布局的方式以及网站实现的技术方法，并举例说明了一定的调研方法和设计原则。文中给出了北京现代设计研究院标志及网站风格的设计提案，对其进行分析和探讨确定了最终的效果图，并且进
2、行了完善。关键词现代设计；网站；信息导航；交互设计IIABSTRACTINTHISECOMMERCEERA,ITHASGREATRESEARCHSIGNIFICANCETODESIGNAWEBSITETHATATTRACTSVISITORSANDMAKESTHEMPRODUCEAGOODIMPRESSIONONENTERPRISEINVISUALIZATIONTIME,SHOWINGENTERPRISECULTURETHROUGHEXCELLENTWEBDESIGNPREFERABLYDEDUCESATTENTIONECONOMYINTHISPAPERIEXPOUNDEDTHEWEBSITED
3、ESIGNOFBEIJINGINSTITUTEOFMODERNDESIGNINDETAILANDGAVECLEARDESIGNPROCEDURESTHISARTICLEMAINLYANALYZEDTHEWEBSITENEEDS,USERSANDUSERFEATURES,APPLICATIONSOFCOLORINLOGOANDWEBDESIGN,PATTERNSOFWEBPAGELAYOUTANDTECHNOLOGYMETHODSOFREALIZINGWEBSITEINADDITION,ITILLUSTRATEDACERTAINRESEARCHMETHODANDDESIGNPRINCIPLEST
4、HISPAPERGAVEDESIGNPROPOSALSOFTHELOGOANDWEBSITESTYLEOFBEIJINGINSTITUTEOFMODERNDESIGNITCARRIEDONANALYSISANDDISCUSSIONANDDETERMINEDTHEFINALRENDERINGS,MOREOVERCONSUMMATEDTHEMKEYWORDSMODERNDESIGNWEBSITEINFORMATIONNAVIGATIONINTERACTIONDESIGNIII目录摘要错误未定义书签。目录III1绪论111课题背景112课题意义113课题设计的方法思路22北京现代设计研究院网站需求分
5、析321建站的目的322网站需要实现的功能33网站相关调研分析431用户及用户特征432色彩调研4321标志色彩调研5322网站色彩调研533网页布局调研834调研总结94网站整体设计1041网站目录结构规划1042北京现代设计研究院标志设计10421标志设计提案11422选定效果图1343网站风格定位14431参考的相关页面14432首页设计提案16433首页方案综合分析及选定方案18434相应子页设计195网站实现的技术方法2251网站设计工具简介22511网页编辑器DREAMWEAVER22512页面图像设计软件PHOTOSHOP22IV52网站设计开发与布局方法22521网页文档主要语
6、言HTML23522网页布局DIVCSS23523客户端WEB开发脚本语言JAVASCRIPT2353网站制作流程236网页设计中需注意的细节247网站的测试258总结26参考文献27致谢错误未定义书签。附录错误未定义书签。11绪论互联网技术的发展，网络的普及，使得企业展示自己形象的平台早已不再局限于电视和报纸杂志。互联网平台让人们以一种相对主动的方式来接受企业对其自身的宣传，甚至产生互动，为企业带来更多的客户与潜在商机。在互联网这个重要的文化创作平台，网站设计的要求随着平台的发展而不断提高，北京现代设计研究院网站的设计是十分有意义的。11课题背景从研究部门、政府部门和学校对互联网的使用，到商
7、业网络的发展，到互联网渗透到每个角落，网站设计随着互联网的快速普及而登上舞台扮演着重要的角色。互联网的出现，从技术的角度说是通信的一次革命，而它的意义远不仅于此，它还是传媒，多功能的互动平台。从我们接触信息开始，除了自然界所呈现的外，那些文字那些图片甚至声音本就相当丰富庞杂的信息资源还在继续扩张，网络出现之前它们承载于书籍、报纸期刊、杂志广告、摄影、电视、广播等传统的媒体。网络的出现使这些资源信息多了一个新的大舞台，对人类的文明进程产生了有力的推动作用。互联网上信息的发布主要是通过网站来实现的，所以网站设计所扮演的角色有多重要显而易见。数以万计的站点之中不乏精良之作，我国的网站设计已经有了一定
8、的基础，而我们对于网站的视觉审美能力和对网站功能应用等多方面的认知也达到了一个新的高度。所以，我国网站设计的发展程度还远远不够，在技术和艺术领域中对网站设计的探讨都很不足，使它处于两边不是的尴尬局面。12课题意义包含图片、文字、色彩、动画等信息的网站，设计的最终目的是追求最佳的主题诉求效果，它作为一种新媒体的表现形式，能给人带来创作的动机，发掘自身的创造力。对于设计师来说，这能锻炼到多种能力，除了设计网站页面的艺术细胞需要发挥作用外，还需要一定的技术来实现它。网站设计是一门结合并且平衡于技术和艺术之间的艺术。2企业设计制作网站，能提高企业的知名度，设计出一个吸引访客的网站更是能帮企业带来利润并
9、建立在外界良好的形象。通过网站企业可以及时更新相关新闻和产品信息，以便让客户以最快最便捷的方式了解，不仅如此，企业与客户的互动也会变得更加方便和频繁，能及时得到客户反馈的信息。在电子商务时代，网络沟通能力必不可少，而浏览者们总是更倾向于挑选自己喜欢并认可的网站，并决定是否成为回头客，所以设计网站就变得更有意义，设计出一个可用性强、独特创新的网站就成为企业网站长期发展的必要条件之一。北京现代设计研究院网站的设计，作为推广企业形象的重要手段，做到视觉效果出色、信息量丰富，使用起来便捷才能更好地演绎注意力经济，将这张网络上的形象名片分发给上千或上百万个潜在客户和合作伙伴。所以，本课题是十分具备研究意
10、义的。13课题设计的方法思路本课题的设计方法思路是参考网页设计师以及根据自己的一些网站设计经验提出的，比较适合对本站进行设计制作的路线。大体的设计想法在本文中体现，思路如下第一部分为绪论，阐述了本课题的研究背景以及意义。第二部分为北京现代设计研究院网站的需求分析，说明了设计该网站的目的和网站需要实现的功能。第三部分为网站相关的调研分析，从色彩，布局以及用户特征三方面进行调研分析并得出最后的调研结果，为北京现代设计研究院网站的设计提供资料。第四部分是网站整体的设计，包括网站目录结构的规划，北京现代设计研究院标志的设计以及网站首页、子页面风格把握，并确定了最终的效果图。第五部分是网站实现的技术方法
11、，介绍了网站设计工具以及设计该站点所用到的语言和布局技术方法。第六部分是网页设计中需要注意的细节，细节决定品质。最后为网站的测试，以修整完善整个网站。32北京现代设计研究院网站需求分析建设北京现代设计研究院网站，首先要明确建站的目的。目的贯穿着整个站点建设的始终，只有明确这点，北京现代设计研究院网站才能更好地被设计制作并具有实现意义。其次要具体分析该网站需要实现的功能，功能的实现是否能达到目的或者满足需求在很大程度上决定着网站建设的成败。21建站的目的一个网站能不能成功地设计制作与网站的前期规划有着重要关系，所以在建设网站之前，必须明确建站目的。北京现代设计研究院是中国最具活力和发展潜力的专业
12、设计研究院之一，专业团队致力于为客户提供从产品概念到市场导入的全面解决方案，并为客户系统化的规划企业产品形象，建立配套规范。自创立以来，丰富的设计经验已使北京现代设计研究院获得了认可和市场的好评，并有了一定的设计和研究成果。作为一家现代化企业，北京现代设计研究院需要具备网络沟通能力，借助网站加强对自身形象的宣传，并展示设计和研究成果，提高企业的知名度和扩大企业的影响力。建设北京现代设计研究院网站不仅可以帮助企业更好地和客户互动，及时得到更多的客户反馈来提高设计和服务品质，而且可以发掘很多的潜在客户，带来商业利益。建设北京现代设计研究院网站，有助于提高企业的综合竞争实力。22网站需要实现的功能该
13、网站提供给客户一个了解企业的平台，并可与企业产生互动，企业可以方便地对网站进行更新维护。具体需要实现功能如下用户可以大致浏览公司的最近新闻，知道公司的最新动向；用户可以了解北京现代设计研究院的一些基本信息，包括公司简介、设计团队的介绍、企业的客户和企业的服务范围及设计流程；用户可欣赏设计作品与最新的产品信息，并可参与竞拍；用户可联系我们并关注企业招聘信息加入我们；用户还可了解北京现代设计研究院的一些研究理论成果，设计原则等。43网站相关调研分析调研总是能很好地为决策做准备，给问题的解决带来借鉴意义。闭门造车的时代早已不复存在，信息化的今天，通过调研才能有发言权，才能更好地制造出满足需求的被大众
14、所接受的甚至被青睐的东西。本章主要调查分析了用户及用户特征，色彩在标志和网页设计中的运用以及网页布局的方式。31用户及用户特征1“以用户为中心的设计理念是网页界面设计的核心。”1明确并了解网站的服务对象及他们的特征至关重要，甚至这样那样的设计原则和规范，所有的出发点也都围绕着用户的需求。北京现代设计研究院网站的用户为与设计相关的群体以及需要设计的各类公司，当然这只是最主要的一部分，还有其他直接或间接可能与企业产生利益等关系的人群。不同的用户具有不同的知识结构，屏幕上的同一内容，即使被认可为文字相同，每个人的理解不会完全相同。在进行网站页面设计时，考虑到用户知识背景，尽可能设计一个符合主要用户需
15、求的网站，避免偏激的元素，以保证北京现代设计研究院以良好的形象出现并给用户带来兴趣。与设计相关的群体，他们往往非常热爱生活，具有创造力，注重提高生活的品质，并且具有敏锐观察和分析事物的能力。他们具备设计相关的知识，或喜简洁或喜繁复，不管如何，富有创造力的美的事物总是能够吸引到他们。北京现代设计研究院网站的设计除了把握整体的视觉效果外，一定要注意细节以提升品质。32色彩调研生活离不开色彩，设计更离不开色彩，它能够以30万公里/秒的速度传入人的眼睛，做到先声夺人。色彩也是最难搞定的设计元素，完美的色彩搭配像个人口味难以把握，对色彩的研究是一件十分有意义的事。1何建华视觉有温度网页色彩情感研究J韶关
16、学院学报，2010（02）0295321标志色彩调研一个LOGO通常包括名称、图案和色彩三个要素，即标准字、标志及标准色。色彩以其醒目明快的视觉传达特征占据着重要的地位，所以标准色越来越受企业重视。2“企业的标准色是经过专门设计选定的某种特定色彩或一组色彩系统，运用于企业所有视觉媒体中，并通过这种色彩所制造的知觉刺激与心理反应，以突出该企业的经营理念或产品的内容特质。”2作为品牌价值最高企业之一的可口可乐公司，选用红色作为标准色，洋溢着青春活力、健康向上和热情亢奋的气息；受大众喜爱的麦当劳集团，选用黄色作为标准色之一，能够给人丰收、愉悦和美味的感受；世界知名的高档汽车和摩托车制造商BMW，标志
17、是蓝白色的，代表了最精湛的技术，它带给我们的感受是理智、纯净与永恒。这些大公司都很好地运用了色彩的感觉和联想信息，从而激发消费者的欲望与心理联想，并树立了企业的品牌，创造了巨大的品牌价值。有人对2007年的世界500强企业标志色彩做了详细的统计和分析，并且给出了著名企业标志色彩设计的规律，我觉得非常具有指导性意义，并结合自己的分析，将设计规律概括如下便于识别记忆，选择12种，不宜超过4种的色彩；单色标志要选择单纯、醒目的色彩，双色标志宜选择对比鲜明、视觉冲击效果强的色彩；注意区别于其他企业用色，有自身独特性。322网站色彩调研一个网站的设计优秀与否，在一定程度上取决于其色彩的运用，它明显的视觉
18、效果，在排除立体图形、动画效果之外，通常是留给浏览者的第一印象。色彩定位的方法有很多种，比如问卷调查数据分析、图片映衬和心理选择等形式，本文色彩定位通过参考一些设计优良网站的色彩运用以及自己对色彩所反映情感的了解，采用心理选择法，从大的方向逐渐向小的方法拢进，无限接近最适合北京现代设计研究院网站的色彩区块。参考一些设计优良网站色彩运用的方式是依据红橙黄绿青蓝紫、黑、白、灰以及有彩色加无彩色这个区分规则收集相应的优秀网站来进行分析，目的是观察采用这些色彩的分别是什么类型的网站。这样做并不是说能归纳出一种相关的色彩选择原则，因为设计毕竟是一件很灵活的事情，但是却可以收集到一种对于色彩选择的感觉，选
19、用北京现代设计研究院网站色彩时不至于偏差太大，2杨仁敏，李巍CI设计M西南师范大学出版社，2007026并且在规则之中有突破。3“色彩是最富有表情作用的艺术语言。”3以收集到的黑色和白色网页分析为例图31CUIL网站页面CUIL为2008年上线的一款美国搜索引擎，该网站首页大幅黑色上有小部分高纯度蓝色点缀，CUIL几个字加以灰色的搭配，用色不多却用得很精致。不仅视觉冲击效果好，容易让人留下深刻的印象，而且整体色彩的应用还给人带来权威和专业的感觉（如图31）。3张雪艳初探色彩与网页设计J吉林工程技术师范学院学报，2005（5）56577图32匡威网站页面匡威是以其狂放不羁的设计，风靡全球一炮而红
20、的一个运动品牌，网站以黑色为主导。运动、创意、个性这些词眼自然而然地就跳跃出来，网站色彩的运用很好地涵盖了品牌形象（如图32）。图33CK网站页面美国第一大设计师品牌CK网站，大幅留白背景上搭以低明度的服饰，形8成明度对比，视觉效果好，给人留下简约、干净、舒适的深刻印象。子页中运用不同明度的灰色，整体看上去很和谐，能够感受到服饰的高贵品质（如图33）。图34柏林视觉网站页面以“企业品牌形象设计”为核心业务的柏林视觉网站，以白色为背景，并且首页大量留白，用色彩纯度较高的图片减去疏离感，让人产生干净、利落和信任的感觉（如图34）。不再一一举例说明，参考了不同色彩对应的大量不同优秀网站，以及自己对色
21、彩所反映情感的了解和对北京现代设计研究院产品、文化、形象的理解，用心理选择法进行了一次又一次的筛选，从冷色系到蓝色甚至考虑了其明度和纯度，最终决定北京现代设计研究院网站色彩优先考虑蓝色系。33网页布局调研4“网页布局设计是网站视觉设计研究中的重要环节之一，是将网页上的图片、文字、色彩、动画等视觉构成元素进行合理配置与表现的过程。”4建站的目的、用户的需求等多方面因素都已明确，可以进行布局的构思创作了，应尽可能多的构思几个方案，最终选择一个合适的进行网站的建设。网页布局其实和版面设计大同小异，都是想将信息清晰地传递并同时美化视觉形态，让受众接受信息的同时获得审美感受。就目前而言，常见的布局如4隋
22、涌网页布局之形式原理与设计要素J北京印刷学院学报，2007（03）0219下（1）“T”型布局，顶部LOGO广告，下方左右分别为菜单和内容，页面结构清晰但略有呆板。（2）“国”型及“匡”型、“同”型布局，“国”型页面上下各有一横条，中部左右放二级导航、友情链接等，中间为主要内容，信息量大但拥挤不灵活。“匡”型去掉了“国”型右边部分，主要内容空间更多。“同”型去掉了“国”型下部横条。（3）“三”型布局，页面上横向两条色块将其分为三部分，色块中大多放广告条、版权信息等，视觉冲击强，多用于国外站点。（4）“川”型布局，垂直方向分三列，一般适用于栏目较多的页面。（5）对称对比布局，左右或上下视觉对称，
23、半深色半浅色，视觉冲击强但难于将两部分有机结合。（6）POP布局，以宣传海报形式设计页面，漂亮吸引人但下载速度慢。（7）FLASH布局，类似于POP，整个页面就是FLASH动画，信息更丰富，视听效果绚丽、有趣，同样下载慢。上述都是常见的网页布局，设计创新的力量是无穷尽的，当然不会只局限于这几种，成功的布局能有效地引导浏览者的视线，在结构清晰的基础上还给人以审美享受。北京现代设计研究院网站的布局将在下面的设计中综合考虑各方面元素而逐步定型，最后选择最佳方案。34调研总结北京现代设计研究院网站为与设计相关的群体而建设，促进相互交流、合作并带来企业利益。它的用户是“挑剔”的，因为设计而见面，用户是来
24、看网站上与设计相关的内容的，他们来找新思想来找灵感，看看有什么不错的作品或者设计理论，或者了解北京现代设计研究院，会成为合作伙伴。所以北京现代设计研究院网站需要完美的图文结合以吸引住用户，它必须是生动的，活泼的，严谨而又生活的。关于标志和网站的色彩，都将从蓝色系中挑选，使整体风格更加统一，加强企业形象印象；关于网站的布局，并没有限定，调研只是为了掌握一些布局知识，以便设计时灵活运用，在页面设计提案时体现。104网站整体设计本章主要规划了北京现代设计研究院网站的目录结构，给出了标志和网站风格设计的提案，并对提案进行综合分析，选定最终方案，最后对最终方案进行优化。41网站目录结构规划根据对北京现代
25、设计研究院网站的需求分析及网站需要实现的具体功能，规划了如下的网站目录结构（如图41）图41网站目录结构42北京现代设计研究院标志设计在现代信息的传播中，符号俨然是一个重要的信息媒介，美国的工业设计师菲利普斯达克曾经说过“我们的职业（工业设计）绝不属于艺术家，也一定不属于美学家，而宁可说属于语意学家（SEMANTICIST）物体必须散发出11符号，就像孩子、动物和森林大火。”这话无疑指出了符号的地位。进行北京现代设计研究院网站的设计，LOGO的设计也自然成为一部分。说到LOGO，可能它占用网页的区域不大，但是它出现于网站所有的页面中，代表着企业和整个网站的形象，它的重要性不言而喻。好的LOGO
26、总是能够直接代表一个网站的灵魂，甚至延及企业的产品文化、精神理念等。一个LOGO通常包括名称、图案和色彩三个要素。关于名称，即为北京现代设计研究院几个字，设计成中英文双语的形式以响应国际化的要求。在这里字体的设计，中英文文字的比例及搭配方式等都是需要悉心考虑的。关于图案，首先应该容易被区分于其他图案便于记忆，然后通过联想、抽象、隐喻、概括等方式能表现出北京现代设计研究院的企业形象。关于色彩，参考上一章节中的调研总结。当一个LOGO成形，必须悉心修正，加以规范并达到统一有序的效果，使其客观反映出北京现代设计研究院的设计理念和服务精神等统一的企业形象。421标志设计提案以下是根据标志设计原则，追求
27、标志准确传达企业形象效果而设计的几个初步方案。其中中文字体是以宋体为原形而设计的，在细节处做了修改，使得字体风格统一一致，达到和谐的效果。中英文以合适的配比出现，较为清爽，但同时似乎少了几分灵动。字体在最后阶段还有待于进一步的设计、提高和完善。色彩方面，挑选了蓝色系中的两种，使整个标志更富有层次感。图42LOGO方案一如图42，这个标志是对北京现代设计研究院形象的设计，亦是对问号的设计，问号是生命追求的意义，隐喻企业永远不会停下追求的脚步，力争发展，增强综合实力，实现生命的意义。就设计研究精神理念来说，这个问号的设计是指在企业的发展过程中，希望企业以及合作参与到企业中的人都能够发现问题，提出问
28、题，企业会更好地解决问题，问号的下半部分正是一个肯定的感叹号，体现了企业追求完美的意识和良好的服务态度。设计研究要有企业有追求有思想会思考，这个标志很好的涵盖了企业的文化。12然而，一个标志首先应该容易被区分于其他图案，虽然是经过设计的问号，仍不能很好地体现独特性，来专门传达北京现代设计研究院的形象，故此提案有待进一步设计。图43LOGO方案二如图43，这个标志是由北字抽象而来，造型设计独特，可识别度高，易于被人记住形成初步印象。除了应用于网站，当进行印刷、广告等视觉传播时，该标志放大或缩小的视觉效果都非常好。标志图案两侧形成张开的有力羽翼，有展翅翱翔的意味，借指北京现代设计研究院愿像鸿鹄一样
29、实现拥抱蓝天的理想,实现企业宏伟的战略目标。一个有追求的企业总是能给人带来积极乐观的生活态度，设计研究院的本意也尽显其中。这个标志亦是一本打开的书的抽象，寓意企业不断充实自己，提高自身素质，丰富内涵。书籍很容易和研究联想到一起的，再加上上述意味，这个标志比较适合北京现代设计研究院的理念。这个标志的缺陷在于造型上略微有些生硬，对于设计这个企业形象还欠缺一些生动活泼的感觉。图44LOGO方案三如图44，这个标志构图简洁干练，非常单纯，并且富有层次感和立体感，要表达的意思也非常形象。本着两层含义标志下半部分的大半个圆代表了北京现代设计研究院，上部扇形代表了与之发生关系的外界；标志下半部分的大半个圆代
30、表整个设计圈，上部扇形代表北京现代设计研究院。前者隐喻企业需要更多的合作伙伴和新思想的加入来完善自己；后者借指北京现代设计研究院作为一股活泉融入设计圈，给设计界带来力量，为其注入新鲜的血液。作为一股活泉存在的企业总是渴望更多的泉眼，这个标志很好的阐释了这一点。头脑风暴盛行的今天，多种思想的汇聚会碰撞出更多智慧，团队合作也显得尤为重13要，该标志和谐地传达出了企业的文化信息创新、协作。形象化语言很好，然而高度单纯却还没能做到具备高度美感，所以还是需要在细节处加以思考设计。图45LOGO方案四如图45，这个标志的灵感来自于上个提案，不仅高度单纯并且具有高度美感。图案由箭头的交汇碰撞而成，同时形成领
31、子的形状，寓意精英各种思想的汇聚。这个标志反映了一种严谨细致的工作态度，把着力点放在每一个环节，于细节处见精神，于细节处见境界。在严谨的同时，它又很灵活地吸纳四周八方的各种信息，让有创造力的思想汇聚碰撞，非常符合北京现代设计研究院的形象和文化内涵。不过还需要进一步设计，以完善色彩、字体搭配等细节。422选定效果图以上四个提案中最终选定第四个方案作为北京现代设计研究院的标志，并且进行了进一步设计，最终效果图如下图46LOGO最终方案如图46，和初步提案对比，这个标志的中英文字体都重新设计过，以和标志图案配衬，标志图案的颜色也进行了改变，使其看起来更富有立体感。关于中文字体，首先是设计了北字，后面
32、几个字的部分均取于北字的一部分，形成了统一的字体风格；关于英文字体，是提取N的一部分而形成其他的字母，特别地，G是用了其大写的形状，与小写E相呼应，别有风趣。字体的设计在总体造型优美和谐的基础上不乏生动，图案箭头色彩的变化使得整体层次感更丰富，与字体的结合达到了很好的视觉效果。从识别性来说，在各种标志数不胜数的今天，该标志造型简洁优美，容易被辨认和记忆；从同一性角度说，它很好地表达了北京现代设计研究院的文化、经营理念、价值取向，所以受众对于标志的赞同即是对企业的认同。通常来说，企业的标志不仅仅是一个图案的设计而已，而是要创造出同时具有商业价值、14艺术欣赏价值的符号。这个标志的设计较好地将形象
33、概念转化为视觉，用具备高度整体美感的艺术语言传达了企业的信息，这能让人们产生正面联想，加深印象，并且给企业带来商业价值。43网站风格定位本节给出了设计北京现代设计研究院网站时所参考的相关页面，从这些页面的设计中获得灵感，提取元素进行了北京现代设计研究院网站的设计。本节对设计提案进行了综合分析，确定了最终的方案，呈现网站的风格。431参考的相关页面图47上海威曼工业产品设计有限公司网站首页页面色块的元素以及NEWSLETTER的排版十分不错，这些元素给北京现代设计研究院网站首页的设计带来灵感（如图47）。15图48苏州东方蓝茵工业设计有限公司网站首页这个页面给人感觉简洁明朗并有设计感，喜欢它图文
34、排版的方式，简洁的线条拉出了所要展示的东西，公司形象一目了然，值得借鉴（如图48）。图49品物设计机构网站首页布局清新脱俗，网站上图片的效果都非常好，感觉很有品质，可以学习和借鉴，并运用于北京现代设计研究院网站上的图片处理。这个页面总透出一种创新，并且贴近生活，这种感觉的把握十分到位，有很参考价值（如图49）。16432首页设计提案图410首页方案一图411首页方案二17图412首页方案三图413首页方案四18图414首页方案五433首页方案综合分析及选定方案方案一（如图410）是相对比较规矩的，导航栏放到了右侧，标志是反白呈现在页面上的，整个页面色彩很舒适给人感觉不错。好多企业网站都是这样，
35、虽然这个页面还不错，可总是哪里缺少了设计，还需要考虑。顺其自然的联想，由研究院到研究到书本，这让我有了方案二（如图411）。初次感觉还好，而后问题就越来越多，有点繁琐和累赘，这种形式占用了较多的横向空间却未能很好地突出主题，光这一点就足以否定。色块的元素十分不错，用好了总是能得到非常出色的效果，对于关乎设计的网站也非常适合。第三个方案（如图412）较其他方案更有设计感，然而总有一部分把握不好的地方，整个页面会有一点凌乱的感觉，对于反映北京现代设计研究院的形象还略欠妥。本应进一步修改设计，然而考虑到后续的设计，在技术能力范围内，子页与其如何衔接更和谐的问题得不到很好的解决，这个方案也因此被否定。
36、方案四（如图413）是由图文排版而排出来的，设计时没有特别的规划，而是从文字开始一步一步添加而成。页面排版还不错，但作为北京现代设计研究院网站首页欠缺了很多。这个包围的结构感觉比较压抑和封闭，对于设计研19究院这个形象来说很不适合，与企业理念出入太多。北京现代设计研究院网站展示的是企业的形象，企业以产品设计为主，产品的理念通过图片最易传达，于是有了首页方案五（如图414）。页面加上了线条的勾勒，以解除死板，整个页面相对简约。与第一个方案相比，于规矩中有突破，故选择方案五为最终方案。对于这个方案，产品图片是重头戏，所以页面上切换的图片宁可少也要十分精致，这是迅速吸引浏览者眼球的一个亮点，如果图片
37、处理不好，那么这个页面就黯然失色了。综合设计和目前我掌握实现网站的技术能力考虑，这个页面较其他方案更能体现出企业文化，并且对于后期网站设计整体性的把握也很有利。首页既定，整个站点的设计将把握住首页的风格，以蓝色的线条、色块为页面点缀元素，精心设计每一张图片和文字的排版，力求让网站达到一个简约有品质却不乏活力的效果。434相应子页设计参考首页的风格效果，结合网站需要呈现的信息，进行了子页的设计。本小节给出了北京现代设计研究院网站的一些子页面供浏览，整个站点请参考附录一。具体为关于我们_简介页面（如图415），经典案例页面及页面部分超链接效果（如图416），客户服务_服务范围页面（如图417）。2
38、0图415关于我们_简介页面21图416经典案例页面（第四竖条为超链接效果）图417客户服务_服务范围页面225网站实现的技术方法本章主要介绍了进行北京现代设计研究院网站设计时所用的工具，并说明了本次网站设计开发与布局所用的方法，还阐述了整个站点设计制作的流程。51网站设计工具简介网站设计工具有很多，根据自身对设计软件掌握的情况以及建设本站点的需要，选择了网页编辑器DREAMWEAVER和页面图像设计软件PHOTOSHOP进行北京现代设计研究院网站的设计制作。511网页编辑器DREAMWEAVER与FLASH、FIREWORK并称为MACROMEDIA网页制作三剑客的DREAMWEAVER是一
39、款集网页制作和网站管理于一体所见即所得的网页编辑器。这套视觉化网页开发工具是针对专业化的网页设计师发展的，利用它能够轻而易举地设计制作出跨越平台和浏览器限制的充满活力的网页。各个层次的开发人员和设计人员都能够用DREAMWEAVER来快速创建界面吸引人的基于标准的网站和应用程序。插件式的程序设计使其功能可以无限扩展，炫目的页面特效自然不在话下。本次网站设计我选用了DREAMWEAVERCS4。512页面图像设计软件PHOTOSHOP一直以来深受平面设计师和电脑美术爱好者喜爱的PHOTOSHOP是ADOBE旗下最出名的图像处理软件之一，它集图形扫描、编辑修改、创造制作以及图像的输入输出于一体。它
40、主要用于对已有的图像进行加工处理并运用一些特殊的效果，在制作网页时PHOTOSHOP是必不可少的网页图像处理软件。对于本站的设计，就要首先使用它设计制作网页效果图，然后处理网站中的图片、背景及制作网页图标、按钮等。52网站设计开发与布局方法本次北京现代设计研究院网站的设计制作主要采用HTML语言将页面呈现，并且采用DIVCSS的布局方式，一些页面动感效果用JAVASCRIPT语言实现。23521网页文档主要语言HTMLHTML是一种简单的网络通用语言，它允许网页设计制作人员创作出文本与图片甚至声音相结合的复杂页面供浏览者浏览。懂HTML语言可以更好地解决网页制作中出现的一些问题，设计出更理想的
41、网页。本站主要运用HTML命令说明文字图像链接等信息，合乎规范的编写能将页面呈现方式与设计意图保持一致。522网页布局DIVCSSCSS是样式化HTML的一种方法，HTML是文档的内容，CSS则是文档的表现或者说外观。DIVCSS是一种网页布局的方法，这种方式做到了内容与表现相分离，符合W3C标准。除了有很好的浏览器兼容性及对搜索引擎友好外，更使得网页样式的调整更加方便，也很简洁明了。北京现代设计研究院网站页面就用这种方式布局。523客户端WEB开发脚本语言JAVASCRIPTJAVASCRIPT是为了满足动态网页制作的需要而诞生的一种简单编程语言，可以开发交互式WEB网页，使用户和网页之间实
42、现一种实时动态的交互性关系。它像个魔术师一样让网页包含更多活跃的元素，让网站上的内容以更加精彩的方式呈现。本站的设计就要借助JAVASCRIPT以实现一些效果。53网站制作流程要开始制作网站了，首先第一步是网站策划，其实在前几章节中已体现了策划的大致过程，并且画出了页面效果图。根据效果图，在DREAMWEAVER中用HTML语言，DIVCSS布局方式搭建出框架。准备好需要放到网站上的图片文字信息，对图片用PHOTOSHOP进一步处理修饰，一些诸如标题文字等需要特殊设计处理的文字、导航、按钮等也在其中设计制作成图片形式。接着就是往HTML里填充内容，用CSS和JAVASCRIPT来控制内容的表现
43、形式。当网站制作完成，还要对网站进行简单的测试，看是否有出错的地方，以便进一步完善。246网页设计中需注意的细节豪车和普通车有着相同数量的方向盘、座椅、轮子和门窗，豪车却如此脱颖而出令每个人都想拥有，这在于它们所具备的细节决定了它们的品质。同样的规则对于网页设计也适用，不能说细节一定能带来价值，却不能不重视它们的影响力。当浏览者对网站的感觉不好，但又说不上哪儿不好，多半是细节出了问题。想要追求完美，必须要认真对待每一个像素。就北京现代设计研究院网站的设计来说，在考虑了色彩和布局之外，其他处处也要精心布置以满足需求。字体的大小颜色以及对齐方式如何设置才能使页面效果看起来更好；超链接的效果怎样才能
44、符合网站整体风格，做到增加趣味又没有添乱；图片如何处理才能更好地传达出要表现的信息，具有视觉上的诱惑；图片切换的间隔多长能达到视觉最舒适效果，不至于慌忙也没有让人等待的感觉；按钮如何能引起浏览者的兴趣，能提示他们去点击；甚至哪里留白，哪里添加阴影都是需要不断尝试的。只有做到了这些细节处的思考和设计，网站才会有品质。257网站的测试本文中网站测试所侧重的主要是用户界面的测试。用户界面测试主要从以下方面入手查看网站各个页面的样式风格是否和谐统一；LOGO图片在各个页面的大小位置是否一样；每个页面的TITLE是否正确；图片是否正常显示在指定位置；文字内容是否正确，有无错字，同级文字字体、大小及颜色是
45、否统一；将窗口缩小后，页面能否出现滚动条或按照比例缩小。链接方面，要测试首页以及各子页之间的互相链接是否正确，有否存在死链接或者无用的链接。另外，浏览器的前进、后退及刷新按钮是否会造成页面报错也应进行测试。最后还要进行浏览器的兼容性测试和分辨率兼容性测试。即使是用户占绝大多数的IE浏览器也有不同的版本，更别说其他浏览器，它们对于JAVASCRIPT或不同的HTML规格有不同的支持。并非每个用户都是用同一种显示模式，所以要考虑到不同分辨率下网站的显示效果，现在常见的分辨率是1024768和800600，在完成这两种分辨率兼容性测试的前提下，进行一些其他分辨率的测试，保证尽可能的完美。测试完成以后
46、，网站就可以发布到网上了，要保持网站的生命力，需要对其进行及时的更新和维护。268总结在整个设计过程中，除了要考虑页面设计之外，还需要考虑实现网站的技术能力，两样都不能忽略。总是有想法而自己的技术却不能很好的支持，所以在培养对设计的感觉时更要快速学习技术，尽量消除它带来的障碍。总得来说，本次毕业设计让我从查找资料、整理材料到设计制作网站到最后毕业论文的撰写这整个过程中，学习到不少东西，也综合运用了我所学的知识。北京现代设计研究院网站整体风格统一，简约亦有活力，图片视觉效果出色，信息量丰富，使用起来也很便捷，很好地展示了企业的形象。27参考文献1何建华视觉有温度网页色彩情感研究J韶关学院学报，2
47、010（02）0292杨仁敏，李巍CI设计M西南师范大学出版社，2007023王庆斌世界500强企业标志色彩统计及设计研究J装饰，2008（12）0304张雪艳初探色彩与网页设计J吉林工程技术师范学院学报，2005（5）56575隋涌网页布局之形式原理与设计要素J北京印刷学院学报，2007（03）0216曹建中产品语意与表达M合肥工业大学出版社，2009107袁斐网页设计现状的一些发现J现代商业，2010（20）2008王萱网站的设计与维护J产业与科技论坛，2010（03）0439徐延章网页导航设计艺术表达特征分析J包装工程，2009（04）06810王慧格式塔理论在网页界面设计中的运用J艺术教育，2007（06）08411文涛，文峰色彩设计M中国青年出版社，200812傅学彦网页版面布局结构设计J软件导刊，2010（10）03813曾顺精通CSSDIV网页样式与布局M人民邮电出版社，200714江朝伟网页设计M哈尔滨工程大学出版社，200815林小志CSS那些事儿M电子工业出版社，200916龚钰浅谈网页的交互设计J大众文艺，2010（10）12117美STEVEKRUGDONTMAKEMETHINKM机械工业出版社，200618美DONALDARTHURNORMANTHEDESIGNOFEVERYDAYTHINGSM中信出版社，2010
