網絡信息時代高校移動網頁的設計原則

隨著計算機網絡信息時代的迅速發展，現在已經有不少高校建立了自己的移動網站，簡潔美觀的展示界面，方便快捷的信息獲取方式，通過移動端手機等無線終端，廣大師生校友及社會公眾就可以瀏覽學校的公告、新聞、活動、教育教學等消息，更可以通過移動終端在線申請報名、在線支付學費，在線辦公等全方面的服務，讓校友們感受到貼心的方便。文章就高校移動網頁的設計原則做了闡述。

【關鍵詞】信息時代 高校 移動網頁

1 網絡信息時代高校移動網頁的分析

在智能手機開始普及的今天，手機網頁通常意味著：較小的顯示空間。即使有的手機屏幕分辨率已經與電腦屏幕分辨率相當，但是移動端屏幕的物理尺寸還是比電腦屏幕小很多。手指操作。用戶使用手指在手機屏幕上點、滑、按，進行多點觸控操作。有限的網絡速度。根據CNNIC于12年11月公布的《中國手機網民上網行為研究報告》，使用2G/2.5G、3G、Wifi上網的手機用戶量分別為57%、30.4%、28.6%，大半用戶還是在用低速網絡上網，即使是3G用戶，也常常因為網絡狀況不好而遭遇上網速度慢。融合手機特性。智能手機帶來諸多便利，用戶可以直接在網頁上撥打電話、顯示電子地圖定位、進行一鍵社交分享、下載安裝手機應用等。

2 移動網頁設計的設計原則

2.1 要為移動端的頁面做好優化

建設PC網站不需要考慮流量問題，所以通過PC網站展示的圖文內容會非常豐富，說明也會非常詳細，而包括手機在內的移動網站則需要考慮載體和流量的問題，所以移動網站的內容是以簡潔、精煉、明了為主，不僅要確保PC網站的內容不變，還需提煉PC網站上的精華，讓訪客一目了然。

2.2 要為移動端做好多點觸控優化

為按鈕、菜單標簽、鏈接等可點擊界面元素設置合適的大小，界面元素之間設置合適的間距。參考蘋果、谷歌、微軟、諾基亞各自的設計規范，可點擊界面元素在屏幕上的實際顯示尺寸不應小于9毫米、間距不應小于2毫米。可以請手指比較粗的男生和美甲的女生進行測試。不要用較小的文字鏈接作為重要的功能或內容入口，不要密集的堆放文字鏈接，不要將重要的可點擊界面元素做的過小、或放置在太過于靠近屏幕角落或邊緣的地方（不易點擊）。

2.3 要為移動端的屏幕做好優化

移動網頁要盡可能的速度快，就必須壓縮移動網頁的大小，為移動網頁提供專門的小尺寸、經過壓縮的圖片內容，盡可能減少背景圖和小動畫等裝飾性、但在手機上效果不佳的圖片素材的使用，使手機網頁能夠更快的加載。用分步下載、提示加載狀態等方式，使用戶感覺網頁加載很快，在等待的過程中有事可做，或至少讓他們安心等待。不要直接使用電腦網頁的大圖，不要讓頁面內容太多、加載緩慢，不要等到整個頁面完全加載以后才顯示給用戶，不要在網頁上使用手機瀏覽器不支持的內容、代碼或插件，導致部分網頁示出錯或顯示。

2.4 要重新規劃移動頁面的顯示形式

手機網頁上沒有鼠標懸停的狀態，并且屏幕空間有限，無法像在電腦網頁上那樣同時看到多層、豐富的導航內容。手機網頁上的導航以兩層以內為宜，每層的導航內容以一屏之內可以顯示為宜，導航的形式以縱向排列或者九宮格圖標排列為宜，復雜網站可以加入搜索功能。手機用戶希望快速解決問題，所以盡可能直接展示給他們具體內容，而不是強制他們必須通過導航選擇。不要使用鼠標懸停功能，不要在手機網頁的導航上使用過多的內容和層級，不要把在手機上重要的導航隱藏或顯示在屏幕以外。

2.5 要充分利用移動端的特性

允許用戶直接在網頁上撥打電話可以顯著提升轉化率，并且中國用戶更習慣于在電話中與人溝通，而不是通過填表與機器溝通；顯示電子地圖和用戶的定位信息，能幫助用戶更加直觀的了解周圍情況，并進行位置導航；向用戶提供分享的內容并鼓勵用戶進行一鍵社交分享，能幫你贏得更多的客戶；在頁面提供下載安裝你的手機應用的鏈接，能增加手機應用的曝光度。不要顯示電話號碼卻不能直接撥打，顯示地圖卻只是一張圖片，放置社交分享鏈接卻不考慮向用戶提供適合分享的內容。

2.6 盡量少使用彈出窗口的頁面

在中國，點擊鏈接彈出新窗口的做法比較常見；但是因為在手機上進行多窗口操作比較困難，而且往往在多窗口切換的時候還會導致頁面重新載入和等待，應盡可能避免在手機上不必要的彈出新窗口。不要使用彈窗廣告、浮動窗口廣告等。

2.7 要注意各種顏色在移動端上的顯示效果

手機設備眾多、對顏色的顯示效果各不相同，并且手機使用的光線環境復雜，要注意使網頁內容具有合適的視覺對比度（比如深色背景、淺色文字，或淺色背景、深色文字），以便閱讀；要注意顏色顯示色差帶來的負面影響。不要以電腦上的視覺效果為準，必須在手機上測試效果，尤其是在不同價位、不同品牌的手機上測試。

2.8 要注意文字在移動手機上的顯示效果

不同操作系統、不同品牌的手機往往內置不同的字體、擁有不同范圍的字符集，需要確認網頁文字所選用的字體、以及所用的文字是否能正常顯示，尤其是繁體中文、特殊字符的內容。另外，文字內容盡可能精簡，也會更適合手機閱讀。不要默認文字在手機上和電腦上顯示的效果會一樣。不要認為用戶一定會有耐心在手機上讀一大段的文字、并從中看到你認為重要的關鍵內容。

2.9 要使手機和pc頁面保持視覺感官的一致性

可以為手機網頁做特別的、或符合手機操作系統規范的設計調整，但是必須讓手機和pc網頁保持視覺設計的一致性，以使用戶獲得一致的品牌印象，以及延續對網頁功能和內容的整體認知、無需重新學習或尋找。不要在手機和電腦網頁上使用不同的視覺設計風格，分裂用戶印象和認知。

2.10 要考慮跨平臺的跳轉。

有的高校同時擁有pc、wap、微信應用，分別對應不同的用戶使用情景，就需要考慮用戶在這幾個不同平臺對應的產品之間跳轉時的體驗。不要讓重要的功能在不同載體產品上的使用體驗非常不同、甚至缺失，不要限制用戶停留在手機網頁上、而不能跳轉到體驗和功能更豐富的手機應用上。

3 結束語

總之，移動建站需要考慮各個方面的因素，應該根據高校的需求做出適當的調整，做出適合各個高校的移動網頁，需要各個部門的共同努力，提高用戶的體驗度。

作者簡介

駱海玉（1981-），男，河南省南陽市人，大學本科學歷。現為南陽醫學高等專科學校助理工程師，主要從事學校校園網的建設及維護工作。

作者單位

南陽醫學高等專科學校網絡中心 河南省南陽市 473000