-Interactive Design

& UI/UX Design

-Interactive Design & UI/UX Design

Overview

通过改进与观众的互动模式，增强观众观看在线演出的体验，以实现远程临场感的愿景。

通过改进与观众的互动模式，增强观众观看在线演出的体验，以实现远程临场感的愿景。

Timeline

Jun 2020 - Dec 2020

Jun 2020 - Dec 2020

Role

UX Designer; Hardware Interaction Designer

UX Designer; Hardware Interaction Designer

Design Process

Background

User Research

Design Definition

DISCOVER

Interaction strategy

Solution

Solution-Stage side

Solution-Audience side

DEVELOP

Final Output

DELIVER

Let’s

work

together

yingjieliu1932@gmail.com

I'm currently available for new work. Let me know if you're looking for a digital designer. Let’s talk about the next big thing!

Discover

Background

疫情的到来，让人们无法聚集参加线下演出活动！

疫情的到来，让人们无法聚集参加线下演出活动！

在人类前所未见的疫情危机之中，造成了包括体育和现场音乐活动在内的线下娱乐活动几乎全部无限期延期.

消费者对内容的峰值需求与内容创作者的行动受限，为线上演唱会这一替代性娱乐提供了条件。后疫情时代的到来，引发了我们无尽的思考......

人与人之间开始保持距离，但是我们对丰富文化生活的追求从未改变！

在人类前所未见的疫情危机之中，造成了包括体育和现场音乐活动在内的线下娱乐活动几乎全部无限期延期.

消费者对内容的峰值需求与内容创作者的行动受限，为线上演唱会这一替代性娱乐提供了条件。后疫情时代的到来，引发了我们无尽的思考......

人与人之间开始保持距离，但是我们对丰富文化生活的追求从未改变！

Discover

User Research

Live streaming situation；Scenario

Live streaming situation

通过分析用户行为和场景来定义功能架构和布局，以揭示用户行为特征和需求。

通过分析用户行为和场景来定义功能架构和布局，以揭示用户行为特征和需求。

Female

70.37%

Male

29.63%

No

29.63%

Yes

70.37%

Under 20 years old

3.7%

20-30 years old

51.85%

30-40 years old

38.89%

Over 40 years old

5.56%

Save time and effort by not having to travel to the venue

59.26%

Clearer view than offline concerts

33.33%

Interactive discussion while watching

40.74%

Other

18.52%

Having a favourite artist

79.63%

Making up for not being able to see it live

35.19%

Passing time

20.37%

Other

11.11%

22.22%

33.33%

16.67%

27.78%

1-3

>5

None

1

The atmosphere is not

as good as live

94.44%

Average sound quality

40.72%

No participation from

your favourite artists

16.67%

Other

12.96%

Total number of participants: 108

Have you ever seen an online concert?

What do you think is the biggest disadvantage of online concerts?

How many online concerts have you seen?

Who would you most like to see in concert online? Top 3

What are the reasons why you are willing to pay to see an online concert?

Age Group

What do you think is the best thing about online concerts?

Jay Chou

Eason Chan

Soda Green

Scenario

疫情期间，无法去现场看演，娱乐爱好者在家通过“线上直播平台”观看演出

疫情期间，无法去现场看演，娱乐爱好者在家通过“线上直播平台”观看演出

打开直播APP，演出即将开始，很期待看到喜欢的偶像，......开始了，wow，这首歌我也好喜欢，一起唱，要是偶像能听到我的声音该多好，好怀念现场听的那种互动与沉浸感啊！

打开直播APP，演出即将开始，很期待看到喜欢的偶像，......开始了，wow，这首歌我也好喜欢，一起唱，要是偶像能听到我的声音该多好，好怀念现场听的那种互动与沉浸感啊！

Discover

Design Definition

“线上演出缺少临场感，沉浸感差，互动形式单一”

“线上演出缺少临场感，沉浸感差，互动形式单一”

What does the audience want?

What we can do for the audience？

“通过改进观众的互动模式，来增强观众观看线上演出的临场感体验，实现远距临场的用户体验愿景。”

Discover

Interaction strategy

Value proposition: sense of presence;

Method：Multimodal interaction

Value proposition: sense of presence

在观看线上表演场景中，用户能够如置身现场，即使相隔甚远，

依然感觉与表演者及其他换种在同一空间中，并能够进行情感互动与反馈。

在观看线上表演场景中，用户能够如置身现场，即使相隔甚远，

依然感觉与表演者及其他换种在同一空间中，并能够进行情感互动与反馈。

情感传达

互动性

真实性

界面质量

Method：Multimodal interaction

Multimodal input

触摸输入

基于语音、动作、情感等的数据处理

语音输入

人脸识别

......

动作追踪

终端多通道信号输入

云端信号处理

