這就要求我們對原有PCAPP進行分析,舍棄頁面中起修飾修飾作用,以及次要的內容,保留頁面的核心內容。(2)編寫適合于移動終端顯示的樣式表。精簡APP的內容之后,即可編寫適合移動終端瀏覽的CSS樣式表。編寫時需注意兩個要點:其一,對于舍棄的內
伴隨移動互聯網技術的快速發展,各類移動設備得到廣泛普及,智能手機用戶的數量更是迅猛增長。在手機網民迅猛增加的情勢之下,幾乎所有用戶都希望能通過手機方便、快捷地訪問APP。而傳統APP的界面和風格都是針對PC端設計的,用戶直接在移動設備上面使用,會出現諸多問題。傳統APP在用戶體驗上,不能滿足手機用戶的需求。
移動設備與PC在分辨率和屏幕顯示方向上都有很大的區別,并且受網絡和自身處理能力的限制,當用戶使用手機瀏覽傳統APP時,都會出現頁面布局混亂、無用信息過多等現象,頁面效果不盡如人意。主要的問題如下：第一,由于智能手機的屏幕尺寸比PC屏幕小,用戶使用智能手機直接訪問傳統APP,往往會因為屏幕尺寸不足而頁面變形。即使頁面不變形,智能手機上顯示的效果也是PC頁面的縮小版,過小的文字、圖片等頁面元素,不利于用戶瀏覽。
第二,對于用戶操作比較多的功能性APP,傳統的PC操作便利,不會給用戶帶來困擾。如果直接在手機上使用此類APP,縮小的功能按鈕和虛擬鍵盤給用戶操作帶來極大的不便,用戶體驗大大降低。第三,PC是通過有線網絡來訪問網上的,其技術已經十分成熟,不會受流量與速度的限制。為了追求更高的用戶體驗,傳統PC頁面上會使用大量的APP特效,再加上廣告等信息,頁面數據量一般都比較大。而智能手機則通過無線網絡來訪問網上,并且智能手機終端的處理能力遠不如PC,受到無線網絡和智能手機自身處理能力的限制,使用智能手機直接訪問傳統PCAPP,會出現下載速度慢和產生大量流量資費等問題。在APP得到廣泛應用的今天,考慮到移動互聯網的個性與特點,如何將傳統PCAPP構建為順應移動互聯網發展趨勢,適用于各種智能移動終端的APP,成為了大家極為關注的焦點。
針對以上問題,將傳統PCAPP構建為兼容各種智能終端的移動版APP已是大勢所趨。目前,具體的實現方法主要有以下三種：
(一)頁面重建該方法是在原有PC站點的基礎之上,通過組織團隊或尋找軟件開發公司,針對智能移動終端的特點,開發移動版APP,形成PC站點+移動站點的結構。用戶瀏覽APP時,根據自身使用的客戶端設備類型,來選擇對應的APP版本。此方法可以根據不同的客戶端而量身定制滿足客戶需求的站點,可以最大程度的提高用戶體驗,但這種方式存在開發成本和維護成本高等缺點。
(二)利用百度SiteApp工具此方法借助第三方工具百度SiteApp,通過該工具快速將傳統PCAPP構建為移動版APP。具體實現過程如下:
(1)通過輸入官方地址http://siteapp.baidu.com,打開在線工具SiteApp,并在其中輸入想要構建為手機APP的PCAPP地址;(2)選擇目標APP的樣式;(3)通過添加或者自動抓取等方式,設置目標APP的導航;
(4)根據需要,添加電話、郵箱、版權等相關組件;
(5)下載驗證文件,上傳至APP根目錄進行APP驗證;
(6)綁定域名,配置dns即可。
SiteApp工具對于復雜腳本的處理能力有限,并且對APP交互功能的轉換效果比較差,因此它比較適合于構建以文字閱讀為主的APP。
(三)響應式APP響應式APP也稱之為自適應APP,它能夠兼容各種客戶終端。也就是說,采用這種方法,只需開發一個APP,便可提供給所有的設備設備使用,無需考慮屏幕尺寸不一的問題。將PCAPP構建為響應式APP,既要保留其原有的PC端瀏覽效果,又要使其兼容不同類型的智能終端設備,所以只能在保持原有APP結構的前提下,通過樣式表來滿足智能終端的瀏覽需求。具體實現過程如下:(1)分析APP,刪減冗余內容。根據移動終端設備受網絡和屏幕尺寸限制的特點,其瀏覽的APP應是最精簡的。這就要求我們對原有PCAPP進行分析,舍棄頁面中起修飾修飾作用,以及次要的內容,保留頁面的核心內容。(2)編寫適合于移動終端顯示的樣式表。精簡APP的內容之后,即可編寫適合移動終端瀏覽的CSS樣式表。編寫時需注意兩個要點:其一,對于舍棄的內容,可通過display:none屬性值對進行設置,將其隱藏掉;其二,用于布局的div模塊,寬度都使用百分比進行設置,實現自適應寬度的流體布局。
(3)根據客戶端屏幕尺寸大小,自動應用樣式表。在APP頁頭中的link標簽,使用CSS3的mediaquery設置功能,讓頁面能根據不同設備屏幕尺寸,自動加載對應的樣式表。
響應式APP通過使用流體布局、媒體查詢等技術制作APP,使得APP能夠自適應不同的終端設備。它是目前構建兼容PC和智能移動設備APP的最佳方案,也是Web設計的趨勢。
