网站的交互性设计.docx

《网站的交互性设计.docx》由会员分享，可在线阅读，更多相关《网站的交互性设计.docx（16页珍藏版）》请在冰豆网上搜索。

网站的交互性设计

毕业论文（设计）

论文（设计）题目：

网站的交互性设计

目录

摘要1

ABSTRACT2

第1章前言3

第2章开发工具和运行环境4

2.1网站设计的基本知识4

2.2Dreamweaver简介4

2.3HTML简介4

2.4CSS简介5

2.5Photoshop简介5

2.6网站运行环境5

第3章网页布局与设计理念6

3.1网页布局6

3.1.1网页布局的基本知识6

3.1.2网页布局的基本概念6

3.2设计理念6

3.2.1特色UI设计介绍6

3.2.2创意设计7

3.2.3页面设计7

3.2.4色彩8

3.2.5思路8

第4章效果展示9

4.1Dreamweaver9

4.1.1首页9

4.1.2一级页面11

4.1Photoshop15

4.2.1首页15

4.2.2一级页面16

第5章网站的测试与维护17

第6章总结18

参考文献19

致谢20

摘要

在现代社会的需求之下，一种新兴的信息交流方式开始崭露头角并迅速获得了广大群众的支持——交互式网站。

交互设计致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点。

这次我们所设计的课题就是介绍一款手机浏览器——欧朋浏览器。

欧朋浏览器是一款全球流行的手机浏览器，体积轻小而功能强大，以简洁的界面设计和贴近中国用户的社会化应用为主要特色[1]。

在这次设计中设计制作的就是欧朋浏览器官方网站。

关键词：

Internet；交互设计；网站建设

ABSTRACT

Underthedemandofmodernsociety,anewwayofcommunicationisemergingandquicklyobtainthesupportofthemasses,interactivewebsite.

Interactiondesigniscommittedtounderstandtargetusersandtheirexpectations,tounderstandeachother'sbehaviorwhenusersinteractwiththeproduct,understandthepsychologicalandbehaviorcharacteristicsofthe"people"itself.Thistimewedesignthetopicistointroduceamobilephonebrowser-Europeanfriendsofthebrowser.Thefriendsofthebrowserisaglobalepidemicofmobilebrowser,lightandsmallvolumeandpowerful,withconciseinterfacedesignandclosetotheChinesesocialapplicationsasthemainfeatureoftheuser.Inthisdesignisthedesignofthefriendsofthebrowser'sofficialwebsite.

Keywords:

Internet;interactivedesign;Thewebsiteconstruction

第1章前言

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们生活、娱乐、学习等各个方面发挥着重要的作用，因此网站建设在Internet应用上的地位显而易见。

谈到联网的计算机，就能想到它百纳海川的资讯，可以在网络的世界里找到自己想了解到的，自己想探索到的新知识，但是要想了解到这些资讯我们需要借助到一个工具，这就是我们每一个人都熟悉的----浏览器。

技术的进步，离不开知识的传播。

时代的需求就是我们的责任，我们要抓住信息时代的脉搏，互联网上信息的查找又要通过浏览器的浏览来实现，这次我们所设计的课题就是介绍一款手机浏览器——欧朋浏览器。

本课题主要从获取良好用户体验方面研究网站的交互设计。

网站的页面与色彩搭配进行分析设计（页面色彩、图片的应用及版面策划）：

确定页面的整体一致性、美观性、观赏性和实用性并存。

该网站介绍了欧朋服务、分享、新闻中心、论坛、下载等系列内容的介绍，让人们可以更快更好的了解、认识并下载欧朋浏览器。

一个好的的网站通常要有以下几个方面的特点：

漂亮的设计、友好的界面、规范的结构以及充实的内容，另外还有一个不可忽视的关键就是良好的交互性[2]。

网站的交互性通常是给用户网页浏览过程中良好体验的一个非常重要的环节，满足用户的浏览需求，对用户的选择作出“及时”的响应，是交互性网站设计的关键[3]。

第2章开发工具和运行环境

一个网站的制作必须要有开发工具和运行环境，它们是一个网站组成的重要因素之一。

2.1网站设计的基本知识

网站界面：

也就是网站的外观、整体感觉、网站整体架构。

