Portfolio_ChenLi

Youtube Link

https://youtu.be/BfYfOqTg_0g https://youtu.be/bm6FJfiomr4

SERVICE DESIGN RESEARCH ON PHARMACOLOGICAL INFORMATION 2020.12-2021.06 Graduation Project This multi-dimensional information visualization tool aims to help in scenarios such as communication and presentation in pharmacology.

It can help students understand fragmented pharmacology knowledge through immersive interactive games. Also, it can promote the decentralization of medical education and develop into a dynamic platform for scientific research, diagnosis, and other fields.

Team Project

Chen Li, Jialu Cheng, Kuangxi Cui, Qixin Chen, Kedan Ai, Hong Hua

Role

Interaction Design, Visual Design, Research

Supervisors

Shuxin Cheng, Liming Wang, Tao Han

01 BACKGROUND

02 PROBLEM DISCOVERY

03 INTERVIEW

01

2600 There are about 2600 medical schools worldwide.1

Classroom Textbook Te x t b o o k s c o n t a i n abstract information that is difficult to understand.

600000 Textbook There are 600000 students who graduated from medical school in China.

Illustration Blackboard Animation Software

There are more and more students studying pharmacology.

Blackboard

28%

12%

16%

23% 8% 6%

18% 29%

16% 12%

Cunfused

22% 18%

Can’t Undersatnd

Laboratory

Hospital

Existing anatomical animations and software have a fixed perspective and lack of interaction.

23%

8%

38%

16%

37%

6%

23% 27%

03

Animation

The pharmacological information in the blackboard is fragmented.

38%

02

3%

5%

Student Linyu Wang

Researcher Xun Li

Dr. Yuan

Q: How to learn pharmacology ？

Q: How to present your research?

Q: Which scenarios require meetings?

A: We learn pharmacology based on textbooks or online videos.

A: We use Adobe Illustration or Powerpoint to draw illustrations.

A: Meetings with medical representatives or scientific conferences.

Q: How to improve the efficiency ？

Q: Is it easy to use drawing software?

Q: Is it easy to communicate with them ？

A: We hope schools can develop pharmacological visualization tools.

A: It is difficult for scientific researchers to use them.

A: No, their presentation is difficult to understand.

Conclusion

Conclusion

Conclusion

31% 37%

Not Easy to Understand Can Undersatnd Easy to Understand

[1] Duvivier RJ, Boulet JR, Opalek A, van Zanten M, Norcini J. Overview of the world’s medical schools: an update. Med Educ. 2014 Sep;48(9):860-9. doi: 10.1111/medu.12499. PMID: 25113113.

It is difficult to understand and remember pharmacological knowledge.

It is difficult for researchers to present their reaserch with drawing softwares.

Pharmaceutical company conferences and forums are difficult to understand.

04 COMPONENT Physiology

05 INFORMATION HIERARCHY Pathology

Pharmacology Molecular

Cell

06 INFORMATION MODULE 1

1

First Dimension

Information Organization

Multilevel - Spatial Dimensions

2

Second Dimension

3

Third Dimension

1 Information that has a positional relationship.

Multi-Drug - Individual Dimension

2

Multi-State - Time Dimension

Information without positional relationship.

1 Molecular

Tissue

Tissue Point

Organ Body Pharmacology Organ

Organ

3

Cell

Pathology Physiology

Drug 1

2 Drug 2

Drug 3

Line Surface volume Sum

3

Tissue

Cell

Molecular

First Dimension

Second Dimension

Third Dimension

The absorption site and onset site of the same drug are different, involving different organs, tissues, cells and molecules.

Different disease requires different drug treatments, and the effective positions of multiple drugs are different.

The process of curing diseases includes time sequence, which are physiological state, pathological state and pharmacological state.

Y-Axis

X-Axis

Z-Axis

According to the size of different c om p onents, the y-a xis c an b e divided into organs, tissues, cells and molecules from bottom to top.

According to different disease classifications, drugs of the same type can be compared and analyzed on the x-axis.

