簡析移動(dòng)端網(wǎng)頁設(shè)計(jì)常見問題和技巧

摘要：21世紀(jì)，網(wǎng)絡(luò)科技不斷發(fā)展，網(wǎng)絡(luò)時(shí)代的到來促進(jìn)了當(dāng)下移動(dòng)網(wǎng)頁設(shè)計(jì)的快速發(fā)展。在新時(shí)代，熟知移動(dòng)Web設(shè)計(jì)的特殊性，積極學(xué)習(xí)Web設(shè)計(jì)技術(shù)是當(dāng)代數(shù)字媒體專業(yè)的必經(jīng)之路，創(chuàng)建移動(dòng)Web設(shè)計(jì)適配測試平臺(tái)，有效解決移動(dòng)Web設(shè)計(jì)的存在問題，分析問題產(chǎn)生的原因并提出解決對策，才能推動(dòng)移動(dòng)端網(wǎng)頁設(shè)計(jì)更好更快的發(fā)展。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì);移動(dòng)端;解決技術(shù)

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)頁技術(shù)日新月異，通過了解我國網(wǎng)頁設(shè)計(jì)的發(fā)展現(xiàn)狀，分析網(wǎng)頁技術(shù)設(shè)計(jì)的特點(diǎn)，掌握優(yōu)化移動(dòng)網(wǎng)頁視覺效果的規(guī)律，才能更好的掌握網(wǎng)頁設(shè)計(jì)技術(shù)。隨著智能移動(dòng)設(shè)備的不斷普及，手機(jī)等移動(dòng)端已成為人們獲得信息的主要渠道，也是人們生活中不可缺少的一部分。為了提高移動(dòng)網(wǎng)頁的設(shè)計(jì)水平，為了更好地實(shí)現(xiàn)移動(dòng)網(wǎng)頁的設(shè)計(jì)理念，更加輕松地訪問手機(jī)網(wǎng)頁，實(shí)現(xiàn)移動(dòng)Web頁的無障礙設(shè)計(jì)，需要優(yōu)化互聯(lián)網(wǎng)環(huán)境，提高移動(dòng)終端Web頁的設(shè)計(jì)標(biāo)準(zhǔn)，促進(jìn)網(wǎng)頁設(shè)計(jì)系統(tǒng)的構(gòu)建，加強(qiáng)網(wǎng)絡(luò)信息的及時(shí)傳輸，引領(lǐng)移動(dòng)網(wǎng)頁設(shè)計(jì)工作技術(shù)設(shè)計(jì)行業(yè)的發(fā)展，在另一個(gè)角度分析移動(dòng)設(shè)備的使用情況并且對人氣網(wǎng)頁進(jìn)行分析。吸取網(wǎng)頁優(yōu)點(diǎn)進(jìn)行再優(yōu)化設(shè)計(jì)也有助于促進(jìn)移動(dòng)網(wǎng)絡(luò)技術(shù)的穩(wěn)定發(fā)展，注意大眾的需求，對信息的移動(dòng)終端接入有效的開發(fā)進(jìn)行詳細(xì)學(xué)習(xí)對提升大眾滿意度也有一定的幫助。

一、移動(dòng)端網(wǎng)頁設(shè)計(jì)的必要性

（一）移動(dòng)搜索的特點(diǎn)

移動(dòng)搜索便捷性更強(qiáng)，可以隨時(shí)隨地的進(jìn)行信息的查詢不用受到設(shè)備空間等因素的限制，以手機(jī)移動(dòng)設(shè)備進(jìn)行為例，我們可以在車站、馬路、機(jī)場等任何地點(diǎn)進(jìn)行方便的查詢信息，擺脫傳統(tǒng)條件下電腦的限制。電腦等固定設(shè)備不方便攜帶臺(tái)式電腦則必須在家庭等固定場所使用，移動(dòng)設(shè)備打破了傳統(tǒng)搜索信息的模式。移動(dòng)搜索定位更加精準(zhǔn)，我們?nèi)粘３鲂须x不開手機(jī)的導(dǎo)航系統(tǒng)，傳統(tǒng)模式下不具有這個(gè)功能。我們可以通過定位準(zhǔn)確的了解位置信息，方便人們的工作和生活。移動(dòng)搜索的目的性很強(qiáng)，可以更好的尋找自己想要的東西，不用一頁一頁的尋找，并且手機(jī)等移動(dòng)設(shè)備相對較小，對于隱私的保護(hù)性更強(qiáng)，移動(dòng)設(shè)備更加個(gè)性化與生活化，是未來搜索的發(fā)展方向。

