视觉传达在网页中的应用毕业论文.doc

重庆市高教自考本科毕业论文 视觉传达在网页设计中的运用研究 徐瑶 准考证号 010414305540 指导教师姓名 邵明伟 职称 讲师 考 生 单 位 重庆工程职业技术学院 邮 编 402260 电话专 业 名 称 数字媒体艺术 论文提交日期 2015 4 20 论文答辩日期 主 考 单 位 重庆邮电大学 2015 年 4 月 20 日 I 目录目录 第 章绪论第 章绪论 1矚慫润厲钐瘗睞枥庑赖 研究背景及意义 研究背景及意义 1聞創沟燴鐺險爱氇谴净 研究现状及发展趋势 研究现状及发展趋势 3残骛楼諍锩瀨濟溆塹籟 解决的主要问题及创新点 解决的主要问题及创新点 3酽锕极額閉镇桧猪訣锥 论文的组织结构 论文的组织结构 4彈贸摄尔霁毙攬砖卤庑 第 章关于视觉传达与网页设计第 章关于视觉传达与网页设计 4謀荞抟箧飆鐸怼类蒋薔 视觉传达 视觉传达 4厦礴恳蹒骈時盡继價骚 网页的定义和特点 网页的定义和特点 5茕桢广鳓鯡选块网羈泪 网页设计中视觉传达的设计原则及方法 网页设计中视觉传达的设计原则及方法 7鹅娅尽損鹌惨歷茏鴛賴 第 章分析三色幼儿园网站版式视觉效果第 章分析三色幼儿园网站版式视觉效果 8籟丛妈羥为贍偾蛏练淨 分析网站视觉效果 分析网站视觉效果 8預頌圣鉉儐歲龈讶骅籴 首页版式分析 首页版式分析 9渗釤呛俨匀谔鱉调硯錦 第 章三色幼儿园网站色彩第 章三色幼儿园网站色彩 12铙誅卧泻噦圣骋贶頂廡 教育网站色彩分析 教育网站色彩分析 12擁締凤袜备訊顎轮烂蔷 教育网站设计实现 教育网站设计实现 15贓熱俣阃歲匱阊邺镓騷 第 章网站文字第 章网站文字 17坛摶乡囂忏蒌鍥铃氈淚 网站文字分析 网站文字分析 17蜡變黲癟報伥铉锚鈰赘 整体网站效果 整体网站效果 19買鲷鴯譖昙膚遙闫撷凄 第 章总结第 章总结 19綾镝鯛駕櫬鹕踪韦辚糴 参考文献参考文献 20驅踬髏彦浃绥譎饴憂锦 致谢致谢 21猫虿驢绘燈鮒诛髅貺庑 1 视觉传达在网页设计中的运用研究 徐瑶 学校 重庆邮电大学 专业 数字媒体艺术 摘要摘要 在科技 信息高速发展的 世纪 网络作为高科技与信息交互式媒介的产物 成为人 类生活中不可或缺的重要连接纽带 数字技术的发展成为网络的一个桥梁 产生了网络化传播系统 从而使网络成为继报纸 广播 电视后的第四媒介 随着时代的发展 网站建设越来越接近于艺术 而不仅仅是一项技术 网页的艺术设计日益被网站建设者所注重 视觉传达设计是指利用视觉符号 来传递各种信息的设计 设计师是信息的发送者 传达对象是信息的接受 简称为视觉设计 视觉 传达包括 视觉符号 和 传达 这两个基本概念 网页设计是一种建立在新型媒体之上的新 型设计 它具有很强的视觉效果 互动性 互操作性 受众面广等其它媒体所不具有的特点 一个 成功的网页设计 首先在观念上要确立动态的思维方式 其次 要有效地将艺术性引入网页设计之 中 加人们浏览网页的兴趣 本文主要解决如何把视觉传达的念运用到网页设计中去 通过对网页 设计中版式的首页 前台 后台主要页面进行分析 从企业网站的色彩需求 色彩特性 调和法则 设计原则和方法进行分析 从文字的简洁性 识别性和在互联网的传播性来分析 最后从导航的前 台和后台两个方面分别加以分析 并运用设计学 心理学 传播学 美学等方法在艺术因素进行分 析的基础上 结合湖大科技网站案例从艺术 技术角度出发 给出网页设计方案 根据网页的设计 分析网站实例的实现过程 并总结实现技术特点 一般步骤和注意问题 结合网页设计中的动态网 页技术 满足用户在视觉习惯 视觉心理 易操作性等方面的多样化需求 试图探索一条艺术与技 术高度相结合的道路 锹籁饗迳琐筆襖鸥娅薔 关键字关键字 视觉传达 网页设计 运用 分析 第 章绪论第 章绪论 研究背景及意义 研究背景及意义 计算机和网络技术的出现 毫无疑问的改变了世界 改变了人类的生活方式 而 互联网的出现则促成了网络经济的形成 尤其是在电子商务由概念化走向实用化的过 程中 它更是起到了决定性的作用 对于熟悉网络的人来说 网页的出现似乎是很久 以前的事情了 但是认真追溯 实际上到现在为止 也只不过几十年的时间 而在整 个的发展过程中 网络技术是以惊人的速度发展变化的 网页设计是一个全新的设计 领域 是一门新兴的设计和网络的交叉学科 它既有继承传统设计概念的部分又有自 2 己独特的性格 它涉及的范畴不仅包括传统的视觉传达设计 更包括信息设计 交互 设计 以及感观设计等等 网页中的信息传递是以一种全新的方式 超媒体的形式传 播的 相比较传统的传播媒体有着自身独特的优势 超媒体不仅可以像传统媒体一样 传播文字和静态图像 更能够传播动态图形甚至视频 声频等信息 其次 读者在浏 览信息的过程中 相比较传统媒体单一的浏览顺序 超媒体则为用户提供了很大的自 主性 另外 读者在接受信息的过程中 在超媒体的坏境下可以运用操作工具参与或 创造信息的接受活动 这种互动的优势也是传统媒体不可比拟的 構氽頑黉碩饨荠龈话骛 网页这种新的信息载体的出现为设计者提供了新的设计课题 同时也提供了一个 新的设计空问 随着网络商业行为被广泛的接受 越来越多的网民参与进来 人们使 用网络的目的也越来越多元化了 网页设计也向着更成熟的方向发展 在设计理念上 网页已经由最初纯粹的 叫卖式 的商业简介 逐渐发展为更注重个性化的网页设计 风格 以体现商业的文化内涵 在网页制作技术上 也更注重可操作性 功能性以及 可读性的提高 越来越多的网页设计作品出现在人们的视野 我们生活在一个信息社 会 怎样才能使我们每天接触到的信息能够更加快速地传递出去 并被有效地接受和 理解 是人们非常关心的问题 而网页作为新的信息载体 更承载着这样的任务 近 几年随着网络的发展 网页本身以网络为载体把各种信息以最快捷 方便的方式传达 给受众 但是 人们对美的追求是不断深入的 网页设计同样如此 在审美的角度考 虑如何更多更有效的传达网页信息 给用户留下更好的印象 提高网站的访问数量 促进网站的良好运作 是目前网页一个重要的发展趋势 虽然目前针对网页设计中信 息传递的可识性与便捷性 己经有了一些研究成果与实践经验 但是能够成功的吸收 和应用这些成果的网页设计作品还是不多见的 当然设计师可以通过各种手段来提高 网页中信息的传达性 比如去掉多余的图像来提高速度等 但是 如何将信息归类 放在合适的栏目下 信息应该以怎样的形式来表现 而信息的标题应该如何设计 每 张页面的信息量的大小如何确定 页面的文字 色彩 版式 导航的设计等等 都是 影响信息递效果的重要因素 輒峄陽檉簖疖網儂號泶 从一些统计数据可以发现 用户对网络的需求具有多层次的特点 对网络服务的 要求也在不断提高 上网用户以获取各方面的信息 以及学习新技术为主要目的 因 此 一些信息流量大 更新及时 浏览速度快 服务人性化的网站是最受用户欢迎的 另外 目前商业网站的发展速度非常快 网站更新意识也在不断加强 并存在着巨大 的潜在需求 所以 随着网站建设技术难度的降低 如何为用户提供并传达更具有价 3 值的信息 以吸引更多的用户 成为各网站之间的主要竞争内容 而网页则在其中扮 演着重要的角尧侧閆繭絳闕绚勵蜆贅 色 研究现状及发展趋势 研究现状及发展趋势 网页设计是一门新兴的设计类和网络的交叉学科 近几年随着网络的发展而逐渐 受到人们的重视 它本身以网络为载体 把各种信息以最快捷 方便的方式传达给受 众 在这种标准要求下 逐步产生了审美的需求 人们对美的追求是不断深入的 网 页设计同样如此 网页不光是把各种东西放上去 能看就行 这是远远不够的 还要 考虑如何使受众能更好地和更有效率地接收网页上的信息 这就需要从审美的方面入 手 制作出清晰 整体性好的页面使人浏览起来心情愉快 接收信息也会更加容易 网页设计经历从最早的简单以文本和数据等字符组成显示界面的功能第一的审美原则 发展到追求创意和风格表现的现代网页设计目标 其中 格 的形 成一词在词典上的解释是 气度 作风 某一期流行的一种艺术形式 具体到网页 设计的基础上 网页设计师的风格就是在运用自己的所掌握的手段 包括所拥有的审 美的素质 应用软件的能力 以及感受生活的敏锐的觉察力 来建立起自己独特的设 计形式 独特的作风 在我国 网页设计整体水平的提高 和这个新兴职业的形成有 着必然的关系 由专业艺术设计人员转型进入网络领域的视觉设计 提升了网页视觉 的创意和精美表现 但网页设计要求设计人员应该具备有全面的科学与人文素养 全 面系统的专业知识结构 全新的认知与判断方式 更需要具备设计艺术的创造才能 从现有的大量网站建设和网页设计能看出 我国的网页设计处于发展提高阶段 与国 际专业网页设计的标准仍然存在很大差距 对于网页设计的方法研究和理论探索 总 结出一套适合我国特色 继承中华文化底蕴和视觉审美标准 并与国际接轨的网页设 计学科方法论 不仅对提高网页设计水平 同时对于提高与网络相关的设计产业同样 具有相当重要的现实意义 识饒鎂錕缢灩筧嚌俨淒 解决的主要问题及创新点 解决的主要问题及创新点 企业网站的视觉传达效果是建立在网页设计基础上的 一个成功的企业网站从严 格意义上来讲 网站不仅代表了一个企业的精神面貌和形象 更担负着宣传品牌和开 拓市场的重任 那么怎样才能打造出一个成功的企业网站昵 除去网站本身的结构 内容等各个方面都需要精益求精 给人一种吸引力之外 还有一些改进的方法和评判 的标准 本文主要解决如何把视觉传达的理念运用到网页设计中去 通过对网页设在 4 中版式的布局 导航的安排 文字的设计 色彩的搭配等加以阐述 并运用设计学 心理学 传播学 美学等方法在艺术因素进行分析的基础上 结合湖大科技网站案例 从艺术 技术角度出发 结合人机界面评估知识 给出网页设计方案 根据网页的设 计 分析网站实例的实现过程 并总结实现的技术特点 一般步骤和注意问题 本文 的创新之处在于从传统视觉传达设计艺术的审美原则和创作思维手段出发 从网站的 版式 色彩 文字 导航等方面加以阐述 结合网页设计中的动态网页技术 满足用 户在视觉习惯 视觉心理 易操作性等方面的多样化需求 试图探索一条艺术与技术 高度相结合的道路 这些实践层面的思考可应用性较强 具有一定的创新之处 凍鈹鋨劳 臘锴痫婦胫籴 论文的组织结构 论文的组织结构 第 1 章绪论介绍了文章的研究背景及意义 研究现状及发展趋势 本文解决的主 要问题及创新点 论文的组织结构 恥諤銪灭萦欢煬鞏鹜錦 第 章介绍视觉传达的含义及传达过程 网页的定义及特点 网页设计中视觉传 达的设计原则及方法 第 章重点分析三色幼儿园网站版式视觉效果 主要从首页 前台主要页面 后 台主要页面来分析 第 章重点分析三色幼儿园网站色彩视觉效果 从色彩特性 调和法则 设计原 则和方法进行分析以及对企业网站色彩实现方案及效果进行阐述 鯊腎鑰诎褳鉀沩懼統庫 第 章分析了三色幼儿园网站文字效果 从文字的简洁性 识别性和在互联网的 传播来分析 以及最后的设计实现 硕癘鄴颃诌攆檸攜驤蔹 第 章总结部分对本文的主要内容与观点进行总结 提出研究的不足之处与局限 性 提出下一步的研究方向 第 章关于视觉传达与网页设计第 章关于视觉传达与网页设计 视觉传达 视觉传达 视觉传达的含义 在人的五种感觉 视觉 听觉 嗅觉 味觉 触觉 中 视觉在正常状态下认知 环境事物的过程中担当着重要的角色 人从外界获得的信息量中有 一 是 从视觉系统获得的 因此通过视觉媒介柬接受外部信息成为人类认知活动的主体 视 觉传达 是指通过视觉符号来发送和接 受外部信息 其本质是视觉信息的传达 根据定义 视觉符号 和 传达 是两个核 5 心概念 视觉符号是指用以代替或代表某种特定事物的信息媒介 而以视觉系统认知 的符号即为视觉符号 视觉符号是实现信息存储和记忆的工具 又是表谜思想情感的 物质于段 例如 色彩就可以作为视觉符号来表达某种特定信息 红色代表喜庆 绿 色代表希望 紫色代表浪漫等 具同样功能的还有文字 图形图像等 阌擻輳嬪諫迁择楨秘騖 视觉符号作为信息的载体 具有形式表现 信息叙述与信息传达的功能 是形式 与内容的统一体 美国符号学家和艺术学家苏珊 朗格 指出 设计中符号的作用就在于 将经验形式化并过 这种形式将经验客观地呈现出来 以供人们观照 逻辑直觉 认知和理解 这就要求 设计中所采用的视觉符号不仅要能够完整 明确地指代信息内容 还应具有一定的自 身意义 即通过经验的 艺术的造型方式束规划 美化符号形象 传达 在拉丁语中本来是 沟通 给予人们 的意思 这正好符合传达的基本精神 传达应包括发送方和受方 传达的过程是发送方发出传 达的内容成为接受方接受的内容 接受方在收受时产生某种理解和反应 同时 接受 方在收受时又成为发送方 反馈出新的情报或意见 这个过程是一个相互丰富精神内 容的过程 氬嚕躑竄贸恳彈瀘颔澩 视觉传达的过程 现今传达的定义是信息发送者利用符号向信息接受者传递特定信息的过程 运用 到设计中 就是设计师利用视觉符号向浏览者传递信息 浏览者则通过对视觉对信息 作出反应 并以此决定自己的思考和进一步行动的过程 这个过程由 设计师 浏 览者 特定信息 以及 传达效果 四个因素共同构成 视觉是有选择性的认知系 统 对周围各种程度的刺激反应各不相同 在复杂的信息系统中 视觉注意力只会集 中在具有强烈刺激性的视觉符号上 然而这种刺激性的视觉符号会引发人的种种生理 及心理反应 因此 视觉传达研究的是物质世界通过视觉感在人心理上 生理上产生 作用的理论和方法 视觉传达的基础应建立在 发送者 媒体 接受者 的观念上 视觉传达的过 程 对于信息发送者来说 是根据不同的传达目标 将设计思想和设计概念转变为视 觉符号的过程 即概念视觉化的过程 对信息接收者来说 是相反的过程 即视觉概 念化的过程 贯穿和联结个过程的是信息 即发送者与接收者之间的载体和媒介 釷鹆 資贏車贖孙滅獅赘 6 网页的定义和特点 网页的定义和特点 网页的定义 网页是存放在 服务器上供客户机用户浏览的页面 文档 网页 的学名称作 文件 的全称是 中文翻译为 超文本标记语言 是一种以在 上传 输 并被浏览器认识和翻译成页面显示出来的文件 要让浏览器显示出我们想要网页 表现出的样式 必须要用 语言加以设定版式的编排 浏览器是一个用于定位 和阅览 文档的程序 网页包括以下基本内容 文字 超链接 图片 声音 影像等等 怂阐譜鯪迳導嘯畫長凉 网页的特点 具有交互性 相对于文字 印刷 影视等媒体 网络媒介的最大的独特性就是在于其交互性 人们可以运用综合的信息传递方式 借助视 听 触等方式来获取更广泛的资源 网 页的超链接功能使用户享有高度的主控权 他们可以选择自己真正所需要的信息 表 达自己真正想表达的意念与作品 重要的是用户可以通过网页参加讨论组 聊天或者 进行电子商务活动等等 例如 用户可以对网上的某些信息做出自己的决定 并将其 加入到网络媒体中 反过来又成为网络信息的一部分 因此 在网络世界里 信息的 传达 发表不再是少数报社 出版商所拥有的特权 每个人都可以成为信息的消费者 同时也是信息的出版者 用户不再仅仅是信息的接受者 他们拥有更大的选择自由和 参与机会 网页中的交互性将有助于满足大众对更个性化的信息日益增长的需求 满 足用户的参与性 以及实现某种愿望 需求 目标和能力 谚辞調担鈧谄动禪泻類 时效性强 时效性是信息社会对信息传达的最基本的要求 网页以其快捷的传输速度充分体 现着现代信息社会的时效性 虽然仍然有许多人都在抱怨网络的传输速度太慢 但是 相比较传统的传播媒介 互联网在信息传输的迅速及时上依然具有明显的优势 而时 效性强是其一大优势 当报纸 杂志还在制版印刷时 当广播 电视还在后期制作时 通过互联网发布的信息早已传达到用户的身边 互联网的迅速快捷为网页信息的传递 提供了前所未有的传播捷径 嘰觐詿缧铴嗫偽純铪锩 更新及时 网页发布后 最终结果仍然是以电脑数字化的形式出现的 所以信息的堆减和形 7 式的调整都非常方便 设计人员可以在全部网页传递到主机上之后 对其中的编排 色彩等做相应的调整 以达到最好的视觉效果和传达效应 此外由于网页信息传达所 具备的交互性特点 使得网页信息的发布成为不断更新的循环周期 而网页设计作品 的发布也并不意味着设计的结束 网页设计人员必须根据用户的反馈信息和网站各个 阶段的经营目标 配合网站不同时期的经营策略 经常的对网页进行定期或不定期的 调整和修改 熒绐譏钲鏌觶鷹緇機库 不受时间 地域的限制 网络信息的依托是 所有信息一旦进入互联网 都处于同一时间 和空间内 不再受地域和时间的限制 网页这一与生俱来的优势令其他传播媒介望尘 莫及 鶼渍螻偉阅劍鲰腎邏蘞 信息反馈及时 准确在互联网上信息反馈通过计数器 留言本 电子信箱及 对用户的跟踪系统来完成 相对于传统的市场调查而言 这种基于数字技术的信息反 馈更加及时 准确 有效和全面 纣忧蔣氳頑莶驅藥悯骛 网页设计中视觉传达的设计原则及方法 网页设计中视觉传达的设计原则及方法 网页主题明确 鲜明突出 网页设计中首先要解决的问题是主题的定位 所谓主题也就是网站的题材 定位 网站主题首先要明确建立网站的目的 这是从网站建设者的角度来考虑的 另一方面 应详细了解网站受众群体的基本情况 明确他们的需要 以确定网站为使用者所提供 的信息或经验 网站内的全部信息必须根据主题进行选择 鉴别和整理 信息传达的 目的性越明确 针对性越强 传达的成功率也会越高 网站主题明确后 设计的全过 程都要围绕这一主题展开 主题要做到鲜明突出 力求简洁 要点明确 尽量以简单 明确的语言和画面告诉大家本站点的主题 吸引对本站点有需求的人的视线 对于普 通用户也能留下一定的印象 在 上同行业的网站千千万万 浏览者常 常是走马观花 一带而过 只有极富特色 内容翔实的网页才能使其驻足阅读 颖刍莖蛺 饽亿顿裊赔泷 网页整体风格一致 形象统一 网站的主题和结构确定之后 要为之寻求适合的表现形式 做到形式与内容统一 应大体规划出 字体大小与字体种类 图片与文字的相互排列 对应位置 各大小标 题与文章段落的对齐方式 导览按钮与文字超链接的表现形式 基本的设计蓝图使所 有页面拥有前后一致的设计风格 设计其他页面时根据每页的具体情况稍做修改即可 8 形式的统一可以通过页面的构图 文字 色彩 图像的运用来实现 濫驂膽閉驟羥闈詔寢賻 设计目的明确 形式鲜明 网页形式是为内容服务的 但本身又有自己的独立性和艺术规律 这里所指的形 式是指网页设计的版式 构图 布局 色彩以及它们所呈现出的风格特点 无论设计 什么形式的网站 都应该有明确的设计目的 清晰的网页设计形式 因为网页设计的 目的就是为了更好的体现和传达网站的信息 使之更加形象 直观 更易于为用户所 接受理解 所以 不同内容的网页要用不同的形式来表现 比如 政府机构的网页形 式应简洁 庄重以体现机构的特点 而商业网站则可以根据不同的商品特征采取不同 的表现形式 而相对政府机构的严肃庄重的特点 则可以多一些活泼与自由 色彩也 可以更加丰富 文化艺术类网站的表现形式则更注重个性化的表现 銚銻縵哜鳗鸿锓謎諏涼 信息即时 更新及时 没人对过时信息有兴趣 所以资料一定要注意即时性 更新是互联网永恒不变的 主题 印在书面上的信息是不变的 而用户想看到的是最新的内容 如果用户每次都 只能看到与上次相同的内容 则会认为这个站点是永远不更新的 从而不会再次访问 该网站 网页更新包括内容和形式两个方面 在保持页面统一性和连续性的前提 下 经常更新内容 变换新的表现形式 有利于引起新的视觉刺激 吸引更多的视觉 注视 增加访问量 也就是说 网页尽量要在每天发生一些新的变化 总是有新的内 容出现 但是究竟哪些内容是更新的重点 并不是随意确定的 要通过分析调查来访 者的数量和所关心的内容的倾向来决定 当然 更新的内容也需要在醒目的位置将更 新内容的简要通知告诉给用户 挤貼綬电麥结鈺贖哓类 第 章分析三色幼儿园网站版式视觉效果第 章分析三色幼儿园网站版式视觉效果 分析网站视觉效果 分析网站视觉效果 结构清晰 三色幼儿园网站整个设计可以说是比较简单的 没有过多的装饰 也没有复杂的 结构 给人的感觉就是清新明了 网站内容一目了然 不会让人产生迷惑 初来三色 幼儿园网站的用户可以完全按照自己的理解来进行操作而不会产生错误 在这一点上 是十分重要的 来三色幼儿园网站的用户 都是查找孩子在校的相关信息的 如果网 站的设计不能做到让用户感觉清楚明白的话 就会造成用户的大量流失 因为没有人 会希望在理解一个网站上浪费太多的时间 网络上的资源非常多 如果在使用网站之 前还要先学习如何使用该网站的结构 相信有不少用户会去其它网站查找自己所需的 9 资源 选择放弃浏览该网站 赔荊紳谘侖驟辽輩袜錈 人性化设计 用户在线咨询说到该公司的人性化设计是很有特色的 这也许因为这是一家商业 公司 他的人性化设计才体现了他商业的特点 在打开公司网站我们就可以看到在网 站的最左边有一长列的登录图标 这些头像是公司的各个重点产品 及不同孩子的个 人的学号 它不像其他网站的注册号 它不需要查找注册号 只要用户输入自己孩子 的学号 点击它上面的头像就可以与对应的产品及部门联系了 不但如此 它还町随 页而的滚动 和页面的变换而变动 无论用户在页面的什么地方和什么页面遇到问题 都可以与相关责任人联系 塤礙籟馐决穩賽釙冊庫 吸引人 推荐产品公司网站具有其独特的吸引人的地方 首先就是其简洁明快的首页 整 个页面使用蓝色作为毛色调 让人在浏览的同时 会有一种放松感 整个页面没有过 多花峭的东西 每一个版块都很明确在指导浏览者将看到的内容 在内容的布置方面 三色幼儿园网站做的样尽心尽力 首页上首先会吸引人的注意力的就是三色幼儿园网 站的 推荐产品 版块 在整个首页上 都是采用小的图片来点缀的方式 这就使得 其在这众多小图片中显得十分抢眼 这个版块使用了动态展示 几个产品在这一版 块一段时间内币段回放 以不同的产品的亮点吸引用户 整个首页主体的分栏布局也 十分简单明了 每一个分栏区都使用了不同的背景色以与其它分栏区别开来 但同时 背景颜色的选取又十分地恰到好处 没有让人产生突兀之感 让人看得十分舒服 在 对内容及版式的布局方面 三色幼儿园网站做到以用户方便为主 按 般网站的模式 将分类放在了 的下方 让用户能够直接了解三色幼儿园网站的全部内容 也 可以让用户卜分方便地选择自己感兴趣的版块进行浏览和操作 来三色幼儿园网站的 用户一般都是为了浏览三色幼儿园网页中的自家宝贝相关资料 因此 三色幼儿园网 站在首页上就将三色幼儿园网页中所有的自家宝贝资料分类别列好 首页左侧的导航 栏就首先让浏览产生了一个好的印象 对于想获取自家宝贝资料的用户 三色幼儿园 网页具有其自己独特的吸引力 裊樣祕廬廂颤谚鍘羋蔺 首页的简洁明了 不拖泥带水 首页各版块的更新都是实时的 不会存在有过时信息的停留 用户由三色 幼儿园网站首页上所得到的信息都是最新的 仓嫗盤紲嘱珑詁鍬齊驁 操作的人性化 对于一般用户经常用到的操作 三色幼儿园网站都十分细 10 心地将其列于首页的左侧 免去了三色幼儿园网站用户一层层寻找自己想要进行的操 作的多余时间 绽萬璉轆娛閬蛏鬮绾瀧 产品量较多 对于公司网站来说 产品量的大小直接影响到用户 的多少 如果用户多次在网站中无法找到自己想要的资料 他就会放弃该网站 而如 果在网站中总是可以找到自己想要的资料 那么 如果网站遇到不能找到用户想要的 信息 用户会放弃浏览该站 因此 产品量的多少对用户来说 是十分重要的 虽 然该公司的产品信息较多 但有些信息不全的情况 这是该网站需要加强的地方 由 以上的分析来看 就三色幼儿园网站一个教育网站 能做到这么多的功能基本满足三 色幼儿园网站满足家长们的一般需求 接下来我们从设计的角度来分析及实现网站 骁 顾燁鶚巯瀆蕪領鲡赙 首页版式分析 首页版式分析 版式指的是浏览器看到的完整的一个版面 可以包含框架和层 因为每不人的显 示器分辨率不同 所以同一个版面的大小可能出现不同尺寸 而布局 就是以最适合 浏览的方式将图片和文字排放在版面的不同位置 由于网站性质 内容 使用对象等 有所不同 网页布局的形式也是千差万别的 基本的构图形式是 版面由上至下依次 安排 网站名称和标识 版面标题 版面内容 脚注等 瑣钋濺暧惲锟缟馭篩凉 一般版面左侧通常设置为导航部分 这样做的目的一方面是提供与其他版面的链 接 另一方面也是为了减小右部版面内容区的宽度 以使每行文字的长度适合阅读 当然在实际的设计过程中 需要根据实际的情况来设定导航条的位置 其中包括考虑 用户的生理和心理机能的限制 版式布局的模式一个企业网站一般要完成 树立现 代企业形象 增值企业无形资产 宣传企业 创造销售机会 加强客户沟通 宣传企业产品 通过电子营销可以减少环节 减少人员 节约费用 降低成本 有利于提高营销效率 有利于了解顾客的意见 建立良好的顾客关系 有利 于改善服务等功能 鎦诗涇艳损楼紲鯗餳類 首页版式的视觉传达理念分析 要实现网站的以上功能根据视觉传达的理念要符合用户的视觉路径一般 从上到 下 从左到右 好的视觉设计路径应该是顺应这样的用户习惯 当然 下图的视觉路 径图并非绝对的 浏览习惯因人而异 用户习惯视觉路径因为人们从接触信息以来 信息的呈现就是以方块式存在 报纸 书 单个字成点 一行字成线 一段字成面 而这个面当然是以方形呈现的效率最高 网站的视觉设计大部分其实都是在拼方块 11 网站中的方块能很好地引导用户的视觉路径 用户可以通过区块来分辨这个区域的信 息是否是自己需要的 从而可以迅速缩小范围细致寻找或者浏览下一个区块 视线经 过的所有关注点可以连接成一条完整的路径 即视觉路径 视觉路径的形成是由人类 的视觉特性所决定的 往往会体现出比较明显的方感 使整个运动趋势有一个主旋律 受生理结构限制 人眼只能产生一个焦点 不能同时把视线停留在两处或更多的地方 我们可以做的只是依照一定的顺序浏览观察 心理学的研究表明 在一个平面上 上 半部让人轻松和自在 下半部让人稳定和压抑 而左半部让人轻松和舒展 右半部让 人局限和拘谨 因此 人们的视觉习惯于从左向右看 从上向下看 视觉注意力上部 比下部强 左侧比右侧强 这样左上部和中上部被视为 最佳视域 也就是最优选的 地方 栉缏歐锄棗鈕种鵑瑶锬 1 首页版式设计实现 基于以上的分析 一个企业网站首页必须有两站 网址公司名 产品 客服行业信息等一系列元素 根据这些元素的属性的相关性和重要性的不同我们首先 使用 软件把首页划分成以下几个方块 各个方块完成了同信息的 一个分类 信息的分类使其能更直观的将用户需要的信息传递给他们 整个网站的视 觉流程就是 企业信息板块 导航板块 用户板块产晶及新闻扳块 网站用户大部分都是这样的视觉流程 用户一进企业网站看到的就是企业的 企业的名字 接下来的导航板块 用户就可以立即找到自己感兴趣的板块 或栏目 不会让用户因找不到自己感兴趣的内容而离开阿站 接下来 这个一般都是企业的形象广告或是新品广告 用户板块及最后的产品及新闻板块主要 针对的网站的老用户了 因为老用户都在熟悉了网站之后都会直奔主题 看网站里的 内容了 根据以上的首页功能划分意图 通过 网页设计软件 制作出详细的设计 如图 所示 是一个很酷的网 页设计软件 它包括可视化编辑 代码编辑的软件包 并支持 等特性 辔烨棟剛殓攬瑤丽阄应 而且它还能通过拖拽从头到尾制作动态的 动画 支持动态 的设计 使得页面没有 也能够 在 和 浏览器中正确地显示页面的动画 同时它还提供了 自动更新页面信息的功能 还采用了 12 技术 这项技术使得网页在 和 代码编辑器 之间进彳亍自由转换 句法及结构不变 这样 专业设计者可以在不改变原 有编辑习惯的同时 充分享受到可视化编辑带来的益处 最 具挑战性和生命力的是它的开放式设计 这项设计使任何人都可以轻易扩展它的功能 网页效果蹦中的视觉焦点标志是一个企业 一个团体的概念化图案 代表了企业或者 行业团体的形象 其特点主要是 造型简沾明了 视觉冲击力强 在网页设计中也会 出现在显要的位置 与企业名称以共处 是网页设计中视觉版面上的一个重要组成部 分 三色幼儿园网站的标志放在整个版面的最上面 用户一进入网站 首先看到的就 是企业的标志 其视觉效果非常突出 形成第一视觉焦点 产品展示栏动态显示 引 起用户的注意 形成第二视觉焦点 整个版式是一个从上到下的视觉路径 峴扬斕滾澗辐滠 兴渙藺 2 主要前台页面版式 前台的主要页面有产品页 新闻页 用户页面等 这些页面构成了一个企业网站 的主要功能 主要的功能页面是片 户点击率最高的页面 它的版式的样式是用户对 网站的一个整体视觉印象詩叁撻訥烬忧毀厉鋨骜 主要前台页面版式分析 视觉传选设计讲究设计的表现性 功能性 蒙征性 而这些主要功能的页面构成 了用户对网站的一个整体视觉感受 我们把这些页面的表现性统一起来 给片 户一 个统一的视觉感受 则鯤愜韋瘓賈晖园栋泷 主要前台版式设计实现产品页通过 W 网页设计软件制作出详 细的设计 用户页通过 网页设计软件制作出详细的设计 胀鏝 彈奥秘孫戶孪钇賻 3 主要后台页面版式网站后台就是可以对整个网站进行日常维护 日常更新等操作 的平台 登陆页 产品管理页 新闻管理页是一个企业网站后台管理的主要页面 是 网站管理员对其进行更新维护的 鳃躋峽祷紉诵帮废掃減 主要后台页面版式分析 网站的后台不同于网站的前台 需要体现企业的整体形象 但就其功能的复杂性 一个好的版式设计是实现网站快捷方便管理的关键 我们把后台页面的导航页和管理 页整合到一个 的页面 当进入后台就进入这个 面 通过导 航页的导航调用不同的管理页 图 后台页面板块划分管理导航栏和管理页左 13 右分布 视觉路径从左到右 符合人众的视觉刊惯方便了网站管理者对网站的管理 板块划分对视觉路径的引导稟虛嬪赈维哜妝扩踴粜 主要后台页面版式实现 后台登陆页足网站管理员登陆管理页面的窗口 版面定位应简洁 无需做过多的 美化设汁 过多的美化设计反而影响网站响应的速度 简洁 明晰的设计反应速度 更快 方便管理员登陆 陽簍埡鲑罷規呜旧岿錟 后台登陆页效果图产品管理贝需对各类产品以综合性管理 内容繁多复杂 简洁 明晰的表格把产品的各种内容加以区分 实现网站管理员对产品的快捷管理 沩氣嘮戇苌 鑿鑿槠谔應 第 章三色幼儿园网站色彩第 章三色幼儿园网站色彩 教育网站色彩分析 教育网站色彩分析 色彩在网页设计中也占有非常重要的地位 它是调适阅览者视觉心理 引起人们 注意的主要手段 由于网页设计是通过计算机来实现的 就要考虑计算机色彩系统的 功能 计算机色彩系统中提供的三原色为红 绿 蓝 通过这三种色光的混合 创造 出了千变万化的富有情趣 而又能引起视觉兴奋的色彩来 以达到网页吸引注意 传 达信息 赢得客户的目的 钡嵐縣緱虜荣产涛團蔺 色彩的特性 色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响 颜色能 影响脑电波 脑电波对红色反应是警觉 对蓝色的反应是放松 冷色与暖色是依据心 理错觉对色彩的物理性分类 对于颜色的物质性印象 大致由冷暖两个色系产生 冷 色与暖色除去给我们温度上的不同感觉以外 还会带来其它的一些感受 例如 重量 感 湿度感等 色彩本身是没有灵魂的 它只是一种物理现象 但人们却能感受到色 彩的情感 这是因为人们长期生活在一个色彩的世界中 积累着许多视觉经验 一旦 知觉经验与外来色彩刺激发生一定的呼应时 就会在人的心理上引出某种情绪 红色 是强有力的色彩 是热烈 冲动的色彩 代表热情 活泼 热闹 温暖 幸福 吉祥 橙色是一种富足的 快乐而幸福的色彩 代表光明 华丽 兴奋 甜蜜 快乐 黄色 象征着照亮黑暗的智慧之光 又象征着财富和权利 代表明朗 愉快 高贵 希望 绿色是一种宁静 平和的色彩 代表新鲜 平静 和平 柔和 安逸 青春 蓝色是 博大的色彩 是永恒的象征 代表深 永恒 沉静 理智 诚实 寒冷 白色代表纯 洁 纯真 朴素 神圣 明快 灰色代表忧郁 消极 谦虚 平凡 沉默 中庸 寂 14 寞 黑色代表崇高 坚实 严肃 刚健 粗莽 懨俠劑鈍触乐鹇烬觶騮 网页色彩的调和基本法则 我们来看看怎样调和色彩 调和色彩的基本法则是 页面各部分色彩一定要构成 适当的色彩关系 组成统一的色调 表达某种情绪 这才会有自己的风格 怎样才能 做到这一点呢 确立主调统率页面的色彩关系 当页面上有几个色块时 必须以其中 一块颜色为主 而且其面积 明度 位置大于其它色块 不但要善于运用原色 而且 还要善于运用金 银 黑 白和灰这些中性色进行缓解 中和 以烘托出主题 增加 共同点 会使设计更趋向协调 拉开距离 目的是为了主次分开 不要堆成一堆 别 人看了都觉得讨厌 可有方法 或者从平面拉开 或者从纯度和明度削弱 两色 一深一浅 同时变化原有明度 纯度对比 使一色鲜艳而一色朦胧 同时变 化原有纯度謾饱兗争詣繚鮐癞别瀘 网页色彩设计存在的问题 打开一个网站 给用户留下第一印象的既不是网站丰富的内容 也不是网站合理 的版式布局 而是网站的色彩 色彩对人的视觉效果非常明显 一个网站设计成功与 否 在某种程度上取决于设计者对色彩的运用和搭配 因为网页设计属于一种平面效 果设计 在排除立体图形 动画效果之外 在平面图上 色彩的冲击力是最强的 它 很容易给用户留下深刻的印象 因此 在设计网页时 我们必须要高度重视色彩的搭 配 呙铉們欤谦鸪饺竞荡赚 目前一些网页往往使用多种颜色 使网页效果看起来色彩丰富 尽管有些网页内 容不多 设计者仍然将风格不同 颜色各异的图片 文字等放在页面上 其初衷是将 网页做的更具有视觉冲击力 更具有设计特点 但是结果却是适得其反 色彩的过度 使用使页面缺乏统一协调感和内在美感 而更直接的结果是这种过渡的色彩包装干扰 了用户浏览网页的效率 以及网页的下载速度 另外 一些网页色彩的使用没有考虑 到人的视觉因素的制约 如采用深色并带有丰富色彩的图片作为页面背景 严重干扰 了用户识别信息主体的能力 还有一些网站采用的色彩并没有根据相应的网站信息性 质来设计 这样网站页面没有独特的风格和鲜明的个性 当然也不会给用户留下深刻 的印象 莹谐龌蕲賞组靄绉嚴减 网页色彩的设计原则和方法 网页色彩设计的原则 因为色彩与人的心理感觉和情绪有一定的关系 所以我们可以根据这一点在设计 15 网页时形成自己独特的色彩效果 给浏览者留下深刻的印象 色彩搭配既是一项技术 性工作 同时它也是一项艺术性很强的工作 因此 设计者在设计网页时除了考虑网 站本身的特点外 还要遵循一定的艺术规律 从而设计出色彩鲜明 性格独特的网站 麸肃鹏镟轿騍镣缚縟糶 特色鲜明 一个网站的用色必须要有自己独特的风格 这样才能显得个性鲜明 给浏览者留 下深刻的印象 搭配合理 就是说色彩的采用要符合相应的网站内容 比如女性网站就要采用柔和的色彩等 网页设计在遵从艺术规律的同时 还考虑人的生理特点 色彩搭配一定要合理 给人 一种和谐 愉快的感觉 避免采用纯度很高的单一色彩 这样容易造成视觉疲劳 納畴 鳗吶鄖禎銣腻鰲锬 讲究艺术性 网站的色彩的采用 也要体现设计的艺术特点 体现网站的文化内涵 网站设计 也是一种艺术活动 因此它必须遵循艺术规律 在考虑到网站本身特点的同时 按照 内容决定形式的原则 大胆进行艺术创新 设计出既符合网站要求 又有一定艺术特 色的网站 風撵鲔貓铁频钙蓟纠庙 网页色彩设计的基本方法 选择好适合网站性质的色彩 才能成功推出优秀的网页设计作品 网页中单色的使用 尽管网站设计要避免采用单一色彩 以免产生单调的感觉 但通过调整色彩的饱 和度和透明度也可以产生变化 使网站避免单调 另外黑色也是一种特殊的颜色 如 果使用恰当厂设计合理 往往产生很强烈的艺术效果 灭嗳骇諗鋅猎輛觏馊藹 网页中邻近色的使用 所谓邻近色 就是在色带上相邻近的颜色 例如绿色和蓝色 红色和黄色就互为 邻近色 采用邻近色设计网页可以使网页避免色彩杂乱 易于达到页面的和谐统一 铹 鸝饷飾镡閌赀诨癱骝 网页中对比色的使用 对比色可以突出重点 产生了强烈的视觉效果 通过合理使用对比色能够使网站 特色鲜明 重点突出 在设计时一般以一种颜色为主色调 对比色作为点缀 可以起 16 到画龙点睛的作用 攙閿频嵘陣澇諗谴隴泸 网页中背景色的使用 背景色一般采用素淡清雅的色彩 避免采用花纹复杂的图片和纯度很高的色彩作 为背景色 同时背景色要与文字的色彩对比强烈一些 趕輾雏纨颗锊讨跃满賺 网页中色彩的数量 网站用色并不是越多越好 一般控制在三种色彩以内 通过调整色彩的各种属性 来产生变化 教育网站设计实现 教育网站设计实现 教育网站对用色的要求 教育网站用色的问题 其实不能一概而论 以前时候企业用的最多的是蓝色 因 为蓝色象征了深邃 理性 给人以商业合作的值得信赖感 同时蓝色本身不容易给视 觉带来疲劳 便于长时间浏览 所以蓝色用的很普遍 但是现在随着越来越多的类似 企业网站的涌现 企业更关注自身文化 理念 价值与产品类型 风格的个性 所以 教育网站用色也越来越丰富 象征活力与热情的红色 开放性与随和的橙色 高贵深 邃的黑色 各样的颜色都为教育网站采纳 总之 能够最好的传达教育和教育价值 理念的颜色 就是该网站的最佳颜色 但是一个学校的 标注色只有一种 我们不 可能为了网站的标新立异而去改变一个学校的 既然企业网站对用色有如此多的 要求 显然一种风格是满足不了吸引那些看惯了各类企业网站的用户的要求 因此我 们设计多种的颜色风格 通过网站后台来实现网站颜色风格的改变 夹覡闾辁駁档驀迁锬減 企业网站用色的实现方案 企业网站用色方案多变 而 的优势是 采用导入的形式 可以有效给 网页减肥 从而提高网页的访问速度网站的访问速度提高了 容与表现分离 有了 网页的内容 与表现就可以分开了表现的统 可以使网页的表 现非常统一 并且容易修改 同时用 可以减少网页的代码量 增加网页的浏览 速度 减少硬盘容量 下列是三色幼儿园配色后台管理方案 通过这种方式 网站管 理者可以通过配色模板来实现在线修改整个网站的色彩视觉效果 满足企业网站在不 同时期的色彩搭配需求 满足用户不同时期的心理需求 防止审美疲劳 视絀镘鸸鲚鐘脑钧 欖粝 表 一 配色模板管理表 配色模板管理 17 管理导航 配色模板管理酋页 添加配色模板 配色模板导出 配色楼板导入 模板说明 红色说明为站本站已使用了的 选拌模板名称 效果图模板类型操作 黄色系统提供修改模板设置 浅绿系统提供修改模板设置 灰色系统提供修改模 板设置 橙色系统提供修改模板设置 蓝色系统提供修改模板设置 浅灰系统提供修 改模板设置 黄色系统提供修改模板设置 淡红系统提供修改模板设置 绿色修改模 板啦置 偽澀锟攢鴛擋緬铹鈞錠 淡绿系统提供修改模板设置 青色系统提供修改模版设置 黑色系统捉供系统提供修 改模扳设置 三色幼儿园网站用色效果 三色幼儿园是重庆地区的一家知名幼儿园 拥有多种教育模式 该公司网站展示 的主要是孩子的成长信息 同时也是维护老师和家长沟通交流的平台 网页发布后 最终结果仍然是以电脑数字化的形式出现的 所以信息的堆减和形式的调整都非常方 便 设计人员可以在全部网页传递到主机上之后 对其中的色彩等做相应的调整 以 达到最好的视觉效果和传达效应 緦徑铫膾龋轿级镗挢廟 此外由于网页信息传达所具备的交互性特点 使得网页信息的发展成为不断更新 的循环周期 而网页设计作品的发布也并不意味着设计的结束 网页设计人员必须根 据用户的反馈信息和网站各个阶段的教学目标 配合网站教育教学策略 经常的对网 页进行定期或不定期的调整和修改 根据教师 家长的需求 设计出符合孩子的色彩 方案 根据需要及州更换色彩效果 满足家长的多样化需求 騅憑钶銘侥张礫阵轸蔼 类似色相较于同类色色彩之间的可搭配度要大些 颜色丰富 富于变化 以上页 面主要取的是色环中的橙色 橙色通过明度 纯度 面积大小的不同实现变化和统一 的 虽然主色调的橙色在页面中使用面积最大 但是我们看到由于它的明度非常高 饱和度就降低了 因此在页面中处在不明显的角色 而绿色的纯度最高 且使用面积 次之 页面显示较显眼 因此用于次级导航位置上 整个页面主次的视觉引导分明 不是每种主色调都是极其显眼的位置 通常多扮演着用于突出主体的辅助性配角 而 重要角色往往在页面中用的份量极少 却又起到突出主体的作用 疠骐錾农剎貯狱颢幗騮 自谓辐色调点暗色 18 同种色被称为最稳妥的色彩搭配方法 给人的感觉是相当协调的 它们通常出入 于同一个色调里 通过明度的黑白灰或者纯度的不同束硝微加以区别的 产生了极其 微妙的韵律美 为了不至于止整个页面呈现过于单调平淡 有些页向则是加入极葜小 构其他颜色做点缀 该页面使用了同种色系氅的橙色及不同色调不同色相的橙色 通 过明度 纯度的微妙变化产生缓和的节奏美感 镞锊过润启婭澗骆讕瀘 网站色彩效果主要分为三种 主色调 辅色调点暗色 背景色 该网页背景使用了纯白的效果 增加了视觉空间感 在导航栏 内容区域 信息 板块的各个大标题块 都使用了不同的技术手法来表达 产生孩子们简洁 大方的视 觉效果 统一了整个页面的设计语言 也是区别于其他网站页面的个性体现 达到让 人印象深刻的目的 纯色能够柔和视觉 增强空间感 体现节奏和韵律美感 统一整 个页面的目的 除了统一当然也可以起到变化页面视觉形式的作用 该设计语言可做 需要的时候适当的使用 榿贰轲誊壟该槛鲻垲赛 第 章网站文字第 章网站文字 网站文字分析 网站文字分析 网站文字分析不可否认的是 现在的网页设计还是以传递信息为主 因此文字在 网页中的所占比重还是最大的 并且文字可以避免图片 色彩有时产生的传递信息不 明以及引发歧义的现象 以其最佳的直观传达方式使浏览者能顺利 方便地接受信息 网页中的文字主要有两种类型 一是具有提示和引导功能的文字 如网页中的标题 广告和栏目名称等 另一种是篇幅较长的阅读性材料和说明性文字 如网络文章的正 文 主题内容的详细说明等 从功能上看 前者在于诱发视觉的关注 而后者则强调 易读性 因此 设计前一定要弄清其文字的主要功能 使信息的传达目的得以有效实 现 对于很多的网站来说 字在整个网站的内容中占了 以上甚至更多 或者换 个角度上说 网站可以没有颜色 没有图片 但唯独不能没有文字 先看看网站以外 的中文字体设计 英文的正文字体有很多可以选择 但中文的正文字 总的来说就两 种 宋体和黑体 在传统的版式设计中 设计师们都喜欢做英文的排版 为什么 从 视觉上来看 英文的组合很容易形成线和面的关系 而且字母有节奏感 比如 这三个字母放一起有高矮区别 中文字相对来说 单调 孤立 不流畅 企业网站的 19 字体设计相对于其他网站字体设计 应考虑企业 系统的字体设计 这更能使用户 对企业产生更生的视觉形象 但企业的 字体一般不同于系统能显示的标准字体 企业网站的文字有的是导向性的标题 链接 栏目等 这些我们可以把它做成图片 而网站内容性的文字则可以通过 实现 一个网站的用户体验高低是由页面各元 素的设计决定的 如表单 网页文字 功能等 网页文字是网页中所占分量最大的要 素 所以其设计得好坏直接整个页面的表现 说网页文字优化是整个网站用户体验的 基础一点都不为过 邁茑赚陉宾呗擷鹪讼凑 文字的简洁