Your SlideShare is downloading. ×
0
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Game interface design presentfinal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Game interface design presentfinal

654

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
654
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Chàomừngquívịvàcácbạn, rấtvuikhicácbạnthamdựbuổitrìnhbàycủatôivềchủđềgiaodiện game SNSTạisaotôiđặttựabàiphátbiểunàynhưvầy… UI hiệnvẫnchưađượcxemtrọngvàlàthànhphầnthứyếutrongthiếtkếđồhọa game, vớibài present củatôi, tôimuốnchocácbạnthấynhữngđiềulýthúkhithiếtkếgiaodiệncho game, đểtừđócácbạnthấyđólà 1 đammêđángđểtheođuổi.TôilàPhú, hiệnđangphụtráchmảng 2D art của GSS. Vàtôicónhữngđiềusẽ chia sẻnhưsau.
  • Hành vi thôngdụngcủa gamerXuhướng UI.Thử hay làtranhluậnvề UINội dung chỉngắngọnvậythôi, vàtôisẽchủyếunóivềnhữngtrảinghiệmbảnthântrongquátrìnhlàmvềnghiêncứuvề UI củamình.Chúng ta hãycùngbắtđầu…
  • Đầutiênchotôihỏi, cóbạnnàođãđọccuốn Don’t make me think củatácgiảstevekrugrồi… Chắccácbạncũngrútrađượcnhiềuđiềuchomình…Riêngtôi, tôicóthểtómgọnthành 2 điềutâmniệmkhithiếtkế UI, chắcsẽcónhiềubạnđồngtình. Vàsởdĩcó 2 điềulưu ý đóchínhlàxuấtpháttừtâmlýphổthôngcủa gamer… Vìvậyđâylàyêucầutiênquyếtchosựthànhcôngcủa UI, hơnnhiều so vớiyếutốmỹthuật.Vậyhành vi thôngthườngcủa gamer làgì
  • Đólà: Đừngđểhọphảiđauđầu.Và… họkhôngphảilàngườikiênnhẫnNghecóvẻnhưnhữngngườichơi game toànlàthứlườibiếng. Nhưngsựthật, nếu UI làmkhóhọ ở 2 điểmtrên, họsẽchẳngtàinàođihếthoặctậnhưởngtrọnvẹnnội dung của game cả. Vìvậyđólàmộtnhucầuchínhđáng…Chúng ta sẽđivàotừnghành vi một
  • Cónhiềuđiềucầnlưu ý đểlàmcho 1 UI khôngkhiếnngười ta đauđầu, vídụnhưtínhcôđọngcủatừngữ, sửdụngcácdạng UI chuẩn, sửdủng tooltip v..v.. NhữngđiềuđócóthểcácbạnđãbiếthếtCho nên ở đâytôichỉsẽnóivề 2 kinhnghiệmtựbảnthântôirútravàchorằngrấtcóích.Thứnhất: Nhậndiện IconThứ 2: Nguyêntắcbàntaynămngón.Chúng ta cùngđinào.
  • Nhậndiện icon làgì…Chúng ta cóxuhướnggộpchungnhữngsựvậthiệntượngtươngđồngnhauthành 1 nhóm… Vàtrongtrườnghợpsửdụng UI, cáimà gamer thườnggomlạinhấtchínhlà icon của game, nhữngthànhphầncóthểtươngtácđược. Khi gamer khôngcócơsởđểphânnhóm icon, họsẽdễdàngbịbốirối.2 giaodiện game chochúng ta 2 vídụvềđiềunày…. Đâylà 2 sảnphẩmcủa 2 studio thuộc VNG… Bêntaytrái, HàngRongvớichấtlượngđồhọarấttốt, tuynhiêngiaodiệncủanólà 1 câuchuyệnkhác. Hãynhìnlênhàng icon phíatrênsựkhácbiệtrõrệtcủanútbấm ô thoạilàmchotoànbộdãy icon trởnênhỗnloạn, việckosửdụng tooltip làmcho icon cònkhóhiểuhơn.Tìnhhìnhtươngtựtuycóphầnđỡhơn ở game my fish…
  • Vậychúng ta cónênlàmcho gamer dễthởkhông, tấtnhiênlànênrồi… Vàđiềunàythựchiệndễdànghơnchúng ta nghĩHãynhìn ở đây 2 vídụvềviệctạotínhnhậndiệncho Icon. Khôngquátốtnhưngcũnglàcâynhàlávườn.Ủnỉnbêntaytrái, các icon cóchungnhậndiệnkhicócùng format nằmtrênbảnggỗtròn hay cùngnằmtrênkhaygỗngang.Khuvườntrênmâythậmchítốthơn, các icon vớisựđồngdạngrấtcaovàthểhiệnchochuỗicáctínhnăngtươngđồng. Ngườichơichỉcần click vào 1-2 icon làcóthểhiểunhữngcáicònlại
  • Cóthểthấyrằng, những game đượcthiếtkếtốt, họsẽluôncố ý gomdùm gamer các icon vớiđặctínhchứcnăngtươngđồngnhauvềcùng 1 chỗ, vàcùngmộtkiểunhậndiện.Đồngdạng icon, sửdụng tooltip,vàbốtrícùngmộtkhuvựclànhững bướcđểtạođượctínhnhậndiệncho iconVàsựnhậndiệntheonhómnàycũnglàtiềnđềđểthựchiện 1 yêucầuquantrọnghơntrongthiếtkế UI, từkinhnghiệmcủamình, tôigọinólà…
  • … Nguyêntắcbàntaynămngón.Mộtcáchrấttựnhiênvàhiểnnhiên, mỗibàntaycó 5 ngóntay. Vàmộtđiềuhiểnnhiênkhác, con ngườichỉtiếpthuđượctốiđa (hếtsứccốgắng) 5 việcmớicùngmộtlúc. Con sốnàythườnglà 3-4.Gamer tiếpxúcvới game nóichungvàgiaodiệnnóichungcũngvậy, họsẽcảmthấyngộpnếuphảicùngmộtlúcnắmbắtnhiềuhơn 5 thông tin cùnglúc.HãylấyvídụtừỦnỈn… Hãychotôibiếtbạnsẽphânvùnggiaodiệnchínhnàytheo ý bạnnhưthếnào. Game phânvùngmainscreenrathành 6 mảnggiaodiệnchính, nóichocùngđiềunàydễgâybốirốichongườichơi, màđặcbiệtlàngườichơimớiVới my Fish, tìnhtrạngtươngtự, Icon cóvẻnhỏhơnnêndùsaocũngcònthấythoánghơn.Nhưngsựthậtcũngchẳnglàmdễsửdụnghơn.
  • Hiện nay, chúngtôiđangcốgắngthửnghiệmtinhgọngiaodiệntheohướngnàychocácsảnphẩmcủamình, vàtấtnhiênlàphảitheomộthìnhmẫuđiểnhìnhnàođó.TôiđangmuốnnóiđếnZyngavớinhững minh chứngchoviệchọđãlàmrấttốtviệcnày. Các game đềucốgắngbốcụcmainscreenvới con số 4 mảng. Đểđạtđượcđiềuđó, tấtnhiênhọchútrọngđếnnhữngthaotácvàthông tin thựcsựcầnthiết.
  • Ngườichơisẽkhôngcầnphảitốnnhiềubộnhớvàthờigianđểtìmhiểu UI màthayvàođólàthưởngthứcnội dung game củanhàpháttriển.Vàđócũnglàđiềumàchúng ta cũngphảihiểuvềtâmlý gamer. Họkhôngmuốntốnnhiềuthờigian… Hay nóicáchkhác…
  • …Họluônvộivã.Vìsao ư, vìtấtnhiênhọđangchơi game đểthưgiãn.. Vàhọmuốnđạtđượcđiềumìnhmuốnmộtcáchnhanhnhất… Cómộtvàiđiểmthỏamãnsựvộivãnày, vídụnhưgiảmthiểusốbướcthựchiệnmộttácvụnàođó, xemxétcáctrườnghợphoàntácvônghĩacho gamer, v..v. Nhưngtôimuốnnhấnmạnhđếnmộtđiểmquantrọnghơnmàchúng ta dễdàngquênđi.Đólà… Họthích click nhiềuhơnlàthíchđọc.Hãyxem qua mộtvídụtươngtựchứkhôngphảilà game đểhiểuhơnmộtchútvềvấnđềnày… Tôiđangnóiđếnthiếtkế web.
  • Bêntaytráilàtrang web màchúng ta thiếtkế.(1)Nhưngxuhướngchungthìngười ta chỉthấynhữnggìhọmuốntìm… Vàlướt qua nhữngthứcònlại. HãynhìnbêntayphảiđểthấysựthậtRấtdễhiểu… Điềutươngtựcũngxảyrađốivớigiaodiện game
  • Hãylấy 2 vídụcủa 2 game đểthấyrõhơn… VớiỦnỉn, nội dung cầnthamkhảorấtnhiềutrướckhingườichơitớiđượcnútthựchiện. Vôtìnhkhiếnngười ta lườibấmhoặcbấmmàhậmhựcCáchgiảiquyếtcủa my fish dễchịuhơnkhinútthựchiệnđặtngangvớinội dung, ngườichơikocầnphảilướt qua quánhiềuthông tin đểthựchiệnđiềumìnhmuốn, thậmchícònkocónútnhận quest. Nóichocùngthìcầngì confirm việcnhận quest?
  • Hãyluônnhớrằng, ngườichơitốnbaonhiêucôngsứcđểđếnđượcvớinútbấmthìhọcũngbịgiảmđibấynhiêusựhứngthúvớicôngviệcmìnhđangthựchiện. Cóthểthấyđólàthiếtkếchungcủagiaodiện game SNS khimànútbấmvànội dung luôncó 1 vịthếnganghàngvànútbấmbaogiờcũnglàmchodễnhậnrahơnVàđócũnglàđiềumàchúng ta luônluônphảihướngđến.
  • …hãyhướngsựchú ý củahọđếnvớicácnútbấm… Hãylàmchonónổilên, ngườichơi click càngnhiềuthìcàngcólợichochúng ta.Trênđâylàđôiđiều chia sẻvềhành vi ngườidùngtrongviệcsửdụng UI của SNS game.Chúng ta sẽđếnvớimộtphầnkháctrongbuổi chia sẻhôm nay, mộtphươngdiệnítkhô khan hơn, đólàvềmỹthuậtcho UI… Màcụthể…
  • … Làvềxuhướngtrongthểhiệnmỹthuậtcho UIThứnhấtxuhướngphủvậtliệu,Thứhaixuhướng borderless.Vậyxuhướngnàynghĩalàgì…
  • … TrướctiênlàPhủvậtliệulêngiaodiện…. nhìnchungđâylàxuhướngcủahơn 2 năm qua vớisựrađời ồ ạtcủacác game nuôitrồng… Thờikìcủacácgiaodiệnmangmàusắcgầngũivàcáchọatiếtvậtliệucóvẻđangrấtthịnh.
  • Vàthànhthậtmànói, nếucácbạnmuốnchọnmộtgiảiphápnhanhchóngvà an toàn, hãyápdụngphươngphápnàymộtcáchtốiđavìnóluônpháthuyhiệuquả, Giaodiệnđượctrauchuốtvềmặthọatiếtvàvậtliệuluônlàmtănggiátrịcủa game.Nhưngcácbạncũngcóthểthửđitheomộtxuhướngthiếtkếđanglớnmạnhlênvàcókhảnănglớnsẽlàxuhướngthiếtkếcủatươnglai.
  • ...ĐólàXu hướng thiết kế không đường viền… Chúng ta bắtgặptràolưunàytrongcácthiếtkếnộithấtchủnghĩatốigiản, hoặctrongcácthiếtkếthờitrangkhôngđườnglai…Nhưngcổxúymạnhmẽnhấtchínhlàcácsảnphẩmđiệntử… Chúng ta đangđónchàongàycàngnhiềunhữngthiếtbịđiệntửmangdángvẻhiệnđạivàsắcsảonày..
  • Vàxuhướng borderless cũngđã xuất hiện trong thiết kế UI và đưa lại những cảm nhận vô cùng tươi mới.Chưacónhiều game đitheotràolưunày, Tôicó ở đâychỉ 1 vídụkhôngbiếtvôtình hay cố ý nhưngrõràngcảmnhậnvềnósảngkhoáivàhiệnđạihơnnhữnggiaodiệnmàtôiđãtừngthựchiện . Chắcchắntrongthờigianngắnsắptới, UI cũngsẽkhôngđứngngoàixuhướngđó…Ngaybâygiờ, chúng ta cóthểbắttayvàođểthửnghiệmmộtphongcáchmớiđilàvừa.Cònbâygiờ, tôixinnóivớicácbạnđiềutâm can cuốicùngtrongbài present này, màtôi cam đoanrằngnhiềubạntrongkhánphòngnàysẽgậtđầutâmđắc.
  • Đólàvấnđềnênthửnghiệm hay nênbànluậnvề UI thìsẽhiệuquảhơn.Theo cácbạnthìsao..Lúctrước, giaodiệncủaỦnỈnđãphảimấthơn 6 thángđểhoànthànhchỉbởivìtranhcãiquánhiềuvềcáchsửdụngcủanó… Khiđangđượcthựchiện, các ý kiếnđónggópđếndồndậpvàgiaodiệnphảisửađisửalạikhôngbiếtbaonhiêulần… Đóthựcsựlàmộtsựđaukhổ, triệttiêumọi ý tưởngsángtạo.Rấtđơngiảnđểtránhkhỏiviệcnày… Lênkếhoạch chi tiếtcho UI ngaytừđầu. Tiếntrìnhchơi game giảđịnhcủangườichơilàgì, vàđiềuđógiúpíchvôcùngnhiềuđếnchuyệnsuônsẻcủathiếtkế UIVàthayvìcứngồimàtranhluậnthìchúng ta nêntiếnhànhmộtcáchkhoahọchơn..
  • … Đólàthửnghiệm UI:UI làmxong, đượcchomộtnhómdùngthử, nhận comment từphíangườidùng, phântíchvàsửalạinhững comment xấu, test lạilầnnữa, vàcứthếtiếpdiễn.Vớinhữngdựánmớiđangthựchiện, chúngtôiđangcốgắngápdụng qui trìnhnày, vàsựthậtthìnólàmchocôngviệccủachúngtôisuônsẻvàtốnítthờigianhơnnhiều.Vậythìsaubuổihôm nay, cácbạncóthểvềchỗlàmcủamìnhvànóivớingườisếp hay đilạiphíabànlàmviệccủabạnrằng: anhhãyđểemlàmxong UI vàchoanhthử, lúcđóanhcóthểgóp ý choemcũngđược…Chúccácbạn may mắn..
  • Tôiđãnóivớicácbạnvề….Sẽcòncóthêmnhiềuđiều chi tiếthơntôimuốn chia sẽchocácbạn, nhưngvớithờilượngcóhạn, tôinghĩmìnhsẽdànhviệcđóchomộtdịpkhác. Nhưcácbạnthấy, Giaodiệnkophảilàmộtcôngviệcđơngiảnvàchánchường, đólàmộtkhoahọccầncảsựtinhtế, guthẩmmỹvà logic, vànóẩnchứanhiềuđiềuchờđợichúng ta khámphá. Vìthếmỗingườitrongcácbạn, cóthểsẽvìđammê, cóthểvìcôngviệcchỉđịnh, nhưngkhithờicơđến, tôi tin rằngcácbạnsẽluônsẵnsàngđểnóirằng….
  • Transcript

    • 1. I want to be a GUI designer SNS Gamer usability and mission of the designers Presenter: Nguyễn Xuân Phú- 2D art team leader of GSS GUI: graphical user interface
    • 2. Content  Common usabilities  Trends of UI art.  Testing or discussing UI?
    • 3. Common usabilities  GUI have to be self-evident, which means gamers can get it on sight.  When GUI can’t be self-evident, let’s make it easy to understand.(explanatory)
    • 4.  Don’t make them think  They’re always impatient Common usabilities
    • 5.  Don’t make them think! – Icon Identification – 5 fingers Common usabilities
    • 6.  Don’t make me think! Icon Identification
    • 7.  Don’t make me think! Icon Identification
    • 8. Icon Identification  Don’t make me think!
    • 9.  Don’t make me think! 5 fingers
    • 10.  Don’t make me think! 5 fingers
    • 11. 5 fingers  Don’t make me think!
    • 12.  They’re always impatient. – They don’t read, they CLICK Common usabilities
    • 13. What we think: let’s write some great literature or at least as much as better  They’re always impatient What a gamer thinks: across the field with a race car and stop where we find interesting They don’t read, they click
    • 14.  They’re always impatient They don’t read, they click
    • 15. They don’t read, they click  They’re always impatient
    • 16.  They don’t read, they click  They’re always impatient
    • 17. Trends of UI Art  Texturizing  Borderless
    • 18.  Trends of UI art Texturizing
    • 19.  Trends of UI art Texturizing
    • 20.  Trends of UI art Borderless
    • 21.  Trends of UI art Borderless
    • 22.  Discussing: – Wasting time – Killing the creativity Testing or discussing UI
    • 23.  Test- comment- fix- test- comment- fix- test… Testing or discussing UI
    • 24. Conclusion - Icon Identification - 5 fingers - They don’t read, they click - Texturizing - Borderless - Testing UI, not discussing.
    • 25. I want to be a GUI designer
    • 26. Q&A

    ×