HTML5+EdgeAnimate网页交互设计
毕业论文关键字：网页设计;交互;全息投影;视差滚动
Abstracts
The work choose ore as the theme, web as a medium, in order to clean simple visual rendering leads viewers to experience and the study on mineralogy of the related knowledge and content. Parallax scrolling through fusion and holographic projection novel interaction layer upon layer leads audience interaction further understanding and interest in the site to produce active exploration.
Key Words:Web Design; InteractionDesign; Front-projected Holographic Display;Parallax Scrolling
目录
摘要
一.背景知识4
(一).新兴网页设计软件.4
(二).网页中的视差滚动交互方式.4
(三).网页与其他交互方式的结合5
二.优秀案例分析.6
(一).“同类网站”分析6
1.“Mineralia”分析
2. “Rock&Gem晶彩世界”分析
(二).“使用Muse设计的交互性网站”分析.7
1.“EasyRocketStudio”分析
2.“mindworks”分析
三.作品简介及说明8
(一).毕设项目简介和创意来源8
(二).视觉风格8
1．图形风格 .8
2．摄影手法 .9
3．色彩表现 .10
4．构图形式 .10
(三).交互形式11
(四).效果图展示.12
结语15
谢词16
参考文献17
一. 知识背景
(一)新兴网页设计软件
随着国内移动互联网的爆发式增长和线上、线下的不断融合，互联网已经成为中国人生活和工作形影不离的工具。各行各业都加快了进军移动互联网的速度和步伐，各种类型的网站也层出不穷。移动互联网正改变着我们的生活和学习方式，在移动互联网蓬勃发展的浪潮中，软件及硬件的更新速度也不断增加。一波波后浪推前浪，最新的设计软件及方式也应运而生，例如Adobe Muse、Adobe EdgeAnimate等。
使用Adobe Muse能够很快的完成网站规划、设计、互动性、以及网站的发布。在使用时它与Adobe Dreamweaver最大的区别是它所见即所得，通过内置模板程序库的运用，免去了繁琐的手工编写代码。这使得我们可以更专注于视觉与交互的策划、设计与制作，也让不熟悉代码的设计师能够独立、快速、有效的完成网站视觉与交互的融合，及时提供给程序开发人员参考，所以也是极好的原型工具。
在毕设网站制作时我大量的使用了Adobe EdgeAnimate制作的网页动画，它可以很好的与Muse配合使用从而达到更丰富的交互效果。它同时支持Android、iOS、webOS，所以即使是不支持Flash的苹果系统数码产品也能顺畅的播放用其制作的网页动画。通过HTML5、CSS和JavaScript制作网页动画。
(二)网页中的视差滚动交互方式
互联网信息技术及移动通信技术飞速发展的今天，网络开始面对各种类型的人群，原有的仅仅传达信息，注重传统平面设计的简单网页界面设计已经远远无法满足人们对交互体验的需求。进入了WEB2.0时代用户的参与度越来越高，用户成为主角。
因此，消除使用障碍，通过新颖的技术及手段吸引用户自主操作获取所需信息。同时提供更多元的媒介通过不同方式的交互体验，使网页更生动有趣，从而让用户重复体验提高网页粘性是网页交互设计致力的方向。兼顾传递信息和视觉体验的同时让信息和用户完美地进行交流成为了新的目标。
下一篇：基于C#的打字练习系统设计