毕设-基于响应式WEB设计模式的人机交互界面的研究与应用.docVIP

基于响应式web设计模式的人机交互界面的研究与应用 第 PAGE 2 页 (共 NUMPAGES 41 页) 第 PAGE 1 页 (共 NUMPAGES 41 页) 基于响应式WEB设计模式的人机交互界面的研究与应用 1 前言 随着移动互联网的飞速发展，大多数网站开始提供移动Web应用，由于移动互联设备屏幕宽度相对于PC的屏幕宽度较小，所以大部分原先在Pc上显示的页面并不能很好地直接在移动互联设备上呈现，特别是移动互联设备种类较多(如手机、平板电脑等)，而且显示的分辨率标准也比较多，更有许多未知和新的移动互联设备的推出。一个网页同样的内容，在大小迥异的屏幕上，会呈现出不同的效果，特别是屏幕宽度很难适应，这样会造成一个用户在用Pc和移动互联设备访问一个相同网站时，感觉有很大的差异和不一致性[1]。根据CNNIC第32次互联网络发展状况调查结果，截至2013年6月，中国手机网民的总规模达4.64亿。其中，手机浏览器用户规模为3. 69亿，同比增长21. 0%，在手机网民中的渗透率为79. 5%[2][3]，响应式网页设计，整合媒体查询、弹性视觉媒体和流动布局，有助于解决不同上网设备的适配性问题，使网站兼容多种设备和屏幕，实现“一源多屏”。 2 选题背景 2.1 响应式web设计简介 2.1.1 传统的web设计理念 目前的网站普遍使用固定的宽度，如果你的站点是960px的宽，当访客使用屏幕较小的设备浏览站点时，他只能看到站点的一部分，而且还会看到丑陋的水平滚动条[4][5]。大屏幕设备也存在相同的问题，如果有人用大屏幕访问站点时，那他会看到大片的空白，虽然留白作为设计心里学一部分固然是好的，但是对于人们意料之外的空白，我想没有谁能从中获利[6]，传统的web设计在现在这个设备多样化的出现，早已呈现出多种问题，因为部分手机的浏览器都会默认显示缩小后的站点，虽然我们可以通过手指来缩放页面，可以看见站点的全貌，但是这样的用户体验，难免会让人觉得繁琐，况且这一过程也不能从中获利与享受。尤其针对于广告，对于许多企业而言，广告是能为企业提供利益的一种手段，大部分在站点上看到广告都是有厌烦的情绪，如何设计出合理的广告方案，在传统的web站点是很难做到的。 基于响应式web设计模式的人机交互界面的研究与应用 2.1.2 响应式web设计理念 响应式web设计，使我们的页面具有可变的特性，因为元素的宽度会根据浏览器的宽度自动进行调整。大多数情况下，不会出现水平滚动条。其中媒介查询允许你根据设备的信息-如屏幕的宽度，方向或者分辨率等属性来使用不同的样式。响应式设计不是“为移动设备而设计”，它也不是“为台式机而设计”[7]它是关于采用灵活的,设备无关的方法来为web进行设计，对未来的可访问性更加友好。 2.2 论文提出与论文工作意义 2.2.1 响应式web设计的问题分析 移动端的优化与设计现在已经成了一个时髦的话题，未来有可能有更多这方面的讨论。根据HYPERLINK /2013/08/20/mobile-web-traffic/Mashable在2013年8月份发布的统计，可以得知，全球所有网站流量的17.4%都是通过移动设备来的，而这个数字在2014年将会继续增长。在早期，可以访问互联网的手机还只是少数人的时尚用品，那时的网络慢的让人无法忍受，屏幕也是相当的小，用起来让人显得尴尬且不是特别友好，2010年5月，Ethan Marcotte写出一篇Responsive Web Design，他提出我们可以将不同联网设备上众多的体验，当做是同一网站体验的不同侧面来对待，而不要为每种设备进行单独裁剪而使设计彼此断 选题背景 开，这才是我们前进的方向。所以，作为web开发者如何不想失去移动端的用户，不想失去一杯羹的话，是时候步入web移动端的领域了。仅希望像Google和苹果这样的行业巨头公司网站适应移动设备往往是不够的，除非您不介意丢失几乎五分之一的游客到您的网站，我们的开发者追求的是精致，容不得页面在其他设备上的瑕疵，因此我们的设计不仅要灵活，而且还能适应渲染他们的各种媒介。 2.2.2 课题的提出 响应式web网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了[8]，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么？交互与视觉如何协作？前端何时介入？哪些事情让后端开发来做更合理？需要先明确好设计，再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始。对于响应式设计研究与应用，需要解决很多难题，主要有一下几个方面： 媒介查询 传统的固定布局有种种限制，媒介查询可以让你在特定的环境下查询到各种属性，比如分辨率，色彩，高度宽度等，通