（二）移動(dòng)端網(wǎng)頁設(shè)計(jì)便利性

網(wǎng)站搜索引擎優(yōu)化是指根據(jù)移動(dòng)搜索的特性，獲取移動(dòng)資源打開用戶需求的內(nèi)容，會(huì)員移動(dòng)端設(shè)計(jì)是一種新型的網(wǎng)頁設(shè)計(jì)方法，能夠更快速的讀取網(wǎng)站，搜索的功能更加實(shí)用，百度移動(dòng)資源是由傳統(tǒng)的調(diào)配器和百度提供的一種開放適配功能的兩種方式進(jìn)行交叉，最終形成的搜索形式，給用戶帶來更加個(gè)性化的體驗(yàn)。目前移動(dòng)設(shè)備具有源代碼的開放共享模式，這緣于科技研發(fā)部門推出的新型操作系統(tǒng)，移動(dòng)設(shè)備的科技型在于導(dǎo)航形式的出現(xiàn)，這個(gè)網(wǎng)頁搜索模式得到了廣大群眾的認(rèn)可，并迅速的普及到生活中，得到了進(jìn)一步的發(fā)展。相比于臺(tái)式機(jī)用戶，移動(dòng)搜索用戶將更注重搜索的便捷性和生活性。移動(dòng)用戶更注重于以天然動(dòng)植物為主的膳食、旅游、公共交通、天氣、穿搭等信息的查詢。為了滿足移動(dòng)用戶衣食住行等方面信息的查詢服務(wù)，移動(dòng)網(wǎng)頁設(shè)計(jì)師通常把設(shè)計(jì)重點(diǎn)放在醫(yī)療、教育、購物、養(yǎng)生、旅游、住宿、健康護(hù)理等內(nèi)容上面。

二、移動(dòng)網(wǎng)頁設(shè)計(jì)的設(shè)計(jì)原則

（一）壓縮移動(dòng)端頁面數(shù)據(jù)大小

移動(dòng)網(wǎng)頁是對網(wǎng)頁頁面進(jìn)行壓縮處理后的頁面形式，所以移動(dòng)端網(wǎng)頁有小尺寸的特點(diǎn)，一般日常生活中我們搜索的圖片和圖像都以最小的形式展現(xiàn)。因?yàn)槭謾C(jī)的顯示范圍有限，和傳統(tǒng)的電腦計(jì)算機(jī)等固定設(shè)備不同，只有小尺寸的圖像才能夠更加的清晰，對于手機(jī)來說負(fù)面影響也會(huì)更小，壓縮圖像和文字另一方面還能夠讓用戶快速的進(jìn)入搜索頁面，找到要搜索的信息，資源的讀取更加的快捷。正因?yàn)樗姆奖憧焖僖苿?dòng)端的網(wǎng)頁搜索才能很快的普及開來，得到愈來愈多手機(jī)移動(dòng)端用戶的認(rèn)可，小圖像的設(shè)定可以縮短用戶等待的時(shí)間使用戶舒適感更強(qiáng)。不能像電腦網(wǎng)頁一樣使用很滿的圖像顯示，否則會(huì)導(dǎo)致手機(jī)的加載太慢，由此可見做好移動(dòng)端的屏幕優(yōu)化很重要。

（二）控制移動(dòng)端頁面色彩顯示效果

