响应式交互设计论文范文

本站小编为你精心准备了响应式交互设计论文参考范文，愿这些范文能点燃您思维的火花，激发您的写作灵感。欢迎深入阅读并收藏。

1响应式WEB交互常用技术

响应式WEB交互设计的目的是一个网站能够兼容多个终端,页面能够自动配适显示设备。具体的实现方式由多方面组成,包括弹性布局、CSS、网站框架等。下面我们来介绍几个常用的响应式页面常用技术。

1.1MediaQueryMediaQuery用于根据不同分辨率尺寸调整相应样式。现在市面上基于IOS系统平台和Android系统平台的移动设备占大多数,同时他们的自带浏览器内核都为webkit内核,所以我们可以使用viewport属性和MediaQuery技术实现网站的响应式交互。这种方法能够非常方便的实现基准字号font-size在不同分辨率下显示完全,不会出现阅读困难。

1.2FluidgridFluidgrid即流体布局。其作用在于将网页上一些元素的框格由固定模式调整为相对模式(如百分百或比例等)。使用Fluidgrid能够使网页根据屏幕的宽度自动调整页面宽度,进而保证页面内容显示完整,原有功能继续可用。

1.3FlexboxFlexbox是css规则总新添加的一种模型属性。它类似于APP结构,展示方式是固定头部与底部,中间部分内容的高度实现自动适应。Flexbox的出现打破了常常使用的原有的浮动布局方式,实现了垂直等高、水平均分、按比例划分。如果希望目前的网站能够以正常的网页方式编写,并且以WabApp的外观显示方式出现在用户面前,那么Flexbox是非常适合的一种方式。

2响应式交互建设流程

2.1确定内容架构根据网站定位以及用户分析,确定网站整体风格、展示结构,如页面层级、页面内容等,对网站进行整体规划,厘清脉络关系。

2.2设计移动框架移动优先理念是基于对移动设备与PC设备之间关系的深刻理解而产生的,移动设备许多特性让设计更全面及强大。比如移动设备上的语音识别、基于地理位置定位、手势操作等,人们发现移动设备交互比PC拥有更多可能性。从移动设备开始让设计师更早思考如何发挥这些特性及优势。

2.3设计响应式框架我们需要基于移动端框架拓展开发出PC端及平板电脑端框架。首先确定响应模式,那么从手机端显示到平板电脑显示再到PC端显示,整个网站布局如何变化,内容如何编排,优先级如何调整等都是需要设计的部分。同时我们需要对规则继续进行细化，即为定制流体栅格系统(屏幕占比)。

2.4模块设计在确定了响应式框架的页面结构以及相应模式后,我们要开始进行模块设计的工作。在产品设计时我们采用了移动优先的理念,但在整个产品的细节设计以及开发过程中,是否采用移动优先原则应根据实际情况具体分析。在这里,PC优先可以充分暴露业务复杂度,而且项目的设计、开发和测试在PC环境下拥有更成熟的工具和流程,因此,在必要的时候采用PC优先理念也是非常合理的。同时我们应注意的是,在开发模块的时候,必须时刻提醒自己:这个模块在当前设备上运行无误,在其他设备下是否会发生问题？

2.5响应式模块设计PC端模块完成后,接下来我们需要根据已设计好的PC端模块拓展出移动设备模块。这些模块必须符合设备习惯,充分利用设备特性,为用户体验带来便捷与舒适。

2.6测试优化这一步需要在真实设备下测试网站效果,并对暴露出的问题进行优化。测试优化内容包括:服务器承载测试及优化,软件性能测试及优化,用户实际体验测试及优化。

3响应式设计优化

该文之前提到过,响应式设计也存在一些自身的问题和弊端,可能会影响到用户体验。那么这些问题和弊端就必须进行进一步的优化处理。

3.1减少HTTP请求次数在目前的网络环境下,移动端用户的数据使用流量是有限制的,可以说这是相较PC端的一个劣势。那么为了节省用户流量,我们可以使用Ajax异步请求来优化页面内部的一些操作。使用服务器端及前端缓存等机制保存页面内短期不会变化的一些数据，这样可以在一定程度上降低用户的数据请求量。

