Game UX Design Portfolio 2020

游戏交互作品集

DESI GN PORTFOLI O AL LRI GHTSRESERVED

HANXI NGMOU |2020

“ H I , I ’ M H A NX I NG MO U “

2 0 1 72 0 1 9

T I A NX I A

2 0 1 82 0 1 9

E L E G YO FA R T E MI S

2 0 1 52 0 1 7

A S H E SO FG O D

Wi t habat c he l o randmas t e rde gr e ei ni ndus t r i alde s i gn, Ihavebe e nwo r ki ngi nt hegamede s i gni ndus t r yf o ro ve r 3y e ar s ,c r e at i ngando pt i mi z i ngi nt e r f ac e sf o rt he pr o duc ti ndi f f e r e nts ubj e c t sandge nr e s .

Mo r et handr awi ngwi r e f r ame sandput t i ngs t i c kyno t e s o nt hewal l ,gameUXde s i gni smuc habo utpr o bl e m s o l vi ng.Co mpr e he ns i vekno wl e dgegi ve smo r es o l ut i o ns t ogamede s i gne r sandme .

Ii ns i s to nt heus e r c e nt e r e dde s i gnappr o ac hwhi c hc an he l pt ohandl es pe c i f i ci s s ue sr e l at e dt ogamei nt e r f ac e s andmakegr e ate f f o r t st ot r ans f r o mt hegamede s i gn r e qui r e me nt si nt oi nt e r ac t i o nf l o wsandpr o t o t y pe s .

Be s i de s ,Ial s odomybe s tt oc o mmuni c at ewi t hgame de s i gne r sandmakemyi de asbe c o mer e al i t y .

A WI REFRAM EBOYZ JOI NT

列车少年 Vol .

01 虚拟世界观备战界面设交互设计

01

世界观

“奔跑和跳跃，是血管里的本能，时常感到边缘却从未颓废”

克姆廷车站 克姆廷车站（Commut i neJuct i on）是城市中重要的交通枢纽，每天通勤客流量32-37万人/ 次，也是城市 中历史最为悠久的车站，克姆廷在1983年6月发生过一次震惊世界的交通事故（Commut i neCol l i si on）， 3量火车碰撞脱轨、超过17节车厢内400多名乘客死亡或重伤。检察会将这次事故定义为“人为事故”，克 姆廷工会会长被判渎职，社区工人及其子女延长服务期限至50年（16岁-66岁），以弥补城市的“损失”。 然而对于克姆廷工会人员来说，真像从未解开，他们在工会内部成立了代号为CHAI NZ的小组，调查多年前 的事故原因。

克姆廷铁路工会 克姆廷地铁中心的工会组织，在克姆廷车站竣工8年后成立。工会成员住在16-34社区，大部分工会成员 为克姆廷车站铁路工人，铁路工人平均工作年限为30（16岁-46岁），子女享有优先推荐权，审批通过后 被录取为铁路工人。

危险游戏（KA-TI -HO） CHAI NZ成员日常娱乐活动之一，工会子女的日常“娱乐”方式，在夜间的火车中奔跑、跳跃。坚持到启明星 的到来。因此游戏的名字叫做KA-TI （Cat ch）-HO（火车鸣笛的声音）。游戏双方在狭窄的火车顶部竞技， 胜利的一方将接受清晨第一缕阳光的洗礼。

02

人物设定与故事版 社区少年和他们的“危险游戏”

玛丽 14岁

杜尔兹 15岁

达尔兹 15岁

玛丽从孩童时代起，便和父亲在铁道旁的小木屋内生

在火车的的鸣笛声中，一队孪生兄弟出生了，哥哥“

与略显懒散的哥哥不同，达尔兹更加灵活的头脑善于

活，长年累月的车鸣声磨损了父亲和她的耳朵，贫苦

杜尔兹”和弟弟“达尔兹”。简单的拟声词寄托了父

收集和分析信息，年纪轻轻就已经辅佐表哥，参与

的生活没能破碎她的心智，她继承了父亲灵敏的双臂

母朴素的愿望，希望两兄弟的生命如同这几十年如一

CHAI NZ的调查工作。

和灵活性，成为了社区家喻户晓的奔跑者。

