面向IOS终端的页面自适应技术研究

1、    面向ios终端的页面自适应技术研究    周寅一、利用移动终端上网效果不理想的原因随着移动终端的发展，人们越来越依赖于移动终端便捷的上网功能。但是人们发现，由于设备拥有着不同的屏幕尺寸，在移动终端上呈现的效果并不让人满意，其原因有以下几点：1.移动终端设备屏幕较小。尽管现今的一些移动终端设备屏幕尺寸不断增大，但绝大多数移动终端的屏幕与pc端的屏幕大小相比仍有不小的差距。而想要将原来在pc端屏幕中呈现的网页内容良好地展现在较小尺寸的屏幕中，效果并不能让人满意。2.移动终端设备屏幕尺寸大小不一。移动设备的快速更新迭代，也导致了终端屏幕尺寸的大小不一，

2、这为开发者在移动终端上设计网页排版带来了极大的困扰。3.移动终端设备默认浏览器不同。终端操作系统搭载着不同的操作系统，其配备的默认浏览器对html协议的支持不尽相同，特别是windows phone操作系统，由于其默认浏览器内核与其他操作系统的浏览器不同，因此在其浏览器中的网页呈现效果与其他浏览器中的效果有着不小的差别。二、自适应网页设计如今，被绝大多数浏览器所支持的html5开始逐渐进入人们视野，ethan marcotte在此基础上于2010年提出了“自适应网页设计”（responsive 网页 design）的概念，即可以自动地识别判断设备的屏幕宽度，并根据其宽度对网页的内容进行重新排版

3、，以适应各种设备的屏幕尺寸，达到一个良好的呈现效果。随着“自适应网页设计”概念被提出，开发者们越来越关注在移动终端的网页设计开发，许多电子商务平台也越来越重视用户在移动终端设备的浏览感受，开始尝试推出移动终端版的网站。如淘宝、1号店、京东以及亚马逊等一些主流电商都推出了自己的网页端，甚至是自己的移动客户端。用户可以快速方便地浏览查阅产品信息，移动端成交额也逐年增长。除此之外，我们也看到了当中的一些不足之处。以淘宝移动端为例，其依旧局限于传统的互联网思维中，移动端页面体验依旧不容乐观。目前主流电商移动网页端那些复杂的界面和繁琐的操作流程，让人有种眼花缭乱的感觉，有时用户会由于页面繁多的按钮而失去

4、购物的兴致。三、移动网页端国外电商发展与国内相比，起步较早，经验比国内电商丰富，移动网页端的发展比较成熟，用户在移动终端的体验也更流畅。以国外新兴的电商平台goodsie为例，其具有以下几个特点：1.页面简单明了，没有繁复感。国外新兴移动电商平台与国内主流移动电商平台相比，最大的区别在于前者页面简单，将商品着重突出，没有让人眼花缭乱的按钮图标。2.操作简单流畅。页面的的简约化，与之对应的便是操作流程的简约化，只需几步便可完成购物，这种操作特别在移动网页端有着很大的优势，突出了移动端的便捷性。电商淘宝推出过“淘宝浏览器”，着重优化了淘宝在移动终端的用户体验，但是此举依旧有着很大的局限性，只有用户

5、下载了该浏览器才能提升一定的使用体验，并不能完全解决问题。因此，对移动电商平台终端进行重构与优化在一定程度上可以提高用户体验，可以尝试将终端自适应设计中蕴含的简约化以及便捷性运用到移动终端上。四、移动终端运用自适应网页设计的步骤1.研究国内外移动电商平台实现。研究国内外移动电商平台的特性，深入挖掘国内外移动电商平台的设计思想以及逻辑结构。与此同时，通过国内外电商移动平台的比较，总结出双方值得借鉴的地方，分析比较东西方用户在浏览移动网页时，使用习惯上的不同之处，为设计终端自适应布局打下基础。2.ios电商平台网页应用设计。将之前研究分析的国内外移动电商平台的页面特点运用到研究中去，设计出适合的网

6、页内容及相关功能，并结合国内外移动电商平台的布局特点，设计出适合的网页布局，导出成图片。3.实现ios电商平台终端网页自适应。将上一步中设计好的网页布局图片进行切片，并将其转换为静态页面。通过html5技术，将静态页面进一步调整为终端自适应网页，能够适应ios平台各种终端设备的屏幕尺寸。同时，测试页面跳转逻辑，进行相应修改。4.功能实现。通过编程，实现ios电商平台终端的一系列功能，让用户能够通过前台页面进行商品查询、下单、付款、地址修改、评论以及其他附属功能操作。同时，后台更改商品数据库信息，前台能够显示商品种类、数量以及商品评论变化。5.测试。ios电商平台终端网页功能实现后，对系统进行使用测试。软件测试，是软件系统开发过程中必不可少的一环。测试是为了发现软件存在的各种潜在的缺陷与隐患，不让这些漏洞影响到软件运行与用户感受。在研究进展过程中，测试将贯穿系统开发的各个阶段，寻找出系统的漏洞与不足之处。尽早对各个模块进行测试，也是降低软件开发成本的一个重要手段。在设计过程中将涉及一些关键技术，如html5即超文本标记语言、级联样式表（cascading style sheet），即css、javascript、my