視覺傳達設(shè)計視角下手機端Web App的研究與實現(xiàn)

李婉茹 余楊奎

摘要：手機端Web App是在智能手機上顯示的聯(lián)網(wǎng)軟件，手機端Web App方便人們使用智能移動設(shè)備獲取更多的信息和資訊，突破時間與空間的限制，給生活帶來更大的便利。在視覺傳達設(shè)計視角下，針對手機端Web App中字體、版面、顏色、動畫等元素進行布局，向受眾傳達版面內(nèi)涵，提升受眾瀏覽興趣。將PC端Web運用到手機端Web App中研究，使移動終端上正常瀏覽PC端的網(wǎng)頁資源，實現(xiàn)PC端Web應(yīng)用到手機端Web App的轉(zhuǎn)換。方便用戶使用手機訪問互聯(lián)網(wǎng)Web網(wǎng)頁快速準確的捕捉到有用信息，彌補響應(yīng)式技術(shù)面臨多終端調(diào)用CSS樣式出錯，導(dǎo)致頁面訪問不協(xié)調(diào)的問題。

關(guān)鍵詞： PC端Web;手機端 Web App;轉(zhuǎn)換

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）30-0092-03

開放科學（資源服務(wù)）標識碼（OSID）：

A Study and Realization of Mobile Phone End Web App Based on Visual Communication Design

LI Wan-ru， YU Yang-kui

（The Open University of Guangdong，Zhanjiang 524003， China）

Abstract：The mobile phone Web App is the networking software displayed on the smartphone. The mobile phone Web App which is convenient for people to use smart mobile devices to obtain more information and information， can break through the limitation of time and space， and bring greater convenience to life. From the perspective of visual communication design， the layout of font， layout， color and animation in the Web App of mobile phone is carried out to convey the connotation of layout to the audience and enhance the audience's interest in browsing. The PC end Web is applied to the mobile phone end Web App to make the mobile terminal browse the web resources of the PC end normally， and realize the application of the PC end to the mobile phone end Web App conversion. It is easy to? facilitate users to use mobile phones to access the Internet Web web pages quickly and accurately capture useful information， to make up for the response technology faced with multi-terminal calls CSS style errors， resulting in page access problems.

Key words：PC end Web; mobile Web App; conversion

科技發(fā)展日新月異，國家為了適應(yīng)時代發(fā)展的要求，不斷地提升軟硬件實力，借助網(wǎng)絡(luò)技術(shù)和信息技術(shù)的優(yōu)勢，開發(fā)新的智能產(chǎn)品，滿足不同用戶在不同場合的需求。無論是國內(nèi)還是國外，人們對手機端Web App的接受度在不斷增加，支付寶、微信錢包、手機QQ錢包、視頻軟件和閱讀軟件等在人們的生活中得到了廣泛的應(yīng)用，手機端Web App改變了人們的生活方式和生活空間，對各行各業(yè)都產(chǎn)生了深遠的影響。為了更好地實現(xiàn)手機端Web App的使用性能，吸引受眾的注意力，通過視覺來向人們傳達手機端Web App的各種信息，視覺傳達設(shè)計應(yīng)該緊跟科技發(fā)展的步伐，體現(xiàn)設(shè)計者別出心裁的內(nèi)涵，通過視覺傳達設(shè)計來展現(xiàn)手機端Web App的設(shè)計版面，設(shè)計者根據(jù)現(xiàn)有的Web網(wǎng)頁資源特點，實現(xiàn)網(wǎng)頁轉(zhuǎn)碼，使傳統(tǒng)PC瀏覽網(wǎng)頁在移動終端中更好地顯示出來。

1 PC端Web、手機端Web App之間的區(qū)別

手機端Web App與PC端Web的區(qū)別在于：手機端Web App是在手機上使用的，PC端Web是在電腦上使用。

