I want to be a GUI designer- gamer usability and designer mission
•Als PPTX, PDF herunterladen•
0 gefällt mir•1,061 views
The document discusses the mission of GUI designers for SNS Gamer. It outlines some common usability principles for GUI design, such as making the interface self-evident or easy to understand, avoiding requiring users to think too much, and accounting for impatient users who click through without reading. It also covers some trends in UI art like texturizing and borderless designs. The presentation emphasizes testing interfaces directly rather than lengthy discussions in order to maintain creativity while ensuring usability.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie I want to be a GUI designer- gamer usability and designer mission
Ähnlich wie I want to be a GUI designer- gamer usability and designer mission (17)
Mehr von action.vn
Mehr von action.vn (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
I want to be a GUI designer- gamer usability and designer mission
- 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. Common usabilities Don’t make them think They’re always impatient
- 5. Common usabilities Don’t make them think! – Icon Identification – 5 fingers
- 6. Don’t make me think! Icon Identification
- 7. Don’t make me think! Icon Identification
- 8. Don’t make me think! Icon Identification
- 9. Don’t make me think! 5 fingers
- 10. Don’t make me think! 5 fingers
- 11. Don’t make me think! 5 fingers
- 12. Common usabilities They’re always impatient. – They don’t read, they CLICK
- 13. They’re always impatient They don’t read, they click What we think: let’s write some What a gamer thinks: across the great literature or at least as field with a race car and stop much as better where we find interesting
- 14. They’re always impatient They don’t read, they click
- 15. They’re always impatient They don’t read, they click
- 16. They’re always impatient They don’t read, they click
- 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. Testing or discussing UI Discussing: – Wasting time – Killing the creativity
- 23. Testing or discussing UI Test- comment- fix- test- comment- fix- test…
- 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
Hinweis der Redaktion
- 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….