搜索不同的頁面信息，就會(huì)顯示不同的色彩效果。手機(jī)等移動(dòng)設(shè)備的光度很復(fù)雜，設(shè)計(jì)網(wǎng)頁時(shí)應(yīng)該根據(jù)用戶的視覺調(diào)整對比度、明暗度、飽和度等，達(dá)到適合大眾閱讀的最舒適狀態(tài)。同時(shí)我們也不能對于電腦的搜索頁面過度依賴，不同的設(shè)備視覺效果不同。除此之外，我們接觸網(wǎng)頁信息大都以文字的形式展現(xiàn)出來，注意文字在移動(dòng)手機(jī)上的顯示效果也很重要，不是所有的頁面文字都要呈現(xiàn)到大眾面前，移動(dòng)瀏覽器不支持部分頁面的內(nèi)容、代碼或插件的顯示，設(shè)計(jì)師應(yīng)該對字體進(jìn)行整合。

（三）規(guī)劃移動(dòng)端頁面信息與顯示方式

簡潔的移動(dòng)頁面的顯示內(nèi)容更適合移動(dòng)閱讀。在現(xiàn)代智能手機(jī)風(fēng)靡之際，移動(dòng)設(shè)備網(wǎng)頁常常具有與電腦屏幕相同的分辨率，但移動(dòng)屏幕的大小仍然比電腦屏幕小得多，用戶在瀏覽信息時(shí)往往會(huì)挑選對自己更有價(jià)值的信息，并不會(huì)通篇瀏覽。手機(jī)等移動(dòng)設(shè)備瀏覽時(shí)一般使用手指觸摸滑動(dòng)的形式，網(wǎng)頁所顯示的內(nèi)容更容易被忽視，因此顯示的內(nèi)容盡量的簡練使其更容易被識(shí)別。對中國用戶進(jìn)行簡單的統(tǒng)計(jì)，調(diào)查顯示4G用戶仍然占到百分之五十，3G網(wǎng)絡(luò)占到百分之十八，WIFI用戶占百分之三十二，在此現(xiàn)實(shí)情況下有很多用戶反映網(wǎng)絡(luò)慢網(wǎng)絡(luò)狀態(tài)不良，因此規(guī)劃移動(dòng)頁面的顯示形式與內(nèi)容，為客戶提供簡潔的頁面與信息，節(jié)約用戶流量與時(shí)間，是順應(yīng)當(dāng)下客觀現(xiàn)實(shí)的理智選擇。

（四）優(yōu)化移動(dòng)端頁面形式與內(nèi)容

電腦等固定設(shè)備的網(wǎng)頁從形式到內(nèi)容，從文字到圖像都非常的豐富，將各種內(nèi)容詳細(xì)的展現(xiàn)在客戶的眼前，更加容易得到大眾的認(rèn)可。手機(jī)端頁面因?yàn)橛惺謾C(jī)屏幕大小的嚴(yán)重限制只能變得簡潔，所以內(nèi)容上展現(xiàn)的會(huì)不如電腦等設(shè)備豐富，這時(shí)就要做好移動(dòng)端頁面優(yōu)化的問題，在現(xiàn)有的空間內(nèi)簡介的展現(xiàn)所有有用的信息。信息內(nèi)容是固定的，頁面優(yōu)化更顯得尤為重要，要為移動(dòng)端做好多點(diǎn)觸控優(yōu)化，多一些類似按鈕、菜單、鏈接或其他可點(diǎn)擊標(biāo)簽詞語。參考蘋果、谷歌、微軟和諾基亞的設(shè)計(jì)模式，在屏幕上可點(diǎn)擊界面部件的實(shí)際顯示尺寸不應(yīng)該超過9mm，間隔不應(yīng)該超過2mm。其他公司之前做過類似的實(shí)驗(yàn)，是用男孩的手指進(jìn)行屏幕點(diǎn)擊實(shí)驗(yàn)，因?yàn)槟泻⒌氖种赶鄬^粗得到比較科學(xué)的尺寸范圍更好的適合大眾使用。小文本鏈通常比較密集，需要點(diǎn)擊的界面要素小并且太多，畫面的角落和邊緣太近或不清都是頁面存在的問題影響人們的正常使用。移動(dòng)網(wǎng)頁沒有鼠標(biāo)點(diǎn)擊，畫面空間有限。這與電腦網(wǎng)頁的情況不同，手機(jī)移動(dòng)端不能同時(shí)顯示多層的導(dǎo)航內(nèi)容。垂直或部署導(dǎo)航的形式是不適當(dāng)?shù)?，?fù)雜的網(wǎng)站搜索功并不能夠輕松實(shí)現(xiàn)，然而移動(dòng)用戶希望迅速解決問題，而不是僅僅局限于畫面的限制，因此應(yīng)該盡可能的將頁面細(xì)節(jié)方面合理化，不要在網(wǎng)頁導(dǎo)航上展示過多的內(nèi)容，適當(dāng)即可。另外，重要的導(dǎo)航要直接顯示出來而不要做隱藏處理。

