[[409235]]

本文轉(zhuǎn)載自微信公眾號「產(chǎn)品的技術(shù)小課」，作者小課lemon。轉(zhuǎn)載本文請聯(lián)系產(chǎn)品的技術(shù)小課公眾號。

對于同一個網(wǎng)站，目前大部分公司都是采用2套不同的設(shè)計和不同的代碼來維護，原因就是PC端和移動端有一定的差異。

下面從幾個比較核心的角度，闡述下PC端網(wǎng)頁和移動端網(wǎng)頁產(chǎn)品設(shè)計時的區(qū)別和注意點。

全文2000多字，閱讀大概需要5分鐘～

目錄

1、設(shè)備不同

• 屏幕大小不同
• 兼容性不同
• 性能要求不同

2、網(wǎng)絡(luò)環(huán)境不同

• 移動端弱網(wǎng)適配
• 移動端斷網(wǎng)適配

3、交互事件不同

4、移動端的場景更多

• 橫屏豎屏
• 字體縮放
• 暗黑模式適配

一、設(shè)備不同

PC端網(wǎng)頁運行在電腦端瀏覽器，而移動端網(wǎng)頁運行在手機端瀏覽器。

1、屏幕大小不同

PC端的屏幕比較大，視覺范圍比較大，可設(shè)計的地方很多，容錯性比較強，有一個比較小的疏忽都不容易被發(fā)現(xiàn)。

移動端的屏幕比較小，操作局限性大，空間比較寶貴，容錯性低，只要界面有一個個的瑕疵，很容易被發(fā)現(xiàn)，所以要求更高。

因屏幕大小不同，pc端和移動端的設(shè)計也是不一樣的。

pc端一般會采用固定布局，因為它的屏幕大內(nèi)容多，一般會設(shè)計一個最小寬度，如果屏幕過小，會出現(xiàn)滾動條。

移動端一般會采用響應(yīng)式布局，隨著屏幕大小的變化，界面的字體大小、圖片大小、元素的布局都會發(fā)生相應(yīng)的改變。

2、兼容性不同

PC端和移動端的操作系統(tǒng)不一樣，瀏覽器內(nèi)核也有一定的區(qū)別。

不同的瀏覽器，對一些樣式的支持不同，比如同一個樣式屬性，在A瀏覽器支持，在B瀏覽器不支持。所以兼容性是需要面臨的問題。

PC端的兼容性只受windows和mac操作系統(tǒng)和固定的幾個瀏覽器影響，

但是移動端還會被不同的手機廠商所影響，因為不同的手機廠商，手機內(nèi)嵌的瀏覽器不一樣，所以移動端需要解決的兼容性問題更多。

產(chǎn)品在提需求時，可以關(guān)注下這個產(chǎn)品的目標用戶是哪些，目標用戶使用的主流瀏覽器(pc端)或者主流機型(移動端)有哪些，

在寫需求時建議寫明需要兼容哪些機型(移動端)，哪些瀏覽器(pc端)，在需求驗收時做好兼容性的功能驗收。

3、性能要求不同

我們知道，相對來說，電腦內(nèi)存比手機內(nèi)存要大很多，cpu的性能也比移動端好。所以移動端對網(wǎng)頁的性能要求更高。

你每訪問一個網(wǎng)頁，這個網(wǎng)頁都會從服務(wù)端請求下載到你的設(shè)備上渲染出來，

因為手機內(nèi)存有限，如果網(wǎng)頁運行時需要下載大量圖片，并且需要執(zhí)行一些耗時算法、動畫，可能會比較占用內(nèi)存和cpu，會導(dǎo)致動畫卡頓、交互卡頓。

所以一般移動端網(wǎng)頁需要做的性能優(yōu)化更多，比如減小資源體積、擅用緩存。

二、網(wǎng)絡(luò)環(huán)境不同

PC端連接的網(wǎng)絡(luò)更加穩(wěn)定，移動端由于受不同區(qū)域信號影響，可能會出現(xiàn)弱網(wǎng)或者斷網(wǎng)的情況。

