編輯導(dǎo)語：我們平常在用一個(gè)軟件時(shí)，會(huì)發(fā)現(xiàn)web端和移動(dòng)端的有些功能不一樣，頁面也不一樣；雖然他們?cè)诒憩F(xiàn)形式上差異很大，但是設(shè)計(jì)產(chǎn)品時(shí)的思考過程是一樣的；本文作者對(duì)web端和移動(dòng)端的異同有一些思考，我們一起來看一下。

作為一名2B PM，之前接觸過的產(chǎn)品以web端為主，最近接到一個(gè)任務(wù)是設(shè)計(jì)一款移動(dòng)端的產(chǎn)品，工作過程中對(duì)web端&移動(dòng)端產(chǎn)品的異同也有了一些些切身的體會(huì)～

一、不同

1. 顯示：大屏vs小屏

顯示區(qū)域的大小可能是web端和移動(dòng)端最顯而易見的區(qū)別。（下圖是mbp、ipad、iphone的對(duì)比）

這種物理形態(tài)上的不同對(duì)于產(chǎn)品設(shè)計(jì)的影響我覺得主要是在信息的組織方式上。

顯示器由于顯示區(qū)域更大，顯示的內(nèi)容可以非常豐富，相比之下移動(dòng)端的可用空間就顯得非常寶貴。

而且顯示器一般是橫屏的，手機(jī)端大多是豎屏的，這也直接影響了我們常用的信息展現(xiàn)形式；比如說web端非常常用的左側(cè)導(dǎo)航欄右側(cè)內(nèi)容的布局方式，在移動(dòng)端就不適用——移動(dòng)端導(dǎo)航適用比較多的是底部tab形式，方便用戶操作；或者是以抽屜形式折疊的菜單，這種導(dǎo)航適合使用頻率低一些的功能。

再舉個(gè)栗子，web端最最常用的列表，可以展示比較詳盡的信息，也可以作為跳轉(zhuǎn)到詳情頁的入口；但是相對(duì)來說更占用橫向的空間，所以在移動(dòng)端中我們很少使用列表，而是更多的使用列表的變形形式，比如卡片。

2. 交互：鼠標(biāo)vs觸屏

web端和移動(dòng)端的交互手段也有很大的區(qū)別，web端用戶主要依靠鼠標(biāo)和頁面交互，點(diǎn)擊方式有單擊、雙擊、右鍵、懸停、拖動(dòng)，相對(duì)移動(dòng)端比較單一。

移動(dòng)端用戶主要是以觸屏和頁面交互，點(diǎn)擊方式有單擊、雙擊、長(zhǎng)按、左滑/右滑、拖動(dòng)、縮放等等，非常豐富；微信聊天的頭像就是一個(gè)很好的體現(xiàn)：?jiǎn)螕暨M(jìn)入信息頁、長(zhǎng)按@、雙擊拍一拍（這種密集的操作也有很多人吐槽）。

對(duì)于產(chǎn)品設(shè)計(jì)的影響呢我覺得主要是在組件的布局、類型選擇上。

按鈕布局：web端設(shè)計(jì)時(shí)候可操作的按鈕布局要求并沒有特別嚴(yán)格，一般我會(huì)考慮操作的流程性；比如先表單后提交按鈕，但即使把按鈕放在表單頂部問題也不大，我猜想因?yàn)橛脩粢苿?dòng)鼠標(biāo)的距離并不會(huì)太遠(yuǎn)，所以沒有那么敏感。

移動(dòng)端就完全不同，必須考慮用戶可觸及，方便可能的單手操作，APP常采用的底部導(dǎo)航tab也是為了方便切換；有些APP把常用的功能放在右上角，還有些備忘錄APP會(huì)把高頻的添加按鈕放在右下角懸浮，都是為了更方便用戶操作。

組件選擇：當(dāng)然交互不同也會(huì)影響對(duì)組件的選擇，有個(gè)點(diǎn)我印象非常深，就是web端我們經(jīng)常用的hover效果，可以在鼠標(biāo)懸停時(shí)候顯示一些提示性的信息。

但是移動(dòng)觸屏就完全沒法使用這個(gè)交互的方法顯示了，也是這個(gè)小例子讓我第一次有了真的不一樣的感受；還有，仔細(xì)回想下是不是很少在移動(dòng)端見到下拉列表？常見的代替方式有新彈窗/頁面選擇，或者像時(shí)間類的選項(xiàng)經(jīng)常是滾動(dòng)選擇。

