ixdc 中国交互设计体验日-c3a_高歌_手持终端交互设计方法1_高歌

73
2010 中国交互设计体验日

Upload: ixdc

Post on 24-May-2015

1.203 views

Category:

Design


8 download

DESCRIPTION

怎样跟上移动应用及移动互联网发展的脚步?当我们的视野逐渐转向移动领域之时,如何将自己的聪明才智和已有经验在这个新的平台上更好的发挥。此次工作坊将为你呈现: 1、CDC无线团队在移动应用及移动互联网方面的项目及经验分享。 2、各移动终端交互设计与信息组织的探讨。 3、无线团队成长和规范化建设。 课程目标 介绍及展示无线终端的交互设计方法及项目相关经验 课程参与者将学到 无线终端的交互设计方法及项目相关经验 工作坊环节安排 (一个半小时) 1、 设计因移动而不同: 你可能是资深设计从业者,精通网站设计,或对pc客户端应用设计驾轻就熟。但如何将自己的聪明才智及无限创意应用到移动设备之中,这个分享能给你带来不一样的启发。 2、 移动终端交互设计流程和规范建设:介绍CDC在移动终端设计方面的一些项目和经验,以及基于移动终端方面的交互设计流程和相关规范建设。 2010年首届中国交互设计体验日,是以“赢在互动”为主题的大型交互设计会议盛宴。大会包括交互设计演讲、论坛、展览及工作坊。通过互动、交流体验的方式,将“交互设计”的理念在中国设计产业中进行高层次、深度、广泛的推广与传播。 我们希望通过这次大会,聚集国内外交互设计先驱者;展示中国交互设计优秀成果;为交互设计教育与企业搭建一个交流的平台; 促进中国交互设计产业与国际设计前沿的同步发展。

TRANSCRIPT

Page 1: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

2010

中国交互设计体验日

Page 2: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

设计因移动而不同

2010

中国交互设计体验日

Page 3: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

—移动应用的发展

背景

—设计师角色的转变

2010

中国交互设计体验日

Page 4: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

0

125

250

375

500

2006 2007 2008 2009 2010

移动互联网规模(亿) 中国移动互联网用户数量(百万) 全球手机用户数量(千万)

2010

中国交互设计体验日

Page 5: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

设计师角色的转变

2010

中国交互设计体验日

Page 6: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

准备好,迎接新的挑战

2010

中国交互设计体验日

Page 7: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

The Difference

2010

中国交互设计体验日

Page 8: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

The Difference

屏幕尺寸

使用情境

操作方式处理能力

有限带宽

操作系统其他

2010

中国交互设计体验日

Page 9: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

Screen Size

2010

中国交互设计体验日

Page 10: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

Screen Size

屏幕空间是一个不可忽视的限制因素,正如同我们的居住空间

2010

中国交互设计体验日

Page 11: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

2010

中国交互设计体验日

Page 12: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

2010

中国交互设计体验日

Page 13: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

2010

中国交互设计体验日

Page 14: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

80%的用户使用20%的功能

2010

中国交互设计体验日

Page 15: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

80%的用户使用20%的功能(找出90%的用户关心的10%的功能)

2010

中国交互设计体验日

Page 16: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

80%的用户使用20%的功能

选择即成本

(找出90%的用户关心的10%的功能)

2010

中国交互设计体验日

Page 17: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容选择即成本

(去除重复功能,保持单一路径)

80%的用户使用20%的功能(找出90%的用户关心的10%的功能)

2010

中国交互设计体验日

Page 18: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

少既是多

选择即成本(去除重复功能,保持单一路径)

80%的用户使用20%的功能(找出90%的用户关心的10%的功能)

2010

中国交互设计体验日

Page 19: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

少既是多

选择即成本(去除重复功能,保持单一路径)

80%的用户使用20%的功能(找出90%的用户关心的10%的功能)

(明确重点,突出内容)

2010

中国交互设计体验日

Page 20: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

