期刊网站页面自适应剖析及重构于.docVIP

期刊网站页面自适应剖析及重构于 　　[摘 要] 基于响应式网页设计的理念、特点，对比分析传统期刊网站与响应式网页设计的价值特性，以“用户为中心”对期刊网站在个人电脑和不同移动设备平台上的文字、图片及控件等信息进行自适应分析及重构设计，为期刊用户在移动设备上访问期刊网站提供新的解决方案和参考，对于期刊网站的建设具有较好的实践意义和指导意义。 　　[关键词] 期刊网站 响应式网页设计 移动设备平台 自适应 　　[中图分类号] G237 [文献标识码] A [文章编号] 1009-5853 （2016） 04-0105-06 　　[Abstract] According to the concept and features of Responsive Web Design （RWD），compare the traditional periodical websites with the responsive-designed journal web pages. Based on new ideas and methods of RWD，re-design a journals website with the elements of texts，graphics and controls etc both on the PC and different mobile device platforms. Complied with the user-oriented principle，the newly designed website provides a new solution and reference for journal readers to access journal websites on mobile devices and improves their user experiences. 　　[Key words] Journal Website Responsive web design Mobile device platform Adaptive 　　互联网技术的发展，衍生了众多网络产品。国务院总理李克强提出的“互联网+”行动计划将促使更多传统行业向互联网模式发展[1]。作为数字化和网络化的产物，期刊网站建设是当前期刊发展的重要举措之一[2]。国内现有期刊网站主要从技术、功能、安全性和互动性等方面进行开发和维护[3-5]，很少考虑用户体验要素以及浏览器和移动设备的兼容性问题。相关数据[6]显示，用户在移动设备上的浏览份额正逐步扩大：截止2014年6月底，中国第三方手机浏览器市场累计账户规模达10.8亿，较上季度环比增长7.5%。而现有期刊网站移动端服务形式多为移动版网页，即对常规网站功能和内容的原版复制或简化，页面加载速度慢且不适应移动设备屏幕大小。随着移动平台类型的增加，需对不同移动设备进行独立的站点定制。这样做虽能提高用户体验，但具有扩展局限性，且需消耗较多成本来开发和维护。响应式网页设计（Responsive Web Design，RWD）多能解决这些问题。 　　RWD由伊森?马克特（Ethan Marcotte）在2010年提出[7]，也称自适应设计，指网站集中创建页面的图文版式，基于CSS3 的Media Queries功能智能地根据用户行为及设备环境自动调整页面的结构布局，以适应不同平台的尺寸屏幕，并结合JavaScript 实现页面交互功能，使用户享有一致的浏览体验。RWD主要从前端界面框架、功能实现及技术支持方面进行研发，已成为设计趋势并逐步运用在视频网站[8]、电子商务[9]、高校门户[10]和服务移动平台[11]等网站，并掀起了一股网页设计新标准浪潮[12]。用户可通过“突唯阿”“起飞页”等RWD自助建设平台，使用模板免费创建响应式网站，建站速度快、成本低，但缺乏个性、功能简单、网站代码和结构大量雷同，不利于搜索引擎优化及期刊品牌和形象建设。RWD也在期刊相关网站中得到运用，但范围较小。国外有美国化学学会（ACS）、英国皇家化学学会（RSC）和自然出版公司（Nature） 等旗下的网站，国内有《中国图书馆学报》《临床与病理杂志》等的网站。这些RWD网站大部分采用扁平化的流行视觉设计风格，页面布局均衡统一，形成了自我特色。但是，其在手机端的显示经常出现图片压缩变形或像素变低、内容或图片缺失、按钮错位和页面局部留白过大等现象。 　　本文基于RWD原理，重新设计期刊网站页面布局及视觉元素，使同一网站能根据移动设备类型，自适应后按照不同的格式展现在不同的用户交互系统上，以增强网站的可用性、易用性和互动性，为期刊网站提高交互体验提供参考。 　　1 期刊网站网页自适应分