比较视野下响应式设计Web端与移动端适配原则探讨 - UXPA中国2015行业文集

2016-08-01 | 文集,入选论文

 

比较视野下响应式设计Web端与移动端适配原则探讨

 

李瑞 黄升
UCD中心,华为技术有限公司

 

摘要:通过对响应式设计的研究,探究现有移动端与Web端等多屏页面设计的规范及原则与用户行为逻辑之间的关系。通过对用户行为、情感、逻辑与认知的深入研究以及响应式体验理论的探讨,结合类比、整合的方法来研究响应式设计移动端与Web端的规范与原则以及在此过程中响应式设计对用户行为逻辑的影响因素。并以此来提出规范化并具有指导意义的适配原则的体验方法与规范,从而提升用户对响应式设计的认知和熟悉度。

关键词:响应式设计 适配原则 影响因素 行为逻辑

 

随着各种手持移动设备终端的快速发展,智能手机、平板电脑、智能家电等新设备层出不穷,移动互联网入口份额快速增长,但移动设备终端的视口大小不一,屏幕分辨率千差万别,给设计师带来不小的挑战。移动互联网的流行与普及以及人机交互研究的逐渐重视,响应式设计的理论与方法得到越来越多的关注,各大网站纷纷推出了与其自身web端页面适配的移动端的页面设计,并对不同平台及设备的转化做了相应标准的制定。就各大网站而言,对Web端和移动端的响应式适配能够有效帮助用户拥有更好的阅读体验与视觉体验;让用户最优化地使用和体验产品,同时也能有效增强用户使用产品的粘性,增强用户对产品品牌的忠实度。本文旨在基于Web端与移动端页面设计的对比,研究出响应式设计的适配原则以及对用户行为逻辑产生的影响因素。

 

1. 响应式设计研究

响应式设计定义可以认定为在网站页面的设计和开发过程中,需要根据用户的行为以及设备平台进行相对应的调整与适配。其中主要涉及到不同的系统平台、屏幕尺寸以及屏幕定向(图1)。并且与弹性网格与布局、图片等实践使用方式相结合。或者可以理解为无论用户正在使用笔记本电脑、平板电脑或者是手机,载体所呈现的页面都应该能够自动切换页面的分辨率、图片尺寸及相关脚本的功能等,即页面应该有自动响应用户设备环境的能力,并且通过响应式的设计就不必为不断到来的新设备和新的分辨率做专门的版本设计和开发(图2)。本文主要聚焦于Web端与移动端响应式适配原则的研究,通过响应式设计交互的视角去探索此适配交互方式对用户行为逻辑的影响因素[1]。

 

图1 响应式设计产品的原因(绘制)

 

图2不同平台相应页面的适配(绘制)

 

2. 响应式设计Web端与移动端适配原则

2.1弹性布局原则

Ethan Marcotte在其所写的《Responsive Web Design》一文中提及了响应式建筑设计中弹性的响应式架构,并将此构思延续到Web设计的领域中[2]。其中就重点阐述了弹性布局中的可切换的固定布局、弹性布局、混合布局与弹性图片等(如图3)。

 

其中可切换的固定布局在于以像素为页面单位,参考主流设备尺寸,设计不同宽度的布局,并通过识别屏幕尺寸与浏览器宽度,选择最合适的宽度布局;而弹性布局在于以百分比作为页面的基本单位,适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;另外混合布局在于适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果,并以混合像素和百分比两种单位作为页面单位进行适配;而作为弹性图片作为信息重要的形式也需有更灵活的方式去适应布局的变化。并在后续的研究中以图片为典型,扩大研究范围。另外还需要对图标、图表、视频等信息内容进行响应方式的研究[3]。

 

2.2屏幕断点原则

由于屏幕断点是发生布局改变的临界点,并且屏幕断点原则是以弹性框架布局为基础,通过设置屏幕断点为不同尺寸屏幕的框架进行相应的适配(图4)。并在同一框架的布局中在每一个断点区间内进行相应的断点,以此来帮助设计师将市场上各种屏幕尺寸进行精炼地概括与适配。与此同时,断点可以让页面布局在预设的点进行变形。例如在Web端上显示3栏,而在移动设备上仅显示1栏。在此过程中断点放置的位置通常取决于内容,需要针对设备的尺寸以及内容的情况进行相应的断点与适配。

 