移動互聯(lián)網(wǎng)可以隨時隨地的為人們提供信息服務(wù)，PC端也稱電腦端，人們使用電腦聯(lián)網(wǎng)獲取信息，通過Web同步數(shù)據(jù)。手機端Web App是人們使用移動設(shè)備上網(wǎng)瀏覽信息，在功能上兩者沒有什么不同，不過手機端Web App使用較為便捷。手機端的操作方式多為滑動，PS端則是點擊。手機端Web App在使用時可能會因流量產(chǎn)生費用問題，而且對頁面內(nèi)容也有要求，手機端Web App的頁面內(nèi)容應(yīng)該盡可能精簡。手機端Web App受到瀏覽器性能資源的限制，最好不使用復(fù)雜的渲染動畫，PC端Web這個問題不明顯。PC端和手機端在界面布局上存在差異，PC端的屏幕較為寬大，布局更加靈活，手機端屏幕比較窄小，通常是單列，最多是雙列+響應(yīng)式。手機端Web App很接近手機端原生的App行為模式和外觀，手機端開發(fā)的供給是專用的，不用于PC端;同樣的，PC端的一些工具在手機端中也不好用[1]。

隨著手機網(wǎng)民的數(shù)量不斷增多，移動設(shè)備打開了移動互聯(lián)網(wǎng)的市場，手機營銷是未來必然的趨勢，App作為手機營銷的主要工具，有兩個發(fā)展的方向：一是原生App，二是手機端Web App。原生App可以直接安裝到移動設(shè)備中，原生App具有一定的針對性，是專門針對某一類移動設(shè)備產(chǎn)生的，原生App的每種平臺都需要使用獨立的開發(fā)語言，如Java（Android）[2]，移動操作系統(tǒng)中要有獨立的開發(fā)項目，然后使用各自的軟件開發(fā)包;手機端Web App通常是利用設(shè)備上的瀏覽器來運行的，不需要下載安裝，只需要開發(fā)一個項目就可以，這種應(yīng)用使用HTML5、CSS3、Java Script和服務(wù)器端語言完成，可以任意地選擇一些跨平臺的開發(fā)工具。原生App可以實現(xiàn)移動硬件設(shè)備的底層功能，例如攝像頭、個人信息和重力加速度等等;手機端Web App只能使用有限的移動硬件設(shè)備功能。

2 手機端Web App性能的影響因素

手機端Web App被用戶點擊觸發(fā)后展現(xiàn)在用戶眼前的是一個可交互的狀態(tài)，通過DNS域名解析將URL轉(zhuǎn)換為IP地址，再將IP地址連接到Web服務(wù)器上，在瀏覽器與服務(wù)器之間建立TCP連接，連接成功后瀏覽器向Web服務(wù)器發(fā)送HTTP請求，獲取各種資源，如圖片、CSS、JavaScript文件、HTML文檔等內(nèi)容。手機端Web App的響應(yīng)時間主要取決于頁面的渲染時間和資源的加載時間。頁面的渲染速度與設(shè)備硬件性能有關(guān)，不過，在相同的硬件設(shè)備使用中，CSS的使用規(guī)范性也會影響到渲染的速度。各種資源的加載時間受到打開頁面和窗口數(shù)量的影響，通常手機端Web App最多只能同時發(fā)起4個網(wǎng)絡(luò)請求，超出的請求太多會增加頁面的加載時間，所以在使用中需要控制手機端Web App的網(wǎng)絡(luò)請求數(shù)[3]。HTML5技術(shù)的快速發(fā)展與移動設(shè)備的大幅普及，促進了手機端Web App的發(fā)展。手機端Web App的穩(wěn)定性隨著手機性能的優(yōu)化得到了不斷提升，HTML5技術(shù)為手機端Web App的開發(fā)與應(yīng)用提供了源源不斷的動力，設(shè)備的性能越好，手機端Web App的用戶體驗度就越高。手機端Web App 將成為改變移動互聯(lián)網(wǎng)生態(tài)格局的關(guān)鍵。

3手機端Web App開發(fā)的核心要點

3.1語義化與結(jié)構(gòu)化

