李婉茹 余楊奎
摘要:手機(jī)端Web App是在智能手機(jī)上顯示的聯(lián)網(wǎng)軟件,手機(jī)端Web App方便人們使用智能移動(dòng)設(shè)備獲取更多的信息和資訊,突破時(shí)間與空間的限制,給生活帶來(lái)更大的便利。在視覺(jué)傳達(dá)設(shè)計(jì)視角下,針對(duì)手機(jī)端Web App中字體、版面、顏色、動(dòng)畫(huà)等元素進(jìn)行布局,向受眾傳達(dá)版面內(nèi)涵,提升受眾瀏覽興趣。將PC端Web運(yùn)用到手機(jī)端Web App中研究,使移動(dòng)終端上正常瀏覽PC端的網(wǎng)頁(yè)資源,實(shí)現(xiàn)PC端Web應(yīng)用到手機(jī)端Web App的轉(zhuǎn)換。方便用戶使用手機(jī)訪問(wèn)互聯(lián)網(wǎng)Web網(wǎng)頁(yè)快速準(zhǔn)確的捕捉到有用信息,彌補(bǔ)響應(yīng)式技術(shù)面臨多終端調(diào)用CSS樣式出錯(cuò),導(dǎo)致頁(yè)面訪問(wèn)不協(xié)調(diào)的問(wèn)題。
關(guān)鍵詞: PC端Web;手機(jī)端 Web App;轉(zhuǎn)換
中圖分類號(hào):TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼:A
文章編號(hào):1009-3044(2021)30-0092-03
開(kāi)放科學(xué)(資源服務(wù))標(biāo)識(shí)碼(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ā)展日新月異,國(guó)家為了適應(yīng)時(shí)代發(fā)展的要求,不斷地提升軟硬件實(shí)力,借助網(wǎng)絡(luò)技術(shù)和信息技術(shù)的優(yōu)勢(shì),開(kāi)發(fā)新的智能產(chǎn)品,滿足不同用戶在不同場(chǎng)合的需求。無(wú)論是國(guó)內(nèi)還是國(guó)外,人們對(duì)手機(jī)端Web App的接受度在不斷增加,支付寶、微信錢包、手機(jī)QQ錢包、視頻軟件和閱讀軟件等在人們的生活中得到了廣泛的應(yīng)用,手機(jī)端Web App改變了人們的生活方式和生活空間,對(duì)各行各業(yè)都產(chǎn)生了深遠(yuǎn)的影響。為了更好地實(shí)現(xiàn)手機(jī)端Web App的使用性能,吸引受眾的注意力,通過(guò)視覺(jué)來(lái)向人們傳達(dá)手機(jī)端Web App的各種信息,視覺(jué)傳達(dá)設(shè)計(jì)應(yīng)該緊跟科技發(fā)展的步伐,體現(xiàn)設(shè)計(jì)者別出心裁的內(nèi)涵,通過(guò)視覺(jué)傳達(dá)設(shè)計(jì)來(lái)展現(xiàn)手機(jī)端Web App的設(shè)計(jì)版面,設(shè)計(jì)者根據(jù)現(xiàn)有的Web網(wǎng)頁(yè)資源特點(diǎn),實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)碼,使傳統(tǒng)PC瀏覽網(wǎng)頁(yè)在移動(dòng)終端中更好地顯示出來(lái)。
1 PC端Web、手機(jī)端Web App之間的區(qū)別
手機(jī)端Web App與PC端Web的區(qū)別在于:手機(jī)端Web App是在手機(jī)上使用的,PC端Web是在電腦上使用。
移動(dòng)互聯(lián)網(wǎng)可以隨時(shí)隨地的為人們提供信息服務(wù),PC端也稱電腦端,人們使用電腦聯(lián)網(wǎng)獲取信息,通過(guò)Web同步數(shù)據(jù)。手機(jī)端Web App是人們使用移動(dòng)設(shè)備上網(wǎng)瀏覽信息,在功能上兩者沒(méi)有什么不同,不過(guò)手機(jī)端Web App使用較為便捷。手機(jī)端的操作方式多為滑動(dòng),PS端則是點(diǎn)擊。手機(jī)端Web App在使用時(shí)可能會(huì)因流量產(chǎn)生費(fèi)用問(wèn)題,而且對(duì)頁(yè)面內(nèi)容也有要求,手機(jī)端Web App的頁(yè)面內(nèi)容應(yīng)該盡可能精簡(jiǎn)。手機(jī)端Web App受到瀏覽器性能資源的限制,最好不使用復(fù)雜的渲染動(dòng)畫(huà),PC端Web這個(gè)問(wèn)題不明顯。PC端和手機(jī)端在界面布局上存在差異,PC端的屏幕較為寬大,布局更加靈活,手機(jī)端屏幕比較窄小,通常是單列,最多是雙列+響應(yīng)式。手機(jī)端Web App很接近手機(jī)端原生的App行為模式和外觀,手機(jī)端開(kāi)發(fā)的供給是專用的,不用于PC端;同樣的,PC端的一些工具在手機(jī)端中也不好用[1]。
隨著手機(jī)網(wǎng)民的數(shù)量不斷增多,移動(dòng)設(shè)備打開(kāi)了移動(dòng)互聯(lián)網(wǎng)的市場(chǎng),手機(jī)營(yíng)銷是未來(lái)必然的趨勢(shì),App作為手機(jī)營(yíng)銷的主要工具,有兩個(gè)發(fā)展的方向:一是原生App,二是手機(jī)端Web App。原生App可以直接安裝到移動(dòng)設(shè)備中,原生App具有一定的針對(duì)性,是專門針對(duì)某一類移動(dòng)設(shè)備產(chǎn)生的,原生App的每種平臺(tái)都需要使用獨(dú)立的開(kāi)發(fā)語(yǔ)言,如Java(Android)[2],移動(dòng)操作系統(tǒng)中要有獨(dú)立的開(kāi)發(fā)項(xiàng)目,然后使用各自的軟件開(kāi)發(fā)包;手機(jī)端Web App通常是利用設(shè)備上的瀏覽器來(lái)運(yùn)行的,不需要下載安裝,只需要開(kāi)發(fā)一個(gè)項(xiàng)目就可以,這種應(yīng)用使用HTML5、CSS3、Java Script和服務(wù)器端語(yǔ)言完成,可以任意地選擇一些跨平臺(tái)的開(kāi)發(fā)工具。原生App可以實(shí)現(xiàn)移動(dòng)硬件設(shè)備的底層功能,例如攝像頭、個(gè)人信息和重力加速度等等;手機(jī)端Web App只能使用有限的移動(dòng)硬件設(shè)備功能。
2 手機(jī)端Web App性能的影響因素
手機(jī)端Web App被用戶點(diǎn)擊觸發(fā)后展現(xiàn)在用戶眼前的是一個(gè)可交互的狀態(tài),通過(guò)DNS域名解析將URL轉(zhuǎn)換為IP地址,再將IP地址連接到Web服務(wù)器上,在瀏覽器與服務(wù)器之間建立TCP連接,連接成功后瀏覽器向Web服務(wù)器發(fā)送HTTP請(qǐng)求,獲取各種資源,如圖片、CSS、JavaScript文件、HTML文檔等內(nèi)容。手機(jī)端Web App的響應(yīng)時(shí)間主要取決于頁(yè)面的渲染時(shí)間和資源的加載時(shí)間。頁(yè)面的渲染速度與設(shè)備硬件性能有關(guān),不過(guò),在相同的硬件設(shè)備使用中,CSS的使用規(guī)范性也會(huì)影響到渲染的速度。各種資源的加載時(shí)間受到打開(kāi)頁(yè)面和窗口數(shù)量的影響,通常手機(jī)端Web App最多只能同時(shí)發(fā)起4個(gè)網(wǎng)絡(luò)請(qǐng)求,超出的請(qǐng)求太多會(huì)增加頁(yè)面的加載時(shí)間,所以在使用中需要控制手機(jī)端Web App的網(wǎng)絡(luò)請(qǐng)求數(shù)[3]。HTML5技術(shù)的快速發(fā)展與移動(dòng)設(shè)備的大幅普及,促進(jìn)了手機(jī)端Web App的發(fā)展。手機(jī)端Web App的穩(wěn)定性隨著手機(jī)性能的優(yōu)化得到了不斷提升,HTML5技術(shù)為手機(jī)端Web App的開(kāi)發(fā)與應(yīng)用提供了源源不斷的動(dòng)力,設(shè)備的性能越好,手機(jī)端Web App的用戶體驗(yàn)度就越高。手機(jī)端Web App 將成為改變移動(dòng)互聯(lián)網(wǎng)生態(tài)格局的關(guān)鍵。
3手機(jī)端Web App開(kāi)發(fā)的核心要點(diǎn)
3.1語(yǔ)義化與結(jié)構(gòu)化
手機(jī)端Web App的頁(yè)面生成最初以切圖為導(dǎo)向,然后轉(zhuǎn)變成以語(yǔ)義化導(dǎo)向,頁(yè)面的結(jié)構(gòu)與層次變得更加的清晰。結(jié)構(gòu)化的頁(yè)面有利于手機(jī)端Web App多瀏覽器兼容和多分辨率適配。手機(jī)的屏幕實(shí)際顯示像素比電腦屏幕小,有些內(nèi)容無(wú)法在一個(gè)屏幕中顯示出來(lái),結(jié)構(gòu)化的頁(yè)面可以使DOM顯示與隱藏交互,便于管理。手機(jī)端Web App可以適配不同的分辨率,分辨率的變化可能會(huì)導(dǎo)致頁(yè)面DOM顯示/隱藏的交互。語(yǔ)義化、結(jié)構(gòu)化的頁(yè)面是手機(jī)端Web App最好的選擇[4]。
3.2 移動(dòng)設(shè)備的特性
移動(dòng)設(shè)備的特性通常分為影響視覺(jué)的、影響觸覺(jué)的,HTML5技術(shù)和CSS3技術(shù)可以實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)。影響視覺(jué)主要包括屏幕分辨率和設(shè)備像素比,視覺(jué)設(shè)計(jì)會(huì)影響手機(jī)端Web App的設(shè)計(jì)稿和移動(dòng)設(shè)備產(chǎn)出的圖片;影響觸覺(jué)有觸摸屏(用手指操作)、傳感器(陀螺儀、GPS等)、軟鍵盤等幾部分組成,觸覺(jué)部分對(duì)人機(jī)交互的輸入接口有影響,Touch手勢(shì)、滑動(dòng)、語(yǔ)音識(shí)別、GPS、方位感應(yīng)等屬于輸入,對(duì)應(yīng)的HTML5、CSS3技術(shù)實(shí)現(xiàn)可以查閱W3C的相關(guān)文檔。
3.3瀏覽器(WebView)兼容
移動(dòng)瀏覽器兼容中的BUG有很多是瀏覽器運(yùn)行中產(chǎn)生的問(wèn)題,無(wú)法用理論解釋清楚,可以使用改進(jìn)技術(shù)實(shí)現(xiàn),但是沒(méi)有完美的技術(shù)解決方案,除非更改需求交互。在開(kāi)發(fā)和設(shè)計(jì)產(chǎn)品的時(shí)候,將這些技術(shù)性的問(wèn)題考慮到位,防止在測(cè)試階段出現(xiàn)問(wèn)題重新改進(jìn),會(huì)增加開(kāi)發(fā)成本。
3.4手機(jī)端調(diào)試
手機(jī)端Web App的開(kāi)發(fā)有95%的調(diào)試都是在 Chrome DevTools 移動(dòng)設(shè)備模擬器下進(jìn)行的,剩余的5%則使用特殊調(diào)試技巧。
3.5關(guān)于測(cè)試
開(kāi)發(fā)調(diào)試與測(cè)試不同,測(cè)試是由專門的QA部門操作的,測(cè)試的方法主要是手工,測(cè)試需要在限定的運(yùn)行環(huán)境下進(jìn)行,QA部門對(duì)移動(dòng)設(shè)備的機(jī)型、系統(tǒng)、瀏覽器(WebView)進(jìn)行測(cè)試。如果運(yùn)行的手機(jī)端Web App只在微信、QQ、微博等社交App中運(yùn)行,就可以只測(cè)試微信、QQ、微博WebView。如果不限制運(yùn)行環(huán)境,可能會(huì)因測(cè)試壓力太大,出現(xiàn)一些系統(tǒng)BUG。
4 PC端Web應(yīng)用到手機(jī)端WebApp 轉(zhuǎn)換的實(shí)現(xiàn)
4.1網(wǎng)頁(yè)轉(zhuǎn)換
隨著互聯(lián)網(wǎng)的快速普及,為移動(dòng)通信終端打開(kāi)了市場(chǎng)。移動(dòng)互聯(lián)網(wǎng)結(jié)合了互聯(lián)網(wǎng)的可擴(kuò)展性和移動(dòng)通信的便利性,成了通信業(yè)和互聯(lián)網(wǎng)業(yè)融合發(fā)展的交叉領(lǐng)域。移動(dòng)終端設(shè)備具有便攜性和即時(shí)性的特點(diǎn),但是移動(dòng)終端設(shè)備的型號(hào)不同,屏幕分辨率的大小也不等,適配開(kāi)發(fā)的成本較大,而且移動(dòng)終端設(shè)備的CPU處理性能低,內(nèi)存小,有些傳統(tǒng)的PC網(wǎng)頁(yè)不能在移動(dòng)終端上正常顯示,還需要進(jìn)行二次開(kāi)發(fā),增加了網(wǎng)頁(yè)的建設(shè)和維護(hù)成本[5]。針對(duì)這一問(wèn)題,相關(guān)人員研究出了兩個(gè)網(wǎng)站改進(jìn)方案,一是利用響應(yīng)式Web設(shè)計(jì)模式開(kāi)發(fā)新的手機(jī)客戶端網(wǎng)頁(yè),在開(kāi)發(fā)的時(shí)候?qū)⑹謾C(jī)型號(hào)、屏幕尺寸考慮在內(nèi),讓內(nèi)容的寬度隨著手機(jī)端自動(dòng)調(diào)整;二是根據(jù)PC端網(wǎng)站的頁(yè)面,手動(dòng)調(diào)整手機(jī)端顯示的頁(yè)面,在調(diào)整過(guò)程中考慮到手機(jī)尺寸、瀏覽器兼容等問(wèn)題,將PC端Web 的網(wǎng)頁(yè)轉(zhuǎn)換成手機(jī)端Web App網(wǎng)頁(yè)。將PC端Web 的網(wǎng)頁(yè)轉(zhuǎn)換成手機(jī)端Web App網(wǎng)頁(yè)的方法是在原網(wǎng)址的內(nèi)容、保持原有界面外觀的前提下對(duì)其進(jìn)行開(kāi)發(fā)和設(shè)計(jì),這種方式極大地降低了開(kāi)發(fā)成本和維護(hù)成本,省時(shí)省力。
將PC端Web 的網(wǎng)頁(yè)轉(zhuǎn)換成手機(jī)端Web App網(wǎng)頁(yè)需要完成以下步驟:1)分析網(wǎng)頁(yè)的結(jié)構(gòu),設(shè)計(jì)人員通過(guò)Web應(yīng)用對(duì)傳統(tǒng)的PC網(wǎng)頁(yè)進(jìn)行配置,將配置信息存入數(shù)據(jù)庫(kù)中。在這一步驟內(nèi),可以借助第三方工具分析傳統(tǒng)PC網(wǎng)頁(yè)的DOM結(jié)構(gòu),將網(wǎng)頁(yè)匯總的內(nèi)容劃分到手機(jī)端展示的模塊中,使每一模塊的內(nèi)容都適用于Web應(yīng)用中的任一模板。2)天河適配 Java Script引擎,天河適配 Java Script引擎中的文件會(huì)被瀏覽器加載,能夠根據(jù)相關(guān)的數(shù)據(jù)實(shí)現(xiàn)特定的功能[6]。天河適配 Java Script引擎的部署方式可以是靜態(tài)部署、動(dòng)態(tài)部署和代理部署中的任意一種。使用靜態(tài)部署方式可以根據(jù)數(shù)據(jù)庫(kù)中第一個(gè)步驟得到了配置信息,將JavaScript文件引入到原網(wǎng)頁(yè)中,當(dāng)手機(jī)用戶端訪問(wèn)PC網(wǎng)頁(yè)時(shí),JavaScript文件里的天河適配引擎會(huì)根據(jù)用戶訪問(wèn)的URL、原網(wǎng)頁(yè)的內(nèi)容和移動(dòng)設(shè)備的參數(shù)將傳統(tǒng)PC網(wǎng)頁(yè)適配成移動(dòng)版網(wǎng)頁(yè)。3)頁(yè)面適配,使用天河適配 Java Script引擎根據(jù)數(shù)據(jù)庫(kù)中的配置信息、訪問(wèn)頁(yè)面的URL、原網(wǎng)頁(yè)的內(nèi)容和移動(dòng)設(shè)備的參數(shù),將傳統(tǒng)PC網(wǎng)頁(yè)適配成手機(jī)端網(wǎng)頁(yè)。自動(dòng)調(diào)整標(biāo)簽之間的距離和標(biāo)簽的大小,重新設(shè)定頁(yè)面內(nèi)容的顯示位置。
4.2 響應(yīng)式Web設(shè)計(jì)
PC端Web應(yīng)用到手機(jī)端Web App中,需要實(shí)現(xiàn)頁(yè)面內(nèi)容的自適應(yīng)和瀏覽器的兼容性,基于響應(yīng)式Web設(shè)計(jì)的模式能夠自動(dòng)切換分辨率、改變圖片的尺寸,滿足聯(lián)網(wǎng)設(shè)備多樣性的特點(diǎn)[7]。為了能夠隨時(shí)隨地獲取信息人們選擇使用手機(jī)、平板等移動(dòng)設(shè)備進(jìn)行聯(lián)網(wǎng)。在移動(dòng)設(shè)備多元化的背景下,需要在不同設(shè)備上呈現(xiàn)給用戶同樣的Web網(wǎng)頁(yè)。響應(yīng)式Web設(shè)計(jì)是一種全新的Web設(shè)計(jì)思想,它能夠自動(dòng)適應(yīng)用戶的終端設(shè)備,讓網(wǎng)頁(yè)根據(jù)用戶的瀏覽需求和設(shè)備環(huán)境作出相應(yīng)的響應(yīng)和調(diào)整。實(shí)現(xiàn)PC端Web向手機(jī)端Web App的轉(zhuǎn)換,使一次編寫(xiě)的網(wǎng)頁(yè)在不同分辨率的終端下友好顯示。響應(yīng)式Web設(shè)計(jì)能夠在根本上解決網(wǎng)頁(yè)在不同屏幕大小的移動(dòng)設(shè)備的顯示問(wèn)題。
5 PC端Web應(yīng)用轉(zhuǎn)換到手機(jī)端Web App的優(yōu)勢(shì)
5.1個(gè)性化
受眾可以通過(guò)響應(yīng)式技術(shù)對(duì)版面進(jìn)行調(diào)整,選擇自己喜歡的版面風(fēng)格,調(diào)整自己喜聞樂(lè)見(jiàn)感興趣的欄目進(jìn)行關(guān)注。移動(dòng)終端瀏覽普通web頁(yè)面,只能被動(dòng)接受同樣的資源信息,從而凸顯出轉(zhuǎn)換后的手機(jī)端Web App的個(gè)性化特征。
5.2交互性
手機(jī)端Web App封裝后,與PC端Web應(yīng)用共享同一個(gè)信息數(shù)據(jù)庫(kù),在反饋信息交互方面提供了一個(gè)更加便捷的渠道。受眾在一定程度上擺脫了對(duì)PC端的依賴,可以隨時(shí)隨地作為信息的發(fā)布者和傳遞者,由此可見(jiàn),轉(zhuǎn)換后的手機(jī)端Web App有更強(qiáng)的交互性。
5.3多樣性
PC端Web應(yīng)用轉(zhuǎn)換到手機(jī)端Web App后,能提供更多信息,選擇性更強(qiáng)。音頻、視頻、文字、圖片都可以作為轉(zhuǎn)換后的手機(jī)Web App的信息載體,甚至可以將所有元素集合在一起,形成圖文并茂的信息進(jìn)行傳遞,體現(xiàn)了多樣性的特點(diǎn)。
5.4及時(shí)性
轉(zhuǎn)換后的手機(jī)端Web App打破僅依賴PC端在時(shí)間和空間等方面的局限性,受眾可以利用Web App隨時(shí)隨地接收和發(fā)布信息。在大數(shù)據(jù)和云計(jì)算的推動(dòng)下,能更準(zhǔn)確、更及時(shí)推送信息給需要的客戶群體。體現(xiàn)了Web App及時(shí)性的特點(diǎn)。
6 結(jié)束語(yǔ)
視覺(jué)傳達(dá)設(shè)計(jì)是創(chuàng)新所向,創(chuàng)新是設(shè)計(jì)的目標(biāo),視覺(jué)傳達(dá)設(shè)計(jì)視角下對(duì)手機(jī)端Web App的設(shè)計(jì)是吸引受眾的手段,讓受眾更加方便快捷地瀏覽到互聯(lián)網(wǎng)信息?,F(xiàn)在的手機(jī)分辨率千奇百怪,一次開(kāi)發(fā),多種適應(yīng)的響應(yīng)式布局已經(jīng)成為主流。設(shè)計(jì)者在手機(jī)端Web App中運(yùn)用響應(yīng)式Web設(shè)計(jì)模式,提高手機(jī)端的應(yīng)用性能,保證頁(yè)面具有適配性,頁(yè)面內(nèi)容能夠兼容。手機(jī)端的電量和內(nèi)存的資源有限,在手機(jī)端業(yè)務(wù)需求越來(lái)越復(fù)雜的情況下,優(yōu)化手機(jī)端Web App的性能有著很大的意義。將PC端Web應(yīng)用到手機(jī)端Web App轉(zhuǎn)換,用戶可以直接通過(guò)安裝在手機(jī)端的Web App進(jìn)行訪問(wèn),滿足用戶的瀏覽需求。
參考文獻(xiàn):
[1] 李玥.PC端Web應(yīng)用到手機(jī)端Web App轉(zhuǎn)換的研究與實(shí)現(xiàn)[D].北京:北京郵電大學(xué),2015.
[2] 沙季湲.基于IBM Domino的移動(dòng)入口系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].成都:電子科技大學(xué),2014.
[3] 劉向明.基于Internet的嵌入式遠(yuǎn)程監(jiān)控網(wǎng)絡(luò)技術(shù)的研究與實(shí)現(xiàn)[D].上海:東華大學(xué),2012.
[4] 劉兵.利用Web Service實(shí)現(xiàn)嵌入式設(shè)備與PC端的無(wú)線通信[J].單片機(jī)與嵌入式系統(tǒng)應(yīng)用,2016,16(3):30-33.
[5] 北京天河石科技有限責(zé)任公司.一種PC端WEB網(wǎng)頁(yè)轉(zhuǎn)換為移動(dòng)端WEB網(wǎng)頁(yè)的方法:CN201510399492.0[P].2015-12-09.
[6] 朱珍元,王鶴琴,郭標(biāo).基于HTML5和SSM的移動(dòng)Web App開(kāi)發(fā)[J].電腦知識(shí)與技術(shù),2017,13(21):73-75.
[7] 鄭舟,周蕓韜.移動(dòng)WebApp與原生App的深入比較[C]//2013全國(guó)報(bào)社新聞技術(shù)工作會(huì)議暨中國(guó)報(bào)業(yè)技術(shù)年會(huì)論文集,云南師范大學(xué),2013:53-56.
【通聯(lián)編輯:唐一東】