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