图3 弹性布局的组合形式(图片取自http://heyuchan.com/?p=803

 

图4不同设备尺寸的屏幕断点(绘制)

 

2.3页面模块元素变化原则

根据用户视觉流程的走向确定模块群浏览轨迹,并因此划分相应的主辅模块(图5)、整体与局部模块以及模块内部元素之间的关系。因此在页面模块元素变化的原则中首先需要标记模块的顺序,将模块群内的内容以关联性划分用数字标记重要级顺序;与此同时确立固定模块,识别“地标式”内容作为固定模块,如首块内容、关键体验区域、重点推荐栏目等,并以此模块为相对固定位置,其它内容作为浮动模块围绕或依次排序;另外对辅助模块进行重组,通过多列展示、缩放、裁剪内容、元素变换位置的方法将辅助模块与浮动模块位置和内容进行重组。

 

而对于模块内元素之间的关系,主要体现在图文的排列,即大屏转小屏的情况下图片与文字的相对重要性的移植方法;另外是按钮元素的排列,即在设计时根据不同情况来处理识别按钮的类型[4];与此同时在多个页签的元素排列时,需要根据设备的尺寸情况进行页签的移植;最后对于列表分享的元素排列,可在窄屏移植时设计为筛选框(图6)。

 

图5主辅模块在不同平台的呈现(绘制)

 

图6模块内元素的组合排列(绘制)

 

2.4图形用户界面标注原则

对于响应式设计,可针对目前 GUI 设计师的 layout 标注方法进行优化。在标注过程中,合理遵循原则可在多屏幕适配适应性、实现准确性与前端开发的效率。与此同时控件的布局设计应充分使用相对位置关系比如: 左对齐、右对齐、居中、均分等,在layout 中以文字描述各个部分之间的关系遵循链式规则,为概念设计的框架设计做参考;此外标注布局时, 尽量明确控件的分组模块群,比如小组内的成员具有固定的相对位置关系,都在父对象内居中对齐;另外对控件的宽度和高度的设计,优先转换成控件距离两侧参考点的距离尺寸,如在宽度为300dp的按钮与宽360dp 的屏幕上,只需标注两边距离屏幕边缘30dp 即可,不必再标注按钮本身的宽度;最后优先使用小的尺寸信息的方法来描述控件的参数,如用两种表述方法都能描述控件参数时,按钮宽度为100dp,则不必标注两侧据屏幕边缘130dp, 只要标注按钮本身宽度,设置水平居中即可(图7)。

 

图7各标注方法的样式(绘制)

 

3. 响应式页面设计对用户行为的影响因素

3.1操作指引一致性

在设计浏览路线和架构时需要根据用户的行为逻辑与体验情境,通过区域模块与架构的组合指引用户的操作和体验。比如在不同尺寸的移动设备的信息浏览中存在着横向和纵向的浏览路线,并且会根据不同设备和平台将网页的信息进行合理美观的呈现,而纵向的浏览区域也存在着上中下的模块群[5],例如上部模块是导航菜单栏,中间模块是主模块群,下部模块是辅模块群,因此通过相应模块的指引能够有效提示用户怎么进行信息的预览与操作,并且在用户的主观意识中会对不同的设备的信息呈现存在着主次信息的筛选(图8)。

 

图8纵向浏览路线的逻辑指引性(绘制)

 

3.2跨平台反馈一致性

响应式设计的反馈主要体现在不同设备不同平台对于用户反馈方式的一致性,比如用户在使用Web端页面、Pad端页面以及Phone端页面的过程中,虽然网页的呈现结构存在着相应的差异,但是在声音、动效等反馈方式上存在一致性的反馈[6]。并且用户在使用响应式产品的过程中,其默认了该产品在不同平台上反馈的一致性。在另一方面,也在给予用户认知的反馈,为后续的体验做好相应的基础。

 

3.3视觉体验一致性

在体验一致性方面,在保持统一视觉流的整体情况下,使得视觉布局与形象方面始终保持着相应的良好完整体验。区别于非响应式的设计,响应式设计能够在体验的完整性上在不同的设备间进行延续。并且在排版与组合上进行更好的优化与适配,使得在不同平台的设备上整个视觉体验呈现饱满的趋势,能够让用户更加具有沉浸式的体验。

 

4. 设计原则在用户使用响应式页面设计中的验证

4.1 使用QFD质量功能展开法分析影响因素与响应式原则的联系

通过对QFD质量功能开发法的使用探索响应式设计中适配原则与影响因素的联系,使得在响应式设计的验证中将质量原则融入到用户的体验设计中。其中整个QFD质量功能展开图主要包含6块模块(图9),纵轴第一模块和横轴第二模块分别是响应式页面设计对用户行为的影响因素与响应式页面设计的原则;第三模块是用户组对影响因素重要性的优先级评分;第四模块是用户组对响应式页面设计原则和用户影响因素两者关系的评分;而第五模块是响应式页面设计原则两两之间的强弱相关性评定;而最后第六模块是用户组对响应式设计的产品和无响应式设计的产品用户满意度的评分。整个验证采集了12对用户组的评分并将评分结果进行相应的归纳与取平均分,从整个的评分数据中可以看出,弹性布局与页面模块和元素原则能够更大程度上影响用户在实际操作中的一致性以及跨平台上逻辑的一致性,也使得整个过程很好地验证了响应式设计产品的适配原则与用户行为的影响因素的强相关性(图10)。

 

图9 QFD质量功能展开法各元素模块组合(绘制)

 

图10 QFD质量功能展开法数据分析及结果(绘制)

 

4.2在实际设计项目中运用响应式原则后的验证

通过笔者对响应式设计实际项目的实践,并根据项目的相关要求保持相应内容与主体在不同平台上能够体现一定的一致性和延续性。并在设计之初就确定了界面模块的主体以及弹性可变的模块布局;并针对需要适配平台的尺寸进行相应的断点适配;除此以外需针对模块元素进行一致性排版与适配以及用户界面的标注工作。以项目为例(图11),此项目是基于视频播放和分享的多平台服务,因此视频播放、评论与分享以及平台的切换是此功能模块的重点,因而可以确定该项目的主要模块以及弹性可变的推荐节目等模块。通过对响应式设计Web端与移动端适配原则运用,发现在实际项目设计中确定主辅模块以及弹性模块的重要性,并需要针对适配平台的尺寸范围做最大的优化,除此以外还需最巧妙的设计相应模块元素的统一性与一致性。

 

图11基于视频播放和分享的多平台服务项目(绘制)

 

4.3验证结果

通过让12对用户组对响应式设计原则和用户影响因素进行相应的评分,然后再次让用户组成员对使用响应式设计的产品和无响应式设计的产品进行测试并对体验的满意度进行评分,并且配合笔者在实际响应式设计项目中对响应式设计原则的验证。整个过程中用户对使用响应式设计的产品有更好的满意度和更低的操作犯错率。并在响应式设计的原则中更加倾向于操作指引的一致性和跨平台逻辑的一致性,这样能够最大程度上平衡用户体验的一致性和满意性。

 

5. 结语

响应式设计需要在设计师与工程师的共同配合下进行,通过设计与技术的结合能够最优化地提高页面的响应式优化,并在相应设定的原则下进行弹性适配与创新,与此同时本文从Web端的页面和移动端的页面两方面阐述响应式设计的原则以及响应式设计对用户行为逻辑的影响两个方面去研究响应式设计的交互特性。以比较的视野来总结出4大响应式设计的适配原则,以及相应响应式设计对用户行为逻辑的影响因素去剖析响应式交互设计与用户之间的关系,从而更加能够明确的响应式设计的原则与规范。

 

6.参考文献

[1]   马璇. 智能移动终端自适应界面的一致性研究[D]. 北京: 北京邮电大学, 2013.

[2]   Marcotte E. Responsive web design[M]. Editions Eyrolles, 2011.

[3]   张树明. 基于响应式 Web 设计的网页模板的设计与实现[J]. 计算机与现代化, 2013 (6): 125-127.

[4]   王愉, 潘明明. 响应式网页设计初探[J]. 北京印刷学院学报, 2014, 22(3): 13-15.

[5]   林瀛瀛. 响应式设计技术在视频网站开发中的应用[D]. 东华大学, 2014.

[6]   毕剑, 刘晓艳, 张禹. 使用响应式网页设计构建图书馆移动门户网站——以云南大学图书馆为例[J]. 现代图书情报技术, 2015, 31(2): 97-102.

 

 

1   喜欢

操作成功!
请登录您的邮箱获取新密码,请尽快修改您的新密码!