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

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

一、不同

1. 顯示：大屏vs小屏

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

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

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

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

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

2. 交互：鼠標vs觸屏

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

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

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

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

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

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

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

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

3. 硬件性能&網絡環境

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

硬件和網絡主要影響的其實是產品的實現方式，比如一個功能的實現是放在客戶端還是放在server端呢？

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

4. 使用場景

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

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

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

比如說像釘釘的審批功能，移動端只提供提交和審批功能，這樣對于出差在外的員工可以很方便的提交報銷之類的申請，領導也不用在辦公電腦才能審批，靈活度max；但像配置審批流程這樣的復雜操作還是只能在web端完成。

二、相同

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

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

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

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

本文由 @LCC 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。