Educational experience： 10. 2019 - present: University of the Arts Bremen, Integrated Design (Systems and Interaction Studio), Bremen Germany 09. 2013 - 06. 2017: Hebei Agricultural University, Industrial Design, Baoding China
Project experience： 10. 2019 - 02. 2020: digital strategy design (AR App design development) for Museum of Art and Design Hamburg 03. 2019 - July 2019: Bremen Airport Regional Planning Project (Architectural Design; Service Design; App Design)
Yanhe Liu
10. 2018 - February 2018: programming to help crane drivers sight drive safely (UI Design for HoloLens)
Personal Info： Date of birth: 11.04.1994 Telephone ：+4917630147316 Adress：Vorstr.91 Bremen,28359 Germany personal site：yanheliu.hfk-bremen.de E-mail: liuyanhe321@gmail.com Instagram: yohannliu
Skills Language：German（Test Daf 5444） English（IELTS 6） Graphic Design：Photoshop Illustrator Indesign 3D Design：Rhino Cinema4D Keyshot Grasshopper Fuse Marvelous Designer Programming：Processing Arduino Unity 3D Flutter TouchDesigner UX/UI: Sketchinng Axure Flinto Video： Afer Effece
SCUBE
Designing For Arportcity in Bremen
SCUBE - Designing For Airportcity
My work in the project was (research and analysis, concept development, wireframes, UI design, app programming, ar presentation programming, visual design, app presentation animation).
with
INTRODUCTION
The project is a collaboration with Hochschule Bremen to plan the urban area around Bremen Airport. The name of our project is Scube (shared cubes) and we ended up using the modular building as a basis and giving each module a different function (fotography studio, workshop, etc.). The modular building with different functions will grow and expand outwards according to the user's needs, a concept inspired by machine learning, which we applied to the architecture. Used in conjunction with the building is an app that allows users to rent rooms, rent equipment, and participate in various activities within the building (exhibitions, workshops, etc.), and the app collects information about the use of the rooms to use as a basis for the development of the different functions of the building.
Problems in
There are only a few big companies here.
Lack of shopping〠cafe area
Lack of public transportation
There are fences everywhere. It's hard to find the entrance to the building.
The plants are messy.
24 hours access to the building Many of the buildings are unused , is it possible to rent out these unused buildings ?
Architecture expansion based on demand of users Since user demand for different buildings is constantly changing, it is difficult to predict how many buildings will be built during the design period, so is it possible to make a prediction of user demand based on their current use of the building and then expand the building?
Modular architecture Since architecture expands according to user needs, then modular standardization can meet the expanding and changing needs of a building.
Connecting users to architecture through apps Users can rent rooms through the app and the data obtained from the app can help the platform be informed if we need to expand more, what kind of building modules we still need, etc.
The Development Of The Buildings
Phase 1 - Expansion in airport The project started in the heart of the captain's core, which is the airport itself. This area was chosen because of its high population density, with people from different cultures and social classes coming here every day, making it a hotbed for innovation and entrepreneurship. There is also a lot of unused and underutilized space in the airport building itself. These areas can be rented by entrepreneurs and the building can be modularized as needed.
Phase 2 - Expansion around existing buildings The space at the airport is limited, and when all the airport areas are utilized, the second phase of the project begins - expansion into the community. It can cater to user groups that could not be satisfied in the first phase. For example, people who need more space to display their work. Preference is given to building on unused rooftops or parking lots.
Phase 3 - Continued Expansion When the area around the airport is fully utilized, it can start from the center of the airport city and spread around as much as possible. Production centers are continually being established to allow for more connection and communication between the various industries.
9:40
App Design
9:40
RECOMMENDATION
FOTOGRAPHY
DESIGNWORKSHOPS OFFICE
AN OFFICE A straße 123
INTERVI
50 /Hours 400 /Day
An Office
A straße 123 88 Reviews
Johann apr.2019
A FOTOGRAPHY STUDIO B straße 123
50 /Hours 400 /Day
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudview exercitation all the comments ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse office 1-6 people cillum dolore eu fugiat nulla pariatur. Excepteur sint 2 occaecat cupidatat non proident, sunt in culpa 20qui㎡officia deserunt60 mollit /hours anim id est laborum
Renting Work Space Anytime Scube will help you select the studio you want to rent through a sophisticated selection process. The user can choose when to rent a studio, day or night. Scube also offers the possibility of renting equipment, all of which are designed to give you the best possible working environment.
m
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
9:40
Equipment Desks LOOKING FOR ROOMS
Sofa
Computer
Printer
Recommandation
view all the equipment
Check Availibility
Art of Chairs
Entrance Free
Astr.91 Room A08
Organizing And Participating In Events Not only will users find good workspaces in the Scube, but they will also be able to hold a variety of events in the Scube: exhibitions, workshops, forums, etc. User events can be posted on the Scube App, and other users can sign up for events if they are interested. Events can be posted on the Scube App and other users can sign up for events if they are interested. With more and more users working in the Scube, organizing events, attending events, etc., the Scube will become an even more diverse work and cultural community.
Exhibitions
view all
Design Exhibition
Art Exhibition
Astr.90 Free
Astr.90 Free
Workshops
view all
Colors Workshop
Cloth Work
Astr.90 Free
Astr.90 Free
Concert
view all
Electronic Astr.90 Free LOOKING FOR EVENTS
Design Exhibition Astr.90 Free
Flow Chart types of rooms how big is it number of people equipment service looking for rooms
list of the rooms
my rooms my events my collection
infomationn of rooms
transportation comments
see more comments
add to collection
sucessfully
share
new window
switch the mode of canlender
if it's available to order
calendar
Available time for booking
start from
comments
end from
add events events already ended romms
me
Setting
looking for events
list of events
activities
filter of events
map
recommendation filter
time more days?
filter
type of the rooms time more
number of people equipment price
search
details of the booking next
renting equipment book and pay
Wireframe
Looking For Rooms
Booking Rooms
Wireframe
Choose a time
Rent Equipment
Wireframe
Events
参加
Me
Wireframe
Search By Map
May 2019 DESIGNER
Time S
May
EVENTS MANAGER
FOTOGRAPHY
OHTERS
Select Dates
M
T
W
T
F
S
9:40
S
Day.Month.Year Time Day.Month.Year Time
From to
1
2
3
11
15
16
17
18
Select Dates 22 23
24
25
F
S
14
20
21
S
5
6
7
8
9
10
11
13
14
15
16
17
18
May
19
20
21
22
23
24
25
26
27
28
29
30
31
June
400 /Day
24:00
Astr.91 Room A08
Save
A FOTOGRAPHY STUDIO B straße 123
APPLY
4
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 YOUR 29TIME30
31
From To From To
To (10.May.2019)
view all
Design Exhibition
Art Exhibition
Astr.90 Free
Astr.90 Free
12:00
06.05.2019 12:00 10.05.2019 13:00
Edit
29.05.2019 12:00 30.05.2019 12:00
Edit
24:00
M
T
W
T
F
1
2
3
S
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Overall 2Day 12:00and 1Hours
Add
0:00
Exhibitions
S
3
9
From (6.May.2019)
50 /Hours 400 /Day
9:40
May 2019 2
June
Entrance Free
31
8
13:00
Art of Chairs
T
30
1
12:00 24:00
W
29
7
0:00
Recommandation
50 /Hours
A straße 123
0:00
T
28
6
5
0:00
M
27
9:40 AN OFFICE
4
10
13
INTERVI
S
9
19
DESIGNWORKSHOPS OFFICE
F
3
8
12 FOTOGRAPHY
T
2
7
4
RECOMMENDATION
W
1 6
12
To (10.May.2019)
T
5
26
From (6.May.2019)
M
24:00
0:00
12:00
24:00
13:00
0:00
24:00
Save
YOUR TIME
APPLY SAVE
From To
06.05.2019 12:00 10.05.2019 13:00
Edit
Delete
From To
29.05.2019 12:00 30.05.2019 12:00
Edit
Delete
Overall 2Day and 1Hours
Workshops
9:40
SEARCH
LOOKING FOR ROOMS
Purpose
CARPENTRY
FOOD MAKING
DESIGNER
EVENTS MANAGER
TAILORING
view all
Colors Workshop
Cloth Work
Astr.90 Free
Astr.90 Free
OHTERS
Time
view all
Electronic Astr.90 Free LOOKING FOR
9:40
Design Exhibition Astr.90 Free
EVENTS
06.05.2019 12:00
From
SCUBE
10.05.2019 13:00
To
Overall 1Day and 1Hours Add
Edit
7-15
16-30
31-50
Desks
Sofa
Computer
Machine
Lamp
Camera
more than 50
An Office
Equipment Table Printer
9:40
UI Design
9:40
Capacity 1-6
APPLY Next
ARCHITECTURE
Concert FOTOGRAPHY
Add
A straße 123
Johann
88 Reviews
Johann apr.2019
Prise (per hours) 0
110
200
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudview exercitation all the comments ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse office 1-6 eu people cillum dolore fugiat nulla pariatur. Excepteur sint 2 occaecat cupidatat non proident, sunt in culpa 20qui㎡officia deserunt60 mollit /hours anim id est laborum
My Rooms
m
Search
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Sofa
Computer
Fotograph Studio
Astr.90 Free
Astr.90 Free
My Events
Equipment Desks
view all
An Office
Printer
view all
Colors Workshop
Cloth Work
Astr.90 Free
Astr.90 Free AN OFFICE
view all the equipment
Check Availibility
view all
My Collection
88 Reviews
Adress : A straße 123
Colors Workshop
Cloth Work
Astr.90 Free
Astr.90 Free MY PROFILE
Prise : 50 /Hours , 400 /Day
Programming by
For programming, I chose Flutter, which is an open source mobile application development kit developed by Google. It is mainly based on the dart language. The advantage is that after development, the application can run on both iOS and Android systems at the same time, so I don't have to do two sets of software, which saves time. However, this is my first contact with app development, so I was not able to write the program completely.
Scanning the QR code to see the video about Scube App
Exhibition in Airport Bremen
Showing the architecture with AR
Scanning the QR code to see the conceptual video
概念图，一个人走入了另一个次元
TRIGGER MUSEUM - A Virtual Museum Trigger Musume is an interactive and fully digital museum. Virtual Reality and Mixed Reality technologies are used in the museum to allow visitors to view the exhibits in a virtual dimension by simply stepping through an invisible "door". The unique feature of this museum is that all of the exhibits are fully virtual, so the exhibits are not restricted by space and can be displayed in a more interactive experience.
This project is a team project, and its end and exhibit is due to be completed in February 2020, which is when we landed the project before the epidemic began. Due to this year's epidemic, many universities and museums have implemented "cloud exhibitions" and "cloud museums", but we still haven't seen a museum like ours that realizes quadratic dimension through AR, so this form of museum is still forward-looking! and has the potential to develop a project.
with
INTRODUCTION
The goal of the museum is to facilitate communication between museums, between people and museums, and between people: the virtual environment makes communication between museums easier, museums can exchange digital exhibits faster and more economically; people have more possibilities to interact with the museum; and the new museum experience allows people to make more friends, they can be in any museum in the world at the same time.
New Concept Abou Museum
Completely virtual spaces as well as virtual exhibits that transcend spatial constraints and allow for more interactive possibilities. Through doors that allow visitors to enter the virtual world from the real world, visitors are immersed in the museum environment. No restrictions on location
With an AR device, or a HoloLens device would provide a better experience
New Concepts About Interaction The exhibits have more ways to be placed, such as flying in the sky.
A message from a tourist in Berlin : xxxxxxx
visitor in a museum can send a message to another museum. Or send a realtime message as
Emoji Wars: Visitors can hold up 3D emoji for a "pillow fight"!
Items displayed in different areas can be swapped through a "wormhole".
BERLIN
BEIJING
Sound Visualization Sculpture
Triggerable components that allow visitors to display images, sounds, 3D models, etc.
Rendering
Structure of the exhibition hall The museum is divided into six areas, with the functions and size as shown in the picture. In order to complete a more immersive experience for the user, we needed an empty room that was neither too big nor too small, so the exhibition hall was set at 150 ㎡ .
25m² Sound Room
65m² Interactive Room
15m² BB Code Room
15m² Text&Image
15m² Introduction
Introduction to the exhibition Introduction Room In the introductory room, visitors can see the introduction to the museum. Here visitors can learn how to interact with different symbols in this museum.
Text&Image Room In the Image & Text space, we focus on the history and development of the Internet and culture. By triggering different symbols, visitors can see text, videos and images. The visitors can immerse themselves in the different exhibits without the restriction of space.
Sound Room In the sound space, a sound visualization of the sculpture is set up, as shown in the figure where small squares will collide with a long bar-like device to generate sound.
BB Code Room In the BB code space, we show the contents of a BB machine code in the days of the BB machine. At that time, BB machine could send numeric codes to represent different content. The space exports the various BB machine codes distributed in this space, and when the two codes collide, it shows what the numbers represent, evoking memories for those who experienced the BB machine era and a new experience for those who have never used a BB machine.
Interactive Room In the interactive space, we showcase emoji culture, where the yellow ball refers to the emoji we all use in our conversations. visitors can have emoji battles with these floating emojis, and there is also a channel to throw emojis to other museums in the region, i.e. the museum in Berlin, where you can throw emojis to London or Paris (this is the (An advantage of virtual museums that transcends spatial and physical limitations!) It's a place where visitors can not only experience emoji culture, but also promote their own interactions with family and friends, and even strangers.
DESIGN PROCESS Problem Mapping By analyzing museum systems to find the most important issues related to museum digitization, subsequent designs will be developed around these issues.
Collecting - what is worth collecting? - what does the visitor want to see? - thematic groupings
Exhibition - exhibitio concepts - exhibition media - exhibitionn principles
x.xx m
Room - Size of room - interior design
Goal and Form - Task / aim of the exhibition - Target group - Form of offer + determine special character
Protecting - Data 1. data Size 2. formate 3. data protection - copy data - service
Information of backgrounnd - what is the significance of the exhibits and how can they be communicated to laymen
EXHIBITION STRUCTURE Equipment - conventional equipment - installation - Other media
- essential exhibit inventory - "Building blocks" and "key exhibits - Guided tour 1.pioneering exhibition 2.Main street tour + in-depth areas 3. several "forced tours 4.Island exhibition
Education/Study - Educational goals - What does the visitor want to see? - target group
Analyzing museum exhibitions from an interactive perspective
active signals photos from museums
passive signals
The icons show exhibits from different museums, and the interaction of these exhibits was analyzed through the five senses. These five senses are divided into active and passive signals. Active signals refer to the signals conveyed to the audience by the exhibits themselves, such as the visual signals conveyed by the paintings. The passive signal refers to the interactive signal received by the exhibit, such as the tactile signal received by touching screen.
Nobel Friedenszentrum
Installation
categories of exhibits name of museums passive signals active signals
These exhibits are very expensive such like some expensive paintings or some very expensive equipment.
These exhibits are mostly less expensive items, mostly reproducible items.
Architecture, landscapes, real scenes, etc. These exhibits focus on elaborating history to the visitor.
These exhibits place more emphasis on interactive experiences and are mostly content from digital devices.
DDR Museum
Klimahaus
Pannys Chocolate Museum
Abramović Method for Treasures
Le Grand Musée du Parfum
Nobel Friedenszentrum
DDR Museum
Universum
VR Museum
Kunsthalle Bremen
MKG Hamburg
Model Kunsthalle Bremen
sound Video Game Musume instalationn
Model Musée du Louvre
paintinng
CASA Batlo
Textiel Museum Tilburg
Guide
AR
Cloth
Klimahaus
Pictures
Amsterdam Cheese Museum
cheese
DDR Museum
real scene
Nobel Friedenszentrum
Guide
The Wizarding World of Harry Potter
U-Boot Technikmuseum
Cabin
Hologram
Game
Installation
Analysis Of Display Method And Target Group Target Group
Rechargers Visitors who are primarily seeking to have a contemplative, spiritual, and/ or restorative experience. They see the museum as a refuge from the work-a-day world and a place where they can unwind while being surrounded by inspiring and beautiful things.
Experience Seekers Visitors who are motivated to visit because they perceive the museum as an important destination. Their satisfaction primarily derives from the mere fact of having ‘been there and done that.’
Facilitators Visitors who are socially motivated. Their visit is focused on primarily enabling the experience and learning of others in their accompanying social group.
Professional/ Hobbyists Visitors who feel a close tie between the museum content and their professional or hobbyist passions. Their visits are typically motivated by a desire to satisfy a specific content-related objective.
Explorers
Visitors who are curiositydriven with a generic interest in the content of the museum. They expect to find something that will grab their attention and fuel their learning.
Reference：John Falk.Museum audiences: A visitor-centered perspective.
famous exhibits（Rechargers） Away from daily life（Rechargers） AR relaxing（Rechargers） Picture Self-satisfaction（Rechargers） famous exhibits（Experience Seekers）
self-satisfaction（Experience Seekers）
Hologram
Mix Reality
meet new friends（Experience Seekers） Model with Feedback curiosity（Experience Seekers）
relaxing（Experience Seekers） Spend good time with family and friends （Facilitators）
with family（Facilitators）
Model without Feedback
Origin with Feedback
Origin without Feedback
relaxing（Facilitators） Scene building education（Facilitators） famous exhibits（Professional）
Temporary building
Text curiosity（Professional） Sound Cultural relic protection（Professional）
learning new things（Explorers）
curiosity（Explorers）
self-satisfaction（Explorers）
Meeting the needs of visitors protecting exhibits
learning new things（Professional）
famous exhibits（Explorers）
Better exhibits
VR
Video
save room souvenir Reduced management costs
Selection Of Exhibits The culture of communication will be displayed as exhibits in our museum that is about different eras of different communication cultures. For example, the BB machine that were popular in the 90's and the most mainstream communication apps to the present day.
Messenger App Emoji Emoticon
Bb Code
Due to the technical limitations of BB machine, people would send numbers to another BB machine and then interpret those numbers into text. This culture of digital information is a thing of the past, and people who have memories of this culture can use these codes to awaken their memories. People who do not know this history can be made aware of the development of communication technology.
As SMS and the internet became widespread in the late 1990s, emoticons became increasingly popular and were commonly used on text messages, internet forums and e-mails. Emoticons have played a significant role in communication through technology, and some devices and applications have provided stylized pictures that do not use text punctuation.
Originally a linguistic symbol of visual emotion used in wireless communication in Japan, making it very familiar to us, is there more to it than its use in social media, and could it have more playful and quirky interactive experiences?
Messenger app is the main social media tool that we all use to communicate today, and in the exhibition, we will use elements of the different interfaces of these applications to help visitors reach a state of empathy.
Design Goals
Facilitating communication between museums If a museum's exhibits are unchanging, fewer and fewer visitors will visit it in the future. Therefore, there is a need to strengthen the links and cooperation between different museums. For example, they could exchange exhibits, organize traveling exhibitions, etc. This would contribute to the sustainability of the museum. This will promote the sustainability of the museum.
Facilitating communication between people
Facilitating communication between museum and people
A museum is not only an exhibition place, it is also a social place where people can meet people with same interests and where parents bring their children to spend time together. It is also a place where parents bring their children to spend time together. Therefore, it is important for the museum to facilitate communicationn between people.
Displaying exhibits and imparting knowledge is the basic function of a museum and the most basic means of communication between people and the museum. In addition, this is the only way to receive constant feedback and make the museum better.
Virtual Museum exhibits real objects
virtual objects
am gr lo Ho er am Be ne n ho atio rp vig ea na ice vo e ng re di sc buil e
en sc
equipment AR Glasses
smartphone
space unchanged location
worldwide
24h
What does a museum look like when it's completely virtual? The exhibit space is virtual and so are the exhibits. The display have more possibilities, and it is no longer limited by space and time, for example the exhibits can fly in the sky. In addition, such museums can appear anywhere in the world at the same time, just turn on the AR device or mobile phone, you can enter into this fantasy virtual world to explore.
APP Developmet The app was developed through Unity, using the IOS-based AR Kit, and only the IOS version has been completed, but due to some limitations of the IOS app store, it is not yet possible to upload the app to the store for everyone to download, and the app can only be installed on my phone via my computer at the moment. Due to the current limitations of the device and technology, it is only possible to implement these museum functions on the phone, but when the opportunity arises, hopefully it will be better and more promising to implement the program on HoloLens or other AR devices.
Screencast watching this video by scanning this QR code
Hochschultag HfK Bremen 2020
HOLOKRAN- App Design for Hololens
with
INTRODUCTION
The project is a collaborative project with the institute BIBA and we designed an App for the Hololens. The main purpose of the project is to help crane operators to operate the crane more safely. At the beginning of the project we ventured to propose some completely new interfaces, but due to the limitations of the crane's internal environment and technical limitations and other elements, some ideas were not applied in the final program. This is a group project, there are a total of three team members, my main studio in this project: idea generation, functional analysis, visual design, interactive animation, illustration and so on.
Design Task
Design Process
BIBA as a scientific institute has already solved some of the problems faced by industry by using HoloLens, such as the repair of wind turbines. So they want us to solve the problem of safe crane driving by using HoloLens.
We didn't start out working on the crane, but we focused on the HoloLens research and the possibility of a three-dimensional interface, and we wanted to get more breakthrough interfaces out of this project, rather than just solving an industrial problem. HoloLens applications in the industrial field
Know more about HoloLens
analysis of 3D Interface
Ergonomics studies blind area Command staff required. (Waste of labor)
Generation of conceptual interfaces
User experience study for cranes
functional analysis
Interaction Design Operator error of judgement/ Driver failure to operate
blind area
Prototyping
Problems with HoloLens
hard to typing complicatedoperation too few gestures
GUI style are still the Windows style
2D Interface inconsistent interface delay Unable to recognize the user's voice Demanding intense attention Screen is too small too heavy
video photos
Info of Models
file document
Search
Weather
share
Camera
Infographic
answer the phone
search
enlarge minimize
hang up the phone
spin
contacts
Map
screencast dial
Callinng
volume
Info Area
Notes Area
Note
add
Mark
search
add
edit
message
Contacts
Other functions
Remote Instruction
warninng
Instruction Area
Setting
search
Work Log
Mesure
Software Information
recive send E-mails
edit delete
Functional list of industrial Apps
search contacts
scale mode
Video
Search
multi-person call
3D model
Warnings E-mail
instruction
Volume
edit
instructional animation
Notification
Feedback Privacy personalized
ID
social
distance
77°
30°
0°
30°
60°
77° 60°
Ergonomic analysis 20°
20°
0°
0°
12°
12°
40°
40° 47°
0°
Text
Based on the field of view limitations of the HoloLens (30° for HoloLens1 and 50° for HoloLens2), and then based on ergonomics, a comfortable angle of use was selected. And the interface was partitioned according to human reading habits.
47°
Icon&buttons Background
Most people work with their right hand, so most users will raise their right hand to operate.
People are used to reading from left to right.
20°
77°
0°
10m
20°
77°
Main Interfaces
Secondary Interfaces (Usually a hidden state)
1m 0.5m
102°
12°
102°
12°
舒适度 : 好的
40°
40° 47°
0° If the user works with their left hand, they can swap the two positions in the settings.
47°
Comfortable view without neck movement Maximum field of view without neck movement A vision that requires neck movement
不好的
Ergonomic Testing Of Text And Icon Sizes
formulas:
D=L/250 D: Icon size L: sight distance
Three prerequisites. 1. Clear font 2. A little gaze will show that 3. Medium light intensity The data listed in the table above can be used directly or by reference if it is substantially consistent with or close to the three conditions above. In some cases, such as those requiring interaction, or where the background information is more complex, the text needs to be moderately enlarged.
Testing in complex backgrounds
0.5m
1m
1m 0.5m
1m
0.5m
22mm
20mm Appropriate icon size
12mm Non-interactive icons
Minimum and optimum text size
14mm
Interactive icons
Non-interactive icons
Interactive icons
Regular 11pt/ 4mm
Regular 16pt/ 6mm
Regular 22pt/ 8mm
Regular 28pt/ 10mm
Regular 34pt/ 12mm
Regular 40pt/ 14mm
Ob
Die
Na
Ma
vig
de
rD
an
nw
fige
s
ü
de
pf
avig
atio
tisc
ol
en
Mo
no
ie N
ma
er
rP
ers
ers
Pe
itio
nf
olg
en
folg
nn
en
en
ka
ell
ka
nn
ka
nn
nn
od
od
er
n
ka
or
ka
st
io
ü
ye
nn
en
at
en
od
ee
folg
rF
vig
rM
sM
th
on
rso
on
os
w
rP
ers
nsp
hv
de
ld
de
lo
De
Da
er
es
er
ka
ka
nn
nn
au
au
es
au
em
fd
em
em
Ob
Ob
fix
ist
au
fd
fd
fd
be
nn
irg e
O
O
bj
bj
in
la
la
tz
zie
ie
zie
pl
rt
ac od ist nd hp er wo irg ers er we en ön fes ist nn dw lich irg ma tge of en en nd le es t dw Ge ufig ie N tge gt wen r vo w o o a oh n ein leg fes rge der vig nh kom atio t dre Feh g eit ele t me ler v istu nn e wen n g n orge fige ich ist, n ein t ve ände t kom es g Na Feh rn vig rwe men ibt ler v atio ein nd ist, orge wen nu en sch es g n ein kom nte ütte ibt e men Fehle rteil lt in s en r vorg ist, e t chü Hin s gib ekom ttelt weis t ein men en H ist, e schü inw s gib ttelt ein ri eis t ein en H ngart schü inwe iges Rahm ttelte is n Hin en, d ein rin a w s e sich gartig is drehe er Men n läss ü, der ein ringa t sich dr rtiges Fe ehen nster, da lässt s sich dr ehen lä sst z. B. Wenn die Umgeb ung ist zu hel 1 l oder unter Man kann zwischen gleicher Far be virtuellen und reali stischen Elemente n unterscheiden z. B. Wenn die Umgebung ist zu hell oder unter gleicher Farbe wen
Na
vig
ne
atio
in F
ehle
Navigati
n in
tec
kt,
zw
eis
on bar th
at rotate
tz
ie
rt
w er de er de n n rt r d we e rd n en
lat
lat
tp
tp
tp
tp
ek
ek
jek
jek
ed
em
rt
ac
we
e
w
3
3
3
4
cati on
rd
ev ice
s
be o pen ed i n
a sp
ecif i c lo
5
th e
ta to o
De
Na
da
e
nf
rM
da
Di
ca
de
kk
uto
stu
Ob
ruc
nd
ird a
Ein
w
Ob
nk
atio
do
rri ng
in
2
sfe
ew
Tr an
th
will
er
win dow
rö verg ch
th
The
ß h o tis sc ließ s pe gr ö sic rv ma Lu h pp ver ist uto e ste h da - A p sc gl es en tisc wir nd en eF ma n ows s. Ap enü ch rer nu ut o e h e r sM n- e a da rb me erd Da he wir ze tw nn nd ee rden ec ipl enü de ter br we er sM len ns lt wi egrrt we n, e Da eb Fe u üz t eb sg en m la d tzie au orh M nn erv m le f 360 kt pla ka rh ze ste je en fro ip en Gr d ult ate Ob eF Die ell ktu we m rot f dem sa da vie nto n nn au be d i t ca ka te ha Icon an s c ara w t Das o ow ep nd e s ind wi n b w ic a c 3D op sc dow m a r eo in er fo w St an ic sc op w sc eo do er in w e
l tip
he
Scrolling-Fenster, er ist nicht flach Man kann Menü lange drücken dan n Apps zittern und Man kann sie gelöscht werd Apps lange en können drü cke n dann Ap Man kann ps zittern und Druckkno sie gelöscht pf lange Man ka werden kön dr ücken da nn Men nen nn Ap ü ps zittern lange dr Man ka und sie ge ücken nn Icon dann Ap löscht we s lang Man rden könn ps zitte e drüc kann rn und en ke M n sie gelö odell dann Icon Apps lange scht w s ein zittern erden drücke geord können und si n dan net o e gelö n Mo der m sc ht wer dell zi man arkie den kö ttern rt we kan und si nnen n üb rden Ma e gelö ske erla scht gern und Virtu werd von Mo en kö elle saik virtu nnen Do T e a ll s pp en In tatu elb form r/M ver ilds atio sch aus chir nen ie Hä m zu O ufig dnen bjek die eB ver ten ar Ve we rän nd ete de Fe run An ns gd we ter No isu er ng Ric No tizen befe en htu stig he Te tize , M ng rvo en a n en rhe Ha xt lö , M rkie (B vo be re il ar nD nd sc d n (w n, im ok sc hen kier I n ie d Bil um en fo hr d) ie r rm ,I en ift nf ec ein t at o hte io rm ga ne Tas at be n te) ion an / ze en Te ig an xt en ze w ige äh len n
st
Scrollable three-dimensional
das Menü nach vorne bewegen nter te Apps liegen dahi nd / nicht verwende inter te Apps im Vordergru ps liegen dah Häufig verwende wendete Ap hinter nd / nicht ver liegen da im Vordergru te Apps ndete Apps dnet verwende Häufig verwe angeor d / nicht Raum Vordergrun ine im knopf Apps im minoste Druck r rwendete lle wie Do Virtue Häufig ve zeigt ion ist at ig ange Die Nav rden sst er we gefa Fenst men n im ren sam tione h zu imie forma min ereic n d re n Die In eitsb en u imie m Arb n min h ob eine nac iere und d zu ark ster ten r sin Fen rm rer h un nste kla ode nac n Fe t d o r h eide wir ster lare ens Die b nü Fen d k ng Me Scre wir ru von nü ße eil n Me ie T grö hre von dd ver d erü t un Teil Teil n b n sin ßer ndie n en e tio rw nd ließe un d nk ert tba h rha nfu en
A ul M
W
6
e
ab
ng
Ei
5
un
2
i
w
n hle
ex rT
a nt
s by itse
lf
n ne
(h nnt
lt w
y)
alit
Re
h um
ic ht s
den
r.)
Use
ines
der e
o iesen
Auswahl,die Veränderung der Position
die interne Struktur anzeigt werden das Modell bear beitet werden das aktuelles Modell hervor heben Informatio n des Mo dell anze igt wird
rotate jump go forward&back off touch pull push shake halt roll hold kick click ose cho ut inp e wip w o thr aw dr 起 举 ss pre
ma ter ia t&s object l had ow scale spac hum e an color
m e ov qu nlar e ro ak ge ll e
ligh
ba
bu te ck bo tto xt gr rd n ou er sp nd cu ace mo rsor d co el lor
ion at ws vig do nu a n in e W m icon ct fe e ef m al fra ri tu v
Brainstorm In this process, we collect virtual elements, real elements, human behavior and object behavior respectively. We tried to combine these elements and get new interface ideas. In the end we got 7 ideas in this way, which we presented later in a video.
.
eben
es erl
Zwerg
die aktuelle Szene speichert wird
n in io sp ise at ra ll bin ose fa m mp co eco d
Object Behavior
o t, T
ha
en erd
ual
Vis
e R un hs Me ine nne eig hin ec eines nta vom " kö ktive sich r W r Co r ist rspe ops gen de lle Use skt er Pe ewe tue Der aus d "De en b lt Vir n e e .B e r (Z Sz die W hre lity hen elle n wir Me dre Rea virtu önne ual nen und piel k ene Vis Sze Beis iben y Sz elle ，Zum ealit n ble rt e R e l h Virtu ß sc isua ergrö Men die V der v Die ert o n Sie rklein ließe Sch ird ve mw u a R Der annen 3D sc bungen nden en Umge r einble d virtuell Curso realen un Orte wählen ion von ll sehen de Zeitpunkte und Mo Integrat n ht vo verschiedene dige Ansic das Licht für ts Imitieren/ die vollstän Lich hen ürlic ng des nat die Veränderu verkleinern ell Vergrößern oder Man kann das Mod
hell oder unter gleicher Farbe n unterscheiden stischen Elemente virtuellen und reali be gleicher Far Man kann zwischen l oder unter hel zu ist ung scheiden die Umgeb nten unter z. B. Wenn en Eleme rbe ch Fa tis er lis eich und rea unter gl virtuellen eiden ll oder zwischen t zu he tersch Man kann bung is ten un ge en m m U Ele enn die chen z. B. W alistis und re uellen en virt zwisch nn Man ka
Human Behavior
ke
ty,
eali
ix R
tM
is alb
t lb is
h e se e ce l h r dre eic etr rfa ech Mee gew ua d (Lic lbst z eInte ind g das nd irt trollgra nopf se mehrer Realität s stellt und n, u e v b e e 7 Kon ner K el von r und r mg ing ne er u d he
wä mm Ko
z. B. Wenn die Umgebung ist zu
Real Elements
rd oa yb n)
n
ige
ze
n ra
Man kann zwischen virtuellen und realistischen Elementen unterscheiden
Virtual Elements
n
ige
ze
n ta
te
eig
z ge
n
fe
ru
r de
Conceptual Interfaces ring interface Two modes of windows Hololens operates the cursor by the movement of the head, so in general, the interface cannot follow the movement of the head, otherwise the user would not be able to operate the buttons on the interface. However, in some cases it is necessary to make the interface follow the movement of the head, so we designed two window modes, i.e. we put a "lock" on the visual center, after clicking the "lock", the interface will follow the movement of the head. With one click, it will "unlock" and the user will be able to click on anything on the interface.
Rotatable ring-mounted navigation, through which users can close or open the application
Combinable windows Multiple windows can be combined together and the user can select the window they want to operate on by rotating them as a whole.
3D Window The stereoscopic window allows less important functions to be placed on the side, so that when you want to use the kinetic energy, you only have to turn the window slightly, making the interface simpler and cleaner!
Rotatable menu A rotatable menu with a small cube on the side of each main menu and a quick-access function on the side of each cube.
virtual screen Users can use Hololens to work with computers
virtual keyboard When the user raises their hand, the captioned keypad appears on the back of their hand, and when the user turns their hand around, they see the numeric keypad on the back of their hand
Information Architecture
Telescopic Crane Mobile Cranes Truck Mounted Crane Select crane type
Tower Crane Rough Terrain Crane
interaction with crane
Position the crane's coordinates
Real-time positioning
enlarge minimize rotate
interaction with 3D model
control
answer the call
Video calls with guidance staff
setting
scale mode
hang up
turn up
volume
turn down
screencast
back
contacts
begin
dial
back
multiple calls
add
search
begin back
Identify gestures of instructors
Display of real-time crane changes by 3D model
Choose different angles for security video
gesture recognition
real-time guidance animation Select by camera number Select by camera position
monitor Automatic pop-up warning messages and video monitoring
warning
operation introduction
2D mode frame mode perspective mode
Information Architecture
High Fidelity Prototype
Prototyping
Scanning the QR code to see the video of prototype
cenceptual video
Eventually our program was prototyped by Unity and was tested by HoloLens. Eventually our program was prototyped by Unity and was imported into HoloLens to be used. This project is a research project with BIBA and has not yet been tested on a crane or put into use. But the use of HoloLens in industry has only just begun, and there is a great deal of potential in the future for interaction designers to do more with it.
Screencast of Prototype
Hochschultag HfK Bremen 2019
Smart clothing fot sports
Smart clothing fot sports
Various types of exercise were researched in the pre-design phase, and the product design strategy was developed starting with fitness. Mid design research was done on some smart fibers but due to limited resources I used plastic sheets instead of smart fibers and tested them using Arduino. Later on the model was created using Marvelous Designer.
INTRODUCTION
This product offers a new concept of sports coaching, combining smart clothing with live streaming for remote coaching to help the lack of sports experience and knowledge amatuer train correctly and scientifically to improve their sports skills.
Starting from the fitness area
Die Photographie Aus Rusleu Burlaka
In 2015, there were 5,940
Die Photographie Aus Pixabay
5940
fitness apps worldwide
Sitting employees need to work out to stay fit and healthy, yet they don't have time to go to the gym.
Advantages and disadvantages of Fitness App
AI-generated plans
The plan is not personalized
fitness club members
çźşç‚š
Advantages
Providing fitness knowledge
1.08 million
can't correct pose
Why Fitness Can be used anywhere, anytime
No protection
With one tenth of the country's population being members of health clubs, the fitness market in Germany is huge. Nearly one-fifth of active fitness app users in Germany indicate a large number of people in need of fitness guidance. Therefore I designed the fitness campaign as a breakthrough.
Coaching and live streaming Hiring a personal trainer and taking live lessons are both great ways to learn, but there are still many problems. The live streaming is good but...
The coach is good but... Trainees need to go to the gym in order to find a trainer, and if there is no gym near their home, they will waste a lot of time on the road.
There is still a lack of a platform to attract coaches and learners, and many of the courses are conducted mainly with video software such as skype.
Less trainers at the gym
LIV
E
The coach can only teach through display and words, but cannot help the student adjust physically.
???
2
-1
60
/ 0$
E
ND
U ST
One-on-one courses are expensive
I N T E R V I E W
Interview To find out how trainers instruct their students, I interviewed fitness instructors about their role in training and the process of personal training classes
During the class the trainee will be shown how to do the movements mainly through demonstrations and will be helped to adjust the movements directly with their hands if necessary. The difficulty in the instruction process is to guide the students to exert force, because in the process of fitness, many students can not feel the force, so the instructor needs to describe the feeling of exerting force to the students based on his own experience, but this kind of completely rely on language instruction is a challenge for both the instructor and students.
教练无法从肉眼
The coach has difficulty observing if the student is applying the correct force.
男教练尽量要不 If necessary, coach need to physically adjust the participant's movements
Physical Analysis
Eating
Course
Plan Test
physical test
Exercise
Exercise
showing
Guide warm up
DESIGN
Protecting touching
Goal Lose Weight
movitate
language
increase muscle
System of fitness courses The coaching approach in the course flow is important to my design and I will incorporate all three coaching styles into my product
Problems and Design Tasks
Interactive clothing Trainees can attend classes anytime, anywhere, and have access to remotely interactive clothing for completely communication barrier-free training.
Through this research and analysis, I identified the problems encountered by novices in training and determined the subsequent design tasks based on these problems
AU
? business model
AU
With the current business model, trainees pay for expensive courses, but the coaches only get a smaller share of the revenue. And the gym takes a big cut of the coaching fees.
FR
FR Lack of platforms There is no online platform that connects coaches and students, so it is not easy for students to find coaches and coaches to find students who need lessons
AG
ES
TE
LL
UN
G
AG
T ES
EL
LU
NG
FG
AB
E 2
A FG
BE
3 Changing the business model Unlike gyms, online platforms are not limited by location and can attract a larger number of users. So by taking only a small cut of the course fees, we can earn a higher income.
LIV
E
2 FR
AG
Remote course The remote course cannot physically correct the participant's movements.
ES
TE
LL
UN
G
A
G UF
AB
E 2
3
Online fitness course platform By creating an online platform that attracts a large number of fitness trainees and coaches. Not only will it provide a large number of options for trainees, but it will also provide more opportunities for coaches to teach. 1
KU
FIT
RZ ST FRIS RA TI TE GE GIE
NE
SS
E
LIV
2
Selling smart clothing Attract new trainees and coaches with inexpensive courses as a selling point. As soon as they purchase the apparel they will become our customers. There is no cost taken from the course fees at this stage.
Workout anytime, anywhere Some people are no longer satisfied with the gym and more and more people are preferring to work out at home in order to save time.
4
Add more sports By the time a certain number of users have accumulated, this is when the brand already has a reputation. Other sports can be added at this point. By virtue of the branding, more users from other sports will be attracted to the brand. At this point the cut from the course fees will be the main income.
Y BU
3
1
Live + Smart Clothing So live streaming can be used and people can enjoy personal coach courses from the comfort of their homes. And with smart clothing, remote interaction is possible and students can learn the moves easily.
BI
GD AT A
E IG T S RI GIE F NG TE LA TRA S
pressure sensor
1
The plastic sheet is stretched without touching the pressure sensor.
PROTOTYP A simple module was made through Aruidno to implement the ability to control changes in the material by touch operation. My Prototype uses a simple circuit that uses the pressure sensor as a switch. When the pressure sensor is squeezed, the circuit opens and an electric current is generated The amount of provocation is used to control the movement of the thermal plastic sheet.
thermal material
2
After squeezing the pressure sensor, the plastic sheet shrinks
2D RENDERING - Male To determine the details, I rendered the 2d using Photoshop for both men's and women's clothing.
Detachable sleeves
waist guard
sensor matrial
Building 3D Model
Modeled with Marvelous Designer and used Zbrush to add folds to the costume.
PROZESS
1
Book a course
Trainees find their favorite coach through the app. Order and pay directly after selecting a time.
The trainee and the coach both wear my products to class at the same time, as if the coach is there to guide the trainee.
2
Put on a smart costume. Both will need to change into smart clothing to allow for remote interaction during lessons
3
Classes through smart equipment
4
Users can take video lessons with coaches directly through mobile phones or TV. It is also possible to listen to the coach with only headphones on. Sensors on the garment will show the instructor what the student is doing and assist the instructor in guiding the student.
The coach adjusts the student's posture. During class, the coach can help correct the movement by pressing his or her costume to remind the participant which part of the movement is incorrect.
Instructions For Use
l
fib er
se ns or
in te ra ct iv e
m at er ia
zippers
A lot of the movements in the gym can put pressure on the lower back, so I added a lumbar support structure this costume.
During the workout, sensors within the garment detect the participant's muscle exertion and send it to the trainer to assist the trainer in guiding the participant to proper exertion.
INTRODUCTION
Doors have evolved over time without much breakthrough. Therefore, in this project, I will redefine the concept of "door", and try to design the door from various perspectives. By thinking out of the box, I found various possibilities of "door" and decided on a design direction. I did a lot of structural testing and tried to apply new techniques to my products. In addition, interaction was added to the product design, which brought a new experience of interacting with the door.
Smart Door
Chemistry
GOAL
PARTS
House
MIND MAP ABOUT DOOR
SOURROUNNDINNG
Market
not everyone can come in
Privacy
kitchen
Toilet
safety
sound
lock
Door handle Bedroom
block Rain/ Snow
Biologie
signal
Permission
Peephole
open
Password block people
see outside
Face
Fingerprint
Physic
Discoloration Glas
Sound Recognition
block eyesight
open
control the Exit
FUNCTION
lock
Public
Resteraunt
Smart Material
Modular
Store
MATERIAL
INTERACTION
Paper
Solid
Circle
Liquid
Gas
Metal
Fold
Push Rolll Wood
Plastic
Water
Magnetofluid
Dampf
Mind Map
Make divergent associations about doors through mind mapping. Think in terms of interaction, materials, environment, and the function and role of the door respectively. Allow more possibilities for the design of the door.
Ideation
disaster
liquid
modular
fold
multifunctional
To make the design concept clearer, I've shown some ideas through some simple models
Arrangement of modules It' s possible to look at the small modules as a whole and try to arrange the modules to see under what circumstances the former and latter modules can complement each other in terms of gaps.
交错的模块
Die Photographie [1][2][3]][4]Aus Andrew D. Horchler 2013 Worm-like Robotic Locomotion with a Compliant Modular Mesh
By trying to line up I found that only the front and back sides do not allow the door to be closed in the case of a leaky connection hose. The way a module works
Technical Origami and most of my concepts build doors through curved surfaces. And there is a structure where he builds a wormlike robotic structure by connecting the modules together with hoses. So if I apply such a structure to the design of the door, then the door will have a lot of variations in its shape.
+
=
The front and back can be closed when the hose is not leaking outside.
PROTOTYP There are still a lot of problems with the module structure and it needs to be improved. Problem
The module is rugged and
Thinking Process
1
There are a lot of gaps between modules.
2
fill in the gaps
3
Using modules as a framework
4
Improved framework
Since it is not possible to completely seal the module, I converted the module into a frame and filled the gaps between the modules with EAP, a polymer that "breathes" and allows for the opening and closing of a surface. However, this modular structure was not flexible enough to be used as a frame, so I needed to improve the existing frame. Poor flexibility
Materials - EAP
没通电
通电
EAP shrinks when it is energized, so I use this material to allow for a door closing to opening conversion. Hose connection creates
PROTOTYP To design a flexible frame, I tested it with different materials.
Due to the fragile nature of the material, this structure breaks easily.
This arrangement makes the module more restricted and less able to move freely.
The structure will be more flexible by using only the pleated part.
PROTOTYP
Frame Organic Form I started with elastic fabric and wire and wire frames to try and make organic curved structures.
To test the frame's ability to vary richly, I secured the elastic fabric to the frame and posed a few shapes.
Explosion diagram
ENDPIPE
MODULES
PLUG
OUTPIPE
EAP material can be inserted into the outer tube and held in place by a plug
Process of Interaction
A Hole Has Emerged
Touching
disapear
taper
A hole has emerged.
Control The Movement Of The Door By Gestures
Open to the left
close
Downward opening
close
Open to the right.
close
Upward opening
close
Other Function
Control the light
Ventilatel
Control the temperature
ventilate
Background Aus Steven Massart
ANIMATION / MOTION GRAPHICS