session title ui design from pc game to mobile...

27
Session Title Speaker Name Speaker Title & Company UI Design from PC Game to Mobile Game Zhang Yang Netease GUX

Upload: others

Post on 02-Aug-2020

4 views

Category:

Documents


0 download

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

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

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

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

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

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
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

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

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
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

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

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
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

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
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

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
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
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

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

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

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

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

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
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
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

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
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

THANK U