<track id="ap5a8"></track>
      <pre id="ap5a8"></pre>
      <pre id="ap5a8"></pre>

    1. 當前位置:首頁 > 主營業務 Category
      走進云適配官網

      手機網頁的設計原則

      在智能手機開始普及的今天,手機網頁通常意味著:

      較小的顯示空間。即使有的手機屏幕分辨率已經與電腦屏幕分辨率相當,但是手機屏幕的物理尺寸還是比電腦屏幕小很多。

      手指操作。用戶使用手指在手機屏幕上點、滑、按,進行多點觸控操作。

      有限的網絡速度。根據CNNIC于12年11月公布的《中國手機網民上網行為研究報告》,使用2G/2.5G、3G、Wifi上網的手機用戶量分別為57%、30.4%、28.6%,大半用戶還是在用低速網絡上網,即使是3G用戶,也常常因為網絡狀況不好而遭遇上網速度慢。

      融合手機特性。智能手機帶來諸多便利,用戶可以直接在網頁上撥打電話、顯示電子地圖定位、進行一鍵社交分享、下載安裝手機應用等。

      直接在手機上顯示電腦網頁已經不能滿足這些新的情況和用戶需求。為了創造更好的用戶體驗,我們對手機網頁的設計提出以下建議:

      1. 要為手機屏幕優化。

      使網頁在手機上無論豎屏或橫屏都能自適應,內容和功能正常顯示,文字和圖片清晰可讀,重要的內容、功能和導航能在首屏呈現,盡可能將頁面滾動局限于垂直方向。
      不要直接用未經優化的電腦網頁直接當做手機網頁,可能因為網頁太大,在手機上無法順暢閱讀;可能因為某些內容(比如flash或視頻)、代碼(比如Java)、插件在手機上不支持,導致網頁顯示出錯或無法顯示。

      2. 要為多點觸控優化。

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

      3. 要讓手機網頁快速加載。

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

      4. 要重新規劃導航的層級、內容、容量、順序和形式。

      手機網頁上沒有鼠標懸停的狀態,并且屏幕空間有限,無法像在電腦網頁上那樣同時看到多層、豐富的導航內容。手機網頁上的導航以兩層以內為宜,每層的導航內容以一屏之內可以顯示為宜,導航的形式以縱向排列或者九宮格圖標排列為宜,復雜網站可以加入搜索功能。因為用戶在使用電腦和手機時的情景和需求不同,對于導航內容和順序的需求也不同,在手機上重要、特色的導航和功能值得直接呈現或排列提前;而一些對手機使用無益的導航和功能就可以隱藏。放置醒目的"后退"和"首頁"按鈕,方便用戶在各級內容間跳轉。手機用戶希望快速解決問題,所以盡可能直接展示給他們具體內容,而不是強制他們必須通過導航選擇。
      不要使用鼠標懸停功能,不要在手機網頁的導航上使用過多的內容和層級,不要把在手機上重要的導航隱藏或顯示在屏幕以外。

      5. 要充分利用手機特性。

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

      6. 要謹慎使用彈出新窗口。

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

      7. 要注意顏色在手機上的顯示效果。

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

      8. 要注意文字在手機上的顯示效果。

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

      9. 要使手機和電腦網頁保持視覺設計的一致性。

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

      10. 要考慮跨載體的跳轉。

      有的商家同時擁有電腦網頁、手機網頁、手機應用,分別對應不同的用戶使用情景,就需要考慮用戶在這幾個不同載體對應的產品之間跳轉時的體驗。比如,在電腦網頁上收藏的內容如何同步到手機網頁上,在手機網頁上如何無縫跳轉到體驗和功能更豐富的手機應用上。
      不要讓重要的功能在不同載體產品上的使用體驗非常不同、甚至缺失,不要限制用戶停留在手機網頁上、而不能跳轉到體驗和功能更豐富的手機應用上。

      日韩精品无码免费专区午夜☆人人妻人人妻人人片AV☆国产人成视频在线视频☆午夜DJ影院视频观看动漫