session title ui design from pc game to mobile...
TRANSCRIPT
![Page 1: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/1.jpg)
Session Title
Speaker NameSpeaker Title & Company
UI Design from PC Gameto Mobile Game
Zhang YangNetease GUX
![Page 2: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/2.jpg)
Session Title
Speaker NameSpeaker Title & CompanyDesign
BalanceUsage
ScenariosOperation
ModeImagination
![Page 3: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/3.jpg)
Session Title
Speaker NameSpeaker Title & Company Design
Balance
![Page 4: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/4.jpg)
Session Title
Speaker NameSpeaker Title & Company
Big and Comprehensive VS Small and Fine
![Page 5: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/5.jpg)
Multitasking Operation vs Single Targe
![Page 6: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/6.jpg)
![Page 7: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/7.jpg)
Multiple Focuses vs Single Focus
![Page 8: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/8.jpg)
Interface Level
![Page 9: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/9.jpg)
![Page 10: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/10.jpg)
Operation Mode
![Page 11: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/11.jpg)
From singe to multiple
Diverse Operations
![Page 12: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/12.jpg)
![Page 13: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/13.jpg)
From accurate to blur
Memory Operation
![Page 14: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/14.jpg)
![Page 15: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/15.jpg)
From mouse to hands
Area Operation
![Page 16: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/16.jpg)
![Page 17: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/17.jpg)
![Page 18: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/18.jpg)
Usage Scenarios
![Page 19: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/19.jpg)
Specific time to fragmented time
Long time to short time
![Page 20: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/20.jpg)
Imagination
![Page 21: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/21.jpg)
Dennis Gabor
Invented the holographic projection technology in 2947, and won 1971 Nobel Prize in Physics with this technology.
![Page 22: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/22.jpg)
Augmented Reality, referred to as AR, is a real-time
technology of calculating the position and angle of
camera and adding corresponding images. The
technology is aimed at projecting the virtual world
onto the real world and achieving the interaction
between the two worlds. It was proposed in 1990.
Augmented Reality
![Page 23: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/23.jpg)
![Page 24: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/24.jpg)
![Page 25: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/25.jpg)
faithfulness, expressiveness and elegance
![Page 26: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/26.jpg)
![Page 27: Session Title UI Design from PC Game to Mobile Gametwvideo01.ubm-us.net/o1/vault/gdcchina15/slides... · shanghai international convention center shanghai china. october 25-27,201](https://reader034.vdocument.in/reader034/viewer/2022042712/5f889094b7b95529172475da/html5/thumbnails/27.jpg)
THANK U