日的声音一般隽永。

杜尔兹是社区跑酷和搏击的好手，显然，他在抓紧享 受工作前的悠闲时光。

故事梗概 玛丽在站台等待进站的列车，列车进站后，玛丽纵身跃起，跳落在列车顶部。和其他小伙伴一起， 前往“危险游戏”的目的地。车辆跃过不同车站，地标的建筑投影在车厢上，少年们和晚风一起， 开始了一次新的冒险。 （由于时间原因，故事版未能细化，部分角色采用“火柴人”代替。）

03

信息架构与流程 在理性的线框中结合感性叙事

用户旅程地图 通过用户旅程地图，对PVP玩法玩家行为 流程进行拆分。确定邀请者（玩家A）和被 邀请者（玩家B）在不同阶段的痛点，并以 此为基础，寻找对应的机会点提升表现层 的用户体验。

04

交互设计 寻求理性和感性的平衡点

主界面（左上）、地图选择（左下）、匹配界面（右上）、英雄选择（右下）

Ti anx i ai saMMORPG o nmo bi l ede vi c e s .Pl ay e r st akec o nt r o la c har ac t e r ,amar t i alar t i s twhove nt ur e st hr o ugt hanc i e ntChi na.

Thi sge nr eo ft hi sgamei sWux i a,t r adi t i o nal l yaf o r mo fChi ne s e f ant as yl i t e r at ur e .I nt hi sc as e ,Ii nt r o duc e st hi spr o j e c ti nChi ne s e .

0 1 ABOUT

关于

De s i gnMa na ge me nt 设计管理

0 2 UXDESI GN

UXшо╛шоб

UXI t e r a t i on 系统迭代（灵兽系统）

灵兽主页

1

灵兽培养（成长）

灵兽培养（经验）

迭代思路 灵兽皮肤

灵兽星盘

灵兽皮肤（列表拓展）

星盘属性

迭代方向

灵兽培养（喜悦点）

灵兽培养（灵气）

原型制作

灵兽皮肤（属性查看）

灵兽皮肤（属性查看）

迭代结果

星辉属性

星点属性

UXI t e r a t i on 系统迭代（朋友圈和活动入口）

朋友圈迭代

活动入口迭代

Eve ntde s i gn 活动设计

愚人节活动草图绘制及配色建议（本人绘制）

面具晃动，开始整蛊任务

前期概念及草图绘制 开始任务

愚人节活动任务方案说明（本人绘制）

Eve ntde s i gn 活动设计

冬至煮饺子玩法 清明节活动包装草图

Eve ntde s i gn 活动设计 2

视觉设计及代表产出

0 3 CONCLUSI ON

总结

E L E G YO F A R T E MI S

T H E D E S I G N B A C K G R O U N D Maki ngi nt e r ac t i onf l owsandwi r e f r ame s i st hewayImos t l yus e dt ode alwi t hUX pr obl e ms .I ns t e adofdoi ngt hes amet hi ng onc eagai n,whatIhadc hos e nwast os t e p outofmyc omf or tz one .

Att hes umme ro f2 0 1 8 ,t hedevel opmentgr oupt hat Iwass e r vi ngt ode c i de dt omakeanMMO mo bi l e game .Iwasl uc kyt owo r kasanUXde s i gne ri nt hi s pr o j e c t .

Att heve r ybe gi nni ng,Idi dno thavee no ughar t r e s o ur c e s .Tomakemyi de ae as i l yc o mpr e he nde dby o t he rpe o pl e ,s t o r ybo ar dwe r eus e dasane f f e c t i ve wayt opr e s e ntmyde s i gnpr o po s al .

0 1

I NSI GHT Func t i o no r i e nt e dUX

I NPUT

OUT PUT

Maki ngor de r st hr ough t heHUD e l e me nt s .

SEED

NARRAT I ON

GAMEPL AY

Re c e i vevi s ualf e e dbac k.

Unde r s t andi ngt hegame c ont e ntbyr e adi ngt he t e xti ndi al ogs .

Thegame pl aypr oduc e s me di oc r ee xpe r i e nc e sf or pl aye r s .

