
English: 
[Chill intro music from Persona 5]
Second verse, same as the first!
These are 6 more great and...not...great...examples
of graphic design in games.
Just as a reminder: while graphic design might
seem like the same thing as art it’s really
not.
Graphic design is visual communication.
It’s things like menus, UI, camera work,
color choice, font choice, animation, character
design.
The presentation of information.
Good graphic design is a mix of usability
and style that helps you know what you need
to know.
Bad graphic design is anything else - style
at odds with usability, usability without

Chinese: 
设计红黑榜　第2辑
第2辑　同第1辑
今天将列举6个游戏图形设计的范例和反例
再强调一次　图形设计有点像艺术　实则不同
图形设计是视觉交流
例如菜单、UI、摄影机、色彩、字体、动画、人设
信息的展示
优秀的图形设计是实用化和风格化的结合
它有助于你的理解
劣质的图形设计就是其它一切
有风格　不实用
实用　没风格
再差一点　就是两者皆无
让玩家难以沉浸

English: 
style, or if you’re really unlucky, both
- making it harder to melt into a game.
Good Design
[Splatoon music]
Splatoon is one of the most inventive shooters
in years and one of the major keys to its
success is how well the designers at Nintendo
thought through the game’s use of color
contrast.
Splatoon relies on color contrast to guide
players to the game's primary objective - paint
the most terrain in your team’s color.
As the match plays out your minimap will update
in real time, highlighting where your team
is, where your opponents are fighting back,
and what still needs to be covered.
Splatoon uses a few tricks from color theory
to make sure you can know all of that information
with just a quick glance of the map.
The key is in the color combinations of the
ink.
If you're designing a color scheme there’s
one thing that you generally want to avoid:
color vibration.

Chinese: 
设计红榜
《Splatoon》是近几年最创新的射击游戏
它成功的重要因素之一是
任天堂的设计师对色彩对比的深刻理解
《Splatoon》利用色彩对比告诉玩家游戏的中心——
用本队的颜色涂满地图
比赛开始后
小地图会实时更新
显示你队友和敌方的位置
以及涂地的情况
《Splatoon》借助色彩理论　让你瞥一眼就能了解战斗情况
其关键在于颜色的组合
在选择配色时
有一件事你必须规避
色彩颤动

Chinese: 
如果亮度一样的两个颜色毗邻
颜色就会在边缘颤动或模糊
在选择对比配色时　这是普遍的问题
像是蓝-橘、红-绿、黄-紫
色彩颤动是很严重的
会引起不适
色盲人群甚至会无法分辨两种颜色
《Splatoon》中　两边的油漆总是紧邻的
这是由游戏决定的
无法避免
所以《Splatoon》如何避免色彩颤动呢？
《Splatoon》中　强对比的颜色必须是不同色调和明度
来看一下游戏去掉饱和度的样子
你依旧可以区分两种墨水
因为明度不同
有的组合对比度强一些
但是对比度都是足够的
高对比让你快速了解战斗进程

English: 
If there are 2 adjacent colors that are similar
in brightness, the colors can vibrate and
blur at the edges.
This can be a common problem with true complementary
color schemes like blue-orange, red-green,
and yellow-purple.
Color vibration is intense, uncomfortable
to look at, and even sometimes causing colorblind
people to have trouble telling the two hues
apart.
In Splatoon the two paint colors will be next
to each other all the time, just by the nature
of the game.
It's unavoidable.
So how does Splatoon avoid color vibration?
For the colors to have a strong contrast,
the color combinations in Splatoon must be
both different hues and values.
Let’s see what happens if I take away the
game’s saturation.
You can still tell the difference between
the two kinds of ink based on the difference
in the color’s value.
Some combinations contrast more than others,
but they all contrast enough to be effective.
The highly contrasting colors makes it easy
to see your team's progress, and even helps

Chinese: 
甚至减少你语音沟通的需要
未喷涂地面的颜色选择也很谨慎
以配合高对比的墨水颜色
淡色、中性的地面　对比明亮、荧光的墨水
清楚表明是否被喷涂
《Splatoon》在色彩选择上思考了很多
如何影响战局
如何融入世界设定
设计黑榜
前方注意！　程序员菜单来袭！
《八咫乌：灾变攻击》
人设好看　也很实用
但这菜单…
亲娘啊
行吧　来快速指出它的设计缺陷
预备　走
“街机”“街机”
“按键设计”放在“游戏选项”边上
语法错误

