Designing multi-device experiences

  • 0
  • April 17, 2018
images

在合适的时间使用合适的设备做最适合事情(上下文)

3C模型:一致,连续,互补。

  • 一致性:基本的体验在设备间,内容,流程,结构跟合心功能是一致的。微调来适应设备的属性。整体来说,一个体验可以在一个设备上完整进行。

  • 连续:一个设备放到另一个,无论是继续同一个行为(读书,看电视,听音乐),或者一个序列动作(查菜谱到做饭)。

  • 互补:协同和控制。设备成为一个群组来完成。Chromecast. tablet和观看电视。wiiU和电视。

如何决定采用哪一种app方式:

和公司,产品,用户还有产品周期都有关。但是对用户来说,他们在意的是是否快,流畅,体验好。

Native App

Web App

Hybrid App

Need for speed

Faster graphics and performance

slower

同前

Need for device sensors? GPS, camera,etc?

全部支持

受到浏览器限制

Web-native abstraction layer allows extended access to device sensors

开发资源

专业的针对平台的开发资源

H5的代码平台共用

同前

开发周期

针对不同平台开发

通过各自app store审核

快速部署和开发

同前

复杂的体验设计

流畅高品质,定制化界面,支持手势

视觉可以一致,交互受限

同前

数据传输量

速度快

受到网络速度影响

同前

频繁更新

需要维护多个平台

向各个的store分发

App修改和发布可以立即在所有平台间推送

只需要改变一个数据库,但是需要向各个store发布

离线工作

支持离线

无网络无法工作

支持离线

内容付费

更好的In-app支付和其他支付方式。

没有结构化的支持,可以有购物车,无法和原生App比较

同前

Chapter2:

一致性设计,一致性不代表完全一样。

  • 不同的设备相同的体验内容一样核心功能一样根据不同进行微调尊重操作系统的标准

  • 保持核心体验一致(视觉,设置,唤起,交互,信息结构,词汇)并且设备自己就可以运作良好像星巴克连锁店一样

  • Androidios如何抉择同时拥有两种不同平台的设备怎么办?答:核心功能一致,按照平台优化。ios的需要按照ios标准做才能上推荐。

  • 常见错误:android已经有自己的后退按钮。Android的Tabs在顶上, ios icon, Android列表的右>不需要。

通常情况以电脑为主,然后根据尺寸,交互方式,感应装置调整。

常见方法是视觉设计变成一栏

按钮变大,间距变大。

信息结构也可以扁平,层级变多。

手机

平板

台式

电视

尺寸

4-5

7-10.1

15-27

32-60

使用距离

6-12

10-18

12-22

5-15

地点

任何地方

家庭,途中

公司,家庭

家庭

使用模式

移动,Android

iPad多。移动,使用的不那么频繁。

大多数静态

静态

观看模式

休闲或者集中

休闲,靠着。

集中

休闲

持握

大多数单手

双手

/

/

交互方式

触屏,直接,语音

触屏,直接

键盘鼠标

遥控器

注意力

短暂,整天,碎片,

稍微长时间,休闲时间,观看内容

长时间在公司使用,搜索,查找工作

长时间,被动,在几个事情间切换,

所有权

私有

分享,家庭成员居多

公司独有,家中有时候分享,不同的登录权限

家庭成员间分享,社交化和朋友家人一起。

功能和感应

GPS, 陀螺仪,指南针,相机,wifi, 压力,麦克风,蓝牙,光线感应,背光

同前

无定论,但是有wifi,摄像头,蓝牙,光线感应

传统电视上啥没有,智能电视有wifi,光线,动作。

版面优化:方法有grid,尺寸,大小,间距,对齐等等。手机最小挑战最大,要专注。

触摸优化:间距和尺寸要更大,悬浮状态手机上没有。手机上有手势设计。拨打电话,导航

