房地产企业网站的设计与实现.pdf

山东大学 硕士学位论文 房地产企业网站的设计与实现 姓名：李雅娟 申请学位级别：硕士 专业：软件工程 指导教师：张彩明 20091010 山东大学硕士学位论文 摘要 随着经济的全球化，互联网行业的信息化应用已经深入到房地产行业的各个 方面，因此房地产行业迫切需要能够整合客户和管理信息化的工具，以提高自己 的经营实力和品牌形象，提高企业的获利能力、资金收入以及客户满意度。本文 通过分析房地产行业的建站需求和业务流程，结合管理专家的品牌形象，设计并 实现了一个针对房地产行业的至祥网站管理系统。 首先，本文在讨论w e b 2 0 网站系统在国内外企业中应用的现状与趋势、色觉 设计、开发设计所面对问题的基础上，分析了w e b 2 0 网站系统的功能需求和企业 品牌形象，并以行业分析和例图对比分析的形式来对网站需求进行分析说明。经 过上述分析，总结出在设计房地产行业的网站架构和业务方面的特点，即设计必 须满足系统的可维护性、灵活性和可扩展性。 其次，对至祥网站的策划思路以及功能模块进行分析，并对用户体验及用户 对品牌价值的认识进行整体的分析。该部分按照差异化系统管理和一体化系统管 理的思路来设计系统，并对各个模块的设计进行了描述。同时，从需求分析和架 构设计两方面来构建房地产行业的业务需求和架构流程的基本模型。通过进一步 研究系统的模型结构和数据库结构，进行了有针对性的技术选型、版本操控；严 谨的按照需求分析设计制作至祥网站系统；利用科学有效的方法进行功能测试， 得出并分析测试结果，再进行修正。从而使至祥网站的品牌价值最大化，得到客 户认可。 经过研究房地产企业中互联网技术的应用，本文提出以下新论点： 互联网技术是时刻变化着的，我们要走在运用互联网技术的前列就必须整理、 研究、分析互联网的发展趋势，以最快的速度来适应科技的变化。通过运用科学 技术，帮助i t 基础设施落后的房地产中小企业实现高效率的业务管理、企业内外 部管理、企业之间上下游之间的供应链关系，建立全程电子商务业务模式。 关键词：房地产行业；品牌形象：开发思路；业务模式；全程电子商务 山东人学硕士学位论文 a b s t r a c t a l o n gw i t he c o n o m i cg l o b a l i z a t i o n ，i n f o r m a t i o nt e c h n o l o g i e sh a v eb e e na p p l i e d i n t oa l la s p e c t so ft h er e a le s t a t ei n d u s t r y , s ot h er e a le s t a t ei n d u s t r yn e e d si n f o r m a t i o n t e c h n o l o g yt o o l s t oe n h a n c et h e i ro p e r a t i o n a lc a p a b i l i t i e sa n db r a n d ，i m p r o v e p r o f i t a b i l i t yo fe n t e r p r i s e sa n dc u s t o m e rs a t i s f a c t i o n a tf i r s t ，t h i sp a p e ra n a l y z e st h e n e e d sa n db u s i n e s sp r o c e s s e so fr e a le s t a t ei n d u s t r y , t h e nw ed e s i g na n di m p l e m e n ta w e b s i t em a n a g e m e n ts y s t e mf o rr e a le s t a t ei n d u s t r y f i r s to fa l l ，t h ep a p e ra n a l y z e st h es t a t u sa n dt r e n d so ft h ea p p l i c a t i o no fw e b 2 0 s i t e s y s t e mi n d o m e s t i ca n df o r e i g ne n t e r p r i s e s ，c o l o rv i s i o nd e s i g n ，a n dt h e d e v e l o p m e n tp r o b l e m s e db yt h ed e s i g na r ed i s c u s s e d a n dt h e na n a l y z et h e f u n c t i o n a lr e q u i r e m e n t sa n da r c h i t e c t u r er e q u i r e m e n t so fw e b 2 0s i t es y s t e m t h r o u g h i n d u s t r ya n a l y s i sa n dc a s ed i a g r a ma n a l y s i s ，t h es i t en e e d sa r es h o w n t h r o u g ht h e a b o v ea n a l y s i s ，t h ea r c h i t e c t u r ea n do p e r a t i o n a lc h a r a c t e r i s t i c so ft h er e a le s t a t e w e b s i t ea r es m n m a d z e d a n dt h es y s t e mm u s tb ed e s i g n e dt om e e tt h em a i n t a i n a b i l i t y , f l e x i b i l i t ya n ds e a l a b i l i t y s e c o n d l y ，t h es i t e sp l a n n i n gt h o u g h ta n df u n c t i o nm o d u l e sa r ed i v i d e d ，a n dt h e u s e re x p e r i e n c ea n du s e ra w a r e n e s so ft h ev a l u eo ft h eb r a n da r eo v e r a l lp l a n n e dt o o i nt h i sp a r t , e a c hm o d u l ei sd e s i g n e da n dd e s c r i b e dw e l l a tt h es a m et i m e ，t h r o u g h r e q u i r e m e n t sa n a l y s i sa n da r c h i t e c t u r ed e s i g n , t h eb a s i cm o d e lo ft h e r e a le s t a t e i n d u s t r y sb u s i n e s sn e e d sa n ds t r u c t u r ei sc o n s t r u c t e d t h r o u g hf u r t h e rr e s e a r c ht h e s t r u c t u r e so fs y s t e mm o d e la n dd a t a b a s e ，z h i x i a n gw e bs y s t e mi sd e s i g n e ds t r i c t l y a c c o r d a n c ew i mt h er e q u i r e m e n t sa n a l y s i s ；s c i e n t i f i ca n de f f e c t i v em e t h o d sa r eu s e dt o t e s tf u n c t i o n s ，a n dt h et e s tr e s u l t sa r ea n a l y z e d ，a n dt h e nt h ef u n c t i o n sw i l lb ea m e n d e d ， s ot h a tw ec a nm a x i m i z et h eb r a n dv a l u eo fz h i x i a n gw e b s i t e a f t e rs t u d y i n gt h ea p p l i c a t i o no fi n t e r a c tt e c h n o l o g i e st ot h er e a le s t a t e e n t e r p r i s e s ，w ep r o p o s et h ef o l l o w i n gn e wa r g u m e n t s ： i i 山东大学硕士学位论文 一一- i n t e m e tt e c h n o l o g yi s a l w a y sc h a n g i n g ，s ow em u s to r g a n i z e , r e s e a r c h ，a n d a n a l y z et h ei n t e m e tt r e n d s ，i no r d e rt oa d a p tt ot e c h n o l o g i c a lc h a n g ew i t ht h ef a s t e s t s p e e d w eu s es c i e n c ea n dt e c h n o l o g yt oh e l pu n d e r d e v e l o p e di te n t e r p r i s e st oa c h i e v e h i g he f f i c i e n c yo ft h er e a le s t a t eb u s i n e s sm a n a g e m e n t , c o r p o r a t ei n t e r n a la n de x t e m a l m a n a g e m e n t , a n de s t a b l i s haf u l le c o m m e r c eb u s i n e s sm o d e l k e y w o r d ：r e a le s t a t e i n d u s t r y ；b r a n d ；d e v e l o p m e n tm e n t a l i t y ；s e r v i c e p a t t e r n ； e l e c t r o n i cc o l l 1 i i l e r c e i i i 原创性声明 本人郑重声明：所呈交的学位论文，是本人在导师的指导下，独 立进行研究所取得的成果。除文中已经注明引用的内容外，本论文不 包含任何其他个人或集体已经发表或撰写过的科研成果。对本文的研 究作出重要贡献的个人和集体，均已在文中以明确方式标明。本声明 的法律责任由本人承担。 论文作者签名： 日 期： 关于学位论文使用授权的声明 本人完全了解山东大学有关保留、使用学位论文的规定，同意学 校保留或向国家有关部门或机构送交论文的复印件和电子版，允许论 文被查阅和借阅；本人授权山东大学可以将本学位论文的全部或部分 内容编入有关数据库进行检索，可以采用影印、缩印或其他复制手段 保存论文和汇编本学位论文。 ( 保密论文在解密后应遵守此规定) 论文作者签名：导师签名： 日期： 山东大学硕士学位论文 1 1 房地产网站建站背景 第1 章绪论 高速发展的网络技术促进了房地产业网络化进程，各个房地产公司也纷纷建 立了自己的网站，许多专业房地产网站也应运而生。好的房地产网站不仅可以为 企业带来不菲的赢利，还可以宣传房地产商的新形象和建立自己的品牌形象，丰 富浏览者对房地产商的直观认识。 通过对房地产企业的背景分析，我了解到房地产品及其交易的特点决定了网 站应用在房地产市场中的商机比哪里都大，房地产品的不可移动性、差异性，决 定了它是非均质商品。只有充分详细地了解了这些信息并比较以后，消费者才会 进行购、租决策。网络的快速、灵活、形象、直接、广泛、互动、低廉特性，为 房地产供求信息的发布，提供了最好的工具和交流平台。购房人可以从至祥网站 获取房源，比较项目的具体情况，到了解市场行情，再到参考专家意见，观看虚 拟三维楼盘，快捷高效的网络信息将提高房地产消费行为。 房地产网站作为房地产信息互换平台，可以快捷高效地反映广大消费者意向。 房地产网站实时信息反馈系统能接受来自各方访问者的咨询信息，消费者个人可 以很轻松地在网上搜索房地产信息，这就极大地增加房地产交易机会和交易成功 率。 1 2 国内外w e b 2 0 研究现状及发展趋势 w e b2 0 技术在企业获得了突破性的认可和推广，聪明的管理者开始意识到， 在企业的研发、生产、营销等各种流程的协同上，w e b2 0 具有独特的价值。其 实现在通过互联网已经实现了沟通、购物、支付、社交，甚至是企业服务均逐步 互联网化，甚至是通过互联网使整个产业被革新。 1 2 1 国外w e b 2 0 研究现状及发展趋势 1 凸版印刷风格 山东大学硕士学位论文 凸版印刷风格有些出人意料，可能因为之前很少有人使用。该风格各种主题 的网站中都有，但主要用于产品设计或在线服务类网站”1 。 图卜l 凸版印刷风格网韩藏例 2 富u i 现代w e b 中的u i 变得越来越漂亮，越来越好用。过去的一年，w e b 中的u i 有了显著提高，有了一种接近桌面的感觉。a j a x 和f l a s h 被广泛使用，界面有 了更多的留白区域，撮多现代的u i 技术会显示用户同系统之间交流的视觉状态， 比如，按钮在正常和被按下时显示不同的样子，用户同系统交互时能及时得到反 馈，另外，越来越多的服务可以被用户定制。 “l 一 ” k ， 6 1 t r 母 p f f 图卜2 应用富u i 同站截圈 3 透明p m g 使用p n g 实现透明虽然不被i e 6 支持，却在过去的一年大行其道。设计师 们似乎正在尝试将背景图片和内容融合并实现一些印刷媒体的风格。比如，将p n g 半透明图片放到整体背景的某个区域上，用来加亮显示这个区域，如标题或声明。 一些p n g 同名技术还用束实现灯箱框效果。 朗l ； 山东人学硕士学位论文 圈卜3 应用透明p r i g 幽片网站裁目 4 巨大字体 2 0 0 9 年，巨型字体设计还会风行，尤其是那些设计社，以及展示型，产品介 绍型。或在线服务型网站，他们会使用巨型字体显示重要信息。 巨型字体设计中使用的字号往往超过3 6 p x ，设计师们对字体编排注入了更多 雷 f 以实现更漂亮，更连贯，更值得信赖的站点 j i 二 图卜4 应用巨大字体嗣站截图 5 代用字体 设计师们还把更多注意力放到字体上，虽然经典的w e b 字体，h e l v e t i c a ， a r i a ，g e o r g i a 以及v e r d a n a 等仍占主流，一些代用字体正浮出水面( 如 s i f r ) 。有趣的是，这些字体会和设计无缝地衔接，设计师们似乎并非为字体而字 体，而是要将字体同他们的设计结合在一起实现更漂亮的效果。 鬻 山东大学硕士学位论文 蟹k 圈卜5 应用代j j j 字体网站藏匿 6 灯箱效果 灯箱框是第二代弹窗，它们比第一代基于j a v a s c r i p t 的弹窗更友好，可以 让用户将注意力集中到培重要的部分。这些窗口一般由用户的某个行为激发，并 显示在其它内容的上层它有时候是半透明的，并包古一个关闭按钮。 国1 _ 6 应用灯箱效果网站截图 7 媒体块 随着宽带接入的普及，设计师们也借机提出更有吸引力的内容。越来越多产 品网站使用媒体块显示视频，让用户更容易理解这些内容。用户只需靠在椅子上 看视频，不需要一步一步往下点，这些视频通常比较短直奔主题，正规。但不 失娱乐性。 山尔大学硕士学1 寸论文 h i i h b a r r 圈卜7 痈用媒体块网站截幽 8 滚动幻灯导航 幻灯片水平和垂直滚动，可以向不同方向滚动，当前项加大加亮。这种导航 技术可以让用户快速直观地浏览站点中的内容。一般常用语娱乐性网站，另外， 设计者还可以使用浚技术展示他们的作品。 图卜9 应用反b o x 布局网站截图 山东大学硕士学位论文 1 0 单页布局 单页布局是使用一个单一的页面展示站点的全部内容，这并不意味着站点内 容少，这个页面可能很复杂，包含了大量图形和动画效果，加载的时间也会有些 长。比如，用户点击导航菜单后，该栏目下的新内容会在旧内容处通过渐入渐出 滑入滑出等动画效果显示出来，而页面其它部分始终保持不变。 图卜1 l 应用多栏布局网站截囤 山东大学硕士学位论文 1 2 巨型插图式与多变背景设计 像巨型字体主导当前w e b 设计一样，巨型插图风格设计似乎也正流行起来， 巨型插图可以和巨型字体的结合使用，带来更吸引人，更生动的效果。另外，设 计师们越来越喜欢使用那些色彩鲜艳的图形提供背景，包含各种风格的抽象画， 剪贴画，剪贴簿，装饰画，怀旧水彩，有机纹理以及照片背景等。 图l 1 2 应用巨型插图式与多变背景设计网站截图 1 22 国内- e b 20 研究现状及发展趋势 我们可以看到互联网时代正在中国高速发展，至2 0 0 8 年底，中国互联网用户 数增长至2 7 5 亿，互联网在中国的普及率将达到2 乱7 ，中国已经超过美国成为 世界上互联网用户最多的国家。众多中小企业已经意识到通过电子商务能够促进 业务发展，开始积极寻找各种网络机会，然而仍然缺乏有效互联网运用。许多中 小企业在品牌广告、搜索引擎、行业门户、b 2 b 网站和各种电子商务和网络营销 手段面前不知道怎么选择有效的适台自己的营销手段。 印懑 写徽氆氆 图l _ 1 3 应用透明p n g 图片同站截图 国内使用p n 6 实现透明虽然不被i e 6 支持但网页却也使用率报高。设计师 们似乎正在尝试将背景图片和内容融合并实现些印刷媒体的风格。比如，将p n g 半透明图片放到整体背景的某个区域上，用来加亮显示这个区域，如标题或声明。 i i 求人学硕士学位论文 些p n g 同名技术还用束实现灯箱框效果。还有些实现叠加效果 碱 瓤磐 秋装新品发布会 啮鞠右颦，、1 ， ，3 图卜h 应用巨大字体网站截圈 2 0 0 9 年，巨型字体设计还会风行，尤其是那些设计社，以及展示型，产品介 绍型或在线服务型网站如：淘宝网、腾讯网他们会使用巨型字体显示重要产品 活动信息。巨型字体设计中使用的字号往往超过3 6 p x ，设计师们对字体编排注入 了更多关注，以实现更漂亮，更连贯，更值得信赖的站点。 图卜1 5 应用巨型插图式与多变背景、多变字体设计阿站截图 巨型插图风格设计似乎也正流行起来巨型插图可以和巨型变型字体的结合 使用，带来更吸引人。更生动的效果。 另外，设计师们越来越喜欢使用那些色彩鲜艳的图形提供背景，包含各种风 格的抽象画剪贴画，剪贴簿，装饰画，怀旧，水彩，有机纹理以及照片背景等 川。 如今，w e b20 已经给今天的中国企业带来了深远的影响。管理者普遍认为 w e b20 在消除企业复杂的组织边界，改进效率方面具有优势，企业越大，w e b20 技术带来的效果越显著。大部分人认为，企业应该尽早地评估、外包和部署一些 山东大学硕士学位论文 w e b2 0 技术。亚洲的调查结果也反映了类似的趋势，超过5 0 的受访企业认为 w e b 2 0 是个绝佳的商业机会【4 i 。 图卜1 6w e b 2 0 给企业带来的五大变革捌 w e b 2 0 给企业带来了五大变革： 一、开放式的业务平台。可编程的w e b 架构实现了业务系统从静态的封闭系 统走向开放，在核心架构和核心业务的基础上，其他相关的业务的实现主要通过 o p e na p i 开放数据和服务来完成，允许第三方开发插件添加到系统中。 二、鼓励用户参与的机制。传统的业务系统规则主要由开发者和管理来设定， 系统缺乏对于业务流程的理解而显得僵硬，用户参与带来的群众智慧自动解决业 务协同问题。 三、动态适应业务增长的系统功能。w e b 架构带来的另一个变化就是业务功 能的模块化，松散耦合的系统模块可以灵活组合，用户可以方便选择需要的功能 自行组合。 四、与社会化网络的深度结合。社会化网络与业务系统在数据、应用和用户 三个层面进行深度融合，用户通过相关应用实现社会化协作，完成了用户计算 ( h u m a n - c o m p u t i n g ) 的智能过程，实现从i t 计算到社会化计算的飞跃。 五、轻量级的部署规模。业务计算从客户端向服务器端迁移，实现客户端的 9 山东大学硕+ 学位论文 解放，帮助i t 基础设施落后的中小企业用户实现高性价比的业务管理1 5 】。 1 3 解决的主要问题 从视觉上直接表现出企业特色，树立网络企业形象，打造企业网络品牌。延 续企业标准色，突出企业多年来沉甸甸的辉煌战果! 展示专业团队风采，打造企 业文化，制造企业归属感。 需求分析方面，充分理解房地产行业网站结构的基础上，获得用户需求和业 务流程，其中需求包括功能需求和非功能需求。通过分析总结出合理的设计和开 发思路。 设计方面，考虑房地产行业的网站架构和业务特点，设计满足系统可维护性， 灵活性和可扩展性。 1 4 本文的主要工作内容 本文通过互联网网站建设，分析当今国内外w e b 2 0 网站发展趋势，分析了 房地产行业的实际需求和业务流程、组织构架，设计和实现了房地产行业网站系 统。 在需求分析基础上，讨论了房地产行业网站系统的架构设计。首先根据前文 的系统需求提出系统设计的目标和原则，然后将架构设计分为系统技术架构和功 能架构分别进行讨论。技术架构要求考虑系统的可扩展性，可维护性以及性能问 题。在技术架构讨论中，本文首先分析了系统的网络架构和系统技术选型，然后 在品牌讨论中，通过具体的量化调查和心理分析来挖掘消费者购买行为背后的潜 在消费心理【6 1 ，商业化设计从认识顾客、客户和用户开始。在功能架构分析中， 讨论了系统各部分的功能组成，最后给出一个技术选型结果及开发流程。 本文对房地产行业网站系统的应用情况作了简单介绍，并对系统的设计和实 现进行了总结，提出了对房地产行业网站系统的展望和改进建议。 l o 山东大学硕士学位论文 1 5 论文的组织结构 第一章绪论，主要描述互联网网站的开发背景、互联网的国内外现状，本文 解决的主要问题和完成的工作。 第二章，网站建设的专业知识及理论，在技术架构设计中，分别分析了现今 互联网设计色彩、站点字体应用对比分析。对本文研究中小型房地产企业互联网 应用打好基础。进行网站系统数据库的需求分析。结合品牌对用户消费者的价值 表现，详细描述了从品牌看用户体验的设计过程。并介绍了网站后台建设的基础 知识。 第三章房地产企业网站系统架构设计。首先进行了房地产行业网站系统的概 述策划思路。其次描述了该系统的系统管理模块介绍和栏目规划。最后对房地产 企业至祥企业站点设计流程的构成方法验证。并对房地产行业网站系统数据库系 统应用、后台管理、技术选型进行分析和制作。按照差异化前台管理和企业自定 义后台管理两个思路，分别进行了各个模块的详细设计。 第四章房地产企业至祥网站系统实现与测试，首先描述了网站视觉效果实现、 网站的运行维护及推广，并对各个模块的技术选型进行详细设计和模块功能的说 明。其次，着重分析了至祥企业站点还需要具备什么样的功能，以增加用户的粘 性。最后，跟踪和监督产品用户体验满意度改进，提升产品设计质量。 第五章对论文进行了总结。不但对将来房地产企业网站建设的创新点进行了 阐述，而且对系统的进一步提升提出了改进意见。 山东人学硕士学位论文 第2 章网站建设的专业知识及理论 通过对浏览器的性能、互联网流行的字体、色系进行对比分析可以得 专业 的知识，并使用专业的程序语言来设计制作房地产网站。本章主要介绍了互联网 站点字体应用、色系对比分析为建设房地产网站做好准备。分析了品牌对消费 者的影响。从品牌的价值分析用户体验、互联网设计等人为因素，为中小型房地 产企业网站整理收集设计思路。并介绍了系统语言和数据库专业知识。 2 1 互联网站点字体应用 21 字体糊知识 1 、衬线字体与非衬线字体的对比分析 衬线字体( s e r i f )非衬线字体( s a n ss e r i f nn 蹦2 - 1 村线字体与非村线宇体 s e r i f ：在字的笔画开始及结束的地方有额外的装饰，而且笔画的粗细会因直 横的不同而有不同。如t i m e s 、t i m e sn e * r o m a n s a n ss e r i f ：没有这些额外装饰，而且笔画粗细大致上是差不多。a r i a l 、 h e l v e t i c a - - - 在中文直排的情况，比较不容易显现s e r i fs a n ss e r i f 之间的差异性，但 是在目前中文横排相当普遍的情形下，易读性、醒目性适用于中文。 2 、t u r e t y p e 与o p e n t y p e 的对比分析 1 ) t r u e t y p e 我们知道a p p l ec o m p u t e r 公司和m i c r o s o f t 公司联合提出的一种新型数学字 山东大学硕七学位论文 形描述技术。它用数学函数描述字体轮廓外形，含有字形构造、颜色填充、数字 描述函数、流程条件控制、栅格处理控制、附加提示控制等指令。t r u e t y p e 采用 几何学中二次b 样条曲线及直线来描述字体的外形轮廓，其特点是：t r u e t y p e 既 可以作打印字体，又可以用作屏幕显示；由于它是由指令对字形进行描述，因此 它与分辨率无关，输出时总是按照打印机的分辨率输出。无论放火或缩小，字符 总是光滑的，不会有锯齿出现。 2 ) o p e n t y p e 确切地讲它是t r u e t y p e 格式的扩展延伸，它在继承了t r u e t y p e 格式的基础 上增加了对p o s t s c r i p t 字型数据的支持如图23 ，所以o p e n t y p e 的字型数据即可 以采用t r u e t y p e 的字型描述方式也可以采用p o s t s c r i p t 的字型描述方式，这完 仝由字体厂商来选择决定。 b 目 n i i ，l r i a l ( o p t , n t v p e ) 汉仪扪f r 体简 j h tm + i ，s _ c 4t n c 一】l 一，ik t e 口。“ m 1 1 一“- 一。 -d 口m i z # 十” 目 # r i l l 【1 ；w 。1 q n t “ond 端赛船船蒜；桨。 麓嬲凳黧黔w 1 2 = i = i l i 目：n d n ，s _ f j 一二i i _ 7 6 一t h eq u i c k b r o w n f o xj u m p so v e r t h e i“w n do w 5 击， 量己4 f 2 5 4 5 6 7 8 t h eq u i c kb r o w nf o xj u r n p s ( 。w i n d o w s 幸_ 孳型屯叫 。t h eq u i c kb r o w n f c ，w i n d o w s 中蔓宁 t - _ 图22t u r e t y p e 与卸e n t y p e 对比 3 、字体基本属性描述 1 ) 常用单位： 相对大小：p i l l ，e x ，p x 绝对大小：i n c m 咖，p t ，p c 相对于设备：d x 2 ) 显示方式 b o l d 扭体i t a l i c 斜体，l i g h t 一细体，e x t r a 特级，d e m # m e d i 呻一中锋，b l a c k 加黑，c o n d e d s e d 绾小体，e x p a i i d e d 扩太 山东大学硕士学位论文 2 1 2 各操作系统中的字体( w i n 2 0 0 0 w i n x p ，v i s t a ，m a co s ) 字体应用汇总 1 ) 微软中国： b o d y m a r g i n ：o ：b a c k g r o u n d c o l o r ：# l e 7 7 d 3 ：c o l o r ：# 0 0 0 0 0 0 ：f o n t f a m i l y ：v e r d a n a ；f o n t - s i z e ：l e m ； t d f o n t - f a m il y ：v e r d a n a ，a r i a l ：f o n t s i z e ：7 0 ：) 2 ) m i c r o s o f t ： h t m l ，b o d y ，p ，t a b l e ，t d ，f o r m ，i m g ，h l ，h 2 ，h 3 ，h 4 ，h 5 ，h 6 ，i n p u t f o n t - s i z e ：l e m ； h t m l ，b o d y ，d i v ，p ，t a b l e ，t d ，f o r m ，i m g ，h l ，h 2 ，h 3 ，h 4 ，h 5 ，h 6 ，i n p u t f o n t f a m i l y ：t a h o m a ，v e r d a n a ，s e g o e ，s a n s s e r i f ；p a d d i n g ：o p x ：m a r g i n ：o p x ： b o r d e r ： o p xt r a n s p a r e n t n o n e ： b a c k g r o u n d p o s i t i o n ：l e f t t o p ： b a c k g r o u n d r e p e a t ：n o r e p e a t ： ) b o d y f o n t - s i z e ：7 0 ：b a c k g r o u n d c o l o r ：# c 8 e 3 f l ： 3 ) y a h o o ： b o d y f o n t ：1 3 p x a r i a l ，h e l v e t i c a ，c l e a n ，s a n s - s e r i f ；* f o n t s i z e ：s m a l l ；* f o n t ：x s m a l l ：) t a b l e f o n t - s i z e ：i n h e r i t ：f o n t ：1 0 0 ； s e l e c t ，i n p u t ，t e x t a r e a f o n t ：9 9 a r i a l ，h e l v e t i c a ，c l e a n ，s a n s s e r i f ；) p r e ，c o d e ( f o n t ：1 1 5 m o n o s p a c e ；* f o n t s i z e ：1 0 0 ； b o d y 木 l i n e h e i g h t ：1 2 2 e m ； 4 ) a p p l e ： b o d y m a r g i n ：0 ：p a d d i n g ：o ：g r a n d e ，g e n e v a ，a r i a l ，v e r d a n a ， s a n s - s e r i f ；c o l o r ：# 0 0 0 ；) b a c k g r o u n d ：# f f f ；t e x t a l i g n ：c e n t e r ：f o n t ：1 2 p x l u c i d a 5 ) 新浪： b o d y ，u l ，o l ，li ，p ，f o r m ，f i e l d s e t ，t a b l e ，t d f o n t f a m il y ：” 宋 体 f o n t - s i z e ：1 2 p x ； 1 4 山东大学硕士学位呛文 6 ) 擅狐： t d ，b o d y ，i n p u t ，s e l e c t f o n t s i z e ：1 2 p x j z c o l o r ：# 0 0 0 0 0 0 1 i n e h e i g h t ：1 6 p x ：f o n tf a m i l y ：a r i a ：) 7 ) 网易： b o d y t e x t a l i g n ：c e n t e r ：f o n t f a m i l y ：”宋体”，a r i a l ；m a r g i n ：0 p a d d i n g ：0 ：b a c k g r o u n d ：# f f f ：f o n t s i b e ：1 2 p x ：c o l o r ：# 0 0 0 ) 8 ) 。c 洲： b o d y ，t a b l e ，s e l e c t ，u l ，l i ( f o n t s i z e ：1 2 p x ：l i n e h e i g h t ：2 0 p x ： f o n t f f o n t f a m i l y ：a r i a 。h e l v e t i c a ，s a n s s e r i f ：) 图23 二系统下字体应用对比x p 2 0 0 0 山东大学硕士学位论文 $ 目e v 出”r 4 ：箍瓣罐涮蒹鑫* 像素艺术如何在v i s t a 时代生存 口 $ ”r v5 4 ：誓蒙笳；翟藩鑫e 像素艺术如何在v i s t a 时代生存 锥素术如何在v i s l a 对代生存 = # i * “ ：。 q o 口0 0 7 w 咖s 5 h1 2 0 07 w v 【# a q q 2 0 0 ? w m d o 岍v i s l aq q 2 0 0 7 w i n d o w s v i # a 需然诜。8 掣器搬。d o w 。s 。v 。s t 。a 。 q q 2 0 0 t w i n d o w sv i s t a q q 2 0 0 7 w i n d o w sv i s t a 凹24 二二系统f 字体应川对比o sx 宋与盯i d 曲对比- t z # 0 目”目r i p e 糊目割日锄 e z $ 日t v z “j 恺# * i 榭月e v l 5 u 目“# * 嚷 捌日& v i 血目t 牲嘲* 斟月f 女计牲 簇蒙孺黼篙簖鑫存簇篆鼯蹴瑟惫存霞熬襄器i ：搿惑* l 一一月h o o 一”一 三种英文字体舶对比t q q 删n d o “ v i s mq q 删n d d “ve s t a哦2 圳n 如 b q q 2 0 0 7 w i n d o w s v i s t a q q 2 0 0 t w i n d o w s v i s t aq q 2 0 0 t w i n d o w sv l t a q q q q 2 2 0 0 0 0 7 7 w w i n d i n o d w o w s v 5 i s v t a l s t a q q q q 2 2 0 0 0 0 7 w 7 w i n l d n o d w 。w sv s i s a s t aq q q q 2 2 0 0 0 0 7 w 7 w l n d l n o d w 。s w v s i s v t a 胁 一c - 一一 图2 - 5 三系统下字体应用对比一v i s t a 2 互联网设计色彩分析 色彩决定了访问者对网页的第一印象，并且起到营造整体气氛和发挥各个要 特征的作用。下面我们通过采集网站首页主色调、辅助色调、点缀色，对当今 联网“ b 20 的色彩进行了分析。 山东大学硕士学位论文 一一 一 一 旦理 一 一一 一点r ； 一一 叫 蕊一三 鼎_ 。一二= 皿 暑 一 图2 6i t 网页色彩对比 蓝色给人以男性化的感觉。如果与黑色、灰色系列一起配色，不但可以加强 男性化的感觉，同时给人以坚强的印象。 日雷_ i o 一 _ 二 m _ = 翻2 7 个性化站点色彩对比 个性化站点现代、时甏，这样的配色感觉给人以冷淡的印象，但是如图2 7 这种配色可以营造出简洁的气氛。 丽m - 口一 皇皇 一 2 ：= m m o 日t - 一_ 一一一一 留。 昌一瓯j 。一一 图2 - 8 品牌商业站点色彩对比 绿色和蓝色给人以亲切友好的感觉。这两种色彩相遇，可以给人以舒适、安 障_ p 曼 目鱼。“ 一 一 _ 培r 屠 j j 一 一 雾_ 山东大学硕士学位论文 全的印象。如果绿色和有着补色关系的红色配色，就好像我们听到了红色心脏跳 动的声音，显得既健康又有活力，绿色和黄色一起配色，可以给人年轻话泼的感 觉。 一一 置n n 一 邕_ = 四 一m n _ ；口一 _ = 圈n 一 曼= n 一 图2 - - g 深底色页面色彩对比 橙色随着色调的不同。配色感觉也会不同。相同种类的漂亮色彩与黄色、蓝 色、绿色搭配，可以给人愉悦的感觉，同时也可以给人阻亲近的印象，如果把色 调调低，就会成为褐色，这会使整个网页界面气氛好像散发出秋天的味道。褐色 和橙色的调和，是最具秋天气息的配色。由于橙色和紫色的补色关系，他们之间 的配色可以营造出独特、个性化的气氛。 盈一 = ；引= 目h 目= f - 一垦- 一一 ! - 一一三一! 巳巴 图2 一1 0 综合站点色彩对比 对2 7 站点首页色标提取：分别针对导航、t o p 、b a n n e r 、广告区域、列表、 模块、区域进行色彩比例提取。图2 一1 0 右侧是色彩提取t 下面是站点色彩按照比 例进行综合对比，为w e b 2 0 站点做主辅色调分析，做好基础的色标统一筹备工作。 茸闩-；j；嵴_li|一 山东大学硕士学位论文 ：i m n l爿 i l 图21 1 综合评比w e b 主色系 首先，如图所示把前面2 7 个w e b 页面提取的色标，按熙主色调分类整理并 做色系稚局。闰21 1 中从上到下依次为冷色：纯白色系3 5 ；、浅灰色系1 8 、深黑 色系1 4 、深彩色系7 、蓝色系4 、淡蓝色系蹁，暖色：橘红色系8 、淡黄色 系5 。主色调色彩分析：冷蹉色的使用，比例差别不大；从色彩的相似性来看， 淡蓝色的使用率相对较高。 2 鲥 i r 一1 一一 i _ ：”j 。m - “ 二j i 宣d 嚣! 。1i 。： 卜一“ l | | m a n n | n e m e a n i ：”。1 i + 一 卜 i _ l i 霉驵啊罾h l u i 瞄_ 。j 嚣， 二i i j i ； 一， ! 一一一一1 i = 网；警 _ _ 。一一 。，一一一 一一_ 一 ”“ 图21 2 综合评比- e b 辅助色系 -!q诗一 巴 - 一 - | ；一 - 一一 - 一 一一 i_ 山东大学硕士学位论文 其次，如图所示把前面2 7 个w e b 页面色标的提取，按照主色调分类整理，并 傲色系布局，分别为：白色2 5 、色彩度较低彩色9 、灰色系1 5 、深色2 2 、红 色系1 4 、蓝色系9 、绿色系6 。辅助色色彩分析：黑体白色和深色占的比重相 对较大，彩色的应用，从色彩相似性来看，蓝色应用相对较多。 可以看到冷色系的现代、时髦的气氛，虽然有冷淡的印象，但是这种辅助色 系的配色可以营造出简洁的氛围，给人以干净、整洁的感觉。这种色彩度较低， 采用了蓝色系和灰色系的色彩。 一一 一 圈2 1 3 综台评比w e b 点缀色系 图2 1 3 可以看出点缀色系中，暖色系用的比较广泛。 红色在阿站上出现，能够体现热情的、娱乐的感觉，由于具有活力、刺激的 一面，与高彩度的红色相比，网站的色系更多采用明度低的红色。 红色的配色关系：如果红色和橙色、黄色等暖色搭配在一起会产生温暖的感 觉；如果和黄色、绿色搭配一起，可以营造去快乐愉快的气氛a 由于红色是象征 权力的色彩，如果与黑色、黄色一起配色，这种感觉会更加强烈，与黑色配色， 否定的意义也会变得更强烈。 山东大学硕士学位论文 # 一 6 # e 一1 * e _ _ _ _ _ _ _ _ l l 黼e ，? 、- * 自en 女n