English: 
eliminate some of the need for voice chat.
Even the color palette of the unpainted map
was designed carefully to work with the strong
palette of the ink colors.
The more washed out and neutral color palette
of the terrain contrast against the reflective
and neon colored ink and makes it obvious
what is and isn’t painted.
It’s clear that a lot of thought went into
the design of Splatoon’s color palette,
how it impacts the moment to moment gameplay,
and how it fits into the world’s style.
Bad Design
Behold!
Programmer menus!
Yatagarasu: Attack on Cataclysm.
It’s got some nice character portraits and
it is functional.
But these menus?
Hoo boy.
Alright.
Rapid fire graphic design problems.
READY GO!
Arcade arcade.
Key config should just be in options
Grammar check your menus.

Chinese: 
主菜单没有其它构成
没有方框或额外元素支撑
角色选择页面
哦　这没对齐
那也没对齐
还想打空格弥补
ThisCh？
和这些漂亮的人设放在一起　本作感觉和剽窃品一样
战士的图片都被数字化　看起来《真人快打1》
战士的名字盖住了其它文字
这个神秘污垢是什么
7种字体
这个气泡太长了
电视没墨了
这些打击特效从哪偷来的？
K　逗号　O
K逗号O
啥？
这可是2015年的游戏
找个学设计的吧
设计红榜

English: 
This main menu has no composition, it’s
all just centered type with no framing or
additional elements to support it.
In the character select, all of this text
is misaligned.
All of THIS text is misaligned, AND they tried
adding spaces to cover it up.
ThisCh
These gorgeous character portraits make the
whole thing look like a bootleg copy of a
different fighting game.
Announcers are digitized photos that look
like Mortal Kombat 1.
Announcer’s names overlap other pieces of
text.
What is this mystery smudge?
7 fonts
[popping noises]
This speech bubble doesn’t know when to
stop.
[sliding noise]
The TV ran out of toner.
These hit sparks look… stolen?
K comma O. K COMMA O. WHAT?!
This was released in 2015.
Hire a graphic designer.
Good Design

Chinese: 
如果你看过我其它视频
就知道我喜欢动感的字体排印
《枪弹辩驳》　尤其是《新枪弹辩驳V3》
有最动感的字体排印
《枪弹辩驳》是视觉小说系列
类似《极限脱出》和《逆转裁判》
16位超一流高中生被迫参加一场屠杀游戏
出去的唯一办法就是逃过审判　否则将死于他杀
就是高校动漫版的饥饿游戏
满是黑色幽默、神秘事件
以及令人印象深刻的角色刻画
《枪弹辩驳》的演出非常棒
尤其是作为一款视觉小说
角色纸片和物体纸片的透视不按常规走

English: 
[Music from Danganronpa]
You know if you've seen any of my other videos,
that I love me some kinetic typography.
And Danganronpa, especially Danganronpa V3
has some of the most beautiful kinetic typography
out there.
In a nutshell, Danganronpa is a visual novel
series similar to Zero Escape and Phoenix
Wright: Ace Attorney.
16 hyper talented high school students are
forced to join a killing game where the only
way to escape is to get away with murder,
or die trying.
It's high school anime Hunger Games, soaked
in a marinade of gallows humor, outlandish
mysteries, and surprisingly deep characterization.
Danganronpa’s presentation is striking,
especially for a visual novel.
The cardboard cutout character sprites and
objects with deliberately incorrect perspective

Chinese: 
让游戏成为了一本立体书
但是最精彩的还是学级审判
幸存的学生在这里讨论谁是凶手
一旦失败　凶手会逃脱　其余学生将被执行死刑
学级审判提出了一个设计问题：
你怎么把辩论做成游戏
《枪弹辩驳》的答案是“不停歇辩论”
辩论中　角色会一个接一个发言
发表他们的证词和想法
全都以动感的字体排印展现
玩家需要捋清楚讨论的思路
然后“击碎”某人的证词疑点
使用的是证物或言弹
以此让辩论继续