多模态输出

多模态信息融合

Discover

Solution

Interaction logic closure

Method：Multimodal interaction

Interaction logic closure

当单项输出式的舞台表演，融入观众反馈的数据，结合混合现实技术，一起呈现互联的舞台效果，让观众从“接收者”变成“参与者”。我们正在创造属于未来的，沉浸式+交互式+虚拟式的音乐节。

当单项输出式的舞台表演，融入观众反馈的数据，结合混合现实技术，一起呈现互联的舞台效果，让观众从“接收者”变成“参与者”。我们正在创造属于未来的，沉浸式+交互式+虚拟式的音乐节。

舞台效果

VR 直播

舞台效果可视化反馈

多模态输出

多模态输入

舞台端

观众端

全息投影

AR 舞台

声光电效果

节目呈现

手机 App

投影仪

TV

VR Glasses

观看设备

用户数据反馈及交互

全息投影

声光电效果

数字媒体技术笑脸墙

虚拟音乐的表演环境

观众的虚拟形象

显示设备 LED

用户数据收集

声音

动作

图像

评论

穿戴感应设备

Leap Motion

VR GLASS

Gyroscopes

Discover

Solution-Stage side

How is the interaction on the stage implemented ?

Hardware

Presentation

1.用户声音和动作反馈可视化呈现

利用感性线索定位用户情绪：通过面部表情、特殊时间节点或者识别到的关键词，对用户情绪进行理解和定位，判断用户情感理解用户内心诉求，

是自由探索、趣味娱乐、或者静谧欣赏并提供符合用户当下心境的设计。

综合使用感性元素进行设计：通过使用线条、色彩、声音和动作等传达并唤起相对应的情感，提供更加人性化的体验。

利用感性线索定位用户情绪：通过面部表情、特殊时间节点或者识别到的关键词，对用户情绪进行理解和定位，判断用户情感理解用户内心诉求，

是自由探索、趣味娱乐、或者静谧欣赏并提供符合用户当下心境的设计。

综合使用感性元素进行设计：通过使用线条、色彩、声音和动作等传达并唤起相对应的情感，提供更加人性化的体验。

2.观众虚拟形象及弹幕呈现

通过动作捕捉，实时生成用户的数字形象，模拟现场感，降低传输成本观众可以各种形式出现在虚拟空间中，比如化身为一颗颗繁星或是某个NPC，并能够以个人名义实时发送弹幕发表感想，而表演者也能看到观众的评论，与观众进行互动。


通过动作捕捉，实时生成用户的数字形象，模拟现场感，降低传输成本观众可以各种形式出现在虚拟空间中，比如化身为一颗颗繁星或是某个NPC，并能够以个人名义实时发送弹幕发表感想，而表演者也能看到观众的评论，与观众进行互动。


3.用户动作捕捉可视化呈现

通过手机了陀螺仪的动作捕捉，实时生成用户的数字形象，模拟现场感，降低传输成本

通过手机了陀螺仪的动作捕捉，实时生成用户的数字形象，模拟现场感，降低传输成本

Discover

Solution-Audience side

Solution-Audience side

How interaction is achieved on the audience side ?

Why do audiences want to interact?

How to make audience interaction more interesting and fun ？

Why do audiences want to interact?

How to make audience interaction more

interesting and fun ？

Analyse user behaviour and scenarios

通过分析用户行为与场景，挖掘用户行为特征和需求，定义功能架构与布局

通过分析用户行为与场景，挖掘用户行为特征和需求，定义功能架构与布局

高级功能

多机位、特效、一起唱、心动曲线

辅助功能

投屏、分享、弹幕、画质

核心功能

播放、互动、全屏

Stage performance interface metaphor

Live viewing interface design

Fun interactive

直播观看界面设计，比心手势,触发点击与长按可显示不同的互动效果，点击强调比心的动作，长按则添加了时间维度的变化，给用户带来惊喜，更加趣味性

直播观看界面设计，比心手势,触发点击与长按可显示不同的互动效果，点击强调比心的动作，长按则添加了时间维度的变化，给用户带来惊喜，更加趣味性

blow up the concert

fans

It sounds so good, I really .......

Come together!

Heart gesture,

triggered by a click and a long

Multi-angle camera view

云剧场播放界面，让观众具有选择权，想看哪里点哪里

云剧场播放界面，让观众具有选择权，想看哪里点哪里

Visual data feedback

让用户知道的心动点，并传输回现场，与表演者共建舞台，同时也可以分享进行互动

让用户知道的心动点，并传输回现场，与表演者共建舞台，同时也可以分享进行互动

Deliver

Final output

Let’s

work

together

yingjieliu1932@gmail.com

I'm currently available for new work. Let me know if you're looking for a digital designer. Let’s talk about the next big thing!