深圳

21

香港赛马会“小纳米，大世界”展览

深圳嘉里建设广场二期展示厅

多点触摸 互动游戏 香港

多点触摸

北京

设计案例

LED移动屏幕 多屏幕投影

iPad展示控制程序

王滢｜ 求职意向：产品经理

香港赛马会“小纳米，大世界”互动多媒体展览2010年，香港、北京

“小宇宙，大世界”由香港赛马会主办以展示纳米技术对社会产生的惊人影响展览涉及医药卫生、能源、消费品以及环境领域并突出香港科技大学在纳米方面的研究成果

yU+co[lab]负责此次展览的媒体内容设计

1 案 例 背 景

3 4

王滢｜ 求职意向：产品经理

5 6

3

设 计 要 求

将深奥的科技资讯，借助互动多媒体手段（一个多点触摸屏+四个单点触摸屏）为普通观众所接受。

其中，多点触摸屏涵盖了所有信息，四个单点触摸屏分别介绍了其中的不同章节内容。

即：多点触摸屏的信息＝四个单点触摸屏

详 尽 的 蓝 图 阶 段

在设计初期，根据客户所提供的繁多无序的文字资料（如右侧所示），整理出一份详尽的蓝图：

2

客户提供的繁多无序的资料

王滢｜ 求职意向：产品经理

87

详尽的蓝图阶段

王滢｜ 求职意向：产品经理

109

界 面 风 格4

配合此次展览的主题以“分子结构”作为此次设计的基本元素单点触摸屏、多点触摸屏界面风格保持一致

单点触摸屏首页“螺旋”结构设计以动态的螺旋状结构带出不同主题章节

其中一子章节界面设计不同层次间的界面设计风格保持一致

王滢｜ 求职意向：产品经理

11 12

5 交 互 设 计

单点触摸屏交互设计特点：

1. 内容较少2. 同时只限一位参与者操控

交互设计难度指数：★★★☆☆

多点触摸屏交互设计特点：

1. 包含了四个单点触摸屏内容2. 最多允许6个人同时操控

交互设计难度指数：★★★★☆

挑战一：语言选择

单点触摸屏可以在首页设置语言选项，但是多点触摸屏同时最多支持六个人操控，因此必须考虑到参与者的多样性，即同时有中英文使用者的可能。

挑战二：文字方向性

展览中，多点触摸屏被平放在一张大的台面上——类似于微软的Surface，因此参与者所处的位置并不局限台面的某一边，而是四边都有可能。

王滢｜ 求职意向：产品经理

语言选择图解

13

为了解决以上两大挑战，我们在多点触摸屏的操控中引入了“拖拽”手势。

规则如下：

在触摸屏中央为一个圆形，圆形中的文字以中英文形式交替出现本次展览主题。

当中文出现时，参与者从圆心处向下一划，出现的正文内容即为中文，文字的水平位置同拖拽方向成90度。

英文亦然。

引 入 手 势 操 控6

14

拖拽手势

拖拽手势

中文标题

英文标题

中文正文

英文正文

语言选择图解

中/英文主题

拖拽方向

拖拽方向

拖拽方向

正文水平位置

90°

正文水平位置

90°

正文水平位置

90°

文字方向图解

王滢｜ 求职意向：产品经理

15 16

7 后 记

在整个项目中，我作为 Producer，负责：

1. 跟进客户，了解客户的实际需求

2. 绘制详尽蓝图和产品原型

3. 与设计师沟通，确保设计师的概念符合客户需求

4. 协助设计师和程序员，评估并优化交互程序易用性和体验，如：提出引进手势操作的概念及具体操作规则。

王滢｜ 求职意向：产品经理

17 18

深圳嘉里建设广场二期展示厅

案 例 背 景

展厅位于深圳嘉里建设广场二期41楼，数字化展示区域分为 C/D/E 三个区

区域C：品牌形象片巨大的LED银幕伴随着音乐及画面前后律动带来视觉和听觉上的强烈冲击

区域D：模型投影借助灯光交互效果以及多屏幕无缝投影技术将项目的区位优势及各项技术参数转变为可视化图形

区域E：互动触摸屏参观者可透过交互程序体验绿色大楼的细节

作为连接三个展示区域的控制设备——iPad控制程序的设计至关重要。它不但从技术上要保证整个展厅的顺畅度，同时界面设计和操控上也要做到User Friendly.

1

王滢｜ 求职意向：产品经理

详 尽 的 蓝 图 阶 段

使用OmniGraffle，根据所需按钮及其对应功能，绘制一张详尽的蓝图，如右侧所示：（因 C/D/E 各区按键较多，为节省篇幅在此省略）

2

19 20

王滢｜ 求职意向：产品经理

21

设计界面初稿界面分组及按钮名称不直观，普通用户而言难以上手。

22

设计师提交的设计初稿如右侧所示，被我批评为中规中矩、保守、不友好，是以程序员的逻辑在设计界面。

除此之外，初稿中的界面设计还存在几个问题

1. 每个按键均为扁长型，按键之间间隙过大，不符合费茨法则。

2. 界面以“鼠标操控”为基本导向，并未考虑到触摸屏的特点。

程序员思维的初稿

视 觉 风 格 提 案3

王滢｜ 求职意向：产品经理

23 24

1. 以Grid作为界面基本元素，按键之间空隙紧凑，最大限度地扩大了各按键的面积。

2. 以鲜明的色彩来区分不同的按键，避免误操作。

3. 图形化按键文字

以Window 7 Metro UI为灵感

视 觉 风 格 提 案3

界面设计终稿区域C\E均只有一个环节，因此色调为纯色块。区域D包含有两个环节的流程，因此色调为两个环节色彩的渐变色。

王滢｜ 求职意向：产品经理

25

按键三秒锁定

在整个展示流程中，任何误操作都应当避免。因此我们在程序中加入按键三秒锁定，即按下某一按键后，要过三秒钟才能够再次按下该按键。

区域D环节二中，共有12个小章节的视频可选择播放。为了节省界面空间及保持美观，采用了折叠式菜单设计。

折叠式菜单

交 互 设 计 细 节4

26

折叠式菜单设计，节省了界面空间

王滢｜ 求职意向：产品经理

王滢｜ 求职意向：产品经理

27 28

在深圳嘉里建设广场二期展示厅项目中，我作为Producer，负责：

1. 确定工作范围、管理内部团队及外部供应商

2. 制定时间表和里程碑，确保项目进度及质量按照计划表进行

3. 跟进客户，了解客户的需求

4. 撰写C、D、E 区故事线，绘制流程图

5. 与设计师沟通，完善产品易用性，提高用户体验，如提出以Window 7 Metro UI为灵感，折叠式菜单以及按键三秒锁定等，确保产品符合客户期待

6. 撰写项目文档,如创意简报及操作手册等

后 记5