In chronological order of sickness and healing, the same cell has different states on the z-axis.

07 MODULAR BODY Molecular

Tissue

Organ

Expectation The inhalation position and the onset position of the same drug are different, I’m looking to visualize pharmacological information at different locations in a modular table.

08 MODULAR CHART Acetazolamide｜

Furosemide｜

Thiazide Diuretics｜

Oral Medication

Oral | Intravenous | Intramuscular

Intravenous Injection

Proximal Tubule

Ascending Branch of Henle

Distal Convoluted Tubule

Carbonic Anhydrase

Na-K-2Cl

Na-Cl

Amilori｜ Intramuscular Injection

Mannitol｜ Oral Medication

Injection

Collecting Duct

Location

Na Channel

Na+ HCO - H2O K+ 3

Na+ Cl-

Ca Mg

Na+ K+ Cl-

Na+

Ca

K+

Na+

K+

Mechanism Carbonic Anhydrase Inhibitor

Weak Diuretic

Treatment

It is appropriate to be used as a sample display at the initial stage of the product.

Conclusion

Target

Map

Diuretics are currently relatively mature drugs with clear pharmacological mechanisms, which are knowledge that all pharmacology students need to learn and memorize.

Aldosterone Receptor

Module

Chart

Motivation

Na-K-2Cl Pump Inhibitor

High-efficiency Diuretic with Fast Onset of Action

Na-Cl Pump Inhibitor

Medium-effect Diuretic Mild and Long-lasting

Na Channel Inhibitor

Aldosterone Receptor Inhibitor

Weak Diuretic

Weak Diuretic

We tried to use diuretics as an example to show the char t of modular pharmacological mecha n i s m s . We m o d e l e d procedurally through Houdini, which can mass-produce different organs and tissues.

We h o p e to v isualize them through lightness and hue to enhance users’ understanding and memory of information.

09 VISUALIZATION

10 WIREFRAME AND FLOW Welcome

Sign up / Log in

Homepage

Interactive 1 Weaknesses

The system will generate a screenshot of the pharmacology at key process nodes, and automaticly generate brief information on pharmacological image and text to facilitate quick comparisons between similar drugs.

Logo

Interface

2

Systematize With organs and diseases as catalogs, we designed a set of indexes and a dynamic system, to show a dynamic process at different dimensions.

Pathology Index

Pharmacology Library

Text Comparison

Pharmacology Index

Edit Pharmacology

Presentation Pharmacology

Image Comparison

3

Visualize We build a gridded three-dimensional char t of the human body to help students quickly locate the human body to the microscopic level such as cell and molecular.

11 USER INTERFACE

12 PROGRAMMING

13 EXHIBITION 1

Procedural Modeling

2

Programming

Houdini Blueprint

Unity Script

The pharmacological components are complex and repetitive, and the blueprint nodes of Houdini can procedural model organs, tissues, cells and molecules.

In unity, pharmacological models can be viewed from multiple perspectives, animations can be added and related components can be edited.

2020.12-2021.06 Central Academy of Fine Arts Art Museum

Link

http://vis.pku.edu.cn/grand_canal_migration/#/

INTERACTIVE DESIGN RESEARCH ON SPATIOTEMPORAL VISUALIZATION 2021.11-2022.04

The CBDB biographical database contains 370,000 pieces of data on Chinese historical figures, and can query relevant information such as birthplaces, places of study, official addresses, parents, relatives, and social relations of historical figures. However, this database lacks visualization, making it difficult for scholars to study it.

This project hopes to visualize the location information of the characters in the CBDB, and display the overall situation of the geographical trajectory of ancient Chinese celebrities through interactive timelines and maps. It aims to help historical and humanistic researchers to study the geographical distribution and historical evolution of ancient figures.

Team Project

Yuchu Luo, Chen Li, Yuan Ma, Mingxuan Li, Xinyue Wang, Xiaoru Yuan

Role

Interaction Design, Visual Design

Supervisor Xiaoru Yuan

HTML

CSS

