1、1毕业设计开题报告工业设计北京现代设计研究院网站设计1、选题的背景与意义互联网的到来也许并不像闪电那样让人顿感光亮，倒是更像“润物细无声”的春雨，悄悄地成为越来越多人生活中无法或缺的一部分。国家科学基金会NATIONALSCIENCEFOUNDATION预测2020年前全球互联网用户将增加到50亿，也就是说全民互联网时代要来了。互联网的快速发展使企业可以实现快捷的信息传送以及直接的客户介入，网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文
2、化的重要窗口，所以企业网站的设计显得极为重要。建设北京现代设计研究院网站，有利于提升企业的形象；使公司具有网络沟通能力；可以全面详细地介绍以及推广公司以及产品；可与客户保持密切的联系，并且与潜在客户建立商业联系；利用网站还可以及时得到客户的反馈信息；网站的建设还能降低广告和通信的费用。要更好地实现上述优势，网站的设计就起了决定性的作用。网络营销的趋势是伴随着互联网的发展而发展的，所以互联网上同类的网站非常多，其中也不乏大量的优秀作品，不论是从设计到内容都非常有特色。在这种条件下，网民们会挑选他们喜爱认可的网站，并自行决定是否成为“回头客”。在如此激励的竞争中，设计出一个可用性强、独特创新的网站
3、就成为该设计研究院网站长期发展的必要条件之一。所以，北京现代设计研究院网站的设计，作为推广企业形象的重要手段，是十分具备设计研究意义的。、研究的基本内容与拟解决的主要问题首先是北京现代设计研究院标志设计，需要研究企业的形象以及经营理念，将企业的内在气质和市场定位在VI中应多角度、全方位地反映出来。然后是北京现代设计研究院网站的设计，需要根据企业的文化内涵确立网站的配色方案，需要整合企业的资源信息确立网站的内容以及实现方式。在设计规2划时，需要明确以下等问题设计该网站的目的；提供的服务和产品；提供服务和产品的对象；网站受众的特点；自身的技术知识及能力。由于是多页面站点的设计，所以要解决页面之间有
4、机联系的问题，特别需要处理好页面之间和页面内的秩序与内容的关系，使浏览者有一个流畅的视觉体验。大致的设计方案定下来之后，网站的布局架构、图、文、交互等的完美实现就需要依靠计算机辅助设计软件，所以挑选并且学习用来建设这个网站最佳的网页设计工具也是一个需要解决的问题。最后是网站的测试与改进。网站是否与企业标志所涵括的企业形象一致，页面在各种常用分辨率下有无错位现象，图片、内容上有无错别字，链接是否为死链接，各栏目图片与内容是否相对应，浏览器是否兼容等都是需要考虑并解决的问题。对于细节处设计不足的地方应该加以改进，最终展现完美的视觉体验。、研究的方法与技术路线对于北京现代设计研究院标志的设计，首先对
5、一些同类的标志进行调研，学习一些精良标志的设计要领，探讨企业标志要素概念与草图。再从构想中挑选几个，用手绘或借助计算机辅助设计将标志呈现，最终选定一个造型优美反映良好的作品，并且对最终的方案进行工学、美学、心理学和经济学等分析。对于北京现代设计研究院网站的设计，首先要做的是对相关的大量网站进行研究分析，了解并且明确网站内容、色彩、布局、交互等设计的相关准则和要求。然后根据调研以及在完成北京现代设计研究院标志设计时所把握的企业形象，在目标明确的基础上，用发散性设计思维完成该网站的构思创意，对网站的整体风格和特色作出定位，规划网站的组织结构。最后是网站的建设，借助计算机辅助设计，运用DREAMWE
6、AVER、PHOTOSHOP、FLASH等软件HTML、CSSDIV、JAVASCRIPT等技术来实现。对于网站的测试和改进。在不同的浏览器中对网站进行测试，发现并解决问题。对网站进行工学、美学、心理学和经济学等分析，并且进行用户体验，从用户的角度进行可用性、人机交互以及视觉体验分析，对不足之处加以改进。、研究的总体安排与进度201012201001收集资料，撰写开题报告和文献综述201101201102进行相关调研和北京现代设计研究院标志的设计，对最终方案进行工学、美学、心理学和经济学等分析；撰写2篇外文3翻译201102201103对相关网站的内容、色彩、布局、交互等进行调研分析，设计北京
7、现代设计研究院网站201103201104进行网站的制作以及测试改进视觉体验201104201105撰写论文，准备答辩主要参考文献1王庆斌世界500强企业标志色彩统计及设计研究J装饰，2008，120302张玲琅传统图形艺术与当代标志设计J艺术与设计理论，2010，110203过宏雷企业与品牌形象设计M中国建筑工业出版社，20084文涛，文峰色彩设计M中国青年出版社，20085何建华视觉有温度网页色彩情感研究J韶关学院学报，2010，020296隋涌网页布局之形式原理与设计要素J北京印刷学院学报，2007，030217傅学彦网页版面布局结构设计J软件导刊，2010，100388曾顺精通CSSD
8、IV网页样式与布局M人民邮电出版社，20079江朝伟网页设计M哈尔滨工程大学出版社，200810林小志CSS那些事儿M电子工业出版社，200911龚钰浅谈网页的交互设计J大众文艺，2010，1012112王萱网站的设计与维护J产业与科技论坛，2010，0304313美STEVEKRUGDONTMAKEMETHINKM机械工业出版社，200614美DONALDARTHURNORMANTHEDESIGNOFEVERYDAYTHINGSM中信出版社，20104毕业设计文献综述工业设计北京现代设计研究院网站设计摘要在这个知识经济时代，互联网已经成为重要的文化创作平台、文化产品传播平台和文化消费平台。运
9、用好网络，就可以把北京现代设计研究院的形象名片分发给上千，或许是上百万个潜在的客户和合作伙伴。所以这张形象名片的设计工作占有越来越重要的地位，同时设计要求也随之提高，只有设计更佳，才能更好演绎注意力经济。关键词网站设计艺术技术视觉元素前言网站设计，就是指在INTERNET上，根据一定的规则，使用DREAMWEAVER、PHOTOSHOP等工具制作的用于展示特定内容的相关网页的集合。网站设计要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。我对于这个定义有着这样的理解WEB设计不同于艺术，它是更偏于理性、依赖经验的一种沟通、传达，是艺术与技术如何实现完美结合的“艺术”。互联网的出现可不止是
10、技术角度上人类通信发展的一次革命，几乎从一开始就是为人类的交流而服务，网络成了传媒，网站便成了“出版物”。1在上个世纪末，互联网初入中国，大家争先恐后地做网站，门户网站、个人网站一拥而上，目的只为争取一席之地，所以粗制滥造毫不讲究，这也间接引发了一场网络经济泡沫。生命力强大的总是更能推动着自身的发展，网站设计便应运而生了。既然是发展的，那么它就必然是向前的、上升的、进步的运动，所以对于网站设计的要求势必越来越高。就国内而言，网站设计环境目前发展的还很不理想，只是孕生了普通的设计者，严格意义上的专业网站设计师不多。很多人都把网站设计的好坏用这个两个标准来评论，其一是纯粹的美学准则，其二是严格的功
11、能性标准。一些陶醉于生动的形象，追寻完美的视野，而另一些对技术有特殊情感，可用性至上而忽略了视觉吸引力。网站的设计是随着信息技术的发展而发展起来的，它必然又会深受技术的限制和影响。如果能够把握好这艺术与技术，那么两者完美搭档设计出来5的网站才是更好的。网站设计的主要视觉元素有网站的标志、导航、文字、图像以及背景。在这里，有必要重点提及下标志的设计，2就如同商标一样，LOGO是站点特色和内涵的集中体现，看见LOGO就让大家联想起你的站点。2比如在我国最深入人心的腾讯小企鹅，哪儿都是它们的身影；而百度、GOOGLE这样的搜索引擎其标志更加重要的，不仅要深入人心，还得要不时的来点小变化。所以针对不同
12、的需求，要善于分析用户的心理，设计出符合企业形象的具有生命力的LOGO，这样网站的设计就成功地开始了。关于导航的设计，有很多原则可以遵循，与企业文化内涵一致的才是最好的。一般来说导航分为形式层和内容层，3形式层的设计，应以动感、简洁、清晰为原则；至于内容层，就因站而异了，分类条理最关键。关于文字，通常一套网页结构中出现3种，分别用于标题，导航以及正文。然而内容丰富的网站，不同的功能板块又有所区别，如何在页面中进行合理的布局需要缜密的策划。对于图像，要注重其与背景、视觉空间的处理。背景的选择自然也是十分重要的，要和网站这个家园的整体装修风格一致，更好地展现网站内容。另外，作为网站第一视觉语言的色
13、彩，是调适受众视觉心理、吸引受众注意的重要手段。4充分认识色彩要素的情感规律，了解色彩的表现特征及其应用的基本原理和法则，把握色彩对人们心理的影响作用，将其精神内涵融入到网页设计之中，才可以使我们设计的网页更具有魅力。自然这种魅力是一种基于企业文化之上，并且能很好传达企业形象的用户对于企业感情的升温。然而，互联网产业在不断发展，网站设计的要求在一步步向更高的方向迈进。原有的以传统平面设计为参考的网页界面设计已经无法满足人们对交互体验的需求，只有对新的计算机技术重新认识，才能设计出符合时代要求的网站。随着计算机图形技术的不断进步，计算机硬件处理速度的提高，以及跨平台的多媒体文件格式的推广，必将出
14、现一种更科学、更具互动感和设计感的网站，以满足和丰富浏览者对信息获取提出的更高要求。总结设计一个优秀的网站，和装修一样，也需要整体的规划。目的明确的、有创意的形象设计，丰富的内容，良好的可用性，周到的可拓展性，这些就能更好地演绎注意力经济。现在的网站设计多从视觉或者功能出发，离科学的设计还有相当大的距离，5在设计时应遵照人类的认知规律，并且将这些规律正确地应6用到实践中去。网站的设计是一门艺术，是一门平衡于艺术与技术之间的“艺术”。参考文献1袁斐网页设计现状的一些发现J现代商业，2010，202002王萱网站的设计与维护J产业与科技论坛，2010，030433徐延章网页导航设计艺术表达特征分析
15、J包装工程，2009，040684何建华视觉有温度网页色彩情感研究J韶关学院学报，2010，020295王慧格式塔理论在网页界面设计中的运用J艺术教育，2007，060846文涛，文峰色彩设计M中国青年出版社，20087张玲琅传统图形艺术与当代标志设计J艺术与设计理论，2010，110208隋涌网页布局之形式原理与设计要素J北京印刷学院学报，2007，030219傅学彦网页版面布局结构设计J软件导刊，2010，1003810曾顺精通CSSDIV网页样式与布局M人民邮电出版社，200711江朝伟网页设计M哈尔滨工程大学出版社，200812林小志CSS那些事儿M电子工业出版社，200913龚钰浅谈
16、网页的交互设计J大众文艺，2010，1012114美STEVEKRUGDONTMAKEMETHINKM机械工业出版社，200615美DONALDARTHURNORMANTHEDESIGNOFEVERYDAYTHINGSM中信出版社，20107本科毕业设计（20届）北京现代设计研究院网站设计摘要8摘要在这电子商务时代，设计一个能吸引浏览者并让其对企业产生良好印象的网站十分具有研究意义。企业文化通过优秀的WEB设计来展示，在视觉化的今天更好地演绎了注意力经济。本文对北京现代设计研究院的网站设计做了具体的阐述，给出了明确的设计方法思路。文章主要分析了网站的需求、用户及用户特征、色彩在标志及网页设计中
17、的应用、网页布局的方式以及网站实现的技术方法，并举例说明了一定的调研方法和设计原则。文中给出了北京现代设计研究院标志及网站风格的设计提案，对其进行分析和探讨确定了最终的效果图，并且进行了完善。关键词现代设计；网站；信息导航；交互设计ABSTRACTINTHISECOMMERCEERA,ITHASGREATRESEARCHSIGNIFICANCETODESIGNA9WEBSITETHATATTRACTSVISITORSANDMAKESTHEMPRODUCEAGOODIMPRESSIONONENTERPRISEINVISUALIZATIONTIME,SHOWINGENTERPRISECULTURE
18、THROUGHEXCELLENTWEBDESIGNPREFERABLYDEDUCESATTENTIONECONOMYINTHISPAPERIEXPOUNDEDTHEWEBSITEDESIGNOFBEIJINGINSTITUTEOFMODERNDESIGNINDETAILANDGAVECLEARDESIGNPROCEDURESTHISARTICLEMAINLYANALYZEDTHEWEBSITENEEDS,USERSANDUSERFEATURES,APPLICATIONSOFCOLORINLOGOANDWEBDESIGN,PATTERNSOFWEBPAGELAYOUTANDTECHNOLOGYM
19、ETHODSOFREALIZINGWEBSITEINADDITION,ITILLUSTRATEDACERTAINRESEARCHMETHODANDDESIGNPRINCIPLESTHISPAPERGAVEDESIGNPROPOSALSOFTHELOGOANDWEBSITESTYLEOFBEIJINGINSTITUTEOFMODERNDESIGNITCARRIEDONANALYSISANDDISCUSSIONANDDETERMINEDTHEFINALRENDERINGS,MOREOVERCONSUMMATEDTHEMKEYWORDSMODERNDESIGNWEBSITEINFORMATIONNA
20、VIGATIONINTERACTIONDESIGN目录摘要错误未定义书签。10目录91绪论1211课题背景1212课题意义1213课题设计的方法思路132北京现代设计研究院网站需求分析1421建站的目的1422网站需要实现的功能143网站相关调研分析1531用户及用户特征1532色彩调研15321标志色彩调研16322网站色彩调研1633网页布局调研1934调研总结204网站整体设计2141网站目录结构规划2142北京现代设计研究院标志设计21421标志设计提案22422选定效果图2443网站风格定位25431参考的相关页面25432首页设计提案27433首页方案综合分析及选定方案29434相
21、应子页设计305网站实现的技术方法3351网站设计工具简介33511网页编辑器DREAMWEAVER33512页面图像设计软件PHOTOSHOP3352网站设计开发与布局方法33521网页文档主要语言HTML3411522网页布局DIVCSS34523客户端WEB开发脚本语言JAVASCRIPT3453网站制作流程346网页设计中需注意的细节357网站的测试368总结37参考文献38致谢错误未定义书签。附录错误未定义书签。121绪论互联网技术的发展，网络的普及，使得企业展示自己形象的平台早已不再局限于电视和报纸杂志。互联网平台让人们以一种相对主动的方式来接受企业对其自身的宣传，甚至产生互动，为
22、企业带来更多的客户与潜在商机。在互联网这个重要的文化创作平台，网站设计的要求随着平台的发展而不断提高，北京现代设计研究院网站的设计是十分有意义的。11课题背景从研究部门、政府部门和学校对互联网的使用，到商业网络的发展，到互联网渗透到每个角落，网站设计随着互联网的快速普及而登上舞台扮演着重要的角色。互联网的出现，从技术的角度说是通信的一次革命，而它的意义远不仅于此，它还是传媒，多功能的互动平台。从我们接触信息开始，除了自然界所呈现的外，那些文字那些图片甚至声音本就相当丰富庞杂的信息资源还在继续扩张，网络出现之前它们承载于书籍、报纸期刊、杂志广告、摄影、电视、广播等传统的媒体。网络的出现使这些资源
23、信息多了一个新的大舞台，对人类的文明进程产生了有力的推动作用。互联网上信息的发布主要是通过网站来实现的，所以网站设计所扮演的角色有多重要显而易见。数以万计的站点之中不乏精良之作，我国的网站设计已经有了一定的基础，而我们对于网站的视觉审美能力和对网站功能应用等多方面的认知也达到了一个新的高度。所以，我国网站设计的发展程度还远远不够，在技术和艺术领域中对网站设计的探讨都很不足，使它处于两边不是的尴尬局面。12课题意义包含图片、文字、色彩、动画等信息的网站，设计的最终目的是追求最佳的主题诉求效果，它作为一种新媒体的表现形式，能给人带来创作的动机，发掘自身的创造力。对于设计师来说，这能锻炼到多种能力，
24、除了设计网站页面的艺术细胞需要发挥作用外，还需要一定的技术来实现它。网站设计是一门结合并且平衡于技术和艺术之间的艺术。13企业设计制作网站，能提高企业的知名度，设计出一个吸引访客的网站更是能帮企业带来利润并建立在外界良好的形象。通过网站企业可以及时更新相关新闻和产品信息，以便让客户以最快最便捷的方式了解，不仅如此，企业与客户的互动也会变得更加方便和频繁，能及时得到客户反馈的信息。在电子商务时代，网络沟通能力必不可少，而浏览者们总是更倾向于挑选自己喜欢并认可的网站，并决定是否成为回头客，所以设计网站就变得更有意义，设计出一个可用性强、独特创新的网站就成为企业网站长期发展的必要条件之一。北京现代设
25、计研究院网站的设计，作为推广企业形象的重要手段，做到视觉效果出色、信息量丰富，使用起来便捷才能更好地演绎注意力经济，将这张网络上的形象名片分发给上千或上百万个潜在客户和合作伙伴。所以，本课题是十分具备研究意义的。13课题设计的方法思路本课题的设计方法思路是参考网页设计师以及根据自己的一些网站设计经验提出的，比较适合对本站进行设计制作的路线。大体的设计想法在本文中体现，思路如下第一部分为绪论，阐述了本课题的研究背景以及意义。第二部分为北京现代设计研究院网站的需求分析，说明了设计该网站的目的和网站需要实现的功能。第三部分为网站相关的调研分析，从色彩，布局以及用户特征三方面进行调研分析并得出最后的调
26、研结果，为北京现代设计研究院网站的设计提供资料。第四部分是网站整体的设计，包括网站目录结构的规划，北京现代设计研究院标志的设计以及网站首页、子页面风格把握，并确定了最终的效果图。第五部分是网站实现的技术方法，介绍了网站设计工具以及设计该站点所用到的语言和布局技术方法。第六部分是网页设计中需要注意的细节，细节决定品质。最后为网站的测试，以修整完善整个网站。142北京现代设计研究院网站需求分析建设北京现代设计研究院网站，首先要明确建站的目的。目的贯穿着整个站点建设的始终，只有明确这点，北京现代设计研究院网站才能更好地被设计制作并具有实现意义。其次要具体分析该网站需要实现的功能，功能的实现是否能达到
27、目的或者满足需求在很大程度上决定着网站建设的成败。21建站的目的一个网站能不能成功地设计制作与网站的前期规划有着重要关系，所以在建设网站之前，必须明确建站目的。北京现代设计研究院是中国最具活力和发展潜力的专业设计研究院之一，专业团队致力于为客户提供从产品概念到市场导入的全面解决方案，并为客户系统化的规划企业产品形象，建立配套规范。自创立以来，丰富的设计经验已使北京现代设计研究院获得了认可和市场的好评，并有了一定的设计和研究成果。作为一家现代化企业，北京现代设计研究院需要具备网络沟通能力，借助网站加强对自身形象的宣传，并展示设计和研究成果，提高企业的知名度和扩大企业的影响力。建设北京现代设计研究
28、院网站不仅可以帮助企业更好地和客户互动，及时得到更多的客户反馈来提高设计和服务品质，而且可以发掘很多的潜在客户，带来商业利益。建设北京现代设计研究院网站，有助于提高企业的综合竞争实力。22网站需要实现的功能该网站提供给客户一个了解企业的平台，并可与企业产生互动，企业可以方便地对网站进行更新维护。具体需要实现功能如下用户可以大致浏览公司的最近新闻，知道公司的最新动向；用户可以了解北京现代设计研究院的一些基本信息，包括公司简介、设计团队的介绍、企业的客户和企业的服务范围及设计流程；用户可欣赏设计作品与最新的产品信息，并可参与竞拍；用户可联系我们并关注企业招聘信息加入我们；用户还可了解北京现代设计研
29、究院的一些研究理论成果，设计原则等。153网站相关调研分析调研总是能很好地为决策做准备，给问题的解决带来借鉴意义。闭门造车的时代早已不复存在，信息化的今天，通过调研才能有发言权，才能更好地制造出满足需求的被大众所接受的甚至被青睐的东西。本章主要调查分析了用户及用户特征，色彩在标志和网页设计中的运用以及网页布局的方式。31用户及用户特征1“以用户为中心的设计理念是网页界面设计的核心。”1明确并了解网站的服务对象及他们的特征至关重要，甚至这样那样的设计原则和规范，所有的出发点也都围绕着用户的需求。北京现代设计研究院网站的用户为与设计相关的群体以及需要设计的各类公司，当然这只是最主要的一部分，还有其
30、他直接或间接可能与企业产生利益等关系的人群。不同的用户具有不同的知识结构，屏幕上的同一内容，即使被认可为文字相同，每个人的理解不会完全相同。在进行网站页面设计时，考虑到用户知识背景，尽可能设计一个符合主要用户需求的网站，避免偏激的元素，以保证北京现代设计研究院以良好的形象出现并给用户带来兴趣。与设计相关的群体，他们往往非常热爱生活，具有创造力，注重提高生活的品质，并且具有敏锐观察和分析事物的能力。他们具备设计相关的知识，或喜简洁或喜繁复，不管如何，富有创造力的美的事物总是能够吸引到他们。北京现代设计研究院网站的设计除了把握整体的视觉效果外，一定要注意细节以提升品质。32色彩调研生活离不开色彩，
31、设计更离不开色彩，它能够以30万公里/秒的速度传入人的眼睛，做到先声夺人。色彩也是最难搞定的设计元素，完美的色彩搭配像个人口味难以把握，对色彩的研究是一件十分有意义的事。1何建华视觉有温度网页色彩情感研究J韶关学院学报，2010（02）02916321标志色彩调研一个LOGO通常包括名称、图案和色彩三个要素，即标准字、标志及标准色。色彩以其醒目明快的视觉传达特征占据着重要的地位，所以标准色越来越受企业重视。2“企业的标准色是经过专门设计选定的某种特定色彩或一组色彩系统，运用于企业所有视觉媒体中，并通过这种色彩所制造的知觉刺激与心理反应，以突出该企业的经营理念或产品的内容特质。”2作为品牌价值最
32、高企业之一的可口可乐公司，选用红色作为标准色，洋溢着青春活力、健康向上和热情亢奋的气息；受大众喜爱的麦当劳集团，选用黄色作为标准色之一，能够给人丰收、愉悦和美味的感受；世界知名的高档汽车和摩托车制造商BMW，标志是蓝白色的，代表了最精湛的技术，它带给我们的感受是理智、纯净与永恒。这些大公司都很好地运用了色彩的感觉和联想信息，从而激发消费者的欲望与心理联想，并树立了企业的品牌，创造了巨大的品牌价值。有人对2007年的世界500强企业标志色彩做了详细的统计和分析，并且给出了著名企业标志色彩设计的规律，我觉得非常具有指导性意义，并结合自己的分析，将设计规律概括如下便于识别记忆，选择12种，不宜超过4
33、种的色彩；单色标志要选择单纯、醒目的色彩，双色标志宜选择对比鲜明、视觉冲击效果强的色彩；注意区别于其他企业用色，有自身独特性。322网站色彩调研一个网站的设计优秀与否，在一定程度上取决于其色彩的运用，它明显的视觉效果，在排除立体图形、动画效果之外，通常是留给浏览者的第一印象。色彩定位的方法有很多种，比如问卷调查数据分析、图片映衬和心理选择等形式，本文色彩定位通过参考一些设计优良网站的色彩运用以及自己对色彩所反映情感的了解，采用心理选择法，从大的方向逐渐向小的方法拢进，无限接近最适合北京现代设计研究院网站的色彩区块。参考一些设计优良网站色彩运用的方式是依据红橙黄绿青蓝紫、黑、白、灰以及有彩色加无
34、彩色这个区分规则收集相应的优秀网站来进行分析，目的是观察采用这些色彩的分别是什么类型的网站。这样做并不是说能归纳出一种相关的色彩选择原则，因为设计毕竟是一件很灵活的事情，但是却可以收集到一种对于色彩选择的感觉，选用北京现代设计研究院网站色彩时不至于偏差太大，并且在2杨仁敏，李巍CI设计M西南师范大学出版社，20070217规则之中有突破。3“色彩是最富有表情作用的艺术语言。”3以收集到的黑色和白色网页分析为例图31CUIL网站页面CUIL为2008年上线的一款美国搜索引擎，该网站首页大幅黑色上有小部分高纯度蓝色点缀，CUIL几个字加以灰色的搭配，用色不多却用得很精致。不仅视觉冲击效果好，容易让
35、人留下深刻的印象，而且整体色彩的应用还给人带来权威和专业的感觉（如图31）。3张雪艳初探色彩与网页设计J吉林工程技术师范学院学报，2005（5）565718图32匡威网站页面匡威是以其狂放不羁的设计，风靡全球一炮而红的一个运动品牌，网站以黑色为主导。运动、创意、个性这些词眼自然而然地就跳跃出来，网站色彩的运用很好地涵盖了品牌形象（如图32）。图33CK网站页面美国第一大设计师品牌CK网站，大幅留白背景上搭以低明度的服饰，形成19明度对比，视觉效果好，给人留下简约、干净、舒适的深刻印象。子页中运用不同明度的灰色，整体看上去很和谐，能够感受到服饰的高贵品质（如图33）。图34柏林视觉网站页面以“企
36、业品牌形象设计”为核心业务的柏林视觉网站，以白色为背景，并且首页大量留白，用色彩纯度较高的图片减去疏离感，让人产生干净、利落和信任的感觉（如图34）。不再一一举例说明，参考了不同色彩对应的大量不同优秀网站，以及自己对色彩所反映情感的了解和对北京现代设计研究院产品、文化、形象的理解，用心理选择法进行了一次又一次的筛选，从冷色系到蓝色甚至考虑了其明度和纯度，最终决定北京现代设计研究院网站色彩优先考虑蓝色系。33网页布局调研4“网页布局设计是网站视觉设计研究中的重要环节之一，是将网页上的图片、文字、色彩、动画等视觉构成元素进行合理配置与表现的过程。”4建站的目的、用户的需求等多方面因素都已明确，可以
37、进行布局的构思创作了，应尽可能多的构思几个方案，最终选择一个合适的进行网站的建设。网页布局其实和版面设计大同小异，都是想将信息清晰地传递并同时美化视觉形态，让受众接受信息的同时获得审美感受。就目前而言，常见的布局如下（1）“T”型布局，顶部LOGO广告，下方左右分别为菜单和内容，页面结构清4隋涌网页布局之形式原理与设计要素J北京印刷学院学报，2007（03）02120晰但略有呆板。（2）“国”型及“匡”型、“同”型布局，“国”型页面上下各有一横条，中部左右放二级导航、友情链接等，中间为主要内容，信息量大但拥挤不灵活。“匡”型去掉了“国”型右边部分，主要内容空间更多。“同”型去掉了“国”型下部横
38、条。（3）“三”型布局，页面上横向两条色块将其分为三部分，色块中大多放广告条、版权信息等，视觉冲击强，多用于国外站点。（4）“川”型布局，垂直方向分三列，一般适用于栏目较多的页面。（5）对称对比布局，左右或上下视觉对称，半深色半浅色，视觉冲击强但难于将两部分有机结合。（6）POP布局，以宣传海报形式设计页面，漂亮吸引人但下载速度慢。（7）FLASH布局，类似于POP，整个页面就是FLASH动画，信息更丰富，视听效果绚丽、有趣，同样下载慢。上述都是常见的网页布局，设计创新的力量是无穷尽的，当然不会只局限于这几种，成功的布局能有效地引导浏览者的视线，在结构清晰的基础上还给人以审美享受。北京现代设计
39、研究院网站的布局将在下面的设计中综合考虑各方面元素而逐步定型，最后选择最佳方案。34调研总结北京现代设计研究院网站为与设计相关的群体而建设，促进相互交流、合作并带来企业利益。它的用户是“挑剔”的，因为设计而见面，用户是来看网站上与设计相关的内容的，他们来找新思想来找灵感，看看有什么不错的作品或者设计理论，或者了解北京现代设计研究院，会成为合作伙伴。所以北京现代设计研究院网站需要完美的图文结合以吸引住用户，它必须是生动的，活泼的，严谨而又生活的。关于标志和网站的色彩，都将从蓝色系中挑选，使整体风格更加统一，加强企业形象印象；关于网站的布局，并没有限定，调研只是为了掌握一些布局知识，以便设计时灵活
40、运用，在页面设计提案时体现。214网站整体设计本章主要规划了北京现代设计研究院网站的目录结构，给出了标志和网站风格设计的提案，并对提案进行综合分析，选定最终方案，最后对最终方案进行优化。41网站目录结构规划根据对北京现代设计研究院网站的需求分析及网站需要实现的具体功能，规划了如下的网站目录结构（如图41）图41网站目录结构42北京现代设计研究院标志设计在现代信息的传播中，符号俨然是一个重要的信息媒介，美国的工业设计师菲利普斯达克曾经说过“我们的职业（工业设计）绝不属于艺术家，也一定不属于美学家，而宁可说属于语意学家（SEMANTICIST）物体必须散发出符号，就像孩子、动物和森林大火。”这话无
41、疑指出了符号的地位。22进行北京现代设计研究院网站的设计，LOGO的设计也自然成为一部分。说到LOGO，可能它占用网页的区域不大，但是它出现于网站所有的页面中，代表着企业和整个网站的形象，它的重要性不言而喻。好的LOGO总是能够直接代表一个网站的灵魂，甚至延及企业的产品文化、精神理念等。一个LOGO通常包括名称、图案和色彩三个要素。关于名称，即为北京现代设计研究院几个字，设计成中英文双语的形式以响应国际化的要求。在这里字体的设计，中英文文字的比例及搭配方式等都是需要悉心考虑的。关于图案，首先应该容易被区分于其他图案便于记忆，然后通过联想、抽象、隐喻、概括等方式能表现出北京现代设计研究院的企业形
42、象。关于色彩，参考上一章节中的调研总结。当一个LOGO成形，必须悉心修正，加以规范并达到统一有序的效果，使其客观反映出北京现代设计研究院的设计理念和服务精神等统一的企业形象。421标志设计提案以下是根据标志设计原则，追求标志准确传达企业形象效果而设计的几个初步方案。其中中文字体是以宋体为原形而设计的，在细节处做了修改，使得字体风格统一一致，达到和谐的效果。中英文以合适的配比出现，较为清爽，但同时似乎少了几分灵动。字体在最后阶段还有待于进一步的设计、提高和完善。色彩方面，挑选了蓝色系中的两种，使整个标志更富有层次感。图42LOGO方案一如图42，这个标志是对北京现代设计研究院形象的设计，亦是对问
43、号的设计，问号是生命追求的意义，隐喻企业永远不会停下追求的脚步，力争发展，增强综合实力，实现生命的意义。就设计研究精神理念来说，这个问号的设计是指在企业的发展过程中，希望企业以及合作参与到企业中的人都能够发现问题，提出问题，企业会更好地解决问题，问号的下半部分正是一个肯定的感叹号，体现了企业追求完美的意识和良好的服务态度。设计研究要有企业有追求有思想会思考，这个标志很好的涵盖了企业的文化。然而，一个标志首先应该容易被区分于其他图案，虽然是经过设计的问号，仍不能很好地体现独特性，来专门传达北京现代设计研究院的形象，故此提案有23待进一步设计。图43LOGO方案二如图43，这个标志是由北字抽象而来
44、，造型设计独特，可识别度高，易于被人记住形成初步印象。除了应用于网站，当进行印刷、广告等视觉传播时，该标志放大或缩小的视觉效果都非常好。标志图案两侧形成张开的有力羽翼，有展翅翱翔的意味，借指北京现代设计研究院愿像鸿鹄一样实现拥抱蓝天的理想,实现企业宏伟的战略目标。一个有追求的企业总是能给人带来积极乐观的生活态度，设计研究院的本意也尽显其中。这个标志亦是一本打开的书的抽象，寓意企业不断充实自己，提高自身素质，丰富内涵。书籍很容易和研究联想到一起的，再加上上述意味，这个标志比较适合北京现代设计研究院的理念。这个标志的缺陷在于造型上略微有些生硬，对于设计这个企业形象还欠缺一些生动活泼的感觉。图44L
45、OGO方案三如图44，这个标志构图简洁干练，非常单纯，并且富有层次感和立体感，要表达的意思也非常形象。本着两层含义标志下半部分的大半个圆代表了北京现代设计研究院，上部扇形代表了与之发生关系的外界；标志下半部分的大半个圆代表整个设计圈，上部扇形代表北京现代设计研究院。前者隐喻企业需要更多的合作伙伴和新思想的加入来完善自己；后者借指北京现代设计研究院作为一股活泉融入设计圈，给设计界带来力量，为其注入新鲜的血液。作为一股活泉存在的企业总是渴望更多的泉眼，这个标志很好的阐释了这一点。头脑风暴盛行的今天，多种思想的汇聚会碰撞出更多智慧，团队合作也显得尤为重要，该标志和谐地传达出了企业的文化信息创新、协作
46、。形象化语言很好，然而高度单纯却还没能做到具备高度美感，所以还是需要24在细节处加以思考设计。图45LOGO方案四如图45，这个标志的灵感来自于上个提案，不仅高度单纯并且具有高度美感。图案由箭头的交汇碰撞而成，同时形成领子的形状，寓意精英各种思想的汇聚。这个标志反映了一种严谨细致的工作态度，把着力点放在每一个环节，于细节处见精神，于细节处见境界。在严谨的同时，它又很灵活地吸纳四周八方的各种信息，让有创造力的思想汇聚碰撞，非常符合北京现代设计研究院的形象和文化内涵。不过还需要进一步设计，以完善色彩、字体搭配等细节。422选定效果图以上四个提案中最终选定第四个方案作为北京现代设计研究院的标志，并且
47、进行了进一步设计，最终效果图如下图46LOGO最终方案如图46，和初步提案对比，这个标志的中英文字体都重新设计过，以和标志图案配衬，标志图案的颜色也进行了改变，使其看起来更富有立体感。关于中文字体，首先是设计了北字，后面几个字的部分均取于北字的一部分，形成了统一的字体风格；关于英文字体，是提取N的一部分而形成其他的字母，特别地，G是用了其大写的形状，与小写E相呼应，别有风趣。字体的设计在总体造型优美和谐的基础上不乏生动，图案箭头色彩的变化使得整体层次感更丰富，与字体的结合达到了很好的视觉效果。从识别性来说，在各种标志数不胜数的今天，该标志造型简洁优美，容易被辨认和记忆；从同一性角度说，它很好地
48、表达了北京现代设计研究院的文化、经营理念、价值取向，所以受众对于标志的赞同即是对企业的认同。通常来说，企业的标志不仅仅是一个图案的设计而已，而是要创造出同时具有商业价值、艺术欣赏价值的符号。这个标志的设计较好地将形象概念转化为视觉，用具备高度整体美感的艺术语言传达了企业的信息，这能让人们产生正面联想，加深印象，并25且给企业带来商业价值。43网站风格定位本节给出了设计北京现代设计研究院网站时所参考的相关页面，从这些页面的设计中获得灵感，提取元素进行了北京现代设计研究院网站的设计。本节对设计提案进行了综合分析，确定了最终的方案，呈现网站的风格。431参考的相关页面图47上海威曼工业产品设计有限公
49、司网站首页页面色块的元素以及NEWSLETTER的排版十分不错，这些元素给北京现代设计研究院网站首页的设计带来灵感（如图47）。26图48苏州东方蓝茵工业设计有限公司网站首页这个页面给人感觉简洁明朗并有设计感，喜欢它图文排版的方式，简洁的线条拉出了所要展示的东西，公司形象一目了然，值得借鉴（如图48）。图49品物设计机构网站首页布局清新脱俗，网站上图片的效果都非常好，感觉很有品质，可以学习和借鉴，并运用于北京现代设计研究院网站上的图片处理。这个页面总透出一种创新，并且贴近生活，这种感觉的把握十分到位，有很参考价值（如图49）。27432首页设计提案图410首页方案一图411首页方案二28图412首页方案三图413首页方案四29图414首页方案五433首页方案综合分析及选定方案方案一（如图410）是相对比较规矩的，导航栏放到了右侧，标志是反白呈现在页面上的，整个页面色彩很舒适给人感觉不错。好多企业网站都是这样，虽然这个页面还不错，可总是哪里缺少了设计，还需要考虑。顺其自然的联想，由研究院到研究到书本，这让我有了方案二（如图411）。初次感觉还好，而后问题就越来越多，有点繁琐和累赘，这种形式占用了较多的横向空间却未能