分析几个例子:

  • Google search. 搜索框布局,视觉,结果中的信息卡片一样。不同:语音输入,拍照输入,根据地理位置,google now, 天气。这些不同不是一下子展示出来,而是渐进。

  • 房产app:手机优先虽然不是从设计设计开始的,手机上最重要的是地图和地图上的价格。这是产品的value proposition

  • HuluPlus:这个地方作为了一个反例,因为手机并不是一个探索内容的地方。WiiU不错因为它作为电视的配合而生。在看电视的时候作为遥控器加上扩展屏。

Chapter3, 连续

有几种:

  • 一类是需要大量时间做的(看书,看片子),但是会在不同的场景不同的时间去做。

  • 大量的计划,耗费很长时间,并且有序列的进行:选菜谱,买菜,做菜。计划旅行,酒店机票,具体每日行程计划。

  • 需要注意:尽量不用注册,如果非要注册流程极简,记住输过的内容,保持登录,忘记密码。按钮命名,sign up和log in是一组,sign in和register/join是一组,使用第三方登录。

例子:这三个例子都是完整的内容消费。

  • Kindle 内容消费:生态做的好,考虑到场景转换的听书需求。在车上,在家中,给自己,给娃听。

  • Airplay?这个不是放到最后一种更适合?:

  • Google Drive 内容创造和编辑:

Chapter4, 互补

几个设备的协同,群组,通常有2个设备以上。

  • 配合:四人麻将。两人赛车。

  • 控制:

  • 必须两个

  • 一个能用,两个更好。

  • 有了一定的理论框架以后,当然要分析一下各种头部产品是如何做多设备体验的喽。

Day1 Ins

选择原因是用户基数大,偏重时尚。设计理念应该比较超前。

download

从内容角度来说,瀑布流的内容基本上是一毛一样。
不同的是:
1.手机有美图美颜之类app的广告植入
2.电脑端有添加联系人的模块
3.视频是否直接播放
做的好的地方:核心内容核心价值是一样的。一致性比较高
不好的地方:没有用手机的一些地理位置特性去排序内容。

从视觉层和交互层来说
做的好的地方
1.识人交互在手机和电脑上有差别。根据不同的不同的交互特性进行了调整
2.
做的不好的地方
1.图标一致性问题。电脑端的探索是个explore icon,手机上是search icon,识人按钮样式
2.电脑端的对齐,功能icon群组稍显尴尬。排版布局有硬伤。
3.电脑端icon和文字logo点击了都会到首页。设计师在功能取舍,品牌传播上比较被动。

从使用连贯性上来说
ins可能并没有很多在网页上看的需求。所以先忽略。

题外话:
尝试了一下图片选择,编辑流程,感觉颠覆我对易用性的理解。反人类的交互和操作很多。最明显的一点就是手指移动的距离还有关键按钮摆放的位置。

Day2 FB

选择FB是因为用户基数大,技术驱动的公司,做设计决策应该比较内敛,有依据。

一致性原则使用的不好。没有考虑到手机屏幕空间有限。内容非常的庞杂。并没有很好的突出社交属性,比如手机的拍照,聊天。聊天甚至需要重新下载app。被动浏览的比较多。没有发挥手机特点让用户主动参与内容制作。程序的流畅性很差,手势支持一般,卡顿感。手机界面功能没有把场景和功能定义清楚,比如小窗看视频,连续播放。图片放大观看。

视觉:

  • 图标不一致

  • 配色等各种细节不一致

  • 试图在手机界面中放很多细节和功能。

内容:

  1. 手机版视频沉浸式设计,连续播放。小窗播放的必要性和播放控制不太懂。

  2. 手机版的图片放大,和不放大的界面差异在哪里?

交互:

  • 增加了拍摄,

  • 手机版本卡顿。估计是hybrid的app

  • 菜单放到底部tab最右侧

Day3 Airbnb

入选原因基数大,非常注重设计,注重人性,懂得根据不同地区做优化。

Day4 Amazon

Day5

Leave a Reply

Your email address will not be published.

Love What You See? Check Out My Portfolio