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

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

一、不同

1. 顯示：大屏vs小屏

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

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

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

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

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

2. 交互：鼠標vs觸屏

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

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

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

按鈕布局：web端設計時候可操作的按鈕布局要求并沒有特別嚴格，一般我會考慮操作的流程性；比如先表單后提交按鈕，但即使把按鈕放在表單頂部問題也不大，我猜想因為用戶移動鼠標的距離并不會太遠，所以沒有那么敏感。

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

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

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

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

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

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

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

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

4. 使用場景

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

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

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

比如說像釘釘?shù)膶徟δ埽苿佣酥惶峁┨峤缓蛯徟δ?，這樣對于出差在外的員工可以很方便的提交報銷之類的申請，領導也不用在辦公電腦才能審批，靈活度max；但像配置審批流程這樣的復雜操作還是只能在web端完成。

二、相同

難道web端和移動端的產(chǎn)品設計真的一點相同之處都沒有嗎？

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

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

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

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

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