互聯(lián)網(wǎng)產(chǎn)品的基本特征之一是通過(guò)多終端的無(wú)縫連接、全場(chǎng)景滿足用戶需求，從而搶占用戶的時(shí)間和心智以達(dá)到商業(yè)目的。不同終端所具有的特征各異，因此同一產(chǎn)品在開(kāi)展多終端設(shè)計(jì)會(huì)存在一定差異，這種差異往往決定了用戶的需求是否得到滿足。本文將試著從App、Web兩個(gè)終端給出一些設(shè)計(jì)思考。

一、App和Web的區(qū)別是什么

App和Web之間的區(qū)別，回歸到兩者最本質(zhì)的區(qū)別，可以從操作方式、屏幕尺寸、網(wǎng)絡(luò)等基礎(chǔ)硬件及其屬性進(jìn)行比較。我們可以發(fā)現(xiàn)：Web的特點(diǎn)有“定時(shí)”、“固定地點(diǎn)”等；App的特點(diǎn)有“碎片化”、“任意使用場(chǎng)景”等。

APP和Web的基礎(chǔ)屬性

二、App設(shè)計(jì)與Web設(shè)計(jì)的區(qū)別是什么

通過(guò)對(duì)App和Web的基礎(chǔ)屬性之間的比較，在設(shè)計(jì)層面上，不同的屬性所采取的設(shè)計(jì)策略是不一致的，兩個(gè)終端之間的差別在設(shè)計(jì)師群體中也是仁者見(jiàn)仁智者見(jiàn)智。

有的設(shè)計(jì)師從屏幕大小上去區(qū)分設(shè)計(jì)差異：app你需要思考怎么去除才能讓塞不下的屏幕能塞下必要的東西，web你需要思考怎么才能增加些東西讓空蕩的屏幕不會(huì)顯得太空蕩”。

也有的設(shè)計(jì)師試著從菜鳥(niǎo)和老手的技藝去區(qū)分設(shè)計(jì)方式：對(duì)新手來(lái)說(shuō)一個(gè)界面大一個(gè)界面小，對(duì)中手來(lái)說(shuō)設(shè)計(jì)范式和使用場(chǎng)景不一樣，對(duì)高手來(lái)說(shuō)都一樣；還有的設(shè)計(jì)師從發(fā)展趨勢(shì)上認(rèn)為：發(fā)展到最后應(yīng)該都是一樣的，現(xiàn)在就是大腦延伸操作媒介的不同。

App端設(shè)計(jì) VS Web端設(shè)計(jì)

三、對(duì)于同一個(gè)產(chǎn)品，App設(shè)計(jì)和Web設(shè)計(jì)的主要區(qū)別是什么

通過(guò)對(duì)比基本屬性和設(shè)計(jì)觀點(diǎn)，App和Web的一些特性與設(shè)計(jì)產(chǎn)生了關(guān)聯(lián)，可以進(jìn)一步發(fā)掘：對(duì)于同一個(gè)產(chǎn)品，App和Web的設(shè)計(jì)區(qū)別是什么？

產(chǎn)品App端 VS 產(chǎn)品Web端

以蘇寧易購(gòu)為例，在App和Web兩端的設(shè)計(jì)存在很大差異：App端更多的是提供清晰快捷的入口；Web端不僅提供入口，還要采用絢麗多彩的視覺(jué)元素吸引用戶進(jìn)入。

同一個(gè)產(chǎn)品在App和Web出現(xiàn)設(shè)計(jì)差異，從商業(yè)訴求上追蹤，決定了這種設(shè)計(jì)差異來(lái)源于用戶需求，而需求決定了產(chǎn)品功能，功能衍生出設(shè)計(jì)形式。

引用現(xiàn)代主義建筑大師路易斯·沙里文的一句名言：形式追隨功能。

因此，針對(duì)App和Web的設(shè)計(jì)差異可以從用戶需求角度繼續(xù)深入發(fā)掘。

移動(dòng)互聯(lián)網(wǎng)時(shí)代，用戶的時(shí)間被碎片化分割，導(dǎo)致用戶需求出現(xiàn)“場(chǎng)景化”這一典型特征。時(shí)間、地點(diǎn)、人物、事件構(gòu)成場(chǎng)景的必要元素，在特定的時(shí)間，特定的用戶群體在特定的地點(diǎn)發(fā)生特定的行為事件。針對(duì)產(chǎn)品的設(shè)計(jì)，場(chǎng)景賦予其意義。

