面向多设备响应式设计的机制研究

发布时间：2020-07-17 03:13

【摘要】：随着近些年来移动互联网的飞速发展,新型设备也层出不穷。各种设备随时随地接入互联网的而需求也日益强烈。此时,同一个网站在不同设备上的展示就成了一大难题。响应式设计的出现为跨设备的问题提供了一种全新的解决思路。但响应式设计需要解决的不仅是设备不同造成的设备尺寸、分辨率不同等问题,还要解决不同设备的使用情景不同的问题。本文从以上两个维度进行深入研究。首先,响应式设计解决不同设备尺寸不同的问题。媒介查询技术作为响应式设计的核心,如何科学的设置媒介查询的断点,成为了目前亟待解决的问题。本文对响应式设计流程及媒介查询断点设置的现状进行总结分析,提出不足,并提出了一种从设计的角度出发,以用户体验优劣为标准的设置媒介查询断点的方法。进行案例设计,并通过实验对比所提出方法与原方法的满意度,从而验证了该方法的可行性,为响应式设计中媒介查询断点的设置提供了具有指导意义的方法。随后,响应式设计解决不同设备使用情境不同的问题。本文分析了web设计和移动设计的常用控件类型,并进行提炼和归纳,总结出最基础的单选、多选功能的几种控件形式进行实验,通过实验数据分析得到不同控件在不同情境下的适用性。最后,本文依据所做的两个维度的研究成果,设计一款响应式设计工具。设计过程包括需求分析、竞品分析、原型设计、视觉设计、设计思路说明等过程。所设计的产品具有科学的研究基础,希望能够为这一领域的设计师们作出贡献。
【学位授予单位】：北京邮电大学
【学位级别】：硕士
【学位授予年份】：2015
【分类号】：TN929.5;TP393.01
【图文】：

产品,注意力,尺寸类,平板电脑

而移动产品是随时随地被使用的，而且常常利用碎片化的时间，使用过程的注意力也比较分散，如图1-2、图1-3[12]。响应式不仅仅是一种跨设备不同尺寸下的解决方案，由于不同设备的使用场景不完全相同，因此即使是尺寸类似的不同设备，也应该有不同的设计侧重。例如使用平板电脑的用户常常在较为稳定或轻微晃动的场景下，此时用户的注意力相对集中。而与平板电脑尺寸类似的车载设备却是在行车过程中使用的。此时用户注意力更多的集中在驾驶上，而不能够集中在车载设备本身。所以响应式设计不应该仅从尺寸变化一个维度研究，还应该考虑使用场景的变化。_零漏W,糊图1_2用户随时随地使用移动产品5

场景,产品设计,注意力,尺寸类

媒介,断点,传统方法,方法

因此对应四种媒介查询样式。而通过本文方法得到的断点为1070px、992px、880px、446px四个，因此对应五种媒介查询样式。如图2-6可以看出，两种方法得到的断点数据有很大差异。2.5.1实验目的作者将通过实验比较，通过本文提出的媒介查询断点设置方法得到的断点数据，和传统的断点设置方法设置的断点数据，两者的满意度情况。如图2-6，由于传统方法就是针对典型设备尺寸进行的特别设计，因此在典型尺寸下对比两种方法的满意度意义不大，因此，本文仅以图中黄色区域，即非典型尺寸部分的媒介查询样式为例，即“通过本文方法得到的第三四断点间的样式”和“通过传统方法的第二三断点间的样式”两者哪个用户满意度高。利用本文方法得出的媒介查询断广 446px 人）、~1024^~、 960^ Y /68^该网站原有的媒介查询断点 P胃图2-6 本文方法和传统方法得到的媒介查询断点分布2. 5. 2实验方法采用SUS系统可用性量表法。对如图2-7、2-8界面进行满意度评估。17

【参考文献】