Slide thiết kế game chương 8 hub and icon design

.c
om

cu

u

du
o

ng

th

an

co

ng

HUD AND ICON DESIGN

1
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

HEADS UP

2
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

HEADS UP

3
CuuDuongThanCong.com

/>

5.
6.

ng

co

cu

u

7.

an

4.

th

3.

ng

2.

Health bar/lives
Targeting reticule
Ammunition gauge
Inventory
Score/experience
Radar/map
Context-sensitive prompt

du
o

1.

.c
om

HEADS UP

4
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

HEALTH BAR

5
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

TARGETING RETICULE

6
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

AMMO GAUGE

7
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

INVENTORY

8
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

SCORE/EXPERIENCE

9
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

POSITIVE MESSAGING

10
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

RADAR/MAP

11
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

CONTEXT-SENSITIVE PROMPTS

12
CuuDuongThanCong.com

/>

.c
om

ICON
 Pick the right image for your icon.

ng

 Make sure the image that you use is current and

co

an

cu



u



du
o

ng



th



accurate.
Color-code your icons.
If color isn’t enough, use shapes as a
differentiator.
Try to avoid text in your icons.
If you are going to use text (like a word) as an
icon, make sure it is legible and looks more like a
button than straight text.
Never, ever combine several visual elements.


13

CuuDuongThanCong.com

/>

.c
om

ICON
 Surround your icon with a strong black or white



ng

du
o

u



cu



th

an



co

ng

outline to make it “pop” off the background or give
it a soft surrounding glow or a drop shadow.
Look at all your icons together to make sure you
aren’t creating any similar-looking ones.
A good trick is to have text of an item’s name
appear if players move their cursor over the icon.
Ensure artists create the icons.
Learn from the experts.

14
CuuDuongThanCong.com

/>

.c
om

ICON
players select the icon, make it do
something.
 The most important button on the interface should
be the biggest.
 Make the most-used buttons easy to reach from
the middle of the screen or wherever the players’
cursor will spend the most time.

 Make your icons a little “sticky” so the cursor will
easily gravitate toward them.

cu

u

du
o

ng

th

an

co

ng

 When

15
CuuDuongThanCong.com

/>

.c
om

CREATING ICONS FOR
MOBILE GAMES
 Clarity

ng

 Iconic design

an

cu

u

du
o

ng

th

 No text or numbers

co

 Color

16
CuuDuongThanCong.com

/>

.c
om

CREATING ICONS FOR
MOBILE GAMES
 Clarity

ng

 Iconic design

an

cu

u

du
o

ng

th

 No text or numbers

co

 Color

17
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

KYSS

18

CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

WHERE TO STICK HUDS

19
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

WHERE TO STICK HUDS

20
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

WHERE TO STICK HUDS

21
CuuDuongThanCong.com

/>

cu

u

du

o

ng

th

an

co

ng

.c
om

WHERE TO STICK HUDS

22
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

START SCREEN

23
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

PAUSE SCREEN

24
CuuDuongThanCong.com

/>

cu

u

du
o

ng

th

an

co

ng

.c
om

NOW LOADING…

25
CuuDuongThanCong.com

/>