Se e di sac or ec onc e pt Re c e i vef e e dbac kf r om hatbr i dge st heUX t hevi s ual ,ac ous t i cand t s i gnandpl ot . e ve nhapt i cs e ns et hati s de we l lr oot e df r om t he s t or y.

Te l l i ngt hes t or ybyl e t t i ngt hepl aye r sdi vei nt o t hegameandi nt e r ac t wi t ht hegamec omponi e nt s .

Thegame pl aypr ovi de s i mme r s i veandunf or ge t abl ee xpe r i e nc e .

St o r yo r i e nt e dUX

Maki ngor de r st hr ough 3D mode l s ,pr oj e c t i ons andot he rme di awhi c h i sc ons i s t e ntwi t ht he wor l dvi e w oft hegame .

UXDESI GNCONCEPT

Thec o mmo nl yus e dUXs t r at e gyi st os i mpl yc r e at eagr o upo fUIwi dge t sf o re ac hs y s t e m.Mo s tUIe l e me nt st hathavebe e nc r e at e di nt hi swayhavel i t t l e t odowi t ht hegamenar r at i o n.Ipe r s o nal l yc al li tf unc t i o no r i e nt e dUX. Theway st ohe l pt hepl ay e r sac c o mpl i s ht he i rgo al sc anbemuc hve r s at i l e .I ns t e ado fmaki ngpe o pl ec l i c kt hebut t o nso nt heHUD f o rt ho us andst i me s , i mme ns i vegameal l o wspe o pl et oi nt e r ac twi t ht heo bj e c t s ,c har ac t e r sandme di ast hatar ee x i s t e di nt hegamewo r l d.Thi si st hewayIpr e f e rt of o l l o w whe nc r e at i ngi nt e r f ac e sf o rgame ,whatIpe r s o nal l yc al li ti ss t o r y o r i e nt e dUXo rnar r at i o no r i e nt e dUX.

MET APHOR SEED

CI CADA

MEDI A

DRONE&HEADPI ECE

DEV I CE

F UI

T H E S T O R Y B O A R D

0 2

El e gyo fAr t e mi si sanac t i o nr o l e pl ay i nggamepl ay e df r o m at hi r dpe r s o nvi e w.Pl ay e r st akec o nt r o lo fac har ac t e rwhove nt ur e st hr o ughapo s t apo c al y pt i cl and.Thec har ac t e rwasf e dandt r ai ne di nt het r i be ,buts hehadbe e nc as to utf r o mt het r i beatt heageo f13.Thet r i bel e ade rt o l dhe rt of i ndr e s o ur c e s f o rt hepe o pl eatho me ,butt her e al i t ywast het r i bedi dn’ thavee no ughs uppl i e st oke e pt he m.Thec har ac t e rdi dn’ tkno ws hewasgo i ngt ot akeao ne way t r i p.

Idr e ws t o r y bo ar dt ovi s ual i z eas i ngl ec l i po ft hee nt i r es t o r yt r ans c r i pt ,t hec i ne mat i cpi c t ur e ss ho wsho wt hec har ar t e rwo keupi nabr andne wl and,and ho ws heme tt heve r t ai nwhogavehe rt hec o r es uppl yaf t e rhavi ngt o l dhe rho wt het r i bedi s t r e at e dt he m.

Thi sdr awi ngai me dt oge ts o mebas i ci de asabo utwhatde vi c e spe o pl ewo ul dus et oc o mmuni c at ewi t he ac ho t he r ,whi c hal l o we dmet opr e vi e w ho w UI e l e me nt swo ul dl o o kl i kei nt hegamevi e w.

S t a r tmi s s i o n

C o mp l e t emi s s i o n

L o o t

T H E D E S I G N P R O T O T Y P I N G Vi s ual i z i ngt hes t or yl i nef i r s tdi dr e al l y he l pme ,i twaswor t hwhi l et omakes ome dr af tUIc onc e ptt os uppor tmyUX de s i gnl at e r .

Ihadc r e at e dani nf o r mat i o nhi e r ar c hyf i r s tt o c o nf i r mt hewe i ghto fe ac hs ys t e ms ,t he nIhad wr i t t e nado c ume ntt oi nt r o duc et heUIf unc t i o ns f o re ac hs i ngl ede t ai l spr e c i s e l y.