（五）充分利用移動(dòng)端的特性

現(xiàn)在的移動(dòng)端使用用戶可以通過網(wǎng)絡(luò)進(jìn)行通話，這樣會(huì)大大提高日常生活的便捷性，特別是中國的用戶習(xí)慣使用網(wǎng)絡(luò)電話進(jìn)行通信，電子地圖和位置導(dǎo)航能夠讓用戶更加直觀的了解共享信息內(nèi)容。同時(shí)直接顯示要撥打的電話號(hào)碼，或僅顯示圖像的地圖，或配置不提供用戶可以共享的內(nèi)容的社會(huì)共享鏈接為人們?nèi)粘Ｉ钐峁└蟮姆奖?。提供下載移動(dòng)應(yīng)用后安裝到頁面上的鏈接以增強(qiáng)移動(dòng)應(yīng)用程序的可視性。

（六）限制使用彈出窗口的頁面

點(diǎn)擊鏈接打開新的窗口在中國是很普遍的設(shè)計(jì)，但是移動(dòng)網(wǎng)頁通常信息展示良莠不齊，有對大眾有用的信息，還有一些垃圾廣告等。廣告的出現(xiàn)嚴(yán)重影響了客戶瀏覽網(wǎng)頁的感受，設(shè)計(jì)師應(yīng)該盡量限制使用彈出窗口的設(shè)計(jì)。對于類似信息的屏蔽能夠增加瀏覽的舒適感，太多廣告的瘋狂顯示會(huì)使人沒有搜索的欲望。

三、移動(dòng)端網(wǎng)頁設(shè)計(jì)常見問題的相關(guān)分析

（一）沒有遵循網(wǎng)頁設(shè)計(jì)基本原則

手機(jī)網(wǎng)頁設(shè)計(jì)有必要遵循簡單化的原則，在網(wǎng)頁設(shè)計(jì)的方面要簡單化以滿足大眾用戶的瀏覽體驗(yàn)，提高Web瀏覽的方便性和視覺體驗(yàn)。但是目前手機(jī)web設(shè)計(jì)的過程中，相關(guān)人員沒有嚴(yán)格遵守設(shè)計(jì)的標(biāo)準(zhǔn)流程的事情時(shí)有出現(xiàn)，設(shè)計(jì)的焦點(diǎn)不顯眼，充分簡單化，有的用戶的手機(jī)屏幕顯示比較大，很難抓住關(guān)鍵信息，因此給用戶帶來諸多不便，因此必須遵循網(wǎng)頁設(shè)計(jì)基本原則即其簡潔原則。

（二）自動(dòng)彈窗設(shè)計(jì)不夠合理

web瀏覽時(shí)的過程中，網(wǎng)頁自動(dòng)彈出式有不合理的地方，有的網(wǎng)頁設(shè)計(jì)者為了追求自己的利益努力的用各種花哨的信息吸引用戶，以求得到更多的訪問量，這是過度的消費(fèi)用戶需要的行為，這樣的方式長此以往會(huì)使用戶的滿意度下降，體驗(yàn)舒適性也會(huì)降低。

（三）對目標(biāo)終端屏幕特征掌握不夠