D3.js

SQLite Studio

01 DATABASE

02 DATA EXAMPLE

03 DATA ANALYSIS The distribution of people with more than 10 transfer records in each dynastya.

1

1894

1000 Number of characters

220

100

10

The China Biographical Database is a freely accessible relational database with biographical information about approximately 521,442 individuals as of August 2022.2

[2] China Biographical Database Project (CBDB)

Spatial Distribution It shows the spatial distribution of a cross dynastic subset of 190,000 people in CBDB by basic affiliations.

7th -9th Time Span Primarily from the 7th through 9th centuries.

With both online and offline versions, the data is meant to be useful for statistical, social network, and spatial analysis as well as serving as a kind of biographical reference.

1

Name

2500

2

Dynasty

2000

3

Lifetime

4

Trajectory

4.2 Y_coord 4.3 Name 4.4 Year

5

4

4

2 1

1

Sui Tang Wudai Shiguo Song Yuan Ming Qing

Dynasty

Frequency of “visit to location” in 152 person trajectories.

2277

1500 1000 500

4.1 X_coord

4

2

Visit to locations

Individual

190,000

7

6 2

1

521,442

13

9

475 172

0

1

Motivation

45 33

5

28

17

11

10

The database lacks some information, and effective data can be obtained through data cleaning.

2

11

4

2

3

15

Conclusion

1

20

Frequency

After data cleaning, we can obtain thousands of pieces of character migration information.

04 MIGRATION EXAMPLE

05 TIME VISUALIZATION 1

06 SPACE SCALE 1/ Province

Time-Brightness Last route

First route

2

Frequency-Thickness nth route

| Strock n*3pt

Third route

| Strock 9pt

2/ City

Second route | Strock 6pt First route

3

Time The mobility and travel of ancient people were influenced by age and time.

Space

Map

Ancient people had a wide range of mobility, involving different locations.

The movement of ancient people is interwoven and mutually influenced in terms of time and space.

| Strock 3pt

Frequency-Size nth visit

| d-n*10pt

First visit

| d-10pt

Second visit

| d-20pt

Third visit

| d-30pt

Expectation

The chart aims to help user gain a clearer understanding of the movement patterns and activity characteristics of ancient people.

3/ Individual

Motivation

Trajectory visualization will play an important role in academic research, educational presentations, and other fields.

Conclusion

Tr a j e c t o r y v i s u a l i z a t i o n helps researchers to better understand the movement patterns and activity characteristics of ancient people.

07 POPULATION VISUALIZATION 1

1/ Family members

Color mapping-population

Different color saturation

2

08 RELATIONSHIPS VISUALIZATION

Density map

Density map - color 1

Migration track D

E L

J

A

L

C

B K

F H

A

Density map - color 4

A I

J

H F

G All migration at the provincial level

Using a graph to display family relationships or organizational hierarchies, the tree diagram arranges individuals in a hierarchical structure, starting from the top level and showing the relationships between individuals.

K

J

I

All migration at the nation level

Density map - color 3

K

F

G

3

Density map - color 2

Visualization

H G Partial migration at provincial level

2/ Click to expand

Interaction

3/ Slide to expand

Conclusion

I

Users can collapse the expanded n o d e s by c l i c k i n g o n t h e m, returning to a higher-level view.

The collapse operation helps simplify complex charts and focus on higher-level relationships.

Density map

Province center point

Migration between points

Add map

Add density

Density Map

Visualizing interpersonal relationships can help us gain a clearer understanding of complex networks of interpersonal connections, such as social networks, family relationships, and historical events involving individuals.

08 USER INTERFACE

09 SCRIPT HTML

10 INTERACTION CSS

D3.js

1/ Choose people and time

SQLite Studio

Selecting people and time as the first step, generating relevant paths automatically.

Procedural assets

2

View dynamic information visualization

2/ Click to expand

The second step is to click and expand the paths of ancient people’s movements.

1 Interactive steps

migration.js

Java script

character.js

dataLoader.js

Procedural assets

