从Web到App:多终端设计中如何实现全场景满足用户需求?

9 评论 5.7万 浏览 284 收藏 8 分钟

互联网产品的基本特征之一是通过多终端的无缝连接、全场景满足用户需求,从而抢占用户的时间和心智以达到商业目的。不同终端所具有的特征各异,因此同一产品在开展多终端设计会存在一定差异,这种差异往往决定了用户的需求是否得到满足。本文将试着从App、Web两个终端给出一些设计思考。

一、App和Web的区别是什么

App和Web之间的区别,回归到两者最本质的区别,可以从操作方式、屏幕尺寸、网络等基础硬件及其属性进行比较。我们可以发现:Web的特点有“定时”、“固定地点”等;App的特点有“碎片化”、“任意使用场景”等。
从Web到App:多终端设计思考

APP和Web的基础属性

二、App设计与Web设计的区别是什么

通过对App和Web的基础属性之间的比较,在设计层面上,不同的属性所采取的设计策略是不一致的,两个终端之间的差别在设计师群体中也是仁者见仁智者见智。

有的设计师从屏幕大小上去区分设计差异:app你需要思考怎么去除才能让塞不下的屏幕能塞下必要的东西,web你需要思考怎么才能增加些东西让空荡的屏幕不会显得太空荡”。

也有的设计师试着从菜鸟和老手的技艺去区分设计方式:对新手来说一个界面大一个界面小,对中手来说设计范式和使用场景不一样,对高手来说都一样;还有的设计师从发展趋势上认为:发展到最后应该都是一样的,现在就是大脑延伸操作媒介的不同。

从Web到App:多终端设计思考

App端设计 VS Web端设计

三、对于同一个产品,App设计和Web设计的主要区别是什么

通过对比基本属性和设计观点,App和Web的一些特性与设计产生了关联,可以进一步发掘:对于同一个产品,App和Web的设计区别是什么?

从Web到App:多终端设计思考

产品App端 VS 产品Web端

以苏宁易购为例,在App和Web两端的设计存在很大差异:App端更多的是提供清晰快捷的入口;Web端不仅提供入口,还要采用绚丽多彩的视觉元素吸引用户进入。

同一个产品在App和Web出现设计差异,从商业诉求上追踪,决定了这种设计差异来源于用户需求,而需求决定了产品功能,功能衍生出设计形式。

引用现代主义建筑大师路易斯·沙里文的一句名言:形式追随功能。

因此,针对App和Web的设计差异可以从用户需求角度继续深入发掘。

移动互联网时代,用户的时间被碎片化分割,导致用户需求出现“场景化”这一典型特征。时间、地点、人物、事件构成场景的必要元素,在特定的时间,特定的用户群体在特定的地点发生特定的行为事件。针对产品的设计,场景赋予其意义。

一杯咖啡,在星巴克,赋予以商务;在书店,赋予以闲暇;在阳光明媚的清晨,赋予以元气;在连绵阴雨的窗边,赋予以温暖;

……
从Web到App:多终端设计思考

一杯咖啡在不同场景下的意义

追本溯源,两个终端在本质上是用户所处“环境”的不同——即“场景不同”造成了App端和Web端的设计差异。

例如:OA产品,在办公室、出差途中、家里这三种典型场景中,用户对于OA产品的期望是不一样的,这种期望由用户心理与用户需求交织产生。

因此,对于同一产品的多终端设计形态,可以分三部分来思考其差异:用户心理、用户需求、设计侧重点。

四、用户心理

不同场景下,用户心理是不同的:

  1. 画图正嗨的时候,产品经理跑过来说有个需求要改。
  2. 访谈过程中,开发和测试提出了很多独到的见解。
  3. 晚上加班到12点,终于把明天要提交的图改好了。
  4. 评审的时候,大佬们纷纷对你的设计竖起大拇指。

出现以上四种场景,用户的内心活动是什么?

面对不同的场景,用户的心理会产生一系列的变化,从用户心理状态切入,可以针对App和Web的产品定位、架构、功能等方面定义设计差异。

从Web到App:多终端设计思考

关注用户心理

五、用户需求

不同场景下,用户需求是不同的:

  1. 连续一个礼拜天天加班到12点,礼拜五下班。
  2. 20号收到工资卡的短信。
  3. 宅家里打游戏,中午肚子饿了。
  4. 夜深人静,在床上辗转反侧睡不着。

在以上四种场景下,用户的真实想法是什么?

在不同的场景中,用户的需求是不一致的,可以从这种场景下特定的用户需求入手,去区分App和Web需要解决用户的什么问题。

从Web到App:多终端设计思考

关注用户需求

六、设计侧重点

不同场景下,产品设计的侧重点是不同的:

  1. 在家用的水杯和在公司用的水杯。
  2. 卧室的被套和酒店的被套。
  3. 线上的商品展示和线下的商品展示。
  4. 航空公司的飞机和私人飞机。

经历以上四种对比场景,用户的体验差异是什么?

这要求设计师具备强烈的同理心,从用户心理和实际需求出发思考:如何平衡用户需求和现实情况?同种需求在不同场景中最合适的实现方式是什么?都需要设计师去找出差异并重新定义。

#专栏作家#

胡欣欣,人人都是产品经理专栏作家,苏宁易购·云产品·交互设计师。公众号:吹拉弹唱大师(ID:cltcds)

本文原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 不太明白续航和迭代速度的比较,为什么app会比web高或快

    回复
    1. web也能很快迭代,只要加班跟得上

      回复
    2. 哈哈哈真实

      回复
  2. 感谢分享学习 更多学习情境化设计的我觉得有本书特别系统《情境化设计——为生活而设计》

    回复
  3. 不错,尤其是对场景化的定义。

    回复
  4. 醍醐灌顶!

    回复
  5. 视角很棒,正是我困惑的地方。希望大师有空能够展开一下,可能是一篇专业性很强的爆款文章呢!

    回复
    1. 好的,最近刚刚完成一款Web产品的移动端设计,抽空写一下

      回复
    2. 期待,你会写得非常棒得!

      回复