從Web到App:多終端設計中如何實現全場景滿足用戶需求?
互聯網產品的基本特征之一是通過多終端的無縫連接、全場景滿足用戶需求,從而搶占用戶的時間和心智以達到商業目的。不同終端所具有的特征各異,因此同一產品在開展多終端設計會存在一定差異,這種差異往往決定了用戶的需求是否得到滿足。本文將試著從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需要解決用戶的什么問題。
關注用戶需求
六、設計側重點
不同場景下,產品設計的側重點是不同的:
- 在家用的水杯和在公司用的水杯。
- 臥室的被套和酒店的被套。
- 線上的商品展示和線下的商品展示。
- 航空公司的飛機和私人飛機。
經歷以上四種對比場景,用戶的體驗差異是什么?
這要求設計師具備強烈的同理心,從用戶心理和實際需求出發思考:如何平衡用戶需求和現實情況?同種需求在不同場景中最合適的實現方式是什么?都需要設計師去找出差異并重新定義。
#專欄作家#
胡欣欣,人人都是產品經理專欄作家,蘇寧易購·云產品·交互設計師。公眾號:吹拉彈唱大師(ID:cltcds)
本文原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
不太明白續航和迭代速度的比較,為什么app會比web高或快
web也能很快迭代,只要加班跟得上
哈哈哈真實
感謝分享學習 更多學習情境化設計的我覺得有本書特別系統《情境化設計——為生活而設計》
不錯,尤其是對場景化的定義。
醍醐灌頂!
視角很棒,正是我困惑的地方。希望大師有空能夠展開一下,可能是一篇專業性很強的爆款文章呢!
好的,最近剛剛完成一款Web產品的移動端設計,抽空寫一下
期待,你會寫得非常棒得!