中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

文檔說明

Pc端使用平臺：

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

手機端使用平臺：

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

手機端網頁適配形式

在手機端訪問產品的官網，大概會有以下幾種形式：

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

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

2.1. 無適配

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

原因：

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

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

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

原因：

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

2.2. 極簡適配

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

原因：

1) 定位不同；

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

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

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

2) 手機網速慢；

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

3) 手機屏幕比較?。?/p>

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

4) 手機端訪問量??；

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

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

原因：

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

1) 手機網速慢；

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

2) 手機屏幕比較??；

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

3) 手機端訪問量??；

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

2.3. 適配

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

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

原因：

1) 手機網速慢；

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

2) 手機屏幕比較??；

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

3) 精益求精；

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

手機端網頁適配的一些想法

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

3.1. 產品定位

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

PC端的官網暫時就定位為兩種：產品介紹類和平臺類。

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

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

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

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

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

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

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

3.2. 內容選擇

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

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

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

3.3. 頁面布局

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

3.3.1. 簡化

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

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

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

3.3.2. 重組

重組，重新組合。主要是針對頁面的內容部分，重新組合，以適應頁面。

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

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

3.3.3. 隱藏

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

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

3.4. 交互動作映射

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

小結

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

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

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

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