在手機(jī)的Web設(shè)計(jì)過程中，相關(guān)人員必須積極理解目標(biāo)終端畫面的特性。但是，在實(shí)際的操作中，設(shè)計(jì)者對于終端的畫面特性了解還不夠充分，渲染效果會(huì)受到瀏覽器像素寬度的影響。大部分的用戶經(jīng)常使用寬屏幕豎屏的手機(jī)，但是平板電腦通常進(jìn)行橫屏使用，因此部分平板用戶頁體驗(yàn)效果不理想，所以分辨率范圍的分割是不合理的，應(yīng)該考慮不同移動(dòng)終端對應(yīng)的畫面分辨率不同。

四、移動(dòng)端網(wǎng)頁設(shè)計(jì)技巧研究

（一）了解移動(dòng)終端網(wǎng)頁設(shè)計(jì)的功能需求

用戶界面設(shè)計(jì)的鏈接需要進(jìn)行多樣化合理性的設(shè)計(jì)，如任務(wù)列表、任務(wù)創(chuàng)建頁、任務(wù)細(xì)節(jié)、設(shè)備列表和反饋頁等等。因?yàn)閷τ诓煌畔⑺阉鞯挠脩粢峁┎煌年P(guān)鍵字搜索內(nèi)容，

在任務(wù)創(chuàng)建頁還包括了任務(wù)內(nèi)容、任務(wù)名稱、終端分辨率、執(zhí)行條件、瀏覽器安裝、終端廠商等內(nèi)容，要對屏幕分辨率、廠商、瀏覽器等作出合理選擇，只有這樣才能提高網(wǎng)頁設(shè)計(jì)的有效性，對每個(gè)制造性進(jìn)行嚴(yán)格的檢查，提升搜索網(wǎng)頁的過程的速度，提高流暢性，對移動(dòng)網(wǎng)頁設(shè)計(jì)進(jìn)行合理的規(guī)劃，考慮到用戶的信息需求，可以有效的減少用戶的搜索時(shí)間，有時(shí)候一鍵點(diǎn)擊就可以，將用戶時(shí)長點(diǎn)擊訪問的頁面進(jìn)行標(biāo)注，方便下一次瀏覽。

（二）加大移動(dòng)終端網(wǎng)頁設(shè)計(jì)的功能測試力度

移動(dòng)終端的顧客需要加強(qiáng)系統(tǒng)開發(fā)，用戶將自動(dòng)取得對應(yīng)的測試任務(wù)，使用瀏覽器來進(jìn)行系統(tǒng)測試，從而觸發(fā)頁面反映。在瀏覽網(wǎng)頁的情況下，提高用戶操作頁面的便利性是網(wǎng)頁設(shè)計(jì)的初始目標(biāo)。任務(wù)服務(wù)器的功能測試，客戶的運(yùn)行狀態(tài)，根據(jù)客戶瀏覽過程進(jìn)行任務(wù)測試，根據(jù)測試的結(jié)果有必要提供給客戶更加流暢的體驗(yàn)。確認(rèn)設(shè)備的瀏覽速度信息，用戶可以使用服務(wù)器直接更改首頁的信息，提高功能測試的強(qiáng)度，提高手機(jī)的Web設(shè)計(jì)功能的完成度。

（三）考慮客戶端系統(tǒng)的兼容性

為了使用戶的權(quán)利得到更廣泛的擴(kuò)大，移動(dòng)終端系統(tǒng)的更新鏈路增加了移動(dòng)開發(fā)的應(yīng)用接口和封閉式應(yīng)用接口。由于移動(dòng)終端版本不同，為了避免程序兼容較低的問題，還需要進(jìn)一步考慮客戶端系統(tǒng)在Web設(shè)計(jì)過程中的互換性。如果想給用戶帶來新的經(jīng)驗(yàn)，同時(shí)考慮到兼容性，積極改善系統(tǒng)移動(dòng)web設(shè)計(jì)的工作，兼容性測試的確認(rèn)具有良好的擴(kuò)展性，僅滿足這個(gè)條件的有效手機(jī)開發(fā)能力的功能可以提高，提高客戶的購買率和使用率。

（四）重視網(wǎng)頁優(yōu)化

