簡析移動端網頁設計常見問題和技巧

摘要：21世紀，網絡科技不斷發展，網絡時代的到來促進了當下移動網頁設計的快速發展。在新時代，熟知移動Web設計的特殊性，積極學習Web設計技術是當代數字媒體專業的必經之路，創建移動Web設計適配測試平臺，有效解決移動Web設計的存在問題，分析問題產生的原因并提出解決對策，才能推動移動端網頁設計更好更快的發展。

關鍵詞：網頁設計;移動端;解決技術

隨著網絡技術的發展，網頁技術日新月異，通過了解我國網頁設計的發展現狀，分析網頁技術設計的特點，掌握優化移動網頁視覺效果的規律，才能更好的掌握網頁設計技術。隨著智能移動設備的不斷普及，手機等移動端已成為人們獲得信息的主要渠道，也是人們生活中不可缺少的一部分。為了提高移動網頁的設計水平，為了更好地實現移動網頁的設計理念，更加輕松地訪問手機網頁，實現移動Web頁的無障礙設計，需要優化互聯網環境，提高移動終端Web頁的設計標準，促進網頁設計系統的構建，加強網絡信息的及時傳輸，引領移動網頁設計工作技術設計行業的發展，在另一個角度分析移動設備的使用情況并且對人氣網頁進行分析。吸取網頁優點進行再優化設計也有助于促進移動網絡技術的穩定發展，注意大眾的需求，對信息的移動終端接入有效的開發進行詳細學習對提升大眾滿意度也有一定的幫助。

一、移動端網頁設計的必要性

（一）移動搜索的特點

移動搜索便捷性更強，可以隨時隨地的進行信息的查詢不用受到設備空間等因素的限制，以手機移動設備進行為例，我們可以在車站、馬路、機場等任何地點進行方便的查詢信息，擺脫傳統條件下電腦的限制。電腦等固定設備不方便攜帶臺式電腦則必須在家庭等固定場所使用，移動設備打破了傳統搜索信息的模式。移動搜索定位更加精準，我們日常出行離不開手機的導航系統，傳統模式下不具有這個功能。我們可以通過定位準確的了解位置信息，方便人們的工作和生活。移動搜索的目的性很強，可以更好的尋找自己想要的東西，不用一頁一頁的尋找，并且手機等移動設備相對較小，對于隱私的保護性更強，移動設備更加個性化與生活化，是未來搜索的發展方向。

（二）移動端網頁設計便利性

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

二、移動網頁設計的設計原則

（一）壓縮移動端頁面數據大小

移動網頁是對網頁頁面進行壓縮處理后的頁面形式，所以移動端網頁有小尺寸的特點，一般日常生活中我們搜索的圖片和圖像都以最小的形式展現。因為手機的顯示范圍有限，和傳統的電腦計算機等固定設備不同，只有小尺寸的圖像才能夠更加的清晰，對于手機來說負面影響也會更小，壓縮圖像和文字另一方面還能夠讓用戶快速的進入搜索頁面，找到要搜索的信息，資源的讀取更加的快捷。正因為它的方便快速移動端的網頁搜索才能很快的普及開來，得到愈來愈多手機移動端用戶的認可，小圖像的設定可以縮短用戶等待的時間使用戶舒適感更強。不能像電腦網頁一樣使用很滿的圖像顯示，否則會導致手機的加載太慢，由此可見做好移動端的屏幕優化很重要。

（二）控制移動端頁面色彩顯示效果

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

（三）規劃移動端頁面信息與顯示方式

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

（四）優化移動端頁面形式與內容

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

（五）充分利用移動端的特性

現在的移動端使用用戶可以通過網絡進行通話，這樣會大大提高日常生活的便捷性，特別是中國的用戶習慣使用網絡電話進行通信，電子地圖和位置導航能夠讓用戶更加直觀的了解共享信息內容。同時直接顯示要撥打的電話號碼，或僅顯示圖像的地圖，或配置不提供用戶可以共享的內容的社會共享鏈接為人們日常生活提供更大的方便。提供下載移動應用后安裝到頁面上的鏈接以增強移動應用程序的可視性。

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

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

