《网站的交互性设计》由会员分享，可在线阅读，更多相关《网站的交互性设计（19页珍藏版）》请在金锄头文库上搜索。
1、-毕 业 论 文设 计论文设计题目：的交互性设计目 录摘 要1ABSTRACT2第1章 前言3第2章 开发工具和运行环境42.1 设计的根本知识42.2Dreamweaver简介42.3HTML简介42.4CSS简介52.5Photoshop简介52.6 运行环境5第3章 网页布局与设计理念63.1 网页布局63.1.1 网页布局的根本知识63.1.2 网页布局的根本概念63.2 设计理念63.2.1 特色UI设计介绍63.2.2 创意设计73.2.3 页面设计73.2.4 色彩83.2.5 思路8第4章 效果展示94.1Dreamweaver94.1.1 首页94.1.2 一级页面114.1
2、Photoshop154.2.1 首页154.2.2 一级页面16第5章 的测试与维护17第6章 总结18参考文献19致 谢20. z-摘 要在现代社会的需求之下，一种新兴的信息交流方式开场崭露头角并迅速获得了广阔群众的支持交互式。交互设计致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人本身的心理和行为特点。这次我们所设计的课题就是介绍一款手机浏览器欧朋浏览器。欧朋浏览器是一款全球流行的手机浏览器，体积轻小而功能强大，以简洁的界面设计和贴近中国用户的社会化应用为主要特色1。在这次设计中设计制作的就是欧朋浏览器官方。关键词：Internet；交互设计；建立ABSTRAC
3、TUnder the demand of modern society, a new way of munication is emerging and quickly obtain the support of the masses, interactive website.Interaction design is mitted to understand target users and their e*pectations, to understand each others behavior when users interact with the product, understa
4、nd the psychological and behavior characteristics of the people itself. This time we design the topic is to introduce a mobile phone browser - European friends of the browser. The friends of the browser is a global epidemic of mobile browser, light and small volume and powerful, with concise interfa
5、ce design and close to the Chinese social applications as the main feature of the user. In this design is the design of the friends of the browsers official website.Key words: Internet;interactive design;The website construction第1章 前言在Internet飞速开展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们生活、娱乐、学习等各个方面发挥着重要的作
6、用，因此建立在Internet应用上的地位显而易见。谈到联网的计算机，就能想到它百纳海川的资讯，可以在网络的世界里找到自己想了解到的，自己想探索到的新知识，但是要想了解到这些资讯我们需要借助到一个工具，这就是我们每一个人都熟悉的-浏览器。技术的进步，离不开知识的传播。时代的需求就是我们的责任，我们要抓住信息时代的脉搏，互联网上信息的查找又要通过浏览器的浏览来实现，这次我们所设计的课题就是介绍一款手机浏览器欧朋浏览器。本课题主要从获取良好用户体验方面研究的交互设计。的页面与色彩搭配进展分析设计页面色彩、图片的应用及版面筹划：确定页面的整体一致性、美观性、欣赏性和实用性并存。该介绍了欧朋效劳、分享
7、、新闻中心、论坛、下载等系列内容的介绍，让人们可以更快更好的了解、认识并下载欧朋浏览器。一个好的的通常要有以下几个方面的特点：漂亮的设计、友好的界面、规*的构造以及充实的内容，另外还有一个不可无视的关键就是良好的交互性2。的交互性通常是给用户网页浏览过程中良好体验的一个非常重要的环节，满足用户的浏览需求，对用户的选择作出“及时的响应，是交互性设计的关键3。第2章开发工具和运行环境一个的制作必须要有开发工具和运行环境，它们是一个组成的重要因素之一。2.1设计的根本知识界面：也就是的外观、整体感觉、整体架构。程序：它代表的功能，技术含量。静态网页：在设计中，纯粹HTML格式的网页通常被称为“静态网
8、页，早期的一般都是由静态网页制作的。动态网页：动态网页是与静态网页相对应的，也就是说，网页URL的后缀不是.htm、.html、.shtml、.*ml等静态网页的常见形式，而以.asp、.jsp、.php、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号“?4。2.2Dreamweaver简介Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚决Dreamweaver在该领域的地位。它集网页设计、开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前设计、开发、制作的首选工具5。Dreamw
9、eaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进展实时的。无论用户习惯手工输入HTML标准通用标记语言下的一个应用源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使得用户设计网页和管理变得更容易。2.3HTML简介HTMLHyperTe*t Markup Language，超文本标记语言，是一种专门用于创立Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档即网页的信息，如何各种信息。使用HTML语言可以在
10、其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本6。标记语言是一种基于源代码解释的方式，它的源文件由一个纯文本文件组成，代码中由许多元素组成，而前台浏览器通过解释这些元素显示各种样式的文档。换句话说，浏览器就是把纯文本的后台源文件以赋有样式定义的超文本文件方式显示出来7。2.4CSS简介CSS是英语Cascading Style Sheets层叠样式表单的缩写，它是一种用来表现HTML或 *ML 等文件样式的计算机语言。CSS能够真正做到网页表现与内容别离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进展像素级的准确控制，支持几乎所有
11、的字体字号样式，拥有对网页对象盒模型的能力，并能够进展初步交互设计，是目前基于文本展示最优秀的表现设计语言8。级联样式表，它是用来进展网页风格设计的。比方，如果想让字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩大准确指定网页元素位置，外观以及创立特殊效果的能力9。2.5Photoshop简介Adobe Photoshop，简称“PS，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众
12、多的编修与绘图工具，可以有效地进展图片编辑工作。PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及10。2.6 运行环境使用IE6.0以上版本，为最正确显示效果。. z-第3章网页布局与设计理念页面布局：对页面的文字、图形或表格进展格式设置。包括字体、字号、颜色纸*大小和方向以及页边距等。设计理念：是设计师在空间作品构思过程中所确立的主导思想，它赋予作品文化内涵和风格特点。优秀的设计理念至关重要，它不仅是设计的精华所在，而且能令作品具有个性化、专业化和与众不同的效果11。3.1网页布局3.1.1网页布局的根本知识首页的设计是一个成功与否的关键。人们往往看到第一页就已经对你的站点有一
13、个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的“功力了。对者产生第一印象，要留下好的印象，必须干净整洁、颜色不能过于多、条理要清楚12。3.1.2网页布局的根本概念刚开场的时候，网页在我们面前是一*白纸，需要创造出自己的设计方案。页面尺寸：分辨率越高页面尺寸越大。整体造型：我们在设计的时候一定要注意整体造型，形象要是统一的。图片、文本：图片和文本是网页的两大构成元素，缺一不可，如何处理好图片和文本的位置成了整个页面布局的关键。3.2设计理念3.2.1特色UI设计介绍图1 天气图标如图1所示：画面呈现目前的日期，时间，天气及温度，文字及icon都是简
14、单的白色线条构成，特别的地方在于背景的渐层不只是装饰用的，在渐层的上方颜色代表着是目前天空的颜色，白天晴朗时天空是白色的，当天空开场下雨或是接近晚上时，颜色就会慢慢的改变，下方的颜色则是代表温度，温度越高色系越暖，完全将呈现的信息可视化，最多可以新增4个地区，每个地区的天气一目了然。图2 图片图标如图2所示：深蓝的天空下，在一道微笑曲线的高光滑过下，永远绽放着一朵金黄色的向日葵，作为自然界太阳的象征，向日葵代表着乐观与阳光，这跟Apple制作的所有宣传中永远都会有一*幸福的笑脸出现在每一个角落的拍摄理念完全一致。3.2.2创意设计创意是整个中的灵魂所在，首先制作的时候，需要思考这个的亮点在哪里
15、、要主要突出那个局部等等，这个过程就是创意设计，创意设计是的主要因素之一13。3.2.3页面设计网页设计包括视听元素与版式设计两项内容：以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、综合性、版式的不可控性、艺术与技术结合的严密性等，在明确了网页艺术设计与主题的根底上，更好的表现“美和“功能这一观点14。在页面设计中，我主要采用了上下式，就拿产品页来说，产品页顾名思义就是介绍产品的页面，在产品页中我主要介绍了新一代欧朋浏览器，新一代欧朋浏览器有三个突出的优点：精致设计、强劲内核、更快更省，在做产品页时，就利用这三个优点进展详细介绍新一代欧朋浏览器，利用图片跟优点的详细说明，更好的介绍了新一代欧朋浏览器这一产品。3.2.4色彩在选色彩的时候，一点不能使用超过三个颜色，要主题鲜明，用颜色区分内容，来到达你想要的效果。在本中，我主要采用了蓝色、灰色、白色