English: 
gives the game a distinct pop-up book style
but where the presentation TRULY shines is
in the class trial segments.
[Music from Danganronpa]
Here, the surviving students must debate who
among them is the murderer.
Fail, and the murderer gets away while the
innocent students are executed.
This class trial concept presents a design
challenge: How do you turn a group discussion
into gameplay?
Danganronpa’s answer is what they call the
“Non-stop Debate”.
During these debates, characters will speak
one after the other, providing their testimony
and arguments for what happened, all of which
is presented in kinetic typography.
It’s up to the player to see through the
chaos of the debate and literally shoot through
the weaknesses in your opponent’s arguments
with your own pieces of evidence or ‘truth
bullets’ in order to move the conversation
forward.

English: 
Think Phoenix Wright mixed with a light-gun
game like House of the Dead.
This whole series has some great presentation,
but V3 shows players this series' style at
its absolute best.
I love the opening of every non-stop debate.
The camera spins around everyone as your ‘truth
bullets’ load up, perfectly setting the
stage.
From there it jumps right into the discussion.
Type comes in from all directions as characters
make their statements.
The type itself is simple, bold and beautiful,
and is loaded with personality through composition
and animation.
Words will intersect, overlap, and fly across
the screen with key words being highlighted
to help narrow down the number of options
the player must consider.
This was all present in the previous games,
but V3 brings this idea further with different
variations of the non-stop debate including
the even more chaotic panic debates where

Chinese: 
想象一下《逆转裁判》和《死亡之屋》的混合体
系列的演出都非常出色
但是《V3》无疑是最优秀的
我很喜欢审判的开场
摄影机扫过每个人　你的言弹也上膛了
完美的舞台设置
之后讨论开始
角色各抒己见　文字不停浮现
文字非常简单、醒目、漂亮
结合排版和动画　赋予了文字性格
文字会交叉、重叠、飞跃　关键词会高亮
以缩小玩家的选择范围
这在前作中都有表现
但是《V3》通过各种审判　将这一创意发扬光大
包括多个论点的混乱辩论

English: 
multiple arguments happen simultaneously,
1 on 1 debates where you refute your opponent
by carefully cutting through their words,
and the splitting scrum debate where you match
the arguments of the opposing sides.
The composition in the scrum debate where
the cast faces off against each other in this
profile shot just looks incredibly cool.
Every version of the non-stop debate revolves
around the same core challenge of just finding
the heart of the problem and the typography
plays well into that.
It’s chaotic, but it’s not overwhelming,
and it matches thematically with the high
stakes of the death game premise.
Bad Design
[Music from Final Fantasy VI]
It can be easy to forget that Final Fantasy
VI was created for 25 year old hardware.
In spite of the limitations of the SNES, FFVI
was extremely atmospheric for its time.
The stormy title card.

Chinese: 
拆解队友谎言的1对1辩论
以及与对面论点相反的并排辩论
双方面对面的并排辩论的构成非常的炫酷
每场辩论的核心挑战都是
找到问题的核心
字体排印完美地与其配合
有点混乱　但不会让人晕头转向
在主题上符合死亡游戏的高风险性
设计黑榜
很难想象《FF6》是一款在25年前的硬件上的游戏
尽管 SNES 的各种机能缺陷
《FF6》的表现依然出色
标题画面的风暴

Chinese: 
使用 Mode 7 实现的魔导装甲行走在雪地的开场
头目战中间穿插的搞笑过场
歌剧片段
《FF6》活用 16-bit 的限制　创作出它自己的风格
精灵图非常漂亮
图形设计就差强人意了
至少能用
然后是2016年复刻版
PC上的《FF6》可以说是最丑的复刻之一
本就粗糙的界面　复刻得更丑了
ATB 选项怪异地从底下飘上来
本用于移动端的设计让 PC 玩家苦不堪言
这些巨大的按键没有比原版传达更多的信息
这些过于简单的字体排印毫无特色可言