少既是多

选择即成本(去除重复功能,保持单一路径)

80%的用户使用20%的功能(找出90%的用户关心的10%的功能)

(明确重点,突出内容)

2010

中国交互设计体验日

Page 21: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

少既是多

选择即成本(去除重复功能,保持单一路径)

80%的用户使用20%的功能(找出90%的用户关心的10%的功能)

(明确重点,突出内容)

2010

中国交互设计体验日

Page 22: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

少既是多

选择即成本(去除重复功能,保持单一路径)

80%的用户使用20%的功能(找出90%的用户关心的10%的功能)

(明确重点,突出内容)

默认去除的方法减掉非必要功能

2010

中国交互设计体验日

Page 23: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

少既是多

选择即成本(去除重复功能,保持单一路径)

80%的用户使用20%的功能(找出90%的用户关心的10%的功能)

(明确重点,突出内容)

默认去除的方法减掉非必要功能

隐藏复杂方法

2010

中国交互设计体验日

Page 24: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

精简内容

少既是多

选择即成本(去除重复功能,保持单一路径)

80%的用户使用20%的功能(找出90%的用户关心的10%的功能)

(明确重点,突出内容)

默认去除的方法减掉非必要功能

隐藏复杂方法

充分利用系统控件

2010

中国交互设计体验日

Page 25: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

2010

中国交互设计体验日

Page 26: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

信息组织

2010

中国交互设计体验日

Page 27: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

信息组织

2010

中国交互设计体验日

Page 28: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

信息组织

2010

中国交互设计体验日

Page 29: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

信息组织

扁平化信息组织

合理的导航 明确的方位感知

一个页面完成一个任务(inevitable)

屏幕空间扩展

2010

中国交互设计体验日

Page 30: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

信息组织

扁平化信息组织

合理的导航 明确的方位感知

一个页面完成一个任务(inevitable)

屏幕空间扩展

方法?

2010

中国交互设计体验日

Page 31: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

扁平化信息组织2010

中国交互设计体验日

Page 32: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

扁平化信息组织

目录 摘要! 全部?

2010

中国交互设计体验日

Page 33: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

扁平化信息组织

目录 摘要! 全部?

2010

中国交互设计体验日

Page 34: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

扁平化信息组织

目录 摘要! 全部?

2010

中国交互设计体验日

Page 35: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

信息组织

扁平化信息组织

合理的导航 明确的方位感知

一个页面完成一个任务(inevitable)

屏幕空间扩展

2010

中国交互设计体验日

Page 36: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

屏幕空间扩展

2010

中国交互设计体验日

Page 37: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

平面扩展

边缘定位正反面

立体空间

针对小屏幕的信息组织方法(形式)

2010

中国交互设计体验日

Page 38: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

平面扩展

手机屏幕像是一个窗口,透过它看到全局的部分。这样也最为符合常识和预期

2010

中国交互设计体验日

Page 39: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

边缘定位

第一页

最后页

中间页

2010

中国交互设计体验日

Page 40: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

第一页

最后页

中间页

边缘定位2010

中国交互设计体验日

Page 41: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

第一页

最后页

中间页

边缘定位2010

中国交互设计体验日

Page 42: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

第一页 最后页中间页

边缘定位2010

中国交互设计体验日

Page 43: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

正反面2010

中国交互设计体验日

Page 44: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

正反面2010

中国交互设计体验日

Page 45: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

信息组织

扁平化信息组织

合理的导航 明确的方位感知

一个页面完成一个任务(inevitable)

屏幕空间扩展

2010

中国交互设计体验日

Page 46: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

合理的导航 明确的方位感知2010

中国交互设计体验日

Page 47: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

合理的导航 明确的方位感知

深南大道

沙河西路

龙珠大道

龙珠三路

?

空间分隔的作用

腾讯大厦

住处

2010

中国交互设计体验日

Page 48: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

合理的导航 明确的方位感知

深南大道

沙河西路

龙珠大道

