[[409235]]

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

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

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

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

目錄

1、設(shè)備不同

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

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

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

3、交互事件不同

4、移動(dòng)端的場(chǎng)景更多

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

一、設(shè)備不同

PC端網(wǎng)頁(yè)運(yùn)行在電腦端瀏覽器，而移動(dòng)端網(wǎng)頁(yè)運(yùn)行在手機(jī)端瀏覽器。

1、屏幕大小不同

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

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

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

pc端一般會(huì)采用固定布局，因?yàn)樗钠聊淮髢?nèi)容多，一般會(huì)設(shè)計(jì)一個(gè)最小寬度，如果屏幕過(guò)小，會(huì)出現(xiàn)滾動(dòng)條。

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

2、兼容性不同

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

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

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

但是移動(dòng)端還會(huì)被不同的手機(jī)廠商所影響，因?yàn)椴煌氖謾C(jī)廠商，手機(jī)內(nèi)嵌的瀏覽器不一樣，所以移動(dòng)端需要解決的兼容性問(wèn)題更多。

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

在寫(xiě)需求時(shí)建議寫(xiě)明需要兼容哪些機(jī)型(移動(dòng)端)，哪些瀏覽器(pc端)，在需求驗(yàn)收時(shí)做好兼容性的功能驗(yàn)收。

3、性能要求不同

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

你每訪問(wèn)一個(gè)網(wǎng)頁(yè)，這個(gè)網(wǎng)頁(yè)都會(huì)從服務(wù)端請(qǐng)求下載到你的設(shè)備上渲染出來(lái)，

因?yàn)槭謾C(jī)內(nèi)存有限，如果網(wǎng)頁(yè)運(yùn)行時(shí)需要下載大量圖片，并且需要執(zhí)行一些耗時(shí)算法、動(dòng)畫(huà)，可能會(huì)比較占用內(nèi)存和cpu，會(huì)導(dǎo)致動(dòng)畫(huà)卡頓、交互卡頓。

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

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

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

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

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

• 進(jìn)度條提示

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

因?yàn)橐苿?dòng)端網(wǎng)絡(luò)不穩(wěn)定，對(duì)于加載資源比較大的場(chǎng)景，建議給用戶一個(gè)進(jìn)度條的提示，給用戶一個(gè)反饋。

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

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

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

html5有一項(xiàng)技術(shù)叫離線存儲(chǔ)。如果網(wǎng)頁(yè)啟用了離線存儲(chǔ)，當(dāng)用戶訪問(wèn)網(wǎng)頁(yè)時(shí)，瀏覽器會(huì)把下載的資源和數(shù)據(jù)進(jìn)行離線存儲(chǔ)，當(dāng)網(wǎng)絡(luò)中斷時(shí)，瀏覽器會(huì)把離線存儲(chǔ)的資源渲染出原來(lái)的網(wǎng)頁(yè)。

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

三、交互事件不同

pc端一般是使用鼠標(biāo)或者觸摸鍵盤(pán)來(lái)和界面交互，移動(dòng)端一般通過(guò)手指來(lái)操作。

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

1、點(diǎn)擊事件

2者都有點(diǎn)擊事件。但是移動(dòng)端的點(diǎn)擊事件實(shí)際是延遲了300ms的，細(xì)心的同學(xué)可能會(huì)遇到移動(dòng)端頁(yè)面點(diǎn)擊一個(gè)按鈕有些延遲才觸發(fā)。

所以移動(dòng)端一般會(huì)采用觸摸結(jié)束事件來(lái)觸發(fā)點(diǎn)擊(touchend)，這樣就不會(huì)有延遲。

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

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

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

因?yàn)橐苿?dòng)端是用手指來(lái)跟界面交互的，所以跟觸摸相關(guān)的事件，移動(dòng)端才有。包括手指觸摸事件、手指抬起事件、放大縮小事件等。

四、移動(dòng)端的場(chǎng)景更多

1、橫屏豎屏

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

因?yàn)闄M屏和豎屏的手機(jī)寬度高度正好反過(guò)來(lái)，差距比較大。

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

一般采用2種方法適配：

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

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

2、字體縮放

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

3、暗黑模式適配

背景：

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

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

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

4)window10 也加入了暗黑模式

可見(jiàn)越來(lái)越多的新版本設(shè)備加入了暗黑模式。

優(yōu)點(diǎn)：

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

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

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