0 3

I NF ORMAT I ONARCHI T ECT URE #L e v e l2

2 Co mmu n i c a t i o n

#L e v e l1

1 Co mb a tSy s t e m

#L e v e l2

2

Ba gSy s t e m

#L e v e l3

3 I n v e n t o r y

3 Cr a f t i n g

2 Se a r c h&L o o t

3 De c o mp o s i n g

3 Co l l e c t i o n

2 Di s p a t c h e r

2 Wo r l dMa p

3 Ma p

3 Mi s s i o nL i s t

COMBATSYST EM 1

1

Bl o o dbar

Co o r di nat i o n

Thebl oodval uei shi ghl i ght e d,whe nt he pl aye ri sr i ghti nt hec ombat .Thec ol orof t hepane lwi l lbede s at ur at e daf t e rbat t l e .

Thec oor di nat i ongi ve st hepl aye ra hi ntofwhe r et he yar eandwhe r e t he yar ehe adi ngt o,whi c hmake s t he mf e e ll i ket he yar eve nt ur i ngi na r e alwor l d.

1 1 We apo nSe l e c t The r ear et hr e et ype sofat t ac tmodei nt hi s game .The yar eme l e eat t ac k,r angeat t ac k andpi e c eat t ac k.Tappi ngt hi sbut t on al l owspl aye rt oc hangewe aponswi t ht he r i ghtat t ac kmodet he yne e d.

Bul l e tSe l e c t Tomaxi mi z et hewe apondamageon di f f e r e nte ne mi e sandc r e at ur e s ,t he pl aye rne e dst oc hoos et her i ghtt ype ofbul l e tamoungf i r e ,i c eande l e t r i c i t y.

1

1

Vi r t ualJo y s t i c k

At t r ac kandSki l l s

Vi r t ual Joys t i c ke nabl e spl aye rt ove nt ur e i na3D s pac e .I tal s oal l owsus e r st o c hanget hepac ef r om wal ki ngt oj oggi ngby dr aggi ngt hewi dge toutoft hec i r c l ef ora whi l et oac t i vat et hi sf unc i on.

The s ec ommonl yus e dbut t onsar e pr ope r l ys i t uat e di nt hepl ac ewhi c h c anbec omf or t abe l yac c e s s e dt o.

NOT I F I CAT I ON

1 No t i f ac at i o n Thet e xtpane lc ont ai nsc r i t i c ali nf or mat i on whe nt hepl aye ri si nj e opar dy.I tal s os e nt s s omei mpor t antme s s age st ot hepl aye r .

1 Co mmuni c at i o nDe vi c e Thi sbut t onappe ar swhe nt hedi s pat c he ri sgi vi ngme s s aget ot he pl aye r .Thi shi ntwi l ll as tf or4or5 s e c onds .Thepl aye rc ant apt heme s s agebut t ont oans we rt hec al lor l e avei tal oneoutt he r ebyt hede c i s i onmaki ngbas e dont hes i t uat i on att hatmome nt .

BAGPAGE 1

1

Ti t l eandTabbar

Char ac t e rMo de l

Al ar e genumbe rofi t e msar ec at e gor i z e d i nt of i vegr oups ,whi c hmake st hemat e r i al i nt hegamee as yt obeme mor i z e d.Att he s amet i me ,i tpr ovi de saf as twayt of i nda s pe c i f i ci t e mt hati sne e de d.

The3D c har ac t e randi t sr i gge d mode lpl aysac r ut i alr ol ei nt hi s s ys t e m.whe nt hepl aye ri si nt e r ac t i ngwi t ht he s eUIe l e me nt s ,t he mode lpl aysdi f f e r e e ntr i ggi ngani mat i onasawayt ogi vef e e dbac k.

1 1

I t e m Li s t Le s si smor e ,l ar ge rs l otpr ovi de smor e s pac et os how t hei t e m appe ar e nc e .

1

I t e m De t ai l s Thi spane lc ont ai nst hei nf or mat i on abouti t e m pr ope r t i e s ,at t r i but e s , ge ne r ali nt r oduc t i onsandot he rr e l e ve ntde t ai l swhi c har e she l pf ult o us e r s .