网站程序：

它代表网站的功能，技术含量。

静态网页：

在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。

动态网页：

动态网页是与静态网页相对应的，也就是说，网页URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形式，而以.asp、.jsp、.php、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号—“?

”[4]。

2.2Dreamweaver简介

Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。

它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具[5]。

Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。

或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。

无论用户习惯手工输入HTML（标准通用标记语言下的一个应用）源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使得用户设计网页和管理网站变得更容易。

2.3HTML简介

HTML（HyperTextMarkupLanguage），超文本标记语言，是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。

使用HTML语言可以在其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本[6]。

标记语言是一种基于源代码解释的访问方式，它的源文件由一个纯文本文件组成，代码中由许多元素组成，而前台浏览器通过解释这些元素显示各种样式的文档。

换句话说，浏览器就是把纯文本的后台源文件以赋有样式定义的超文本文件方式显示出来[7]。

2.4CSS简介

CSS是英语CascadingStyleSheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。

CSS能够真正做到网页表现与内容分离的一种样式设计语言。

相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言[8]。

级联样式表，它是用来进行网页风格设计的。

比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。

通过设立样式表，可以统一地控制HTML中各标志的显示属性。

级联样式表可以使人更能有效地控制网页外观。

使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力[9]。

2.5Photoshop简介

AdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的图像处理软件。

Photoshop主要处理以像素所构成的数字图像。

使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。

PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及[10]。

2.6网站运行环境

使用IE6.0以上版本，为最佳显示效果。

第3章网页布局与设计理念

页面布局：

对页面的文字、图形或表格进行格式设置。

包括字体、字号、颜色纸张大小和方向以及页边距等。

设计理念：

是设计师在空间作品构思过程中所确立的主导思想，它赋予作品文化内涵和风格特点。

优秀的设计理念至关重要，它不仅是设计的精髓所在，而且能令作品具有个性化、专业化和与众不同的效果[11]。

3.1网页布局

3.1.1网页布局的基本知识

首页的设计是一个网站成功与否的关键。

人们往往看到第一页就已经对你的站点有一个整体的感觉。

是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的“功力”了。

对访问者产生第一印象，要留下好的印象，必须干净整洁、颜色不能过于多、条理要清楚[12]。

3.1.2网页布局的基本概念

刚开始的时候，网页在我们面前是一张白纸，需要创造出自己的设计方案。

页面尺寸：

分辨率越高页面尺寸越大。

整体造型：

我们在设计网站的时候一定要注意整体造型，形象要是统一的。

图片、文本：

图片和文本是网页的两大构成元素，缺一不可，如何处理好图片和文本的位置成了整个页面布局的关键。

3.2设计理念

3.2.1特色UI设计介绍

图1天气图标

如图1所示：

画面呈现目前的日期，时间，天气及温度，文字及icon都是简单的白色线条构成，特别的地方在于背景的渐层不只是装饰用的，在渐层的上方颜色代表着是目前天空的颜色，白天晴朗时天空是白色的，当天空开始下雨或是接近晚上时，颜色就会慢慢的改变，下方的颜色则是代表温度，温度越高色系越暖，完全将呈现的信息可视化，最多可以新增4个地区，每个地区的天气一目了然。

图2图片图标

如图2所示：

深蓝的天空下，在一道微笑曲线的高光滑过下，永远绽放着一朵金黄色的向日葵，作为自然界太阳的象征，向日葵代表着乐观与阳光，这跟Apple制作的所有宣传中永远都会有一张幸福的笑脸出现在每一个角落的拍摄理念完全一致。

3.2.2创意设计

创意是整个网站中的灵魂所在，首先制作网站的时候，需要思考这个网站的亮点在哪里、要主要突出那个部分等等，这个过程就是创意设计，创意设计是网站的主要因素之一[13]。

3.2.3页面设计

网页设计包括视听元素与版式设计两项内容：

以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、综合性、版式的不可控性、艺术与技术结合的紧密性等，在明确了网页艺术设计与网站主题的基础上，更好的表现“美”和“功能”这一观点[14]。

在页面设计中，我主要采用了上下式，就拿产品页来说，产品页顾名思义就是介绍产品的页面，在产品页中我主要介绍了新一代欧朋浏览器，新一代欧朋浏览器有三个突出的优点：