English: 
The use of Mode 7 to create that somber opening
of the Magitek armor trekking through the
snowfield.
The charming goofy cutscenes that would play
in the middle of boss fights,.
The opera scene.
FFVI embraced its 16-bit limitations in ways
that created its own personal style.
Its sprite work is beautiful and the graphic
design, while not exactly a looker, did its
job.
Now enter the 2016 remaster.
FFVI on PC is one of the worst looking remasters
PERIOD.
They took a rough looking interface and made
it even uglier.
The ATB bars are now bizarrely shown through
the menu panning up from the bottom.
Design decisions made to work with a mobile
screen kill the experience on the PC, like
these ginormous buttons that show less information
on the screen than in the original.
The overly clean and basic looking typography
has no personality or tone, sticking out like

Chinese: 
对比游戏的 16-bit 风格显得太突兀
本地化更糟
剧本越来越遭
连标题画面也缩水
你瞧瞧
这什么渐变　演出呢
动画呢　Logo 怎么出现的
复刻反而让它身价下跌
比起复刻　不如说是盗版
太可悲了
《FF6》这么经典　值得好好复刻
吸引新玩家来尝试这款佳作
设计红榜
从一开始　《小小大星球》就一直在给玩家强调创新
它的技巧是如何让玩家使用手柄方便地操作各种工具
就是“嘭现菜单”
嘭现菜单是你主要的创作工具

English: 
a sore thumb against what's left of the game's
16-bit style.
Even the localization got worse.
The script got wordier without getting better.
Even the title screen was butchered.
Look at this!
What’s this gradient?
Where’s the drama?
There’s no animation.
The logo just appears.
The work put into the game makes it look cheaper,
more like a ROM hack than a remastering, and
it’s really tragic.
FF6 is an all-time classic that deserves a
great remaster to introduce a new audience
to this beautiful game.
Good Design
[Music from LittleBigPlanet]
From the beginning, Little Big Planet has
always been about the creativity of its players.
Its secret strength is how it makes a large
and complicated toolset easy to use with a
console controller, and it does all this with
its ‘popit menu.’

Chinese: 
用于换装、装饰　还有关卡创作
《小小大星球》有大量可供选择的选项
数以百计的服装、饰品、贴纸、关卡地形、逻辑工具
电影工具、材料　以及其它
从大量的选项中选择本来是很困难的
但是白色的动画图标和整洁的文字　让嘭现菜单很有活力、结构整齐、方便查找
物品都按分类放在网格中　一切都恰到好处
材料、饰品、贴纸、服装、玩法道具
都有自己的分类　用肩键便可快速选择
你可以折叠分类　把常用的留下
找到你想要的东西很简单
所有关卡创作、装饰、编辑都需要嘭现光标

English: 
The popit menu is your main creation tool,
used for things like character customization,
decoration and of course, making levels.
Little Big Planet has an extremely large amount
of options to choose from - hundreds of costume
pieces, decorations, stickers, level geometry,
logic tools, cinematic tools, materials, and
so on.
It could have been a huge pain to sort through
all of your options but the popit menus are
energetic, well organized and easy to navigate
with simple white animated iconography and
clean typography.
Objects are placed in a grid structure and
are sorted by category and nothing feels out
of place.
Materials, decorations, stickers, costumes,
and gameplay objects are all given their own
section that you can flip through with the
shoulder buttons.
You can hide entire sections quickly, and
get your more commonly used items in one place,
so finding and sorting what you need is super
easy.
All level creation, decoration, and editing
is done with the popit’s cursor.

Chinese: 
选择、调整大小、旋转、移动　然后放置
只需一个按键就可撤销或重做
简化操作　让玩家专注于关卡创作
而不是和选项斤斤计较
嘭现菜单在多人模式下也表现出色
每个玩家可以独立操作自己的嘭现菜单
嘭现菜单会显示其它玩家的行动
让合作更加容易
光标和角色有连线　方便分辨哪个是谁的光标
清楚谁在干什么
《小小大星球》的开发者解决了关卡创作上的难题
其它游戏面对这难题都无从下手
让操作更加流畅　且没有牺牲玩家的创作自由
设计黑榜
又是老面孔
《马力欧派对8…
不对　是《天生战狂》