重視網(wǎng)頁優(yōu)化是當(dāng)代移動(dòng)端網(wǎng)頁設(shè)計(jì)技巧的必經(jīng)之路。在移動(dòng)搜索中，用戶需要即時(shí)呈現(xiàn)出多樣化和個(gè)性化，并在最短的時(shí)間內(nèi)提高信息供應(yīng)，顯示多種搜索結(jié)果，并縮短移動(dòng)終端的搜索查詢時(shí)間，應(yīng)以系統(tǒng)的安全性為前提，適當(dāng)增加檢索關(guān)鍵詞的數(shù)量，不限于搜索查詢的詞語或者短語。移動(dòng)設(shè)備的搜索方式多樣性將傳統(tǒng)的移動(dòng)終端的Web頁面轉(zhuǎn)換成可從移動(dòng)設(shè)備直接訪問的Web頁面。例如，標(biāo)簽優(yōu)化的鏈接中，使用移動(dòng)終端的移動(dòng)頁與其對應(yīng)。使用說明標(biāo)簽來表示頁面的主內(nèi)容，并且將這個(gè)頁面用作瀏覽Web內(nèi)容的指南，以增強(qiáng)移動(dòng)用戶的使用體驗(yàn)。通過各種手段優(yōu)化頁面，是移動(dòng)端網(wǎng)頁設(shè)計(jì)技巧的重中之重。

五、結(jié)論

隨著網(wǎng)絡(luò)時(shí)代的到來，手機(jī)等移動(dòng)設(shè)備的普及使人們的生活越來越離不開電子設(shè)備，而在對于電子設(shè)備的使用過程中往往會(huì)出現(xiàn)一些類似的問題，將會(huì)使用戶體驗(yàn)度降低，人們滿意度不強(qiáng)因?yàn)榈却W(wǎng)頁的加載等方面原因?qū)е拢F(xiàn)在網(wǎng)頁的安全性不高廣告良莠不齊，人們也可能出現(xiàn)誤點(diǎn)等情況所以為了更好地滿足用戶個(gè)性化的要求，加強(qiáng)手機(jī)的網(wǎng)頁設(shè)計(jì)，推進(jìn)手機(jī)的國際開發(fā)。滿足網(wǎng)頁設(shè)計(jì)的功能要求，應(yīng)該將人們所需的信息提供給用戶，使用戶操作變得容易，并且提高用戶對移動(dòng)終端Web設(shè)計(jì)的滿足度。不斷進(jìn)行網(wǎng)頁優(yōu)化，重視移動(dòng)終端合理的優(yōu)化，在傳統(tǒng)網(wǎng)頁瀏覽終端達(dá)到速度和內(nèi)容的創(chuàng)新，更加安全有效的方便人們?nèi)粘５氖褂谩?/p>

參考文獻(xiàn)

[1]彭芳.移動(dòng)端網(wǎng)頁設(shè)計(jì)常見問題和技巧研究[J].科技訊，2018，16（16）：16+20.

[2]馬騰.數(shù)字報(bào)網(wǎng)頁版移動(dòng)端遷移技術(shù)的研究和實(shí)現(xiàn)[D].內(nèi)蒙古大學(xué)，2018.

[3]翟勁松.手機(jī)端網(wǎng)頁視覺設(shè)計(jì)研究[J].新媒體研究，2018，4（07）：46-53.

[4]周奇.企業(yè)云移動(dòng)端插件化開發(fā)與緩存策略的設(shè)計(jì)與實(shí)現(xiàn)[D].華南理工大學(xué)，2018.

[5]常亞舟.消費(fèi)者對移動(dòng)端產(chǎn)品詳情頁要素的需求研究[D].浙江理工大學(xué)，2018.

[6]林江.移動(dòng)端網(wǎng)頁設(shè)計(jì)常見問題和技巧[J].計(jì)算機(jī)與網(wǎng)絡(luò)，2017，43（10）：49.

[7]趙英，范嬌穎，章夢玄.移動(dòng)網(wǎng)頁無障礙設(shè)計(jì)標(biāo)準(zhǔn)框架研究[J].圖書館學(xué)研究，2016（16）：30-39.

作者簡介：蔣飛燕（1981.08-），女，湖南省邵陽市人，職稱：講師，主要研究方向：數(shù)字媒體藝術(shù)設(shè)計(jì)及制作。