文檔說明

Pc端使用平臺：

• QQ瀏覽器9.0（2315）
• Chromium43.0.2357.124
• IE9.0.8112.16421

手機端使用平臺：

紅米2增強版 自帶瀏覽器 MIUI6.6.2.0（KHJCNCF）|穩(wěn)定版

手機端網(wǎng)頁適配形式

在手機端訪問產(chǎn)品的官網(wǎng)，大概會有以下幾種形式：

• 無適配。無適配不僅僅是布局和內(nèi)容沒有做適配，交互動作也沒有做適配。原本為pc端設(shè)計的網(wǎng)頁在手機端往往會縮小，然后變形，大部分操作會失效。
• 極簡適配。極簡適配就是又想做適配，又因為其他種種原因，所以對內(nèi)容進行刪減直到剩下最后一個頁面，用一個頁面去呈現(xiàn)最基本的產(chǎn)品介紹以及下載按鈕。
• 適配。做了適配的官網(wǎng)會在手機端有良好的表現(xiàn)。當(dāng)然，Pc端的官網(wǎng)有時候體量太大，在適配到手機端的時候會有刪減。

下面可以先看看這三種情況大概是什么樣子。

2.1. 無適配

以上是QQ瀏覽器的官網(wǎng)（browser.qq.com），可以看到，在手機端，內(nèi)容被擠壓到中間偏左的地方，已經(jīng)變形了。同時，在pc端時，網(wǎng)頁的操作是“鼠標(biāo)滾輪滾動切換頁面”，映射到手機端應(yīng)該就是“滑動頁面切換頁面”，但是交互動作也失效了。

原因：

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

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

以上是kingroot的官網(wǎng)（www.kingroot.net），可以看到，該頁面的變形和QQ瀏覽器的官網(wǎng)很相似。都是內(nèi)容的錯位以及交互動作的失效。

原因：

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

2.2. 極簡適配

以上是騰訊手機管家的官網(wǎng)（m.qq.com），可以看到，手機管家的手機端和pc端完全不是同一個東西，pc端的內(nèi)容大而全，手機端只保留最基本的產(chǎn)品宣傳介紹的東西。

原因：

1) 定位不同；

騰訊手機管家這么做得原因，可能是出于產(chǎn)品定位的考慮，即：pc端和手機端的官網(wǎng)定位不同。

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

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

2) 手機網(wǎng)速慢；

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

3) 手機屏幕比較??；

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

4) 手機端訪問量?。?/p>

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

以上就是360極客版的官網(wǎng)（http://geek.#），從圖片可以看到，PC端和移動端的區(qū)別除了在頁面布局上的區(qū)別外，更大的區(qū)別實際上是信息架構(gòu)的區(qū)別。PC端的信息架構(gòu)更加復(fù)雜，而手機端只保留了最基本的“產(chǎn)品宣傳”以及“下載”功能。同時，在PC端首頁的圖片變成了手機端的文字（詳情請訪問該網(wǎng)頁）。

原因：

360極客版的官網(wǎng)并沒有定位的問題，更多的是出于對手機端適配的考慮。

1) 手機網(wǎng)速慢；

手機端本身有訪問網(wǎng)速慢。所以需要對展示的內(nèi)容進行重新篩選，因此會刪除大量用戶需要的信息。

2) 手機屏幕比較??；

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

3) 手機端訪問量??；

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

2.3. 適配

說明：“適配”和“極簡適配”區(qū)別只是信息的不同?！斑m配”保留的信息會更多，“極簡適配”保留的信息較少，兩者并沒有什么明顯的界限。至于信息保留的多少，應(yīng)該以產(chǎn)品的定位為準(zhǔn)。

以上獵豹清理大師的官網(wǎng)（http://cn.cmcm.com/cleanmaster/）?？梢钥吹?，兩者在信息架構(gòu)上沒有區(qū)別，同時，對內(nèi)容進行了重新排布以適應(yīng)手機端的屏幕。更重要的是，獵豹清理大師的官網(wǎng)有對交互動作進行了適配。在PC端，首頁的內(nèi)容是滾動鼠標(biāo)滾輪一次，頁面切換一次。在手機端映射為，每滑動一次屏幕，屏幕切換一次。在這點上，PC端和手機端體驗非常一致。

