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