top of page
mapmima.png

仅为这一刻​

​UI/UX交互设计

麦觉理湖城 MAP-Mima 博物馆的互动​悬链灯带设计

#团队

熊鸿、张弘皓、刘洛含、许薇

#职责   

研究、概念开发、p5.js 、Processing、UX/UI 设计、视觉设计、3D 建模、插图、用户测试

#设计期间

2022 年 2 月 - 2022 年 6 月

设计背景

在数字时代,城市居民体验和连接社区或邻里的方式也在随着变化。数字设备和智能基础设施更多地影响着居民的日常生活和互动。游客和居民现在可以通过更智能的方式与周围的公共空间建立联系。

 

自 2016 年以来,麦觉理湖市议会一直在努力建设一个强大的社区,以应对城市的变化和发展。保持独特的景观、鼓励积极的社会活动、将创意作品与历史和文化相结合是麦格理湖市议会的三个关键价值观。多元艺术馆 (MAP mima) 通过提供数字展览、艺术品和有趣的互动,将在连接上述三种价值观以及建立居民和游客的幸福感和参与度方面发挥重要作用。

设计交付

“仅为这一刻 Just for a moment”是MAP Mima的一个互动灯光装置设计项目,旨在唤起麦觉理湖城人们的热情和积极情绪。该设计有两个平台,一个是用户的手机,另一个是位于Speers Point Park的灯带安装。通过扫描二维码,用户将能够通过他们的移动设备操纵这个互动艺术品。用户可以在手机界面通过选择不同的图案来控制灯带的样式,灯光装置将会根据用户的选择产生相应的变化。对于更丰富、更复杂、更生动的光效,用户需要在手机界面玩弹球小游戏,获得相应的分数才能看到强化版的光效。

 

这是一个鼓励用户主动创造的设计,是一个提高居民社区认同感并鼓励他们将情绪从消极转变为积极的项目,它是一个提高 Speers Point 公园趣味性的互动艺术品。

#手机界面

手机(客户端)界面上的四个主要屏幕。这些屏幕是使用 p5.js 代码制作的,与服务器端(悬链灯带)的通信是通过 MQTT 数据传输完成的。 

01

当用户点击“Play in Lake Macquarie”按钮时,水滴会落入大海。海洋的深度将会增加。

 

我们用这个比喻来暗示麦觉理湖的小个体(如一滴水)和大社区(如海洋)。

02

游戏开始前的介绍页面。

 

它介绍了3个步骤:

1)在模式之间进行选择,以查看不同的灯光效果

2)长按或短按确定灯带移动速度

3)根据球停止的区域获得对应分数

03

弹球游戏的四个特点:

1) 将情绪与弹球游戏联系起来

2) 积分制

3) 强化版的灯带效果

4)我们设计了四种不同的Buff效果(游戏中常用的一个术语,描述游戏角色获得的暂时有益效果)。当用户点击这四个表情符号区域时,会为悬链灯带添加相应的buff效果。

#悬链灯带效果

用户在移动设备上的控制会触发在悬链灯带的效果。灯带有四种基本和四种增强的灯光模式:基本和增强版的波纹效果、闪烁效果、波浪效果和碰撞效果。用户可以通过直接点击手机屏幕顶部的“模式选择按钮”来控制4种基本的效果,也可以通过在屏幕底部玩发射小球的游戏和累积分数来触发增强版效果。

基本的涟漪效果

涟漪效应在光带上缓慢移动。我们的想法是传达一种平静的心理感觉。

基本涟漪效果中的配色方案从冬季的多彩场景中汲取灵感。它就像雪中的冰一样,但又略带温暖。

增强的涟漪效果

在这个版本中,我们结合了 柏林噪声来让涟漪随时间移动;此外,悬链灯上的涟漪会不断扩大。

基本的闪烁效果

闪烁效果的设计灵感来自阳光下水面的闪烁。图案的快速变化可以给用户一种活力感。

颜色组合是绿色、蓝色和粉红色,这套组合模拟了春日樱花的颜色。

增强的闪烁效果

增强的闪烁版本对颜色进行了简单的更改(包括背景渐变颜色)。

将蓝色和紫色结合起来,营造出充满想象力的氛围。

基本的碰撞效果

两个视觉图形在水面上碰撞然后产生振动效果,这种设计希望给用户带来一种勇于突破的感觉。

基础碰撞效果中的配色模拟了夏日的夕阳,以红色和紫色为主色调。

增强的碰撞效果

基本的波浪效果

这种效果模拟水的波浪,结合不同的暖色,营造出充满想象力的氛围。

 

基本波浪效果模拟枯萎的秋叶和枫叶的颜色作为主要配色方案。

增强的波浪效果

在增强版中,我们将波浪流线设计得更有节奏感,并将配色方案更改为白色和蓝色。

#实地调研

#用户旅程图

#用户画像

d3f2976e25505aaf8a508d9d817c3b3.png
df4a9a2ed48a8afa6853d6a9a0d7f58.png

#生成概念

#第一次迭代

#第一次迭代- 生成故事板、三维建模示意图

#第一次迭代- 用户调研反馈

#第二次迭代

#引入MosCow分析

#第三次迭代

#场景空间布局

#概念论证

可玩的互动城市利用数字技术让公众参与到城市空间中,并为社区带来有意义的诠释。

位置性(空间)

我们考虑了环境(即悬链灯带)提供的机会和限制,以在我们的概念中设计有趣的特征。这是一个户外环境,所以我们尽量保持不同光型的美感,以保证灯光的整体吸引力,同时探索更多的俏皮特征。目前,我们将发射小球的速度映射到悬链线上的光速,并使用“分数”给参与者一种奖励感。我们还使用不同的增益buff效果来暗示从消极到积极的情绪变化。考虑到麦觉理湖的整个环境,我们以水作为主要的设计元素——无论是灯光运动图案还是封面都融入了水来说明我们的设计理念。

交互性(机器)

我们使用运行在智能手机上的 p5.js 移动网站作为客户端,并使用 MQTT 消息与服务器进行通信。

我们设计的一个潜在威胁是,我们发现 chrome 和 firefox 浏览器有时都无法准确检测出球的速度,甚至在不同的计算机和浏览器中速度也不同。

参与(人)

我们为目标用户提供直接和间接的参与。用户可以通过自我探索,完全控制自己想在悬链灯上看到什么样的灯光模式和buff效果。

 

未来,我们会考虑通过开发更有意义和有趣的交互方式,美化用户界面来提升用户体验。

© 2023 Hugo Honghao Zhang

  • Grey Facebook Icon
  • Grey YouTube Icon
  • Grey Instagram Icon
bottom of page