I ndi c at o r Thi sgr oupofdot si ndi c at e show many page si thasi nt hei t e ml i s t .

1 Mai nFunc t i o ns Thebut t onsf orke yf unc t i onsar e s i t uat e di nt hehotar e aont hemobi l e de vi c e s .Thebut t onc ol ori smor es at ur at e dwhi c hmake si te as yt obe f oundandope r at e d.

CRAF T I NGPAGE 1

1 Ti t l eandTabbar

Ro bo tMo de l

Thes amec at e gol or at i onar ei mpl e me t e d f r om t hebags ys t e mt oc r af t i ngs ys t e m.

TheRobotmode lus e si t svi vi dr i ggi ngani mat i ont ope r f or ms omemac hani cmove me nt .I tmake st he pl aye rf e e l sl i ket her oboti sdoi ngt he r e alc r af t i ng.

1 I t e m Li s t Thes amegr i ds ys t e m hasbe e nus e di nt he i t e ml i s tt oke e pt hede s i gnc ons i s t anc y.

1 Mat e r i alSl o t Thepl aye rc ans e l e c tmul t i pl emat e r i al st omakeaf or mul ahe r e .I ft he pl aye rt apt hec ompos ebut t on,t he n hewi l lpr obabl yr e c i e veane wi t e m wi t hbe t t e rqual i t y.

1 I ndi c at o r

1 Mai nFunc t i o ns I ns t e adoft appi ngt hei t e ms l otone byone ,t heRandom Mat e r i al sal l ows t hepl aye rt or andoml ys e l e c ta bunc hofmat e r i al sal latonc e .The Compos ebut t onwi l lc ons umet he s e l e c t e dmat e r i al sandmakebe t t e r i t e msf ort hepl aye r .

NPCPAGE 1 1 Char ac t e rMo de l Thehe adpi e c ewi l lbeac t i vat e dwhe nt he c har ac t e ri saboutt ot al kt ot heNPC.The c ame r awi l lz oom i nf r om t hege ne r alvi e w t ot hedi al ogpane lwhi c hi sr i ghti nt he mi ddl eoft het woc ommuni c at or s .

NPCMo de l Toke e pt he ms e l ve sf r om t hepor t e nt i alj e opar di e s ,t hepe opl ei nt he s t or yc hoos et ot ur nt he i rbac kwhe n t al ki ngt ot hes t r ange r s .TheNPCs wi l ldr opt he i rguar dt ot hepl aye r s andt al ki ngt ot he mf ac et of ac eas t hes t or ygoe son.

1 Di al o gPane l

1

Thi sar e ac ont ai nst het e xtoft he di al og.Thei mpor t antt e xtwi l lbe hi ghl i ght e dt ol e tpe opl ee as i l yr e c ogni z e d.

Tr i angl arPar t i c l e s Thef l owi ngt r i angl ars hape swi l lani mat e whe nwor dsar et r ans f e r r i ngbe t we e nt he t woc har ar c t e r s .

1 Mai nFunc t i o ns Thi st r i angl arbut t ongi ver oom f or gamede s i gne r st oaddmor ef unc t i onshe r e .

L OOT I NG 1 Te x tPane l 1

Thepane lc ont ai nst hei t e m de t ai l s t hati sc ol l e c t e dbyt hedr one .

Dr o ne Thedr onewi l lf l yi nt ot hes c r e e nwhe nt he l oot i ngs ys t e mi sac t i vat e d.I ts c ansont he l oott oc ol l e c tt hege ne r ali nf or mai on.

1 I t e m Li s t Thei t e ml i s ti sont her i ghts i deof t hes c r e e n,whi c hmake si te as yt obe r e ac he d.

1 Char ac t e rMo de l Thec har ac t e rr i ggi ngani mat i onpl ays whe ndi f f e r e ntt r e as ur ear edi s c ove r e d.

TheLED l i ghtwi l lbec ons t ant l ys hi ni ngt o i ndi c at et hehe adpi e c ei swor ki ng.

1 Mai nFunc t i o ns Thes ys t e m al l owspl aye rt ot aket he l oot sonebyoneoral latonc e .

I ft hei t e msi sal e ar dye xi s t e di nt he pl aye r ’ sbag,t he yc anl e avet hel oot s outt he r e .