原因：

1) 手機網(wǎng)速慢；

手機端本身有訪問網(wǎng)速慢。但是在頁面信息本來就不多的情況下，內(nèi)容可以根據(jù)產(chǎn)品定位進行取舍。

2) 手機屏幕比較??；

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

3) 精益求精；

即使手機端訪問的量少，也需要為每一個用戶提供最滿意的體驗。

手機端網(wǎng)頁適配的一些想法

是否進行適配，以及怎么適配，可以參考以下的一些點。

3.1. 產(chǎn)品定位

所有的產(chǎn)品在設(shè)計的時候都離不開定位的問題，網(wǎng)站的設(shè)計也一樣。特別是在PC端網(wǎng)頁已經(jīng)存在的情況下，定位的問題更加要思考清楚。

PC端的官網(wǎng)暫時就定位為兩種：產(chǎn)品介紹類和平臺類。

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

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

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

不過，手機端官網(wǎng)的定位更多的是考慮其與PC端怎么樣配合工作。

最理想的狀況是“分工合作”。比如說：手機端可以快捷獲取到手機號等個人信息、有豐富傳感器、可以隨時隨地推送通知；PC端有足夠的空間展示信息、鍵盤鼠標(biāo)輸入非常便捷。發(fā)揮兩個平臺不同的優(yōu)勢去設(shè)計。然而，這只是理想狀況，目前還沒有發(fā)現(xiàn)此類網(wǎng)頁設(shè)計。

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

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

3.2. 內(nèi)容選擇

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

對于這些內(nèi)容是否要呈現(xiàn)在手機端的網(wǎng)頁，可以進行如下的思考：

針對這些元素，我個人給出的建議如下（有不同意見的歡迎在評論處拍磚）：

3.3. 頁面布局

在對網(wǎng)頁上的一些布局進行適配的時候，可以考慮用以下的原則。

3.3.1. 簡化

簡化，刪繁就簡，把一些重復(fù)表達的東西精簡掉。

以上是網(wǎng)站http://www.axt.es/#/works在pc端和手機端的對比圖，可以看到，在pc端時，品牌logo旁邊還有一句宣傳語，但是在手機版的時候已經(jīng)精簡掉了。

以上是網(wǎng)站http://tympanus.net/Blueprints/FullWidthTabs/在pc端和手機端的對比圖，可以看到，在pc端時，tab欄是圖案加文字的形式，但是在手機版的時候已經(jīng)被簡化到只剩下圖案。需要注意到的是，如果簡化掉的是圖案而不是文字的話，手機端是容納不下那么多的tab欄目的。

3.3.2. 重組

重組，重新組合。主要是針對頁面的內(nèi)容部分，重新組合，以適應(yīng)頁面。

以上獵豹清理大師的官網(wǎng)（http://cn.cmcm.com/cleanmaster/）。重組之前可以先對頁面顯示的內(nèi)容進行分塊，比如上圖，pc端的內(nèi)容可以分成兩塊。分塊之后，原本兩個方塊的布局是一左一右，在手機端的時候就可以變成一上一下。

更多的時候，pc網(wǎng)頁可能同時在橫向會有很多方塊。這時候可以通過頁面的寬度調(diào)整橫向排列的方塊的數(shù)量。如下圖：

3.3.3. 隱藏

某些導(dǎo)航欄的tab欄可以考慮使用Material design的漢堡菜單，將導(dǎo)航收起來，把更多的位置留給內(nèi)容展示。

以上是https://futureofwebdesign.com/london-2013/在手機和電影的對比圖。pc端的導(dǎo)航tab在手機端被隱藏起來了，變成了側(cè)邊欄，這樣就可以把主要的區(qū)域用于內(nèi)容的展示。

3.4. 交互動作映射

在確定好手機端網(wǎng)頁內(nèi)容以及頁面布局之后，需要考慮交互動作的適配。下面是我總結(jié)的一些交互動作在PC端和手機端的映射，僅供參考。

小結(jié)

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

而適配，可以從三個維度：內(nèi)容、布局和交互方式三種去適配。

如果只是考慮在PC端網(wǎng)頁大小的適配的話，只考慮布局就足夠了。

本文由 @yqqyzy?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。