Us in g p r o c e dural di git al as sets to batch produc e character animations.

Java script

Using JavaScript to build a website and visualize the movement trajectories of ancient people.

2022.08 Exhibited in Zhejiang Art Museum

Click

11 ALGORITHM

12 USER EXPERIENCE

Algorithm The algorithm displays the hierarchical relationships among academic schools based on their inheritance relationships.

Backgound

Using Song Dynasty paintings as a background to demonstrate the inheritance relationship of academic schools in accordance with the context.

1

Index

2

Single migration

3

Inheritance

Arrange the assets according to the order of inheritance Inheritance in order

Random position

Overview

Detail

Guidance

Guidance

Graph

Page segmentation

Conclusion

Design user interface and page relationships based on scenarios such as overview, details, and diagrams.

Inheritance relationship

Relationship between characters

Youtube Link

https://youtu.be/Mw2_bmulPj8

SERVICE DESIGN RESEARCH: USING SOUND INTERACTION TO REDUCE SCREEN DEPENDENCY AMONG USERS 2020.03-2020.06 Sound Yoga combines the elements of sound interaction and yoga, aiming to achieve light physical movement through auditory guidance, reduce screen usage before bedtime, and alleviate mental and physical stress.

Through Sound Yoga, users can engage in gentle physical movement, meditation, and relaxation without relying on screens. This provides a healthier and calmer option for bedtime preparation by integrating sound interaction with mental and physical well-being, offering a positive impact for individuals.

Individual Project Supervisors

Shuxin Cheng, Congliang Li, Lian Dai

01 BACKGROUND

02 PROBLEM DISCOVERY Environment

Causes of insomnia

3

1

shift work Screen addiction

blue light screen Social media

3,100,100,100

jet lag drug side effects

social media pressure

Psychology

62%

stream media

sleeping pills

alcohol

7/15

caffeine

Physiology sleep disorder

don’t relax

2

Adult

Population

high pressure

Disease

pregnant About 62% of adults worldwide do not get enough sleep.

About 3,100,000,000 people in the world lack sleep.

Seven of the 15 leading causes of death are related to insomnia.

Pressure

Individual

Conclusion There are many reasons for insufficient sleep, from the perspective of information input, screen addiction is a significant influencing factor.

03 PERSONA

04 USER JOURNEY MAP 7:00 PM

Yudi Wang 27 years old

Designer at Tencent

8:00 PM

Stages

Arrive home

Actions

Transportation

9:00 PM

10:00 PM

11:00 PM

12:00 AM

1:00 AM

Before sleep

2:00 AM

3:00 AM

4:00 AM

Insomnia

Dinner

Work

Exercise

Sleep

Phone

Social media

Stream media

Insomnia

Moderate exercise

Attempt to sleep

Surf the internet

Check social media

Browse streaming media

Gradually fall asleep

Fall asleep as soon as possible

Reduce browsing

Reduce socializing

Reduce browsing Go to bed early

Activities Feelings Happy

Introduction Yudi Wang is a 27-year- old individual working at Tencent.

Due to the high-intensity nature of her job, she often experiences insomnia.

Motivation

Confusion

She hopes to reduce her insomnia by decreasing her screen usage.

Unhappy

Sad

Experience

Complex commuting

Convenient fast food

Computer office work

Expectation

Comfortable commuting

Delicious food

Reduce workload Increase physical activity

She can’t fall asleep and ends up looking at screens.

Expectation She hopes to reduce her screen usage by engaging other senses.

Opportunities

Weaknesses

Weaknesses

Weaknesses

Weaknesses

Commute comfort

High-intensity work and ordinary life.

Frequent screen usage, browsing various media.

Endless recommendations from streaming media can easily lead to screen addiction.

05 SOUND INTERACTION

06 INTERACTIVE SYSTEM 1

Screen addiction

hearing

Lack sleep

decompress

Step 1

Hardware

Preset action

3d sound feedback

Speaker

3d sound guidance

3d sound guidance

motion capture

motion capture Infra-red projector