T H E D E S I G N C O N C L U S I O N Thee xpe r i e nc et hatIhavehadf r om t hi s pr oj e c twasunf or ge t t abl e .I the l pe dmys e l f t of i ndabr andne w wayt omakeUI /UX de s i gnf orgamepr oduc t .Att hee nd,i t r e al l ywor ke d.

Af t e rt hi spr o j e c t ,Ihadmadeapr e s e nt at i o nandi nt r o duc e dt hes t o r ybo ar dme t ho dt omyc o l l e ague si nt he UXde par t me nt .Af e w mo nt hsl at e r ,Iwe ntt oHangz ho uandat t e nde danUXde s i gne ve ntho s t e dbyNe t Eas e ,Is har e dmye xpe r i e nc ewi t hmo r eUXde s i gne r s .

0 4

SHARI NG

I t al ksi sagameUXe ve nthos t e dbyourde par t me nti nNe t Eas e .Iwasl uc kyt obec hos e nt oat t e ndt hi se ve nti nHangz hou.

Thepr e s e nt at i ont hatI ’ vemadei sabouthow t omakei mme r s i vegameUXbys t r oyboar d.

Att hee nd,I ’ vebe e nvot e dt obeoneoft heExc e l l e ntShar e r s .

K I N GF R O MA R S H E S

A B O U T Real t i mes t r at egyi soneoft hemos ts ophi s t i c at edv i deogame genr e.

I nmos tr eal t i mes t r at egygames , t hegamepl ayi sgener al l y f as t pac edandr equi r esv er yqui c kr e ex es .

Thepur pos eoft hi s pr oj ec ti st omakeaRTSgameonmobl epl at f or m.

I nt hi spr oj ec t , t hemos tc hal l engi ngt as kf orUXdes i gnerwast o maket hei nt er f ac eeas yt ous eandkeept hec ompl i c at edgame s y s t em r unni ngwel l att hes amet i me.

0 1

G A MEME C H A N I C S

R e a l t i meS t r a t e g y KI NGFROM ASHESi saRTSgameonmobi l e dev i c e, i t ss ubj ec ti sDNDl i ke.

Thi sc ompl i c at edgamemec hani cwasc hos en, bec aus et hegamedes i gner shopedt omake t hegamemor ec ompet i t i v et oat t r ac tt he peopl ewhous edt opl ayWar c r af t3, gi v i ng t hem t hes amepl eas ur et heyus edt ohav e hadi namor ec onv eni entway .

+

C o l l e c t i a b l ec a r dg a me Thegamedes i gnerc r eat edaqui c kerwayt o c onj ur emagi cbyc as t i ngt hemagi cc ar dst hey hav ec ol l ec t edoutoft hec ombat .

Thepl ay erc oul dpur c has et hemagi cc ar dsby t hegamet okenst heyhadgot t enf oreac h gamet heyhadwon.

H O WT OP L A Y

G a meMe c h a n i c s Themai nc omponent st hats uppor tt hegamemec hani cc ons i s tofc r y s t al , t ower , t r oopsandc r eeps .

Cr y s t al i st hes t ar t i ngpoi ntwher et heuni t sar egat her ed, i tal s opl ay sas anal t arwher ey ouher osr ev i v eatonc ebeenki l l ed.

Tower swi l l gi v epl ay er st okenst opr oduc euni t s .

Pl ay er shav et oc apt ur e t hei ropponent s ' t ower sandr et ur nt het ower st ot hei rbas ewhi l ec ar ef ul l y def endi ngt hei rownt ower s .

At r oopc ont ai nsas i ngl eher oands omeuni t sasappendant s .

Eac hpl ay er has3t r oopsatt hebegi nni ng.

Cr eepspr ov i desex per i enc esands uppl i est ot hepl ay er , whi c hhas addedmor ec ompl ex i t yt ot hegame.

0 1

S t a r t i n gp o i n t /C r y s t a l Ev er yuni tc anber ec ov er edbys t andi ngc l os et ot hec r y s t al .

Twot ower sar et her et obet hel as tdef ens ei ft hec y s t al was underat t ac k.

0 2 H e r o sa n dt r o o p s Eac ht r oophasaher oands omeappendant s .

