從Web到App：多終端設計中如何實現全場景滿足使用者需求？
零基礎學產品，BAT產品總監帶，2天線下集訓+1年線上課程，全面掌握優秀產品經理必備技能。 瞭解詳情
釋放雙眼，帶上耳機，聽聽看~！
00:00
00:00
網際網路產品的基本特徵之一是通過多終端的無縫連線、全場景滿足使用者需求，從而搶佔使用者的時間和心智以達到商業目的。不同終端所具有的特徵各異，因此同一產品在開展多終端設計會存在一定差異，這種差異往往決定了使用者的需求是否得到滿足。本文將試著從App、Web兩個終端給出一些設計思考。
一、App和Web的區別是什麼
App和Web之間的區別，迴歸到兩者最本質的區別，可以從操作方式、螢幕尺寸、網路等基礎硬體及其屬性進行比較。我們可以發現：Web的特點有“定時”、“固定地點”等；App的特點有“碎片化”、“任意使用場景”等。
APP和Web的基礎屬性
二、App設計與Web設計的區別是什麼
通過對App和Web的基礎屬性之間的比較，在設計層面上，不同的屬性所採取的設計策略是不一致的，兩個終端之間的差別在設計師群體中也是仁者見仁智者見智。
有的設計師從螢幕大小上去區分設計差異：app你需要思考怎麼去除才能讓塞不下的螢幕能塞下必要的東西，web你需要思考怎麼才能增加些東西讓空蕩的螢幕不會顯得太空蕩”。
也有的設計師試著從菜鳥和老手的技藝去區分設計方式：對新手來說一個介面大一個介面小，對中手來說設計正規化和使用場景不一樣，對高手來說都一樣；還有的設計師從發展趨勢上認為：發展到最後應該都是一樣的，現在就是大腦延伸操作媒介的不同。
App端設計 VS Web端設計
三、對於同一個產品，App設計和Web設計的主要區別是什麼
通過對比基本屬性和設計觀點，App和Web的一些特性與設計產生了關聯，可以進一步發掘：對於同一個產品，App和Web的設計區別是什麼？
產品App端 VS 產品Web端
以蘇寧易購為例，在App和Web兩端的設計存在很大差異：App端更多的是提供清晰快捷的入口；Web端不僅提供入口，還要採用絢麗多彩的視覺元素吸引使用者進入。
同一個產品在App和Web出現設計差異，從商業訴求上追蹤，決定了這種設計差異來源於使用者需求，而需求決定了產品功能，功能衍生出設計形式。
引用現代主義建築大師路易斯·沙裡文的一句名言：形式追隨功能。
因此，針對App和Web的設計差異可以從使用者需求角度繼續深入發掘。
移動網際網路時代，使用者的時間被碎片化分割，導致使用者需求出現“場景化”這一典型特徵。時間、地點、人物、事件構成場景的必要元素，在特定的時間，特定的使用者群體在特定的地點發生特定的行為事件。針對產品的設計，場景賦予其意義。
一杯咖啡，在星巴克，賦予以商務；在書店，賦予以閒暇；在陽光明媚的清晨，賦予以元氣；在連綿陰雨的窗邊，賦予以溫暖；
……
一杯咖啡在不同場景下的意義
追本溯源，兩個終端在本質上是使用者所處“環境”的不同——即“場景不同”造成了App端和Web端的設計差異。
例如：OA產品，在辦公室、出差途中、家裡這三種典型場景中，使用者對於OA產品的期望是不一樣的，這種期望由使用者心理與使用者需求交織產生。
因此，對於同一產品的多終端設計形態，可以分三部分來思考其差異：使用者心理、使用者需求、設計側重點。
四、使用者心理
不同場景下，使用者心理是不同的：
- 畫圖正嗨的時候，產品經理跑過來說有個需求要改。
- 訪談過程中，開發和測試提出了很多獨到的見解。
- 晚上加班到12點，終於把明天要提交的圖改好了。
- 評審的時候，大佬們紛紛對你的設計豎起大拇指。
出現以上四種場景，使用者的內心活動是什麼？
面對不同的場景，使用者的心理會產生一系列的變化，從使用者心理狀態切入，可以針對App和Web的產品定位、架構、功能等方面定義設計差異。
關注使用者心理
五、使用者需求
不同場景下，使用者需求是不同的：
- 連續一個禮拜天天加班到12點，禮拜五下班。
- 20號收到工資卡的簡訊。
- 宅家裡打遊戲，中午肚子餓了。
- 夜深人靜，在床上輾轉反側睡不著。
在以上四種場景下，使用者的真實想法是什麼？
在不同的場景中，使用者的需求是不一致的，可以從這種場景下特定的使用者需求入手，去區分App和Web需要解決使用者的什麼問題。
關注使用者需求
六、設計側重點
不同場景下，產品設計的側重點是不同的：
- 在家用的水杯和在公司用的水杯。
- 臥室的被套和酒店的被套。
- 線上的商品展示和線下的商品展示。
- 航空公司的飛機和私人飛機。
經歷以上四種對比場景，使用者的體驗差異是什麼？
這要求設計師具備強烈的同理心，從使用者心理和實際需求出發思考：如何平衡使用者需求和現實情況？同種需求在不同場景中最合適的實現方式是什麼？都需要設計師去找出差異並重新定義。
本文由 @吹拉彈大師 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