2

Sound A

Step 2

Sound A

Sound B

Sound B Infrared camera

1

Sound

2 Sound

Sound interaction

Follow sound signal

Sound direction

Exercise

Moderate exercise 3

Sound interactions reduce screen usage and alleviate both physical and mental stress.

Moderate exercise can relax both the body and mind.

Yoga

Step 3

3d sound feedback

1

audiovisual

left / right

2

volume

up / down

3

reverb

far / close

Conclusion The hardware system uses speakers to provide sound feedback and an infrared projector to capture motion for sound interaction.

07 PRODUCT DESIGN

08 HARDWARE SYSTEM

Sound system

1

Motivation

Depth sensor

Rear Sound

IR Camera

2

Side Sound

Ergonomic

Hardware Using a hardware system to capture motion and provide sound feedback.

Sound Yoga is an intelligent hardware and sof t ware plat form based on three - dimensional sound- guided movements.

IR Projector Center Sound

2

The goal of Sound Yoga is to use auditory guidance for light exercise, thereby reducing pre-sleep screen usage and alleviating pre-sleep mental and physical stress.

1

Clip-on

Motion capture

3

Sound feedback

Infrared camera

Sound Input

Speaker

2

Infra-red projector

Speaker

Lower jaw A

Sub Sound

Insomnia

Front Sound 3

7.1 surround sound

Sound

1

Gentle sound

Sound A

Sound A

B Yoga motion

Sound B

Sleep

Sound interaction To alleviate insomnia, gentle sounds are used to assist in falling asleep quickly.

Users are guided through movement using stereophonic sound A, and upon reaching the correct position, it triggers the appropriate sound B.

3

Conclusion Sound B

Motion direction is guided and feedback is provided t h r o u g h s o un d i ma g i n g, volume, and reverberation.

09 EXPERIMENT

01

10 PROGRAMMING

02

1

03

C# Script

2

Unity

3

Application

The application, based on the integration of Unity and Oculus, allows the import of Unity programs into Oculus to achieve three-dimensional interaction.

Simulation Sound

Experiment in Bed

Action Record

Way_Point Left_Hand_Guide

Q: How to simulate sound?

Q: Why experiment while in bed?

Right_Hand_Guide

Q: How to record trajectories?

Left hand

A: Simulating stereo sound using two mobile phones.

A: Creating a pre-sleep yoga routine tailored for high-stress single women.

A: Using time-lapse photography to capture light trails.

Q: How to provide feedback?

Q: How is the experience?

Q: Can it alleviate stress?

A: Using harmonizing tracks for feedback.

A: Resting the eyes to prepare for sleep.

A: Imagining brings a special sensation, stabilizing emotions.

Conclusion

It can relax the body and mind, but the sound clarity is lower.

Conclusion

Guided by feedback sounds, pleasing the senses.

Conclusion

Relieving the anxiety and discomfort of not exercising throughout the day.

Sound A

Right hand

Sound B

Using the Oculus left and right hand controllers, you can record the movement trajectories of the left and right hands.

Set sound position

Conclusion

Creating a 3D spatial audio trajectory using Unity’s waypoints. Setting relevant sound trajectories based on the reach of the left and right hands.

Implementing three-dimensional sound interaction through Unity and capturing motion trajectories using Oculus for providing feedback.

11 USER INTERACTION

12 USER EXPERIENCE

Sound interaction Users can edit soundtracks to achieve three-dimensional sound interaction.

1

Sound

Choose music Users can freely choose sounds and instruments to distribute across different audio tracks.

Select music

Select motion track

2

Excersice

Choose action Users can select the specific body parts they want to exercise.

Select action

Follow the movement

The audio tracks can change the s o un d d ire c t i o n ba s e d o n t h e relevant exercise route, allowing for targeted workout of different body parts.

Youtube Link

https://youtu.be/-U2JfdXnXqc https://youtu.be/BKr3yXH_PYU

THE APPLICATION OF SEMIOTICS IN INTERACTION DESIGN 2020.09-2020.12

