Page 1

G A MEU XD E S I G N

P O R T F O L I O

H A N X I N G MO U


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


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. Thege nr eo ft hi sgamei sWux i a,t r adi t i o nal l yaf o r mo fChi ne s ef ant as y l 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

关于

天下是网易三大游戏品牌之一,我在1 7 年初接手天下手游界面设计团队,负责游戏常规活动界面 的界面的设计工作和项目对接。此外,做为主设计师和小组负责人,除了从交互的角度优化改进 现有界面的体验性问题,我还向团队提供富有创意和想法的前期界面概念,提升了游戏付费内容 的销量,进而从商业、交互和视觉等多方面提升团队设计价值。


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

由于交互设计师需要交互设计和界面工程编辑两部分工作,如何处理好工作优先级便成为重中之 重。在天下手游U X 小组中,交互设计师在确认需求后,会根据需求在游戏引擎中制作临时版本的 U I 工程,并由程序进行临时版本开发。与此同时,交互设计师会把原型图递交给视觉设计师,进 行视觉设计,从而保证功能和视觉并行开发。最大限度地提升团队效率。


0 2 UXDESI GN

UX设计

在天下手游项目组中,我的职责有所变化。除了项目管理和工作汇报,设计工作内容也有所变化。 设计内容包含常规的界面的交互流程优化,着重提升游戏中玩法的社交性和付费内容的创新设计。 任职期间,完成了游戏内好友圈和聊天框等核心社交系统,以及灵兽培养、召唤兽培养、装备培养 等核心养成系统的迭代。同时,采用商城b a n n e r 、交互性活动玩法等内容,拉动游戏中功能性和装 饰性道具的消费量。


UXI t e r a t i on 系统迭代(灵兽系统)

灵兽主页

1

灵兽培养(成长)

灵兽培养(经验)

迭代思路

做为团队中的主交互设计师,我从可用性和 交互的角度对游戏的养成系统进行了一些优 化。其中,交互迭代的主要方向是降低用户 认知成本,减少可用性问题。而随着游戏中 后期信息量骤增,视觉也进行了扁平化的处 理,降低了立体绘制控件的数量,同时调整 了文字颜色、字号和间距,提升了玩家的阅 读体验。

灵兽皮肤

灵兽星盘

灵兽皮肤(列表拓展)

星盘属性


迭代方向

灵兽培养(喜悦点)

灵兽培养(灵气)

原版灵兽系统功能较多,对于新玩家而言不够友好。功能分布的 相关性较弱,这样玩家在培养时,就会缺乏方向,从而使资源浪 费。 新版界面重新梳理了功能的相关性和信息层级,让玩家在每个层 级都知道该层级所包含的具体功能和内在逻辑。

原型制作

灵兽皮肤(属性查看)

灵兽皮肤(属性查看)

在功能梳理完成后,我们制作了高保真原型,将界面跳转逻辑呈 现给需求方,并按照主要用例的方法检查方案的易用性,同时采 用视觉流的方法检查独立界面的易读性。同时我们将视觉进行了 扁平化的处理,让玩家在重度信息界面中,保持阅读轻松感。

迭代结果 迭代后的界面,玩法和信息被重新分类,层级被重新梳理,玩家 更容易理解游戏玩法,同时补充了边界状态的信息显示,让玩家 了解游戏规则。提升了游戏系统的可用性。 星辉属性

星点属性


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

朋友圈迭代

活动入口迭代

新版朋友圈将社交的优先级提前,同时增加了话题b a n n e r 位置,玩家可以点击 b a n n e r 参与话题讨论,为玩家之间的交流提供话题,同时结合游戏玩法,强化 社交感。

在活动系统中,增加b a n n e r 位,和外部营销联动,在一定周期内加强玩法和活 动的推销密度。同时b a n n e r 界面中增加阶段性奖励,让玩家持续在线,拉动 D A U 。


Eve ntde s i gn 活动设计

愚人节活动草图绘制及配色建议(本人绘制)

面具晃动,开始整蛊任务

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

活动设计是稳定期项目的主要界面产出内容,在过去的一年半中,我负责了大 部分游戏活动的规划和设计。在需求开始前,我会针对每个活动进行主题构思 。并绘制出简单的界面草图和概念说明,交付给设计师进行视觉设计。

愚人节活动任务方案说明(本人绘制)


Eve ntde s i gn 活动设计

中春节入口方案

冬至活动玩法方案


Eve ntde s i gn 活动设计 2

视觉设计及代表产出

在需求确认后,通常我会和视觉设计师进行沟通,并结合游戏引擎(C o c o s 2 D ) 的特性,提出 合理的动画方案,从而完成最终设计的实现。


0 3 CONCLUSI ON

总结

任职天下手游的日子里,我对国风M M O 游戏的了解进一步加深。同时个人的设计能力得到了较为 全面的提升。除此之外,也在任务排期和分配,人员管理上积累了大量经验。


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

D e s i g nc h a n c e

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.

Cr eat eus er f r i endl yi nt er f ac esf orf as t pac edgame.

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 .

Letpeopl eenj oyRTSgamewheneverandwher evert heywant .


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

Profile for Xingmou Han

Han Xingmou Portfolio 2019  

Han Xingmou Portfolio 2019  

Advertisement