1、1天津中德职业技术学院信息与通信学院 2016 届学生毕业论文奥特莱斯家居网站设计完成期限：2015.09.262016.04.25班级 13 信安 1 班 学生姓名 陈琬玲 指导教师 廖旭金 系主任签字 批准日期 2一、设计（论文）的原始依据：此次论文的灵感来源于我在培训期间的第一次完整的网站任务，当时接到任务的我很是激动，所以我想以这篇论文的形式记录下自己设计生涯的第一次。也因为是第一次也有很多的不足，所以在论文最后对自己的这一次设计也进行了总结性的评价。二、设计（论文）内容和要求：此次毕业设计的内容是为奥特莱斯家居搭建一套网站，网站整体要求体现家居的高端，页面内容不宜太凌乱，可效仿国外网
2、站的布局风格，做到简约而又高端。要求首页要有一级导航栏，要有所有产品的分类栏。首页中要有公司品牌介绍的模块。底部要有链接导航和第三方登录平台的链接。3目 录第一章 市场调研 .51. 市场调研 .5第二章 软件与原理简介 .72.1 平面设计软件 PS、AI .72.2 交互原理与规则 .102.3 交互原型设计软件 AXURE RP 简介 .16第三章 设计实践 .173.1 设计立意 .173.2 网站结构规划 .173.3 网站详细设计 .183.3.1 首页设计与制作 .203.3.2 品牌介绍页制作 .253.3.3 产品展示页制作 .273.3.4 加入我们页制作 .283.3.5
3、 客户服务页制作 .303.4 创作总结 .32第四章 设计自评 .34参考文献 .354摘 要计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大，尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，由于以上的优势，各类网站如雨后春笋般的出现，奥特莱斯公司网站也不例外。毕业设计使用了 Photoshop、AI、Axure RP 制作了奥特莱斯企业网站的界面。论文阐述了奥特莱斯网站的设计制作过程，主要包括市场调研、软件与原理简介、设计实践、结束语四个部分，其中市场调研主要是通过调研知名家居网站了解家居网站建站的特点和优缺点、软件与原理简介
4、主要介绍设计网站所使用的 Photoshop、AI、Axure RP 三个主要软件、设计实践主要具体介绍了奥特莱斯网站建站具体步骤和设计思路、结束语主要总结设计作品后的心得体会。关键词：网页设计；企业网页；交互设计5第一章 市场调研关于本次设计，设计思路来源于高端家居，设计理念参考宜家家居，汲取了多家家居网站的优点，将宣传产品、树立品牌、互动分享作为建站的重点，也实现了企业对外开放的最大程度，不仅给企业带来了良好的社会反响，而且有助于奥特莱斯企业家居知识和企业文化的推广，实现了品牌推广和产品推广的双赢局面。1. 市场调研在设计家居品网站之前，通过对大量企业网站浏览及时调查研究，发现和比较了几家
5、比较典型和知名的家居名企，总体定格网站设计思路，总结了各种企业网站的特色和制作，以宜家家居官网为例，其界面如图 1.1 所示。图 1.1 宜家家居官网首页宜家家居作为家居的行业老大，也是很多家居企业仿效的对象，它的页面6设计简单、大气。整体以白色为主，突出体现宜家家居的简约而不简单。整体的大块性设计把需要强调的东西强调出来。而且，关于细节的是大图块上的文字不是呆板的呆在那里，而是使用了微交互的方法，是访问的用户在体验方面时刻是保持着新鲜感的。宜家家居主页虽然用大幅内容放置产品，但是也突出企业文化、企业品质和社会责任，这样会让更多的朋友看到企业会放心购买。宜家家居来自创新和服务。客户就是上帝，宜
6、家家居以公益和责任，突出企业文化。当然，在设计方面宜家家居的主色调有些太过白化，不够体现企业的宗旨；页面整体过于单调，过于强调整体感；主旨不够突出，最好将公司的宣传标语放在重点位置。“奥特莱斯”是英文 OUTLETS 的中文直译。其英文原意是“出口、出路、排出口”的意思，在零售商业中专指由销售名牌过季、下架、断码商品的商店组成的购物中心，因此也被称为“品牌直销购物中心”。奥特莱斯（Outlets）最早诞生于美国，迄今已有近一百年的历史。Outlets 最早就是“工厂直销店”专门处理工厂尾货。后来逐渐汇集，慢慢形成类似 Shopping Mall 的大型 Outlets 购物中心，并逐渐发展成为
7、一个独立的零售业态。虽然 Factory Outlet 这种业态在美国已有 100 年的历史，但真正有规模的发展是从 1970 年左右开始的。奥特莱斯（Outlets）目前需要一个完善的宣传网站，而制作网站的工具很多，如 AI, Photoshop 等等，毕业设计将借鉴宜家家居公司的网站的优点，避免其不足，用 AI, Photoshop 为奥特莱斯做一个有特色的企业网站，让人们进一步了解其家居用品、企业文化、企业宗旨。7第二章 软件与原理简介在利用软件方面，我主要利用了 Photoshop、AI、Axure RP 三个软件的开发2.1 平面设计软件 PS、AIAdobe Photoshop，简
8、称“PS”，是由 Adobe Systems 开发和发行的图像处理软件。Photoshop 主要处理以像素所构成的数字图像,是对已有的位图图像进行编辑、加工、处理以及运用一些特殊效果。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。PS 有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及,是专业设计人员的首选软件。Photoshop 是图像处理软件，其优势不在图形创作。Adobe Photoshop 的适用范围很多，主要有：（1）专业测评：Photoshop 的专长在于图像处理，而不是图形创作。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处
9、理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形。（2）平面设计：平面设计是 Photoshop 应用最为广泛的领域，无论是图书封面，还招帖、海报，这些平面印刷品都需要 Photoshop 软件对图像进行处理。（3）广告摄影：广告摄影作为一种对视觉要求非常严格的工作，其最终成品往往要经过 Photoshop 的修改才能得到满意的效果。（4）影像创意：影像创意是 Photoshop 的特长，通过 Photoshop 的处理 可以将不同的对象组合在一起，使图像发生变化。（5）网页制作：网络的普及是促使更多人需要掌握 Photoshop，因为在制作网页时 Photoshop 是必不可
10、少的网页图像处理软件。（6）后期修饰：在制作建筑效果图包括许多三维场景时，人物与配景包括场景的颜色常常需要在 Photoshop 中增加并调整。（7）视觉创意：视觉创意与设计是设计艺术的一个分支，此类设计通常没8有非常明显的商业目的，但由于他为广大设计爱好者提供了设计的空间，因此越来越多的设计爱好者开始学习 Photoshop，并进行具有个人特色与风格的视觉创意。（8）界面设计：界面设计是一个新兴的领域，受到越来越多的软件企业及开发者的重视。在当前还没有用于做界面设计的专业软件，因此绝大多数设计者使用的都是该软件。Photoshop 的界面组成，如图 2.1 所示。图 2.1 Photosho
11、p 界面组成图Adobe illustrator，简称“AI”，是由 Adobe Systems 开发和发行的矢量图形软件。Adobe illustrator 作为全球最著名的矢量图形软件，以其强大的功能和体贴用户的界面，已经占据了全球矢量编辑 软件中的大部分份额。据不完全统计全球有 37%的设计师在使用 Adobe Illustrator 进行艺术设计。尤其基于 Adobe 公司专利的 PostScript 技术的运用，Illustrator 已经完全占领专业的印刷出版领域。无论是线稿的设计者和专业插画家、生产多媒体图像的艺术家、还是互联网页或在线内容的制作者，使用过 Illustrator
12、 后都会发现，其强大的功能和简洁的界面设计风格只有 Freehand 能相比。最大特征在于钢笔工具的使用，使得操作简单功能强大的矢量绘图成为可能。它还集成文字处理、上色等功能，不仅在插图制作，在印刷制品（如广告传单、小册子）设计制作方面也广泛使用，事实上已经成为桌面出版（DTP）业界的默认标准。它的主要竞争对手是 Macromedia Freehand；但是在 2005 年 4月 18 日，Macromedia 被 Adobe 公司收购。9所谓的钢笔工具方法，在这个软件中就是通过“钢笔工具”设定“锚点”和“方向线”实现的。一般用户在一开始使用的时候都感到不太习惯，并需要一定练习；但是一旦掌握以
13、后能够随心所欲绘制出各种线条，并直观可靠。它同时作为创意软件套装 Creative Suite 的重要组成部分，与兄弟软件 位图图形处理软件 Photoshop 有类似的界面，并能共享一些插件和功能，实现无缝连接。同时它也可以将文件输出为 Flash 格式。因此，可以通过illustrator 让 Adobe 公司的产品与 Flash 连接。它是一款专业图形设计工具，提供丰富的像素描绘功能以及顺畅灵活的矢量图编辑功能，能够快速创建设计工作流程。借助 Expression Design，可以为屏幕/网页或打印产品创建复杂的设计和图形元素。 它支持许多矢量图形处理功能，拥有很多拥护者，也经历了时间
14、的考验，因此人们不会随便就放弃它而选用微软的 Expression Design。提供了一些相当典型的矢量图形工具，诸如三维原型（primitives）、多边形（polygons）和样条曲线（splines），一些常见的操作从这里都能被发现。其外观颜色不同于 Adobe 的其他产品，Design 是黑灰色或亮灰色外观，这种外观上改变或许是 Adobe 故意为之，意在告诉用户这是两个新产品，而不是原先产品的改进版。Adobe Illustrator 最大特征在于贝赛尔曲线的使用，使得操作简单功能强大的矢量绘图成为可能。它还集成文字处理，上色等功能，不仅在插图制作，在印刷制品（如广告传单，小册子）
15、设计制作方面也广泛使用，Macromedia Freehand，但是 2005 年 Macromedia 已经被 Adobe 公司合并。10图 2.1 Illustrator 界面组成图2.2 交互原理与规则简单地说就是，创造给用户人机交流的产品，在使用网站，软件，消费产品，各种服务的时候（实际上是在同它们交互），使用过程中的感觉就是一种交互体验。交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域
16、多背景人员的沟通。 交互与我们日常生活息息相关，如当下的许多网页，进入网站首页之后看到的界面和你想要得到的信息被很清楚的展现出来，这就是交互。2.3 交互原型设计软件 axure rp 简介Axure RP 是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国 Axure 公司；RP 则是 Rapid Prototyping（快速原型）的缩写。Axure RP 是美国 Axure Software Solution 公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或 Web 网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理1 。