This project, through research on flags, categorizes the components of flags into dimensions such as color, framework, elements, convergence, and fusion. We have designed this system into a game, creating a continuously extendable and superimposable virtual interactive space.

Players, through choices within the framework system designed by the author, interpret and create their own flags. This work is like a maze and also like an interactive game, encouraging viewers to reflect on flags in a broad, abstract sense.

Team Project

Chen Li, Qiaobeier Wang, Zhijin Li, Yuqing Chang

Role

Flag Mapping System Design, Interaction Design, Graphic Design,

Supervisors

Song Xiewei, Zhang Xinrong, Fei Jun, Chen Weiping, He Jun, Zhang Wenchao, Liu Zhizhi, Cheng Shuxin, Wang Naiyi, Liao Liujun

01 RESEARCH 1

Content Communication

02 ANALYSIS 2

Location Maritime

3

03 SEMANTICS

Meaning

Flag Compass

Virtual

Flowing Red Flag

Position

Target

Atmosphere

Universe

Moon

United Nations Flag

Communication

Personal Honor

Identity

Collective

Warning

Attribution

City Cemetery Faith

National Flag

Mirror Flag

Sea

Honor

Celebrate Forest

Entity

Sound Flag Conclusion Based on a large amount of research and collection, w e h ave ex p l o r e d t h e histor y, t ype, location, material, and content of the flag.

04 MATERIAL

05 FRAME Virtual

Foam Paper

Research

Sound

Text

Plastic

Extract Elements 1

Color

2

Pattern

3

Frame

Carbon

Cloth

Soft Carbon

We deconstruct flags through imagery, books, and spatial methods, aiming to derive the individuality and commonality of flag semantics in different contexts.

Hard Cotton

Stone

Plastic Mirror

Paper

Conclusion

Feather Entity

Based on the available information, I star ted from the materials, conducted experiments, and attempted to explore the boundaries of the flag.

B a s e d o n ex i s t i n g r e s ea r c h, extract the eight colors, patterns, and borders of the national flag.

06 SPACE DESIGN Virtual Space Design We h ave s u m m a rized the relationship between the individual and the collective into four stages: leading, c onvergenc e, independence, and integration. Based on these four words, we designed an interactive space.

We hope this is an interactive game that can be continuously expanded. The iterations of players can introduce new elements and graphi c sys te m s t o t h e island. Through their own choices, players c an generate an d extend their unique interpretations of the typical symbol of the flag.

07 GAME DESIGN Game Design

The player will be born here, by freely crossing the banner, complete the color selection of the character, and then trigger to go to the second space.

1

This game is not a single path, but a closed-loop system.

After passing through all the spaces, the player will return to the original island and become the big flag on the island, influencing the small flag that will be born later.

Initial Island

The player enters the city island.

A large flag representing the frame and elements is flying above the city.

2

When the player enters the negative island, the s p a c e r eve r s e s . T h e p layer’s flag el ement falls off, then the space is upright, and the player heads to the fusion island.

City Island

The player enters the forest island. Mirrors in the forest constantly reflect the player’s flag.

Players can see themselves in the mirror from different angles.

4

5

Forest Island Reversal Island

The flags and positions of different people will blend together, forming a tapestry of different interwoven sounds.

6

Sound Island

Flag Simulation

By freely crossing the banner, complete the character’s frame and element selection, and after completing the passive convergence, trigger to go to the third space.

Each player has a different understanding of the flag. The flags created by students from different cultural backgrounds are closely related to their living environment.

08 VIDEO

09 FLAG BOOK

Game Design

Unity

This game is like a light, dreamlike fragment, and also like a book with profound meanings. Through the viewer’s own choice of the flag, let us reflect on the general meaning of the flag.

Size: 140*210mm Material: Cloth

The program created with Unity allows players to explore the semantics of the flag in a first-person perspective. Players can autonomously interpret their own flags by making choices within the framework system designed by the author.

Initial Island

City Island

Forest Island

Reverse Island