三、移動端網頁設計常見問題的相關分析

（一）沒有遵循網頁設計基本原則

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

（二）自動彈窗設計不夠合理

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

（三）對目標終端屏幕特征掌握不夠

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

四、移動端網頁設計技巧研究

（一）了解移動終端網頁設計的功能需求

用戶界面設計的鏈接需要進行多樣化合理性的設計，如任務列表、任務創建頁、任務細節、設備列表和反饋頁等等。因為對于不同信息搜索的用戶要提供不同的關鍵字搜索內容，

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

（二）加大移動終端網頁設計的功能測試力度

移動終端的顧客需要加強系統開發，用戶將自動取得對應的測試任務，使用瀏覽器來進行系統測試，從而觸發頁面反映。在瀏覽網頁的情況下，提高用戶操作頁面的便利性是網頁設計的初始目標。任務服務器的功能測試，客戶的運行狀態，根據客戶瀏覽過程進行任務測試，根據測試的結果有必要提供給客戶更加流暢的體驗。確認設備的瀏覽速度信息，用戶可以使用服務器直接更改首頁的信息，提高功能測試的強度，提高手機的Web設計功能的完成度。

（三）考慮客戶端系統的兼容性

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

（四）重視網頁優化

重視網頁優化是當代移動端網頁設計技巧的必經之路。在移動搜索中，用戶需要即時呈現出多樣化和個性化，并在最短的時間內提高信息供應，顯示多種搜索結果，并縮短移動終端的搜索查詢時間，應以系統的安全性為前提，適當增加檢索關鍵詞的數量，不限于搜索查詢的詞語或者短語。移動設備的搜索方式多樣性將傳統的移動終端的Web頁面轉換成可從移動設備直接訪問的Web頁面。例如，標簽優化的鏈接中，使用移動終端的移動頁與其對應。使用說明標簽來表示頁面的主內容，并且將這個頁面用作瀏覽Web內容的指南，以增強移動用戶的使用體驗。通過各種手段優化頁面，是移動端網頁設計技巧的重中之重。

五、結論

隨著網絡時代的到來，手機等移動設備的普及使人們的生活越來越離不開電子設備，而在對于電子設備的使用過程中往往會出現一些類似的問題，將會使用戶體驗度降低，人們滿意度不強因為等待網頁的加載等方面原因導致，現在網頁的安全性不高廣告良莠不齊，人們也可能出現誤點等情況所以為了更好地滿足用戶個性化的要求，加強手機的網頁設計，推進手機的國際開發。滿足網頁設計的功能要求，應該將人們所需的信息提供給用戶，使用戶操作變得容易，并且提高用戶對移動終端Web設計的滿足度。不斷進行網頁優化，重視移動終端合理的優化，在傳統網頁瀏覽終端達到速度和內容的創新，更加安全有效的方便人們日常的使用。

參考文獻

[1]彭芳.移動端網頁設計常見問題和技巧研究[J].科技訊，2018，16（16）：16+20.

[2]馬騰.數字報網頁版移動端遷移技術的研究和實現[D].內蒙古大學，2018.

[3]翟勁松.手機端網頁視覺設計研究[J].新媒體研究，2018，4（07）：46-53.

[4]周奇.企業云移動端插件化開發與緩存策略的設計與實現[D].華南理工大學，2018.

[5]常亞舟.消費者對移動端產品詳情頁要素的需求研究[D].浙江理工大學，2018.

[6]林江.移動端網頁設計常見問題和技巧[J].計算機與網絡，2017，43（10）：49.

[7]趙英，范嬌穎，章夢玄.移動網頁無障礙設計標準框架研究[J].圖書館學研究，2016（16）：30-39.

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