文檔說(shuō)明

Pc端使用平臺(tái)：

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

手機(jī)端使用平臺(tái)：

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

手機(jī)端網(wǎng)頁(yè)適配形式

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

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

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

2.1. 無(wú)適配

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

原因：

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

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

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

原因：

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

2.2. 極簡(jiǎn)適配

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

原因：

1) 定位不同；

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

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

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

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

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

3) 手機(jī)屏幕比較??；

最后保留下來(lái)的信息需要考慮頁(yè)面大小的問(wèn)題，剩下的信息需要重新排版以符合手機(jī)端的顯示效果。

4) 手機(jī)端訪問(wèn)量??；

訪問(wèn)量小只是一個(gè)補(bǔ)充的因素，因?yàn)樵L問(wèn)量小，所以即使刪減信息也沒(méi)有關(guān)系，畢竟影響的范圍小。

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

原因：

360極客版的官網(wǎng)并沒(méi)有定位的問(wèn)題，更多的是出于對(duì)手機(jī)端適配的考慮。

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

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

2) 手機(jī)屏幕比較??；

最后保留下來(lái)的信息需要考慮頁(yè)面大小的問(wèn)題，剩下的信息需要重新排版以符合手機(jī)端的顯示效果。

3) 手機(jī)端訪問(wèn)量小；

訪問(wèn)量小只是一個(gè)補(bǔ)充的因素，因?yàn)樵L問(wèn)量小，所以即使刪減信息也沒(méi)有關(guān)系，畢竟影響的范圍小。

2.3. 適配

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

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

原因：

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

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

2) 手機(jī)屏幕比較??；

保留下來(lái)的信息需要考慮頁(yè)面大小的問(wèn)題，剩下的信息需要重新排版以符合手機(jī)端的顯示效果。

3) 精益求精；

即使手機(jī)端訪問(wèn)的量少，也需要為每一個(gè)用戶提供最滿意的體驗(yàn)。

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

是否進(jìn)行適配，以及怎么適配，可以參考以下的一些點(diǎn)。

3.1. 產(chǎn)品定位

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

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

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

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

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

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

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

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

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

3.2. 內(nèi)容選擇

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

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

針對(duì)這些元素，我個(gè)人給出的建議如下（有不同意見(jiàn)的歡迎在評(píng)論處拍磚）：

3.3. 頁(yè)面布局

在對(duì)網(wǎng)頁(yè)上的一些布局進(jìn)行適配的時(shí)候，可以考慮用以下的原則。

3.3.1. 簡(jiǎn)化

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

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

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

3.3.2. 重組

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

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

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

3.3.3. 隱藏

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

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

3.4. 交互動(dòng)作映射

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

小結(jié)

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

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

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

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