面向IOS終端的頁面自適應(yīng)技術(shù)研究

周寅

一、利用移動(dòng)終端上網(wǎng)效果不理想的原因

隨著移動(dòng)終端的發(fā)展，人們?cè)絹碓揭蕾囉谝苿?dòng)終端便捷的上網(wǎng)功能。但是人們發(fā)現(xiàn)，由于設(shè)備擁有著不同的屏幕尺寸，在移動(dòng)終端上呈現(xiàn)的效果并不讓人滿意，其原因有以下幾點(diǎn)：

1.移動(dòng)終端設(shè)備屏幕較小。盡管現(xiàn)今的一些移動(dòng)終端設(shè)備屏幕尺寸不斷增大，但絕大多數(shù)移動(dòng)終端的屏幕與PC端的屏幕大小相比仍有不小的差距。而想要將原來在PC端屏幕中呈現(xiàn)的網(wǎng)頁內(nèi)容良好地展現(xiàn)在較小尺寸的屏幕中，效果并不能讓人滿意。

2.移動(dòng)終端設(shè)備屏幕尺寸大小不一。移動(dòng)設(shè)備的快速更新迭代，也導(dǎo)致了終端屏幕尺寸的大小不一，這為開發(fā)者在移動(dòng)終端上設(shè)計(jì)網(wǎng)頁排版帶來了極大的困擾。

3.移動(dòng)終端設(shè)備默認(rèn)瀏覽器不同。終端操作系統(tǒng)搭載著不同的操作系統(tǒng)，其配備的默認(rèn)瀏覽器對(duì)HTML協(xié)議的支持不盡相同，特別是Windows Phone操作系統(tǒng)，由于其默認(rèn)瀏覽器內(nèi)核與其他操作系統(tǒng)的瀏覽器不同，因此在其瀏覽器中的網(wǎng)頁呈現(xiàn)效果與其他瀏覽器中的效果有著不小的差別。

二、自適應(yīng)網(wǎng)頁設(shè)計(jì)

如今，被絕大多數(shù)瀏覽器所支持的HTML5開始逐漸進(jìn)入人們視野，Ethan Marcotte在此基礎(chǔ)上于2010年提出了“自適應(yīng)網(wǎng)頁設(shè)計(jì)”（Responsive 網(wǎng)頁 Design）的概念，即可以自動(dòng)地識(shí)別判斷設(shè)備的屏幕寬度，并根據(jù)其寬度對(duì)網(wǎng)頁的內(nèi)容進(jìn)行重新排版，以適應(yīng)各種設(shè)備的屏幕尺寸，達(dá)到一個(gè)良好的呈現(xiàn)效果。隨著“自適應(yīng)網(wǎng)頁設(shè)計(jì)”概念被提出，開發(fā)者們?cè)絹碓疥P(guān)注在移動(dòng)終端的網(wǎng)頁設(shè)計(jì)開發(fā)，許多電子商務(wù)平臺(tái)也越來越重視用戶在移動(dòng)終端設(shè)備的瀏覽感受，開始嘗試推出移動(dòng)終端版的網(wǎng)站。如淘寶、1號(hào)店、京東以及亞馬遜等一些主流電商都推出了自己的網(wǎng)頁端，甚至是自己的移動(dòng)客戶端。用戶可以快速方便地瀏覽查閱產(chǎn)品信息，移動(dòng)端成交額也逐年增長。除此之外，我們也看到了當(dāng)中的一些不足之處。以淘寶移動(dòng)端為例，其依舊局限于傳統(tǒng)的互聯(lián)網(wǎng)思維中，移動(dòng)端頁面體驗(yàn)依舊不容樂觀。目前主流電商移動(dòng)網(wǎng)頁端那些復(fù)雜的界面和繁瑣的操作流程，讓人有種眼花繚亂的感覺，有時(shí)用戶會(huì)由于頁面繁多的按鈕而失去購物的興致。

三、移動(dòng)網(wǎng)頁端

國外電商發(fā)展與國內(nèi)相比，起步較早，經(jīng)驗(yàn)比國內(nèi)電商豐富，移動(dòng)網(wǎng)頁端的發(fā)展比較成熟，用戶在移動(dòng)終端的體驗(yàn)也更流暢。以國外新興的電商平臺(tái)Goodsie為例，其具有以下幾個(gè)特點(diǎn)：

1.頁面簡單明了，沒有繁復(fù)感。國外新興移動(dòng)電商平臺(tái)與國內(nèi)主流移動(dòng)電商平臺(tái)相比，最大的區(qū)別在于前者頁面簡單，將商品著重突出，沒有讓人眼花繚亂的按鈕圖標(biāo)。

