網站地圖 | RSS訂閱 老鐵博客 - 上海SEO優化|上海網站建設|蜘蛛池出租|站群代搭建
你的位置:首頁 ? 網站建設 ? 正文

手機端官網設計:適配還是不適配這是個問題

2019-3-13 12:44:16 | 作者:老鐵SEO | 1個評論 | 人瀏覽

  無適配不僅僅是布局和內容沒有做適配,交互動作也沒有做適配。原本為pc端設計的網頁在手機端往往會縮小,然后變形,大部分操作會失效。

  極簡適配就是又想做適配,又因為其他種種原因,所以對內容進行刪減直到剩下最后一個頁面,用一個頁面去呈現最基本的產品介紹以及下載按鈕。

  做了適配的官網會在手機端有良好的表現。當然,Pc端的官網有時候體量太大,在適配到手機端的時候會有刪減。

  以上是QQ瀏覽器的官網(,可以看到,在手機端,內容被擠壓到中間偏左的地方,已經變形了。同時,在pc端時,網頁的操作是“鼠標滾輪滾動切換頁面”,映射到手機端應該就是“滑動頁面切換頁面”,但是交互動作也失效了。

  QQ瀏覽器沒有做適配的原因非常簡單:這是一個pc產品的官網。用戶用手機訪問該官網的場景幾乎不存在,所以不做適配也無可厚非。

  只是,即使不適配,那么是否有更好的方式去避免這種問題。既然手機端訪問pc產品官網可能性極小,同時體驗這么差,能否嘗試強制跳轉到手機版的官網呢?這樣子或許會更好吧。

  以上是kingroot的官網(),可以看到,該頁面的變形和QQ瀏覽器的官網很相似。都是內容的錯位以及交互動作的失效。

  Kingroot官網沒有做適配的原因可能和QQ瀏覽器有點類似,但是又不盡相同。雖然可能同是出于訪問量極少的原因,但是不同的是,手機端下載的渠道幾乎都是應用分發平臺,用戶去官網下載的概率比較小。所以,評估一下產出和收益,就不做了吧。

  以上是騰訊手機管家的官網(,可以看到,手機管家的手機端和pc端完全不是同一個東西,pc端的內容大而全,手機端只保留最基本的產品宣傳介紹的東西。

  騰訊手機管家這么做得原因,可能是出于產品定位的考慮,即:pc端和手機端的官網定位不同。

  PC端官網的定位可能更多以“平臺”為主,所以我們可以看到,官網上面宣傳的內容相對比較少,更大的篇幅是讓位給了其他各種功能,比如說首頁就可以看到的:“WiFi開放平臺”、“號碼公眾平臺”、“惡意線索舉報”以及“在線查毒”。

  手機端的官網定位以“產品介紹”為主,所以頁面只要把騰訊手機管家的亮點秀出來、然后附上下載鏈接即可。

  同時,手機端本身有訪問網速慢。所以需要對展示的內容進行重新篩選,因此會刪除大量用戶需要的信息。

  最后保留下來的信息需要考慮頁面大小的問題,剩下的信息需要重新排版以符合手機端的顯示效果。

  訪問量小只是一個補充的因素,因為訪問量小,所以即使刪減信息也沒有關系,畢竟影響的范圍小。

  以上就是360極客版的官網(),從圖片可以看到,PC端和移動端的區別除了在頁面布局上的區別外,更大的區別實際上是信息架構的區別。PC端的信息架構更加復雜,而手機端只保留了最基本的“產品宣傳”以及“下載”功能。同時,在PC端首頁的圖片變成了手機端的文字(詳情請訪問該網頁)。

  手機端本身有訪問網速慢。所以需要對展示的內容進行重新篩選,因此會刪除大量用戶需要的信息。

  最后保留下來的信息需要考慮頁面大小的問題,剩下的信息需要重新排版以符合手機端的顯示效果。

  訪問量小只是一個補充的因素,因為訪問量小,所以即使刪減信息也沒有關系,畢竟影響的范圍小。

  說明:“適配”和“極簡適配”區別只是信息的不同。“適配”保留的信息會更多,“極簡適配”保留的信息較少,兩者并沒有什么明顯的界限。至于信息保留的多少,應該以產品的定位為準。

  以上獵豹清理大師的官網()。可以看到,兩者在信息架構上沒有區別,同時,對內容進行了重新排布以適應手機端的屏幕。更重要的是,獵豹清理大師的官網有對交互動作進行了適配。在PC端,首頁的內容是滾動鼠標滾輪一次,頁面切換一次。在手機端映射為,每滑動一次屏幕,屏幕切換一次。在這點上,PC端和手機端體驗非常一致。

  手機端本身有訪問網速慢。但是在頁面信息本來就不多的情況下,內容可以根據產品定位進行取舍。

  保留下來的信息需要考慮頁面大小的問題,剩下的信息需要重新排版以符合手機端的顯示效果。

  所有的產品在設計的時候都離不開定位的問題,網站的設計也一樣。特別是在PC端網頁已經存在的情況下,定位的問題更加要思考清楚。

  可以這么說,每個產品的官網在初期都是產品介紹類,因為這時候,官網的作用更多的是以介紹宣傳為主,可能附帶有下載的功能。

  隨著產品的成長,用戶人數增加,可能每個產品或多或少都有做平臺的野性,對于一些有條件的產品,其官網會逐漸演變成平臺類的官網,這時候,官網的宣傳作用就處于較低的地位,更多時候,官網是提供服務的入口。

  兩種不同類型的PC官網在做手機端適配的問題,考慮的問題都是一樣的,就是,手機端的官網的定位如何。一般而言,手機端由于屏幕以及網絡的原因,做成平臺類的不太現實。但是,手機端的官網依舊可以保留必要的功能入口。

  最理想的狀況是“分工合作”。比如說:手機端可以快捷獲取到手機號等個人信息、有豐富傳感器、可以隨時隨地推送通知;PC端有足夠的空間展示信息、鍵盤鼠標輸入非常便捷。發揮兩個平臺不同的優勢去設計。然而,這只是理想狀況,目前還沒有發現此類網頁設計。

  最省力的狀況是“照搬全抄”。即兩個平臺的網頁信息架構相同,改變的只有頁面布局以及交互方式,比如獵豹清理大師的網頁。這種情況很好地保證了體驗的一致性,但是只適合信息架構比較小的網頁,所以在大部分情況下可能不適用。

  最明智的狀況是“因地制宜”。即結合以上兩種,既允許兩個平臺有功能的重疊,也保證有各自的特色。不過,鑒于是官網的設計,所以更多情況下,手機端的網頁只是PC端網頁的一個mini版。

  網頁中,文字是常見的元素。初次之外,還會有諸如圖片、視頻、音樂、程序或者鏈接等超文本的元素。

  以上是網站在pc端和手機端的對比圖,可以看到,在pc端時,品牌logo旁邊還有一句宣傳語,但是在手機版的時候已經精簡掉了。

  以上是網站在pc端和手機端的對比圖,可以看到,在pc端時,tab欄是圖案加文字的形式,但是在手機版的時候已經被簡化到只剩下圖案。需要注意到的是,如果簡化掉的是圖案而不是文字的話,手機端是容納不下那么多的tab欄目的。

  以上獵豹清理大師的官網()。重組之前可以先對頁面顯示的內容進行分塊,比如上圖,pc端的內容可以分成兩塊。分塊之后,原本兩個方塊的布局是一左一右,在手機端的時候就可以變成一上一下。

  更多的時候,pc網頁可能同時在橫向會有很多方塊。這時候可以通過頁面的寬度調整橫向排列的方塊的數量。如下圖:

  某些導航欄的tab欄可以考慮使用Material design的漢堡菜單,將導航收起來,把更多的位置留給內容展示。

  以上是在手機和電影的對比圖。pc端的導航tab在手機端被隱藏起來了,變成了側邊欄,這樣就可以把主要的區域用于內容的展示。

  在確定好手機端網頁內容以及頁面布局之后,需要考慮交互動作的適配。下面是我總結的一些交互動作在PC端和手機端的映射,僅供參考。

  官網是否在手機端進行適配,除了產品本身的環境(PC端還是手機端)之外,還要考慮成本和收益的問題。不過總歸,適配能給用戶更好的體驗。

  本文由 @yqqyzy?原創發布于人人都是產品經理?,未經許可,禁止轉載。

  人人都是產品經理(是以產品經理、運營為核心的學習、交流、分享平臺,集媒體、培訓、社群為一體,全方位服務產品人和運營人,成立8年舉辦在線+期,線+場,產品經理大會、運營大會20+場,覆蓋北上廣深杭成都等15個城市,在行業有較高的影響力和知名度。平臺聚集了眾多BAT美團京東滴滴360小米網易等知名互聯網公司產品總監和運營總監,他們在這里與你一起成長。

  • 本文來自: 老鐵博客,轉載請保留出處!歡迎發表您的評論
  • 相關標簽:網站建設方案排版  
  • 已有1位網友發表了一針見血的評論,你還等什么?

    必填

    選填

    記住我,下次回復時不用重新輸入個人信息

    必填,不填不讓過哦,嘻嘻。

    ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

    色情激情片日本大全