龙珠三路

?

飞亚达

BENS电器

邓小平画像

华润万家

空间分隔的作用2010

中国交互设计体验日

Page 49: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

合理的导航 明确的方位感知

1.图比文字的识别成本低 2.应用标志建筑物的方法 3.应用空间分隔

DEMODEMO

2010

中国交互设计体验日

Page 50: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

信息组织

扁平化信息组织

合理的导航 明确的方位感知

一个页面完成一个任务(inevitable)

屏幕空间扩展

2010

中国交互设计体验日

Page 51: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

一个页面完成一个任务(inevitable)

注意力

2010

中国交互设计体验日

Page 52: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

一个页面完成一个任务(inevitable)

DEMO

2010

中国交互设计体验日

Page 53: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

设计观2010

中国交互设计体验日

Page 54: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

屏幕尺寸

使用情境

操作方式处理能力

有限带宽

操作系统其他

屏幕尺寸

2010

中国交互设计体验日

Page 55: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

屏幕尺寸

使用情境

操作方式处理能力

有限带宽

操作系统其他

使用情境

2010

中国交互设计体验日

Page 56: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

only planet project

很多人活不到成年

遭遇袭击时寻找路线用的逃生设计

解决留守儿童沟通问题的设计

VS

2010

中国交互设计体验日

Page 57: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

很多人活不到成年

VS

make a phone call

2010

中国交互设计体验日

Page 58: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

任务 情境context

2010

中国交互设计体验日

Page 59: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

任务

2010

中国交互设计体验日

Page 60: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

任务

context

scenario

情境

场景剧情

2010

中国交互设计体验日

Page 61: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

任务

scenario场景剧情

function功能需求

context情境

2010

中国交互设计体验日

Page 62: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

PC与移动设备在情境上的不同---不知场景为何物---桌面端

2010

中国交互设计体验日

Page 63: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

时间光线噪音方向地点距离温度震动网络连接情感寄托文化......

PC与移动设备在情境上的不同移动--可以想象,没有移动设备,也就没地理位置信息服务

工作是的整段时间vs碎片时间 --手机邮件客户端

2010

中国交互设计体验日

Page 64: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

时间光线噪音方向地点距离温度震动网络连接情感寄托文化......

pc与手持设备在情境上的不同

自适应界面

2010

中国交互设计体验日

Page 65: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

esig

n

时间光线噪音方向地点距离温度震动网络连接情感寄托文化......

基于手持设备情境的设计

D?

2010

中国交互设计体验日

Page 66: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

context

光线时间方向地点距离温度震动网络连接历史偏好......

implement

微薄启动界面

地图,自适应旋转界面,铃声消除

天气,拍照

电话

自动网络切换

自适应通讯录

自适应菜单

1.已经应用的设计---了解本质,关注移动情境

2010

中国交互设计体验日

Page 67: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

context

光线时间方向地点距离温度震动网络连接历史偏好......

implement

2.创新设计

耳听八方

活力值/这是懒人

2010

中国交互设计体验日

Page 68: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

contextimplement

3.预测趋势

时间

网络人

温度

偏好

地点

2010

中国交互设计体验日

Page 69: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

contextimplement

3.预测趋势

时间

网络人

温度

偏好

地点位置 朝向

LBS

2010

中国交互设计体验日

Page 70: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

contextimplement

3.预测趋势

时间

网络

温度

偏好

地点位置 朝向

LBS

生命特征

2010

中国交互设计体验日

Page 71: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

情境---对设计观的影响

2010

中国交互设计体验日

Page 72: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

屏幕尺寸

使用情境

操作方式处理能力

有限带宽

操作系统其他

使用情境

2010

中国交互设计体验日

Page 73: IxDC 中国交互设计体验日-C3a_高歌_手持终端交互设计方法1_高歌

屏幕尺寸

使用情境

操作方式

处理能力

有限带宽

操作系统其他

操作方式操作系统

2010

中国交互设计体验日