Onc et he her ohasbeenki l l ed, t heuni t si nt hes amet r oopwi l l be el i mi nat edf r om t hebat t l egr oundaswel l .

0 3

N e u t r a l t o we r Bys t andi ngundert het owerf oraf ews ec onds , pl ay er sc an t akec ont r ol oft het owert ot hei rown.

Ev er ymi nut e, t he owneroft het owerc anhar v es tt okensf r om i t .

Wi t ht hi s t okensathand, pl ay er sc anpr oduc emor euni t sorupdat e t heuni t ’ sat t r i but es .

Thes ef undament al c omponent smaket as kst hatpus ht hepl ay ert omake pr operc hoi c esanddec i s i onsi ndi ffer ents i t uat i ons .

Cr eepi ngi st heway t or ei nf or c ey ourt r oopsbyget t i ngex per i enc eands uppl i es .

Capt ur i ngt he t ower sgi v espl ay ert okenst oi nc r eas et henumberofuni t sorupdat et he at t r i but es .

Pl ay er sc onf r ontwi t heac hot herunt i l oneoft hem hasdes t r oy edt hei renemy ’ sc r y s t al .

0 4 N u e t r a l c r e e p s Ki l l i ngnuet r al c r eepsgi v esher oex per i enc es .

U XD E S I G NP R O C E S S

T a r g e tu s e r s

P a i n p o i n t

Dur i ngt hefi r s tdec adeof2000s , War c r af t3waspr ev ai l i ngal l ar oundt he wor l d.

Att het i me, manyt eenager si nChi nal ov edi tands pental otof t i meoni t .

Nov i c eandv et er anhav edi ffer ents t r at egi eswhent heyar ef ac i ngt ot he s amet as k.

Nor mal l y , ex per t s ’ ment al model i smor ec ompl exc ompar edt o whati ti si nt hebegi nner s ’ mi nd.

I nt hi sc as e, I hadt omakeanus er f r i endl yi nt er f ac esf orbot hoft hem.

Ast heyar eget t i ngel dder , t hi sgr oupofpeopl ehasbec omet hemai n c us t omer si nmobi l egamemar ket .

Pl ay i ngaRTSgameonapor t abl e dev i c ewi l l maket hem f eel nos t al gi c .

N o v i c e Har dt ol ear nandunder s t andt hebas i cgamemec hai ni c s .

Thegoal ofourpr oduc ti st oc r eat eapor t abl eRTSgamef ort hepeopl e whous edt opl ayRTSandl ov et oc ompet ewi t hot herpl ay er s .

Gett oomuc hnegi t i vi t i eswhenhavi ngoneononemat c hwi t hvet er ans .

E x p e r t Har dt odealwi t ht hemi c r omanagementonmobi l edevi c es .

Needc ompl exi t yt hatgi vest hem pl at f or mt os howofft hei rs ki l l s .

D e s i g nc h a n c e

D E S I G NP R O P O S A L Ev ent hr oughI di dnothav emuc ht i met odomas s i v er ear c hat t hebegi nni ng, butI s t i l l i ns i s t edoni mpl ement i nggener al UCD met hodst ofi ndoutt hekeyf eat ur esbef or eI i ni t i at edeac h des i gnas s i gnment .

I beganbyc r eat i ngfl owsandwi r ef r ames , mappi ngoutar easi n fi nedet ai l .

Thi sc l os eat t ent i ont oal l t hec omponent shel pedme t ot henmadekeydec i s i onsaboutbut t onpl ac ement , t y pogr aphyanddes i gnc ons i s t enc y .

I wasdel i ght edt ohav ehadt heoppor t uni t yt oc oor per at ewi t h anex per i enc edUI ar t i s tPar kYongwoo.

I wasi nc har geoft he UXdes i gni nt hepr oj ec t .

0 2

I N F O R MA T I O NA R C H I T E C T U R E

#L e v e l1

1 Mai nPag e

Thi si nf or mat i onar c hi t ec t ur es howshowt hegamei nt er f ac esar eor gni z edt os uppor t t heus abi i t yandďŹ ndabi l i t y .

#L e v e l2

#L e v e l3

2 Char act erAt t r i but e