一杯咖啡，在星巴克，賦予以商務(wù)；在書(shū)店，賦予以閑暇；在陽(yáng)光明媚的清晨，賦予以元?dú)?；在連綿陰雨的窗邊，賦予以溫暖；

……

一杯咖啡在不同場(chǎng)景下的意義

追本溯源，兩個(gè)終端在本質(zhì)上是用戶所處“環(huán)境”的不同——即“場(chǎng)景不同”造成了App端和Web端的設(shè)計(jì)差異。

例如：OA產(chǎn)品，在辦公室、出差途中、家里這三種典型場(chǎng)景中，用戶對(duì)于OA產(chǎn)品的期望是不一樣的，這種期望由用戶心理與用戶需求交織產(chǎn)生。

因此，對(duì)于同一產(chǎn)品的多終端設(shè)計(jì)形態(tài)，可以分三部分來(lái)思考其差異：用戶心理、用戶需求、設(shè)計(jì)側(cè)重點(diǎn)。

四、用戶心理

不同場(chǎng)景下，用戶心理是不同的：

1. 畫(huà)圖正嗨的時(shí)候，產(chǎn)品經(jīng)理跑過(guò)來(lái)說(shuō)有個(gè)需求要改。
2. 訪談過(guò)程中，開(kāi)發(fā)和測(cè)試提出了很多獨(dú)到的見(jiàn)解。
3. 晚上加班到12點(diǎn)，終于把明天要提交的圖改好了。
4. 評(píng)審的時(shí)候，大佬們紛紛對(duì)你的設(shè)計(jì)豎起大拇指。

出現(xiàn)以上四種場(chǎng)景，用戶的內(nèi)心活動(dòng)是什么？

面對(duì)不同的場(chǎng)景，用戶的心理會(huì)產(chǎn)生一系列的變化，從用戶心理狀態(tài)切入，可以針對(duì)App和Web的產(chǎn)品定位、架構(gòu)、功能等方面定義設(shè)計(jì)差異。

關(guān)注用戶心理

五、用戶需求

不同場(chǎng)景下，用戶需求是不同的：

1. 連續(xù)一個(gè)禮拜天天加班到12點(diǎn)，禮拜五下班。
2. 20號(hào)收到工資卡的短信。
3. 宅家里打游戲，中午肚子餓了。
4. 夜深人靜，在床上輾轉(zhuǎn)反側(cè)睡不著。

在以上四種場(chǎng)景下，用戶的真實(shí)想法是什么？

在不同的場(chǎng)景中，用戶的需求是不一致的，可以從這種場(chǎng)景下特定的用戶需求入手，去區(qū)分App和Web需要解決用戶的什么問(wèn)題。

關(guān)注用戶需求

六、設(shè)計(jì)側(cè)重點(diǎn)

不同場(chǎng)景下，產(chǎn)品設(shè)計(jì)的側(cè)重點(diǎn)是不同的：

1. 在家用的水杯和在公司用的水杯。
2. 臥室的被套和酒店的被套。
3. 線上的商品展示和線下的商品展示。
4. 航空公司的飛機(jī)和私人飛機(jī)。

經(jīng)歷以上四種對(duì)比場(chǎng)景，用戶的體驗(yàn)差異是什么？

這要求設(shè)計(jì)師具備強(qiáng)烈的同理心，從用戶心理和實(shí)際需求出發(fā)思考：如何平衡用戶需求和現(xiàn)實(shí)情況？同種需求在不同場(chǎng)景中最合適的實(shí)現(xiàn)方式是什么？都需要設(shè)計(jì)師去找出差異并重新定義。

#專欄作家#

胡欣欣，人人都是產(chǎn)品經(jīng)理專欄作家，蘇寧易購(gòu)·云產(chǎn)品·交互設(shè)計(jì)師。公眾號(hào)：吹拉彈唱大師（ID：cltcds）

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

題圖來(lái)自Unsplash，基于CC0協(xié)議