揭秘谷歌总部交互体验新玩法

马多蕾翻译整理 川台设计与品牌

导语: 一个带有5,880个游戏按钮的固定装置让来到谷歌纽约总部大楼公共大厅的人玩得不亦乐乎。AnyPixel.js是一个开放源代码的模块化系统,可以用网络创建罕见的大型交互显示屏。任何人不论专业程度,都能使用代码和图标创建自己的显示屏。




谷歌的新标志

        一个带有5,880个游戏按钮的固定装置让来到谷歌纽约总部大楼(位于第八大街111号)公共大厅的人玩得不亦乐乎。该项目源于谷歌纽约旗舰大楼的大厅翻新时需要一个新标志。这可不能是随便一个标志,它需要看起来有趣、可以互动,不易过时,此外,还必须在外观和精髓上能代表谷歌的品牌。
       设计组立刻断定采用一个巨大的显示屏实现起来会很容易,但是触摸显示屏不具备交互性。他们的解决方案是采用游戏按钮,其外形尺寸和交互模式为大多数人所熟悉,但是展示方式却出乎访客意料——这些按钮是一块近乎300平方英尺的交互显示屏上的单像素。



        每个按钮上都固定一个8比特全色LED。这些按钮被嵌入一块块7×7大小的面板上,这些面板被绑在一起并由谷歌开发的互联网浏览器Google Chrome控制。每次与显示屏进行的交互体验就是一块简单的画布和JavaScript网页。为保持新鲜感,“按钮墙”可以通过基于网络的CMS(内容管理系统)进行内容更新。




显示屏背面


项目设计过程 

        该项目的主要挑战是为一个约30×10英尺140×42像素低分辨率显示屏设计和编写显示内容,显示屏的每个像素都是一个按钮,每个按钮任何时刻都可互动。团队利用快速原型法和测试手段攻克了这个难题,提出如下类似问题:这样设计对这种像素宽度的辨识性如何?对用户的交互响应是否直观?还有,如果一个班有20个10岁的孩子一起捣鼓这些按钮会怎样?


可以按下一个按钮或所有按钮;无论被多少人单次触碰或多次触碰软件都可以处理

       在概念阶段,他们构建了多个物理原型来改善按钮的外观形式,以及按钮和各种材料的间距。外形一搞定,他们便转而研究将在墙上展示的内容,使用基于浏览器的仿真器测试和调整动画和代码。
       然后,设计组把内容雏形带到一个投影工作室,看看1:1的显示效果。显示墙制造出来后,他们又通过更多轮的现场测试对其设计、交互性、反馈环路、色彩及亮度等级进行优化。


开放源代码系统

        团队认为如果所有开发者、编码员和制造商都开发出自己的显示屏,会让该装置变得更加有趣。这样,AnyPixel.js就成了一个开放源代码的软件和五金库,可以用网络创建罕见的大型交互显示屏。任何人不论专业程度,都能使用代码和图标创建自己的显示屏。


11个javascript编写的演示应用软件是AnyPixel.js 框架实例库的一部分


AnyPixel.js 是一个模块化系统,可以做成各种尺寸的显示屏

        AnyPixel.js软硬件架构简单,可以开发出任何以像素作为互动单元的显示屏,可开发以电灯开关、灯箱,甚至气球作为交互单元的显示屏。
        所包含的应用程序软件由简单的网络代码编写而成。人们仅需知道如何在HTML画布上用JavaScript拖拉元件。开发者社区对Anypixel.js的热烈反响令设计团队兴奋不已。
        更重要的是,AnyPixel.js对访客来说是一种热烈欢迎——通过动态和活力发出互动邀请。办公楼每天接待成千上万的来访者,这个罕见的大型交互显示屏以非常“谷歌”的方式给员工和来客带来欣喜。无论是7岁儿童还是70岁老人,他们脸上都挂着相同的笑容。


按钮墙让各个年龄段的来访者都玩得不亦乐乎


AnyPixel.js大型交互显示屏获得SEGD荣誉奖

SEGO评审评语:


“模拟技术和数字技术之间的一个有趣交织。在接待处嵌入了一个具有吸引力的东西,促进了交互性。”

“一个全新的交互式数字墙,带来更多真实可触的交互性——唤起人们对游戏按钮的怀旧情结,是一个具有无限前景的简单模块化系统!”

“有时候,似乎设计者不大愿意分享他们的成功秘诀。但我认为,当有人设计出非常酷的作品并认为设计过程不应该被隐瞒或只与一部分群体分享时,这是极其令人钦佩的。让系统开放源代码证明这些设计者看到了AnyPixel生存、成长和改进的潜力,并十分谦虚地认为除了他们的设计,还可以有很多别的方案。看到人们未来将利用这种工具创造出各式各样光怪陆离的显示器,我感到非常激动。”