2.操作簡單流暢。頁面的的簡約化，與之對(duì)應(yīng)的便是操作流程的簡約化，只需幾步便可完成購物，這種操作特別在移動(dòng)網(wǎng)頁端有著很大的優(yōu)勢(shì)，突出了移動(dòng)端的便捷性。電商淘寶推出過“淘寶瀏覽器”，著重優(yōu)化了淘寶在移動(dòng)終端的用戶體驗(yàn)，但是此舉依舊有著很大的局限性，只有用戶下載了該瀏覽器才能提升一定的使用體驗(yàn)，并不能完全解決問題。因此，對(duì)移動(dòng)電商平臺(tái)終端進(jìn)行重構(gòu)與優(yōu)化在一定程度上可以提高用戶體驗(yàn)，可以嘗試將終端自適應(yīng)設(shè)計(jì)中蘊(yùn)含的簡約化以及便捷性運(yùn)用到移動(dòng)終端上。

四、移動(dòng)終端運(yùn)用自適應(yīng)網(wǎng)頁設(shè)計(jì)的步驟

1.研究國內(nèi)外移動(dòng)電商平臺(tái)實(shí)現(xiàn)。研究國內(nèi)外移動(dòng)電商平臺(tái)的特性，深入挖掘國內(nèi)外移動(dòng)電商平臺(tái)的設(shè)計(jì)思想以及邏輯結(jié)構(gòu)。與此同時(shí)，通過國內(nèi)外電商移動(dòng)平臺(tái)的比較，總結(jié)出雙方值得借鑒的地方，分析比較東西方用戶在瀏覽移動(dòng)網(wǎng)頁時(shí)，使用習(xí)慣上的不同之處，為設(shè)計(jì)終端自適應(yīng)布局打下基礎(chǔ)。

2.IOS電商平臺(tái)網(wǎng)頁應(yīng)用設(shè)計(jì)。將之前研究分析的國內(nèi)外移動(dòng)電商平臺(tái)的頁面特點(diǎn)運(yùn)用到研究中去，設(shè)計(jì)出適合的網(wǎng)頁內(nèi)容及相關(guān)功能，并結(jié)合國內(nèi)外移動(dòng)電商平臺(tái)的布局特點(diǎn)，設(shè)計(jì)出適合的網(wǎng)頁布局，導(dǎo)出成圖片。

3.實(shí)現(xiàn)IOS電商平臺(tái)終端網(wǎng)頁自適應(yīng)。將上一步中設(shè)計(jì)好的網(wǎng)頁布局圖片進(jìn)行切片，并將其轉(zhuǎn)換為靜態(tài)頁面。通過HTML5技術(shù)，將靜態(tài)頁面進(jìn)一步調(diào)整為終端自適應(yīng)網(wǎng)頁，能夠適應(yīng)IOS平臺(tái)各種終端設(shè)備的屏幕尺寸。同時(shí)，測(cè)試頁面跳轉(zhuǎn)邏輯，進(jìn)行相應(yīng)修改。

4.功能實(shí)現(xiàn)。通過編程，實(shí)現(xiàn)IOS電商平臺(tái)終端的一系列功能，讓用戶能夠通過前臺(tái)頁面進(jìn)行商品查詢、下單、付款、地址修改、評(píng)論以及其他附屬功能操作。同時(shí)，后臺(tái)更改商品數(shù)據(jù)庫信息，前臺(tái)能夠顯示商品種類、數(shù)量以及商品評(píng)論變化。

5.測(cè)試。IOS電商平臺(tái)終端網(wǎng)頁功能實(shí)現(xiàn)后，對(duì)系統(tǒng)進(jìn)行使用測(cè)試。軟件測(cè)試，是軟件系統(tǒng)開發(fā)過程中必不可少的一環(huán)。測(cè)試是為了發(fā)現(xiàn)軟件存在的各種潛在的缺陷與隱患，不讓這些漏洞影響到軟件運(yùn)行與用戶感受。在研究進(jìn)展過程中，測(cè)試將貫穿系統(tǒng)開發(fā)的各個(gè)階段，尋找出系統(tǒng)的漏洞與不足之處。盡早對(duì)各個(gè)模塊進(jìn)行測(cè)試，也是降低軟件開發(fā)成本的一個(gè)重要手段。

在設(shè)計(jì)過程中將涉及一些關(guān)鍵技術(shù)，如HTML5即超文本標(biāo)記語言、級(jí)聯(lián)樣式表（Cascading Style Sheet），即CSS、JavaScript、MySQL等。其中MySQL是一個(gè)開放源碼的小型關(guān)聯(lián)式數(shù)據(jù)庫管理系統(tǒng)，非常適合個(gè)人以及中小型企業(yè)使用。MySQL具有快速、成本小和體積小等特性，由于其開放源代碼的特點(diǎn)，可以有效減少開發(fā)成本。