手機端Web App的頁面生成最初以切圖為導(dǎo)向，然后轉(zhuǎn)變成以語義化導(dǎo)向，頁面的結(jié)構(gòu)與層次變得更加的清晰。結(jié)構(gòu)化的頁面有利于手機端Web App多瀏覽器兼容和多分辨率適配。手機的屏幕實際顯示像素比電腦屏幕小，有些內(nèi)容無法在一個屏幕中顯示出來，結(jié)構(gòu)化的頁面可以使DOM顯示與隱藏交互，便于管理。手機端Web App可以適配不同的分辨率，分辨率的變化可能會導(dǎo)致頁面DOM顯示/隱藏的交互。語義化、結(jié)構(gòu)化的頁面是手機端Web App最好的選擇[4]。

3.2 移動設(shè)備的特性

移動設(shè)備的特性通常分為影響視覺的、影響觸覺的，HTML5技術(shù)和CSS3技術(shù)可以實現(xiàn)響應(yīng)式網(wǎng)頁。影響視覺主要包括屏幕分辨率和設(shè)備像素比，視覺設(shè)計會影響手機端Web App的設(shè)計稿和移動設(shè)備產(chǎn)出的圖片;影響觸覺有觸摸屏（用手指操作）、傳感器（陀螺儀、GPS等）、軟鍵盤等幾部分組成，觸覺部分對人機交互的輸入接口有影響，Touch手勢、滑動、語音識別、GPS、方位感應(yīng)等屬于輸入，對應(yīng)的HTML5、CSS3技術(shù)實現(xiàn)可以查閱W3C的相關(guān)文檔。

3.3瀏覽器（WebView）兼容

移動瀏覽器兼容中的BUG有很多是瀏覽器運行中產(chǎn)生的問題，無法用理論解釋清楚，可以使用改進技術(shù)實現(xiàn)，但是沒有完美的技術(shù)解決方案，除非更改需求交互。在開發(fā)和設(shè)計產(chǎn)品的時候，將這些技術(shù)性的問題考慮到位，防止在測試階段出現(xiàn)問題重新改進，會增加開發(fā)成本。

3.4手機端調(diào)試

手機端Web App的開發(fā)有95%的調(diào)試都是在 Chrome DevTools 移動設(shè)備模擬器下進行的，剩余的5%則使用特殊調(diào)試技巧。

3.5關(guān)于測試

開發(fā)調(diào)試與測試不同，測試是由專門的QA部門操作的，測試的方法主要是手工，測試需要在限定的運行環(huán)境下進行，QA部門對移動設(shè)備的機型、系統(tǒng)、瀏覽器（WebView）進行測試。如果運行的手機端Web App只在微信、QQ、微博等社交App中運行，就可以只測試微信、QQ、微博WebView。如果不限制運行環(huán)境，可能會因測試壓力太大，出現(xiàn)一些系統(tǒng)BUG。

4 PC端Web應(yīng)用到手機端WebApp 轉(zhuǎn)換的實現(xiàn)

4.1網(wǎng)頁轉(zhuǎn)換

隨著互聯(lián)網(wǎng)的快速普及，為移動通信終端打開了市場。移動互聯(lián)網(wǎng)結(jié)合了互聯(lián)網(wǎng)的可擴展性和移動通信的便利性，成了通信業(yè)和互聯(lián)網(wǎng)業(yè)融合發(fā)展的交叉領(lǐng)域。移動終端設(shè)備具有便攜性和即時性的特點，但是移動終端設(shè)備的型號不同，屏幕分辨率的大小也不等，適配開發(fā)的成本較大，而且移動終端設(shè)備的CPU處理性能低，內(nèi)存小，有些傳統(tǒng)的PC網(wǎng)頁不能在移動終端上正常顯示，還需要進行二次開發(fā)，增加了網(wǎng)頁的建設(shè)和維護成本[5]。針對這一問題，相關(guān)人員研究出了兩個網(wǎng)站改進方案，一是利用響應(yīng)式Web設(shè)計模式開發(fā)新的手機客戶端網(wǎng)頁，在開發(fā)的時候?qū)⑹謾C型號、屏幕尺寸考慮在內(nèi)，讓內(nèi)容的寬度隨著手機端自動調(diào)整;二是根據(jù)PC端網(wǎng)站的頁面，手動調(diào)整手機端顯示的頁面，在調(diào)整過程中考慮到手機尺寸、瀏覽器兼容等問題，將PC端Web 的網(wǎng)頁轉(zhuǎn)換成手機端Web App網(wǎng)頁。將PC端Web 的網(wǎng)頁轉(zhuǎn)換成手機端Web App網(wǎng)頁的方法是在原網(wǎng)址的內(nèi)容、保持原有界面外觀的前提下對其進行開發(fā)和設(shè)計，這種方式極大地降低了開發(fā)成本和維護成本，省時省力。

