基于响应式web设计模式的人机交互界面的研究与应用

《基于响应式web设计模式的人机交互界面的研究与应用》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、基于响应式WEB设计模式的人机交互界面的研究与应用1刖吞随着移动互联网的飞速发展，大多数网站开始提供移动Web应用，由于移动互联设备屏幕宽度相对于PC的屏幕宽度较小，所以大部分原先在Pc上显示的页面并不能很好地直接在移动互联设备上呈现，特别是移动互联设备种类较多（如手机、平板电脑等），而且显示的分辨率标准也比较多，更有许多未知和新的移动互联设备的推出。一个网页同样的内容，在大小迥异的屏幕上，会呈现出不同的效果，特别是屏幕宽度很难适应，这样会造成一个用户在用Pc和移动互联设备访问一个相同网站时,感觉有很大的差异和不一致性山。根据CNNIC第3

2、2次互联网络发展状况调查结果，截至2013年6月，中国手机网民的总规模达4.64亿。其中，手机浏览器用户规模为3.69亿，同比增长21.0%,在手机网民中的渗透率为79.5%⑵⑶,响应式网页设计,整合媒体查询、弹性视觉媒体和流动布局，有助于解决不同上网设备的适配性问题，使网站兼容多种设备和屏幕，实现“一源多屏”。2选题背景2.1响应式web设计简介2.1.1传统的web设计理念目前的网站普遍使用固定的宽度，如果你的站点是960px的宽，当访客使用屏幕较小的设备浏览站点时，他只能看到站点的一部分，而U还会看到丑陋的水平滚动条⑷⑸。人屏幕设备也

3、存在相同的问题，如果有人用犬屏幕访问站点吋，那他会看到大片的空白，虽然留白作为设计心里学一部分固然是好的，但是对于人们意料之外的空白，我想没有谁能从中获利⑹，传统的web设计在现在这个设备多样化的出现，早已呈现出多种问题，因为部分手机的浏览器都会默认显示缩小后的站点，虽然我们可以通过手指来缩放页面，可以看见站点的全貌，但是这样的用户体验，难免会讣人觉得繁琐，况且这一过程也不能从中获利与享受。尤其针对于广告，对于许多企业而言，广告是能为企业提供利益的一种手段，大部分在站点上看到广告都是有厌烦的情绪，如何设计出合理的广告方案，在传统的web站点

4、是很难做到的。2.1.2响应式web设计理念响应式web设计，使我们的页面具有可变的特性，因为元素的宽度会根据浏览器的宽度自动进行调整。犬多数情况下，不会出现水平滚动条。其中媒介查询允许你根据设备的信息■如屏幕的宽度，方向或者分辨率等属性来使用不同的样式。响应式设计不是“为移动设备而设计”，它也不是“为台式机而设计”⑺它是关于采用灵活的,设备无关的方法来为web进行设计，对未来的可访问性更加友好。2.2论文提出与论文工作意义2.2.1响应式web设计的问题分析移动端的优化与设计现在已经成了一个时髦的话题，未来有可能有更多这方面的讨论。根据M

5、ashable在2013年8月份发布的统计，可以得知，全球所有网站流量的17.4%都是通过移动设备来的，而这个数字在2014年将会继续增长。在早期，可以访问互联网的手机还只是少数人的时尚用品，那时的网络慢的让人无法忍受，屏幕也是相当的小，用起來让人显得尴尬且不是特别友好，2010年5月，EthanMarcotte写出一篇ResponsiveWebDesign,他提出我们可以将不同联网设备上众多的体验，当做是同一网站体验的不同侧而来对待，而不要为每种设备进行单独裁剪而使设计彼此断开，这才是我们前进的方向。所以，作为web开发者如何不想失去移动

6、端的用户，不想失去一杯羹的话，是时候步入web移动端的领域了。仅希望像Google和苹果这样的行业巨头公司网站适应移动设备往往是不够的，除非您不介意丢失几乎五分之一的游客到您的网站，我们的开发者追求的是精致，容不得页面在其他设备上的瑕疵，因此我们的设计不仅要灵活，而且还能适应渲染他们的各种媒介。2.2.2课题的提出响应式web网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了凶，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么？交互与视觉如何协作？前端何时介入？哪些事情

7、让后端开发来做更合理？需要先明确好设计，再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始。对于响应式设计研究与应用，需要解决很多难题，主要有一下几个方面：（1）媒介查询传统的固定布局有种种限制，媒介查询可以让你在特定的环境下查询到各种属性，比如分辨率，色彩，高度宽度等，通过使用媒介查询，你可以熨平以前的布局的所有褶皱。但是你不知道要在哪里处理断点，如何为站点设定视口，如何为小屏幕设备提升导航栏的使用体验。也不清楚你的站点有哪些用户访问。也不清楚用户所用的设备分辨率。因此解决这个问题，在我的设计中

8、将是重点。（2）流动布局在传统的web站点，页面会被指定为特定大小的像素。会给开发者一种对页面拥有较多控制权的错觉。流动布局度量单位是百分比，但是在一些文木行宽在大屏幕下会很宽，