為了能實現(xiàn)更好的用戶體驗，在產(chǎn)品功能設(shè)計時，需要注意弱網(wǎng)和斷網(wǎng)的場景。

1、移動端弱網(wǎng)適配

• 進度條提示

我們知道，圖片是網(wǎng)頁資源里面比較大的，加載是比較慢的。

因為移動端網(wǎng)絡(luò)不穩(wěn)定，對于加載資源比較大的場景，建議給用戶一個進度條的提示，給用戶一個反饋。

• 網(wǎng)絡(luò)弱提示

當出現(xiàn)網(wǎng)絡(luò)比較弱的情況下，一般要給用戶提示“網(wǎng)絡(luò)不給力，請稍后重試”的用語，讓用戶有個心理預(yù)期。

2、移動端斷網(wǎng)適配

html5有一項技術(shù)叫離線存儲。如果網(wǎng)頁啟用了離線存儲，當用戶訪問網(wǎng)頁時，瀏覽器會把下載的資源和數(shù)據(jù)進行離線存儲，當網(wǎng)絡(luò)中斷時，瀏覽器會把離線存儲的資源渲染出原來的網(wǎng)頁。

如果你的目標用戶處于弱網(wǎng)或者容易斷網(wǎng)的場景比較多，比如東南亞地區(qū)的用戶，建議使用這種斷網(wǎng)的適配。

三、交互事件不同

pc端一般是使用鼠標或者觸摸鍵盤來和界面交互，移動端一般通過手指來操作。

pc端和移動端的交互事件還是有很多不一樣的地方。

1、點擊事件

2者都有點擊事件。但是移動端的點擊事件實際是延遲了300ms的，細心的同學(xué)可能會遇到移動端頁面點擊一個按鈕有些延遲才觸發(fā)。

所以移動端一般會采用觸摸結(jié)束事件來觸發(fā)點擊(touchend)，這樣就不會有延遲。

2、鼠標相關(guān)事件

pc端網(wǎng)頁才有鼠標相關(guān)事件，所以懸浮事件、右鍵菜單事件、雙擊事件、拖拽事件、移動端是沒有的。

3、觸摸相關(guān)事件

因為移動端是用手指來跟界面交互的，所以跟觸摸相關(guān)的事件，移動端才有。包括手指觸摸事件、手指抬起事件、放大縮小事件等。

四、移動端的場景更多

1、橫屏豎屏

移動端有旋轉(zhuǎn)事件，當手機是橫屏或者豎屏都能監(jiān)測得到。

因為橫屏和豎屏的手機寬度高度正好反過來，差距比較大。

如果只按照豎屏設(shè)計，當用戶旋轉(zhuǎn)到橫屏?xí)r，可能會使得布局混亂。

一般采用2種方法適配：

一是禁用旋轉(zhuǎn)。h5可以禁止用戶把手機旋轉(zhuǎn)時，屏幕也跟著旋轉(zhuǎn)。

二是適配2種模式。橫屏和豎屏采用2種不同的布局模式。

2、字體縮放

因為移動端的用戶經(jīng)常會在手機設(shè)置字體大小，比如老年用戶，他會把字體調(diào)的特別大，導(dǎo)致布局發(fā)生了錯亂，一種常用的解決方法是，h5設(shè)置禁止字體縮放。

3、暗黑模式適配

背景：

1)ios13 版本在2019年3月加入了暗黑模式

2)android 10及更高版本中提供了深色主題背景

3)mac os10.14 加入了暗黑模式

4)window10 也加入了暗黑模式

可見越來越多的新版本設(shè)備加入了暗黑模式。

優(yōu)點：

1)可減少設(shè)備耗電量。

2)在夜間使用暗黑模式，減弱光對眼睛的射入，保護眼睛。 

在暗黑模式下，系統(tǒng)對所有的窗口、菜單、控件都使用了較暗的色調(diào)，我們的h5主色調(diào)，應(yīng)該隨著設(shè)備模式的切換而自適應(yīng)色調(diào)，呈現(xiàn)出一個比較協(xié)調(diào)的視覺效果。