文本輸入：web端輸入一般都是通過鍵盤，不會(huì)影響頁面顯示；移動(dòng)端輸入是通過觸屏上的虛擬鍵盤，輸入的時(shí)候需要呼出鍵盤所以會(huì)有頁面上的改變；尤其是在表單輸入時(shí)候要注意鍵盤不要遮擋到輸入框。

3. 硬件性能&網(wǎng)絡(luò)環(huán)境

web端產(chǎn)品依賴的臺(tái)式或者筆記本電腦一般硬件性能（存儲(chǔ)、計(jì)算等）是要優(yōu)于移動(dòng)端設(shè)備的；網(wǎng)絡(luò)環(huán)境方面web端一般都是處于比較穩(wěn)定的聯(lián)網(wǎng)狀態(tài)的（因?yàn)槭褂铆h(huán)境一般在家或者辦公室等環(huán)境都有網(wǎng)絡(luò)覆蓋）；而移動(dòng)端設(shè)備由于使用場(chǎng)景非常靈活，難免會(huì)遇到一些網(wǎng)絡(luò)信號(hào)不穩(wěn)定的情況。

硬件和網(wǎng)絡(luò)主要影響的其實(shí)是產(chǎn)品的實(shí)現(xiàn)方式，比如一個(gè)功能的實(shí)現(xiàn)是放在客戶端還是放在server端呢？

尤其是很多產(chǎn)品都會(huì)用到AI相關(guān)的各種模型比較吃資源，所以web端由于網(wǎng)絡(luò)比較穩(wěn)定可以把模型放在服務(wù)端獲得更準(zhǔn)確更快的結(jié)果；移動(dòng)端如果使用場(chǎng)景包括網(wǎng)絡(luò)不好的環(huán)境（比如翻譯機(jī)的使用場(chǎng)景包括國(guó)外旅行），就要考慮把模型放在客戶端上處理，也就必須考慮模型剪裁降低對(duì)硬件性能的要求。

4. 使用場(chǎng)景

雖然web端和移動(dòng)端在顯示方式、交互手段上的差別非常明顯，但個(gè)人認(rèn)為使用場(chǎng)景的不同是一個(gè)更加本質(zhì)的差別——因?yàn)檫@個(gè)差別才是最初決定我們的產(chǎn)品為什么要做移動(dòng)端或者為什么要做web端的原因。

眾所周知，web端產(chǎn)品的使用場(chǎng)景更加固定，往往是在家或者在辦公室，使用的時(shí)間也更加連續(xù)，更加適合用來復(fù)雜的業(yè)務(wù)邏輯；移動(dòng)端的使用場(chǎng)景更加靈活，使用的時(shí)間也比較零散，所以使用流程不能太復(fù)雜。

“小孩子才選擇，成年人都要”，web端和移動(dòng)端的優(yōu)缺點(diǎn)剛好是可以互補(bǔ)的，現(xiàn)在很多B端的產(chǎn)品會(huì)選擇同時(shí)提供web端+移動(dòng)端的應(yīng)用，但是不同平臺(tái)的功能側(cè)重不同，既可以滿足復(fù)雜業(yè)務(wù)操作的需求又可以有效利用移動(dòng)端操作靈活的優(yōu)點(diǎn)。

比如說像釘釘?shù)膶徟δ?，移?dòng)端只提供提交和審批功能，這樣對(duì)于出差在外的員工可以很方便的提交報(bào)銷之類的申請(qǐng)，領(lǐng)導(dǎo)也不用在辦公電腦才能審批，靈活度max；但像配置審批流程這樣的復(fù)雜操作還是只能在web端完成。

二、相同

難道web端和移動(dòng)端的產(chǎn)品設(shè)計(jì)真的一點(diǎn)相同之處都沒有嗎？

其實(shí)不是的，雖然在表現(xiàn)形式上差異很大，但是設(shè)計(jì)產(chǎn)品時(shí)思考的過程卻是一致的（也就是面試時(shí)候常說的pm的通用技能吧）。

由于我接觸過的web端和移動(dòng)端產(chǎn)品都是2B的，所以一上來梳理業(yè)務(wù)流程、分析用戶角色、理清產(chǎn)品架構(gòu)這些操作都是必不可少的；另外如果涉及到web端+移動(dòng)端這種形式，那么數(shù)據(jù)除了業(yè)務(wù)流之外，也要對(duì)數(shù)據(jù)流進(jìn)行梳理，保證兩端之間的數(shù)據(jù)一致性。

從用戶體驗(yàn)五要素的角度看，web端和移動(dòng)端產(chǎn)品在戰(zhàn)略層、范圍層差別的確不大；但是在結(jié)構(gòu)層、框架層、表現(xiàn)層的差異十分明顯。

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

題圖來自Unsplash，基于CC0協(xié)議。