Sound Island

Space Map Flag Collage

Liftable Flag

Youtube Link

https://youtu.be/Z2hnQRMsDlg

INTERIOR INTERACTIVE SPACE DESIGN 2019.03-2019.12 Due to constraints in energy and space, future transportation should be shared. However, existing standardized interiors cannot meet the diverse needs of different individuals during travel.

Achieving personalization in internal experiences while sharing a common power shell should be the trend for future transportation.

Human, community, and environment are three fundamental dimensions that should be prioritized. Designers can build rules for spatial generation and combination within limited space based on these three dimensions. They can use a minimal unit to move through the traffic flow, connecting different scales of travel modes.

Individual Project Supervisors

Xuanzheng Wang, Qiannan Wang, Dongsheng Feng

University-Enterprise Cooperation Program

Hyundai Motor Company Research & Development Center (China) Ltd.

01 RESEARCH

02 STATE

Specimen

Route

Ride Time/ Average Space

Emotion

Posture/Action Needs

CAFAWangjingxi Beijing

STAND

SCENERY

RELY

MAC

SIT LIE

PHONE

STAND

SCENERY

RELY

MAC

LIE

PHONE SLEEP

BeijingxiHongqiao STAND

SCENERY

RELY

MAC

SIT LIE

PHONE SLEEP

HongqiaoXujiahui STAND

SCENERY

RELY

MAC

SIT LIE

PHONE SLEEP

XujiahuiStudio

Designer A Who Frequently travels between Beijing and Shanghai

Shanghai

RIDE TIME/60MIN RIDE TIME/60MIN EMOTION

STAND

SCENERY

RELY

MAC

SIT LIE

Scale People

Car

Rail

The interior should be more adaptable to the different states and postures of the passengers.

SLEEP

WangjingxiBeijingxi

SIT

State

PHONE SLEEP

The interior should have the ability to regulate privacy and sharing. You can switch between private and shared open spaces.

Open

The inconvenience caused by the transfer to the passengers should be reduced, and the interior can be a common tool for connecting traffic during the transfer of different public transport.

Close

Transfer

The mobile interior should be small and easy to clean.

Table

Trend

The interior should be part of the vehicle/transit space/ cityscape.

The table displays the approximate travel time, average area, emotions, primary posture, and primary behavior of passenger A, who frequently commutes between Beijing and Shanghai, within different shared modes of transportation.

The trend for future transportation is to achieve personalization of internal experience while sharing power shells. The human body, community, and environment are three fundamental dimensions that should be given priority.

Conclusion Scale and transfer are keywords in designing the generation logic and combination rules of interior spaces in transportation vehicles.

2.3 inward-open

2.4 outward-open

3.1 Internal Area

3.2 Window Area

3.3 Passageway

3.4 Entrance and Exit

g in ar

dy :L oa dbe

ar in g

2.2 inward-simiopen

ea Ar dy :C Bo

le up Co

e:

M

ily

od

e:

m Fa rs od

it

Sp

ea Ar

ac

w

e: I

do

nt

in

er n

W e:

al

ac

Sp

Ar ea

M

s

nd

e:

St

ie Fr

ra n

e:

ge

od

Ex

e:

an

d

ac nt ra ce :E Sp a

ay

ew

g sa

nc

e

s Pa

Internal Area Window Area Passageway Entrance and Exit

Sp

Third Dimension Environment

2.1 inward-simiclosed

od

M

3

1.4 Generate mesh

M

Second Dimension Compound Couple Family Friends Strangers

1.3 Generate framework

be etiv si

ea Ar

2

1.2 Focus region

en

y ac riv :P dy

Load-bearing Area Sensitive-bearing Area Privacy Area Visual Field

1.1 Determine the region

Bo

First Dimension Body

:S dy

1

Bo

Dimensions

Ar ea

04 PROCEDURAL GENERATION

Bo

03 DIMENSION

05 NODE-BASED PROGRAMMING

06 PARAMETRIC GENERATION

Partition

Determine the scope of each person’s activities