將PC端Web 的網(wǎng)頁轉(zhuǎn)換成手機端Web App網(wǎng)頁需要完成以下步驟：1）分析網(wǎng)頁的結(jié)構(gòu)，設(shè)計人員通過Web應(yīng)用對傳統(tǒng)的PC網(wǎng)頁進行配置，將配置信息存入數(shù)據(jù)庫中。在這一步驟內(nèi)，可以借助第三方工具分析傳統(tǒng)PC網(wǎng)頁的DOM結(jié)構(gòu)，將網(wǎng)頁匯總的內(nèi)容劃分到手機端展示的模塊中，使每一模塊的內(nèi)容都適用于Web應(yīng)用中的任一模板。2）天河適配 Java Script引擎，天河適配 Java Script引擎中的文件會被瀏覽器加載，能夠根據(jù)相關(guān)的數(shù)據(jù)實現(xiàn)特定的功能[6]。天河適配 Java Script引擎的部署方式可以是靜態(tài)部署、動態(tài)部署和代理部署中的任意一種。使用靜態(tài)部署方式可以根據(jù)數(shù)據(jù)庫中第一個步驟得到了配置信息，將JavaScript文件引入到原網(wǎng)頁中，當手機用戶端訪問PC網(wǎng)頁時，JavaScript文件里的天河適配引擎會根據(jù)用戶訪問的URL、原網(wǎng)頁的內(nèi)容和移動設(shè)備的參數(shù)將傳統(tǒng)PC網(wǎng)頁適配成移動版網(wǎng)頁。3）頁面適配，使用天河適配 Java Script引擎根據(jù)數(shù)據(jù)庫中的配置信息、訪問頁面的URL、原網(wǎng)頁的內(nèi)容和移動設(shè)備的參數(shù)，將傳統(tǒng)PC網(wǎng)頁適配成手機端網(wǎng)頁。自動調(diào)整標簽之間的距離和標簽的大小，重新設(shè)定頁面內(nèi)容的顯示位置。

4.2 響應(yīng)式Web設(shè)計

PC端Web應(yīng)用到手機端Web App中，需要實現(xiàn)頁面內(nèi)容的自適應(yīng)和瀏覽器的兼容性，基于響應(yīng)式Web設(shè)計的模式能夠自動切換分辨率、改變圖片的尺寸，滿足聯(lián)網(wǎng)設(shè)備多樣性的特點[7]。為了能夠隨時隨地獲取信息人們選擇使用手機、平板等移動設(shè)備進行聯(lián)網(wǎng)。在移動設(shè)備多元化的背景下，需要在不同設(shè)備上呈現(xiàn)給用戶同樣的Web網(wǎng)頁。響應(yīng)式Web設(shè)計是一種全新的Web設(shè)計思想，它能夠自動適應(yīng)用戶的終端設(shè)備，讓網(wǎng)頁根據(jù)用戶的瀏覽需求和設(shè)備環(huán)境作出相應(yīng)的響應(yīng)和調(diào)整。實現(xiàn)PC端Web向手機端Web App的轉(zhuǎn)換，使一次編寫的網(wǎng)頁在不同分辨率的終端下友好顯示。響應(yīng)式Web設(shè)計能夠在根本上解決網(wǎng)頁在不同屏幕大小的移動設(shè)備的顯示問題。

5 PC端Web應(yīng)用轉(zhuǎn)換到手機端Web App的優(yōu)勢