3.2压缩Javascript和CSS将页面内Javascript和CSS进行优化精简之后,可以有效地降低页面大小。

3.3减轻Javascript库负载目前很多响应式交互设计使用jQuery框架,事实上很多页面或许并不需要如jQuery一般强大的交互框架,我们可以用其他轻量级框架进行建设。目前针对移动端状态,有jQueryMobile、YUI、XUI等可供选择的框架。

3.4页面实现逐次加载移动终端设备由于屏幕大小有限,承载的信息量也有限,我们没有必要将全部PC端页面总内容一次性加载完成。我们可以使用逐次加载模式,当用户有继续观看的意愿,并对屏幕做出相应手势时,再继续进行加载新闻或图片。

3.5使用CND进行页面资源管理CDN是英文ContentDeliveryNetwork简写,意即内容分发网络。它的基本思路是将互联网中有可能影响数据传输速度和稳定性的环节避开,保证内容传输的稳定性。

3.6优化图片显示其核心思想是实现用户设备分辨率的自动区分,根据不同分辨率提供不同大小的图片以供用户加载。这样既能使不同终端用户都获得良好的用户体验,同时不会浪费用户数据流量和加载速度。

4优秀的响应式WEB框架

4.1GumbyFrameworkGumbyFramework是一个灵活的响应式框架,它建立在SASS基础之上。SASS是一款CSS预处理器,它功能强大,提供很多新的工具来支持使用者快速自主开发Gumby框架。Gumby的产品更新紧跟最新的行业技术标准和规范,同时支持chrome、firefox、Opera、IE8-10等多种主流浏览器。如果开发者刚刚开始接触响应式交互网站,那么使用Gumby是非常适合的。它自带PSDUI工具包,能够非常方便地帮助制作者开发出一个漂亮的响应式交互布局网站,且不需要太多专业性代码。

4.2FoundationFoundation由位于加州坎贝尔的产品设计公司ZURB设计开发,是目前非常现金的响应式WEB设计框架。它拥有很多布局模板、CSS样式表以及自己开发的优秀JavaScript插件。同时,Foundation强大之处还在于其将SASS有效整合,开发者可以使用Mixins概念简化开发行为,使组件的使用更加简单便捷。

4.3SemanticSemantic优势在于提供一个共享UI以供开发人员和设计师共同协作,共同开发,提升可控范围。Semantic使用自然语言习惯来辅助开发,让开发过程更便捷,同时,Semantic还可以实时进行debug输出,提示代码作用。

4.4PureCSSPureCSS是一款轻量级响应式框架,解压缩后只有5.7KB。它基于Normalize.css框架构建,没有使用任何JavaScript,只使用了HTML和CSS技术。该框架采用模块化结构,每一个模块样式都可以单独使用。

4.5TukTukTukTuk是一个高效快速的响应式CSS3框架,以轻量级的设计和面向对象的CSS为优势,非常容易扩展。5.6KubeKube是一款灵活的CSS框架,包括网格、按钮、表、排版样式等实用功能,可对forms,grids,buttons,tables,typography等属性设置样式,同时提供LESS文件,给开发人员带来了极大的灵活性。

5结语

响应式交互设计需要综合考虑,统筹部署网站的功能性与美观性,不再是只考虑一种设备使用情况的传统网站搭建模式。这就给网站设计开发带来了新的挑战和机遇。我们称响应式交互为“设计”而不是“技术”,是因为响应式交互讲究设计先行,需要提前设计网站的方方面面,而不是依样画葫芦的把已有的前端变成响应式网站。对于页面制作者,应将单一页面设计思维转换成响应式交互设计思维。每一个网站从设计之始,就要依照响应式交互的标准进行页面设计与规划。这就需要我们在设计开发过程中不断和设计、前端、后台等人员有效沟通,定制合理的响应策略,才能搭建出合理高效的适应当前及将来网络环境的响应式交互网站。

作者：刘耀阳单位：辽宁金融职业学院