web端PM出圈設計移動端產(chǎn)品的小思考

LCC
1 評論 8511 瀏覽 31 收藏 10 分鐘

編輯導語:我們平常在用一個軟件時,會發(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é)議。

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 前公司貢獻了一個反面案例hhh

    來自廣東 回復