English: 
Pick your object, resize, rotate and move
it to where you want, and then just place
it down.
And you can even undo or redo changes with
one button press.
Making the common things easy lets you pour
more time into the creative side of level
design, instead of wrestling with your options.
The Popit also has some really smart decisions
built in for multiplayer.
Each player can use their own popit menus
without disrupting each other.
The popit also shows you what other players
are doing, which lets you work together more
easily.
Keeping track of your cursor is easy as the
cursor itself has a string attached to your
character, which lets you know who is building
what.
It's amazing how the developers of Little
Big Planet have taken level creation, something
that drags down dozens of games under the
weight of its options, and makes it so seamless
and easy without sacrificing the creative
freedom of its players.
Bad Design
Here we go again!
Mario Party eiggg… yeah no it’s Battleborn.

English: 
There is a lot to nitpick here but let’s
zero in on this.
Battleborn has a problem with focus and how
it directs the attention of its players.
Its UI elements are all very flashy, and there
are a billion of them.
Battleborn is a busy looking game to begin
with - It has MOBA-style characters with crazy
special attacks and tons of particle effects.
Having the UI scream for attention on top
of all of that is just a bad choice.
For this kind of multiplayer MOBA/shooter
hybrid the players attention needs to be on
the action of the game, not the framing around
it.
Battleborn’s contemporaries like Overwatch
and League of Legends understand this.
They have stylish UIs, but the events within
the game are still the most important component
of the visual design.
In the UI for Battleborn, every element tries
to grab your attention by being as bold, vibrant
and animated as possible.

Chinese: 
有许多地方该批评
我们先集中说一点
《天生战狂》不懂得焦点
以及焦点如何指导玩家的注意力
它的 UI 元素都非常艳丽
而且元素数量庞大
《天生战狂》是一个难以让人专注的游戏
拥有炸裂特技的 MOBA 风格角色
以及各种粒子特效
让 UI 在这些面前喧宾夺主可不是好主意
对于这种多人MOBA/射击结合的游戏
玩家的注意力需要集中在游戏的动作上
而且不是条条框框
《守望先锋》和《英雄联盟》明白这个道理
他们的 UI 也风格化
但是游戏的事件才是视觉设计最重要的部分
《天生战狂》的 UI 中
所有元素都试图争抢你的注意力
各种醒目、鲜艳、动画化

English: 
During big fights, your screen will be flooded
in particle effects, auras, light boxes, damage
numbers, flashing indicators, cooldown indicators,
shield and health vignetting, player outlines,
and status icons.
Every time you get a kill, assist, or complete
an objective big or small, a fancy little
animation will play in the upper left corner.
All of these UI indicators pop off constantly,
and they cover a big chunk of the screen every
time they play.
Battleborn’s UI is so over the top that
it starts to look like one of those fake games
built for a TV show.
Good design is often an exercise in restraint
- just because you CAN design an element in
a flashy way, doesn’t always mean you should.
If there’s gonna be an animation for completing
an objective, it needs to be fast and out
of the way.
Important icons shouldn’t have to compete
for your attention with less important ones.

Chinese: 
在激战中　你的屏幕充满了粒子特效
光环、光罩、伤害值、闪烁指示、冷却指示
护盾和血量装饰、玩家轮廓　以及状态图标
每当你杀敌、治疗、完成或大或小的目标
左上角就会播放一段华丽的小动画
各种 UI 指示频繁出现
每次出现都会占好大一块屏幕
《天生战狂》的 UI 太喧宾夺主了
不知道的人以为在看娱乐节目
好设计通常都会克制
你可以设计出各种花样　不代表你应该这么做
如果完成目标需要一段动画
让它短一点　不要挡视线
主要焦点不应该费力去和次要焦点争夺玩家注意
每个元素都应该和其它元素相配合

English: 
Each element must harmonize with the rest
of the experience.
Your UI should be a symphony, not a shouting
match.
Good graphic design is not easy to make, but
understanding what goes into making it will
let you appreciate their work just a little
more.
[Chill vibes outro music from Borderlands
2]

Chinese: 
UI 应该是交响乐
而不是大叫比赛
优秀的图形设计并不简单
但是理解它的设计原则　能让你更好地欣赏它