Generate the basic framework

Optimize the topological surface

The significance of parametric software lies not only in shaping, but also in serving as a language that connects content and form. Under the packaged form language, the human effort previously spent on repetitive discussions about form can be liberated, allowing for a greater focus on human needs and societal rules in themselves.

Conclusion Parametric sof tware promotes design innovation, allowing designers to explore and realize forms and structures that were previously difficult to imagine.

Publication Link

https://arxiv.org/abs/2303.14476

INTERACTING WITH STATIC VISUALIZATIONS 2022.03-2022.05 Our approach brings static SVG visualizations to life. By clicking our Chrome extension, the SVG chart can be automatically parsed and analyzed using our method.

When viewing charts on a webpage, our approach can help address the issue of limited flexibility in the original chart. We aim to identify data across different dimensions and reassign semantics in different directions.

Author：Can Liu, Yu Zhang, Cong Wu, Chen Li, Xiaoru Yuan Role: Visual Design, Interaction Design Supervisor：Xiaoru Yuan

1 BACKGROUND

2 INTERACTION 1

Why bring live to static visualizations?

Interactivity allows users to explore data in greater detail and from different angles. They can zoom in, filter, and interact with elements to gain deeper insights.

2

How to give live to static visualizations?

Scale

Break

Change order

Gravity

Constraint

Reassign

Extract

The spatial constraints are encoded as forces to facilitate a smooth transition between interaction states.

D-Interaction enables the user to carry out various interaction tasks, including selection, filtering, navigation, arrangement, and aggregation, by directly dragging the visual marks in these visualizations.

Conclusion This method simplifies the process of aligning and comparing visual elements, making it easier for users to c onduc t c omparative analyses.

3 FORMULA

4 USER EXPERIENCE 1

Gravity Gravity Constraint presents the certain position that produces gravity to control point P in a horizontal or vertical direction.

2

Collision

1 Recognize

Gravity

Constraint

Collision

Fixed

Control Points Constraint

Scale

Break

Gravity

Change order

Reassign

Extract

Gravity

Constraint

Reassign

Collision constraint expresses the distance relationship of the control points.

3

Behavior

Diverse interaction Different user dragging implies different interaction operations. Dragging the visual mark in the original collision order means the intent for changing the stack relation.

Fixed Fixed Constraint describes the fixed distance of control points inside a visual mark.

Three type of visual mark can be treated as one or more points and their interpolation line or their e n c l o s e d a rea . T h es e p o i n t s a r e d ef i n e d a s control point, which is the basic movement unit for visual mark.

2

Constraint Support constraint presents that the coordinate of a control point is definitely larger or smaller than a certain value in one direction.

4

Formula

Change direction

Change order

Move to new canvas

Rescale

Change order

Group by color/size

Set gravity

Set support

5 STACK CHART

6 BUBBLE CHART Original Chart

Rescale

Navigate

Rearrange

Select

Change Order

Arrange by size

Converge

Arrange by color

Set Gravity

1

Manipulate Axis

The foundation of the manipulation of the axis corresponds the constraints to the axis. The gravity and support force corresponds to a certain position on the axis.

Set Constraint

2

Manipulate Constraints

Setting constraints on visual marks can configure many diverse layouts of visualization.

D-Interaction allows selecting the constraints for different visual marks.

Conclusion Our goal is to add direct i n te r a c t i o n s to ex i s t i n g visualizations. Interaction techniques can be classified according to how visual marks are changed.

03 Drama Performance

HOBBIES AND INTERESTS

2017-2023

01 Synthetic Music

During my free time, I take pleasure in delving into an array of hobbies. Crafting electronic music is a true passion of mine, where I revel in the process of blending different sounds and beats.

I find great satisfaction in experimenting with a wide range of composite materials to bring forth one-of-a-kind illustrations, each with its own story to tell.

Additionally, the thrill of being part of theatrical performances captivates me, offering a unique opportunity to step into different roles and worlds, and bring stories to life on stage.

02 Composite Materials