精致设计、强劲内核、更快更省，在做产品页时，就利用这三个优点进行详细介绍新一代欧朋浏览器，利用图片跟优点的详细说明，更好的介绍了新一代欧朋浏览器这一产品。

3.2.4色彩

在选色彩的时候，一点不能使用超过三个颜色，要主题鲜明，用颜色区分内容，来达到你想要的效果。

在本网站中，我主要采用了蓝色、灰色、白色。

底色采用了灰色，不会抢主题，起衬托的作用，白色是顶部导航条上下，跟灰色结合在一起，非常协调，白色导航条部分不会显得特别突出，让人一看就知道上面跟下面是两个部分，点击白色的导航条，会在下面的灰色部分显示所点击的内容，蓝色是主要体现突出的信息，让人一目了然，找到你想找的内容，是一亮色，跟灰色白色结合在一起很搭配。

3.2.5思路

看其他网站的时候，有的时候会找不到想找的内容、标题内容不符合、主题不突出，结合这些，我就想做一个简单明了的网站，让人一看就找到想要的内容，首先，先列出功能点，根据功能点划出分类，一类放一起，然后起一个最能体现这一类的类名，类名搞定以后，将类名统一放在导航条的地方，并且根据主次关系调整他们的前后位置，这时导航条就出来了。

导航条有了以后就是相关内容了，我将导航条放在第一排，当你点击导航条的某个类名的时候，会在下面灰色部分显示你所几点类名的相关信息，改信息中还会有选项卡供你点击查看，上面导航条下面显示内容是最明了的方式，一眼就可以找到信息，用两种颜色将他们隔开用于区分它们，不会产生它们是一体的错觉。

根据这些思路，制作了这个网站。

第4章效果展示

这一章节中，主要是制作的效果展示效果，第一节主要是使用Dreamweaver软件进行网站的排版，第二节主要是使用Photoshop软件进行网站的设计。

4.1Dreamweaver

4.1.1首页

首页是整个网站中最重要的，首页做的好才能吸引人，以下是首页的部分代码编写部分。

/*公共部分*/

*{margin:

0;padding:

0;font-family:

"微软雅黑";font-size:

12px;}

li{list-style:

none;}

img{border:

none0;}

a{text-decoration:

none;}

公共部分是整个网站中都需要的代码部分，为了方便我把公共部分写到了一个单独的CSS文件里面，供下面的页面调用。

/*主导航*/

.topBox{width:

940px;overflow:

hidden;margin:

0auto;}

.logo,.indexBoxli,.telli{float:

left;}

.logo{margin-top:

11px;}

.indexBoxa{width:

75px;height:

64px;line-height:

64px;

text-align:

center;font-size:

16px;}

.indexBoxa:

hover{background-image:

url（images/ico_hong.png）;

background-repeat:

no-repeat;background-position:

center57px;}

.topBoxa{display:

block;text-decoration:

none;color:

#323232;}

.index{background-image:

url（images/ico_hong.png）;

background-repeat:

no-repeat;background-position:

center57px;}

.tel{padding-top:

24px;float:

right;}

.tela{display:

block;background-repeat:

no-repeat;width:

22px;

height:

20px;font-size:

16px;margin-right:

7px;}

.tel.call{width:

65px;}

.tel.weibo{margin-right:

0;}

.tel.sina{background-image:

url（images/ico_sina.png）;}

.tel.sina:

hover{background-image:

url（images/ico_sinaH.png）;}

.tel.dou{background-image:

url（images/ico_dou.png）;}

.tel.dou:

hover{background-image:

url（images/ico_douH.png）;}

.tel.ren{background-image:

url（images/ico_renren.png）;}

.tel.ren:

hover{background-image:

url（images/ico_renrenH.png）;}

.tel.weibo{background-image:

url（images/ico_weibo.png）;}

.tel.weibo:

hover{background-image:

url（images/ico_weiboH.png）;}

以上代码部分是主导航的CSS部分，主导航需要是一个亮点，有亮点才能吸引大家去查看网站，上面的代码主要是设置了属性的样式，比如：

颜色宽度、图片、位置等信息。

--主导航-->