5.1個性化

受眾可以通過響應(yīng)式技術(shù)對版面進行調(diào)整，選擇自己喜歡的版面風格，調(diào)整自己喜聞樂見感興趣的欄目進行關(guān)注。移動終端瀏覽普通web頁面，只能被動接受同樣的資源信息，從而凸顯出轉(zhuǎn)換后的手機端Web App的個性化特征。

5.2交互性

手機端Web App封裝后，與PC端Web應(yīng)用共享同一個信息數(shù)據(jù)庫，在反饋信息交互方面提供了一個更加便捷的渠道。受眾在一定程度上擺脫了對PC端的依賴，可以隨時隨地作為信息的發(fā)布者和傳遞者，由此可見，轉(zhuǎn)換后的手機端Web App有更強的交互性。

5.3多樣性

PC端Web應(yīng)用轉(zhuǎn)換到手機端Web App后，能提供更多信息，選擇性更強。音頻、視頻、文字、圖片都可以作為轉(zhuǎn)換后的手機Web App的信息載體，甚至可以將所有元素集合在一起，形成圖文并茂的信息進行傳遞，體現(xiàn)了多樣性的特點。

5.4及時性

轉(zhuǎn)換后的手機端Web App打破僅依賴PC端在時間和空間等方面的局限性，受眾可以利用Web App隨時隨地接收和發(fā)布信息。在大數(shù)據(jù)和云計算的推動下，能更準確、更及時推送信息給需要的客戶群體。體現(xiàn)了Web App及時性的特點。

6 結(jié)束語

視覺傳達設(shè)計是創(chuàng)新所向，創(chuàng)新是設(shè)計的目標，視覺傳達設(shè)計視角下對手機端Web App的設(shè)計是吸引受眾的手段，讓受眾更加方便快捷地瀏覽到互聯(lián)網(wǎng)信息。現(xiàn)在的手機分辨率千奇百怪，一次開發(fā)，多種適應(yīng)的響應(yīng)式布局已經(jīng)成為主流。設(shè)計者在手機端Web App中運用響應(yīng)式Web設(shè)計模式，提高手機端的應(yīng)用性能，保證頁面具有適配性，頁面內(nèi)容能夠兼容。手機端的電量和內(nèi)存的資源有限，在手機端業(yè)務(wù)需求越來越復(fù)雜的情況下，優(yōu)化手機端Web App的性能有著很大的意義。將PC端Web應(yīng)用到手機端Web App轉(zhuǎn)換，用戶可以直接通過安裝在手機端的Web App進行訪問，滿足用戶的瀏覽需求。

參考文獻：

[1] 李玥.PC端Web應(yīng)用到手機端Web App轉(zhuǎn)換的研究與實現(xiàn)[D].北京：北京郵電大學，2015.

[2] 沙季湲.基于IBM Domino的移動入口系統(tǒng)的設(shè)計與實現(xiàn)[D].成都：電子科技大學，2014.

[3] 劉向明.基于Internet的嵌入式遠程監(jiān)控網(wǎng)絡(luò)技術(shù)的研究與實現(xiàn)[D].上海：東華大學，2012.

[4] 劉兵.利用Web Service實現(xiàn)嵌入式設(shè)備與PC端的無線通信[J].單片機與嵌入式系統(tǒng)應(yīng)用，2016，16（3）：30-33.

[5] 北京天河石科技有限責任公司.一種PC端WEB網(wǎng)頁轉(zhuǎn)換為移動端WEB網(wǎng)頁的方法：CN201510399492.0[P].2015-12-09.

[6] 朱珍元，王鶴琴，郭標.基于HTML5和SSM的移動Web App開發(fā)[J].電腦知識與技術(shù)，2017，13（21）：73-75.

[7] 鄭舟，周蕓韜.移動WebApp與原生App的深入比較[C]//2013全國報社新聞技術(shù)工作會議暨中國報業(yè)技術(shù)年會論文集，云南師范大學，2013：53-56.

【通聯(lián)編輯：唐一東】