2 WeaponandAr mour

2 Ski l landMag i c

2 Bar r ack

3 Char act erappear ence

3 Appear ence

3 Ski l lef f ect

3 Mi ni onAt t r i but es

3 Char act erat t r i but es

3 At t r i but es

3 Ski l lupdat e

3 Mi ni ont al ent s

3 Act i v es ki l l s

3 Rei nf or cement

3 Ski l ls el ect

3 Mi ni onpas i v es ki l l s

3 Pas s i v es ki l l s

3 Cr af t i ng

3 Mi ni onupdat e

2 Cr y s t al

#L e v e l1

1 Mai nPag e

#L e v e l2

2 WORL DMAP( PVE )

#L e v e l3

3 Mai nQues t

3 F as tGame

3 GameCont r ol

3 Si deQues t

3 Cus t om Game

3 Gr aphi cPr oper t y

3 Dung eonQues t

3 Obs er v at i on

3 Audi oPr oper t y

2 ARE NA( PVP)

2 USE RPROF I L E

2 GAMESE T T I NGS

C O MB A TS Y S T E M

N o t i f i c a t i o n

Mi n i ma p Themi ni mapr epr es ent st hegamemapona s mal l ers c al e.

I tdi s pl ay si nr eal t i met hel oc at i on ands t at usofbui l di ngs , her oesandc r eeps .

H e r os e l e c t

T o we r

Theav at ari c onsr epr es entt heher osandt he bl oodt heypos s es s .

Themar ksont heupperl ef t i neac hher oi c oni ndi c at eswhi c hat t ac kmode t heher ohas .

Formos tr i ght handus er s , t heyc ans el ec tt he t r oopsbyt appi ngt hi sgr oupofbut t ons .

Onc et hepl ay erhasc apt ur edat ower , t hi sHUD el ementwoul dappearont hes c r een.

Pl ay erc anus et okenst oupdat et het ower st o maket hem s t r onger .

U n i tO r d e r

Ma g i c sa n ds k i l s

Thes ebut t onsenabl espl ay ert omakeor der st o t heuni t .

Thepl ay erc andr agt hemagi cc ar dsanddr op t hem onc er t ai npos t i ont oc onj ur et hemagi c .

C r e a t eu n i t

C r y s t a l a n dt o k e n

Tapt hi sbut t onal l owspl ay ert omakemor euni t s f ort het r oop.

Thec r y s t al i ndi c at eshowmanyt okenst hepl ay er pos s es s .

C O MB A TS Y S T E M

dr aganddr op

doubl ec l i c k

P r o d u c emi n i o n

Mi n i o nu p d a t ep a g e Doubl ec l i c kt hemi ni oni c on,t hepl ay erc an opent hi spaget oupdat et hemi ni onat t r i but es andunl oc knewpas s i v es ki l l sf ort hemi ni ons .

C r y s t a l u p d a t ep a g e c l i c k

Thepl ay er sc anr ei nf or c et hec r y s t al bys pendi ngt het okenst heyhav ec ol l ec t ed.

C H A R A C T E RS Y S T E M

S K I L LA N DMA G I CS Y S T E M

B A R R A C KS Y S T E M

MI S S I O NS Y S T E M

A R E N AS Y S T E M

A R E N AS Y S T E M

WI R E F R A MEA N DP R O T O T Y P E S

Wi r e f r a me Wi r ef r amesandhi ghf edel i t ypr ot ot y peswer ec r eat ed, i tenabl edmet o s eehowc oher entandeas yt hemenus y s t em wast ous e.

I fy ouwantt os eemor ewi r ef r amesandpr ot ot y pest hatI hadmadedur i ng t hedes i gnpr oc es s .

Pl eas ev i s i tt hel i nksont heappendi xanddownl oad t hem f r om mynet di s c .

0 3 C O N C L U S I O N L ac ki ngpr operpr omot i on, t hegamef ai l edt obeaphenomenal pr oduc ti nChi nes emobi l egamemar ket .

Howev er , I washonor edt obet hepr i nc i pal UXdes i gneri nt hi s gamedev el opmentgr oup.

Wor ki ngc l os el ywi t hPar ky onghoo mademef eel happyt oo.

T H A N K S