
Chinese: 
设计红黑榜：图形设计范例
上个月我一直在玩《女神异闻录5》
让我印象最深刻的地方
就是它优秀的 UI　是我前所未见的
额滴神啊
太动感了
太顺滑了
太时尚了
华丽到家
角色直接在获胜界面里奔跑
酷毙了
不好意思
所以
借着《P5》发售
我想要盘点一些图形设计案例
广义上来说
图形设计是视觉交流

English: 
So, last month Persona 5 pretty much consumed
my life, and if I had just one takeaway, it
would be that it has the SLICKEST UI I’VE
EVER SEEN!
*Persona 5 music*
MY GOD!
IT’S SO DYNAMIC!
SO SMOOTH!
SO STYLISH! IT’S GORGEOUS!
THE CHARACTER IS JUST RUNNING THROUGH THE
VICTORY SCREEN!
THAT IS SO COOL!
Sorry.
So in honor of Persona 5, I just wanna talk
about some graphic design.
To put it broadly, Graphic Design is visual
communication.

Chinese: 
放在游戏中　是菜单、UI、摄像机、配色
字体、动画、角色设计
就是你传递信息的方式
图形设计和艺术有些相似
但图形设计不光是美学
好的图形设计就像是个好的翻译
它可以无缝地、高雅地和玩家交流
令你更容易沉浸在游戏中
坏的图形设计就像是坏的翻译
是种阻碍
让玩家难以沉浸
掩盖游戏的闪光点
我将会陈述一些好的和…额…烂的图形设计
在我们开始之前　先说一些规定
这些例子是从风格和实用性两个角度考虑的
排序不分先后
想要评价谁是最好的图形设计
基本是不可能的
除非是《P5》

English: 
Applied to games it’s your menus, UI, camera
work, color choice, font choice, animation,
character design, your presentation of information.
There is a lot of overlap between graphic
design and art but graphic design is about
more than aesthetics.
Good graphic design in a game is like a good
translator where it seamlessly and stylishly
communicates to its players and makes immersing
yourself in a game a little bit easier.
Bad graphic design is like a bad translation
- an obstacle, making it more of a chore to
get into and taking some of the shine off
a game.
I’m going to highlight some great and..
well.. terrible graphic design in games.
But before we dive in, here are some rules:
These examples are chosen based on a combination
of style and practicality in their design.
These aren’t ranked since trying to decide
what is “THE BEST GRAPHIC DESIGN” is... well impossible…
(unless it’s Persona 5)…

English: 
If there is an example that you are fond of
that doesn’t make it here, post it in the
comments.
I’ll probably do another one of these so
it may show up there.
Anyway, first up - a masterclass in communicating
game mechanics through visuals.
Good Design
*Mark of the Ninja music*
One of the biggest challenges in many stealth
games is a lack of clarity.
Too often whether you can be seen or heard
by an enemy is a mystery.
It can lead to some frustrating trial and
error gameplay.
A good stealth game is like a good puzzle
game - they work best when you can see all
the pieces in front of you, just waiting to
be solved.
Mark of the Ninja is a game with some very
intuitive UI and visual cues to tell the player
everything they need to know so they can confidently
plan out their moves.
In Mark of the Ninja, visibility is treated
as a binary system.

Chinese: 
如果还有我没列出来的例子
请在评论区补充
我或许会再做一期　说不定会用上
开始吧
首先是表述游戏机制的大师级设计
设计红榜
许多潜行游戏的缺点是没有明确性
很多时候你不知道自己是否会被敌人听见或看见
就会出现一些恼人的体验和失误
好的潜行游戏就像是好的解谜游戏
只有看见所有谜题碎片时　才是最佳状态
谜题等着你解决
《忍者之印》有非常直观的 UI 和视觉提示
告诉玩家需要的一切　让玩家无所顾忌地展开行动
《忍者之印》中　视野是二元系统

English: 
You are either hidden in shadow or exposed
in light.
Characters and objects in shadow are nicely
defined by white outlines and are fully colored
when they’re in the light.
Even your own visibility is smartly indicated
by subtle changes in lighting and blurring
effects.
Any area blocked by a wall is darker until
it’s within the player’s point of view.
Any rooms that you are adjacent to are blurred
and clear up as you peek through vents and
doors.
Sound in Mark of the Ninja is just as clear-cut.
As you make noise, the range of each sound
is represented by a ring.
The ring’s size is dependant on the sound
itself, running will produce medium-sized
rings, and louder actions like breaking objects
will make larger rings.
Every one of your tools is laid out in your
HUD.
They are also conveyed through icons on objects
in the environment like bells or pots.
These help make your tools easy to use which
lets you focus on solving the puzzle, rather

Chinese: 
你或是在阴影中
或是在光亮中
阴影中的人和物体用白线描出轮廓
在光亮中则是全彩的
你的能见度也会有明朗和模糊两种效果
任何被墙壁阻隔的地方都是黑的　直到玩家进入
所有隔壁的房间都是模糊的
穿过通风口或进门之后　才会明朗
《忍者之印》中的声音也很直接明了
玩家发出声音时　声波环会反应传播的距离
环的大小与声音有关
奔跑是中环
破坏物体的大声响会产生大环
每种道具都陈列在 HUD 界面上
环境中的道具像是铃铛或壶都会用图标强调
这让你的道具更易用
让你专注于解密

English: 
than being caught up in the game’s mechanics.
It may not make the game more immersive or
even that much more stylish but Mark of the
Ninja’s UI is super practical and makes
playing the game feel like second nature.
Bad Design
*Super Smash Bros music*
Now bad graphic design doesn’t make a bad
game.
Smash 4 is great but the menus?
Eh... not so much.
Smash 4’s main menu represents the thin
line between success and failure in graphic
design.
On first glance, it looks fine, like a more
colorful version of the menus from Super Smash
Bros Brawl, but as you start clicking around
you’ll notice a problem.
The organization of the menu is strange, which
makes navigating the menus feel clunky.
The menu elements have an inconsistent look
and aside from the giant SMASH button, there’s
a serious lack of visual hierarchy.

Chinese: 
而不是被游戏机制搞得晕头转向
这些设计或许不那么让人沉浸
也不那么漂亮
但是《忍者之印》的 UI 非常实用
让你好像在用直觉玩游戏
设计黑榜
图形设计差不代表游戏差
《大乱斗4》挺棒的
但是菜单嘛……就不咋样了
《大乱斗4》的菜单就代表着红黑榜之间的一条线
第一眼看还不错
就像是《大乱斗 Brawl》菜单的多彩版
但是在你玩一阵之后　你就会发现问题
菜单的排布有点怪
在菜单里找东西异常困难
菜单的外观不统一
除了巨大的乱斗按钮
视觉的等级划分严重不合格

Chinese: 
菜单的选项不是根据重要性排布的
多人游戏是其中最重要的选项
但其他选项却在抢夺你的注意力
《大乱斗》菜单里的罪魁祸首就在……这里！
“游戏&更多”
标题大得不像话
就像是“这都是些什么东西”的按钮
《Brawl》和《Melee》知道谁最重要
分别有“单人”“VS”“在线”“收藏”“选项”“数据”
这样分类优秀且有组织
但是在《大乱斗4》中　“单人”“收藏”“选项”
都放在了“游戏&更多”中
其他选项则乱放一通
为什么单人迷你游戏“奖杯冲锋”
不和其他迷你游戏一样放在“竞技场”选项中
为什么“挑战”不放在“收藏”或“单人”中
为什么“自定义技能”是个单独的选项
直接放在角色选择界面不行吗

English: 
The objects in the menu aren't arranged by
their importance.
The Multiplayer is the most prominent option
here as it should be but the other options
are all fighting for your attention. The biggest
offender in Smash 4’s menu is riiiiiight
HERE!
“GAMES AND MORE” That's the vaguest title
ever.
That's like naming the button.
'Here's some more stuff, I dunno.'
Now Brawl and Melee had their priorities straight.
You had Single Player, VS, Online, Vault,
Options, and Data.
There you go, The essential categories are
nice and organized.
But in Smash 4, Single Player, Vault, and
Options are all shoved into “Games & More”
Other menu items are thrown around at random.
Why is Trophy Rush, a single player minigame,
not in the Stadium option with the other minigames?
Why is Challenges not placed in Vault or Single
Player?
Why do custom moves have to be set in a separate
menu and not just on the character select

Chinese: 
为什么“乱斗之旅”……放这里
《大乱斗4》在 UI 上的骚操作还不止这些
《大乱斗4》的 UI 简直混乱而庸俗
让游戏难以游玩
《大乱斗4》这不上心的设计十分奇怪
设计师还参与过《卡比的飞天赛车》以及前两作“大乱斗”
都没有出现类似问题
但是菜单还是做成了这样
找东西变得非常困难　除非你记下它
设计红榜
《野兽传奇》是我十分想要热爱的游戏
但我仅仅是喜欢
它是和你想象中的期待背道而驰的游戏
而且有点……
额……
不管怎样　《野兽传奇》有3个很不错的优点

English: 
screen?
WHY IS SMASH TOUR ANYWHERE?!?
Smash 4’s UI issues don’t stop there.
The UI in Smash Tour is chaotic and overly
flashy to the point that it makes the game
harder to play.
Smash 4’s sloppy design is especially strange
- the designer worked on Kirby's Air Ride
and the last two Smash Brothers games, none
of which have these problems.
But with the way the menu is now it makes
finding stuff a total pain, until you just
memorize it.
Good Design
*Brutal Legend music*
Brutal Legend is a game I DESPERATELY
want to love... but I only like.
It’s one of those games that seems to be
going one way, but then it becomes something
else entirely and it’s just kind of ehh.
Despite that, Brutal Legend has 3 really cool
things going for it.

Chinese: 
一是主角 Jack Black 的坚持自我
这还挺享受的
二　探索 Double Fine 式重金属开放世界
（Double Fine：本作开发商）
三　UI 和主题完全契合
《野兽传奇》的图形设计由 Joe Kowalski 完成
你可以很明显地看出灵感来源
字体　尤其是标题字体
和粗体、有棱角的哥特字体很类似
效仿了著名金属乐队　如铁娘子、威豹乐队、摩托头、黑色安息日
游戏里的百科是一本高中生的笔记本
任务开始都是一张破旧的专辑封面
每个 UI 元素、教程
甚至有些过场使用了特别的美术风格
取材自中世纪挪威木雕
和重金属幻想非常契合

English: 
One - The main character is just Jack Black
being himself and that’s usually a good
time.
*Jack Black singing* DECAPITATION!
Two - Exploring the open-world and seeing
Double Fine’s vision of a crazy heavy metal
fantasy world is amazing.
And Three - The UI absolutely NAILS its theme.
Designed by Joe Kowalski, Brutal Legend’s
graphic design proudly wears its inspirations
on its sleeve.
The type, especially on the headers, is very
similar to the bold, angular, and gothic typefaces
of logos from iconic metal bands like Iron
Maiden, Def Leppard, Motorhead, and Black
Sabbath.
The in-game encyclopedia is presented in a
high schooler's notebook.
The start of every mission is the cover art
of a worn out album.
Every UI element, tutorial, and even certain
cutscenes use a distinct illustration style
inspired by medieval and Norse woodcuts which
mesh extremely well with the heavy metal fantasy.

English: 
The interface also has high contrast with
the black and white standing out nicely from
the colorful landscapes.
I love Brutal Legend’s UI in general, but
the real standout here is the main menu.
*Intro Cutscene* “Are you sure you're ready
for this?
Because what I hold in my hand is not just
going to blow your mind.
It’s going to blow your soul."
The Main Menu is an interactive FMV that goes
through a custom made gatefold album of the
game itself.
Every option is on a different part of the
album. New Game and Continue are in the inside
cover, Chapter Select is found in the back
where you’d find the tracklist, Multiplayer
is in the record sleeve and options and extras
are the record’s A and B sides respectively.
This menu oozes creativity and it also makes
a few smart decisions to keep the theme from
getting in the way of this menu’s usability.
In the raw footage, the type isn’t actually
on the album itself - It was edited in post

Chinese: 
界面的黑白配色和彩色背景形成对比
我很喜欢《野兽传奇》的 UI
最棒的要数主菜单
“你准备好了吗
因为我手上拿的
不光会让你脑仁开花
还会让你灵魂炸裂”
主菜单是互动式 FMV
他们使用了以游戏为主题的折叠页专辑
每个选项在专辑的不同位置
“新游戏”和“继续”在封面内侧
“章节选择”在背面的曲目列表上
“多人游戏”在唱片套上
“选项”和“更多”分别在唱片的A和B面上
主菜单无处不渗透创意
这是一个保持主题统一的巧招
也不会影响主菜单的使用
查看原素材
会发现文字并不在唱片上

English: 
to allow it to be made in different languages
and the footage is sped up to keep navigation
from feeling too sluggish.
There is a great behind the scenes video,
which I'll link below, that shows the designer
working on the UI of the game.
It goes over some of the design and editing
challenges like matching different takes or
editing out little mistakes.
It’s great if you're interested in video
editing.
Overall, Brutal Legend’s menu is one of
the more creative uses of FMV that I’ve
ever seen in a game.
Bad Design
*Mario Party 8 music*
Let’s just get right to it.
Mario Party 8 is a total eyesore in its menu
and UI design.
It's functional - barely - but this presentation
is just… really poor.
Here’s a weird thing - the main menu is
at a 16:9 aspect ratio, but the game itself
is shown at a 4:3 ratio.
It's jarring and unnecessary.

Chinese: 
而是编辑上去的　为了之后翻译方便
视频还经过加速　以防让人感觉拖沓
这段视频还有更多故事　详见简介
讲述设计师是如何开发本作 UI 的
包括一些设计和编辑的挑战
比如勾勒不同部分
或是编辑时遇到的困难
如果你喜欢视频剪辑　你可以看看
总之　《野兽传奇》充满创意的 FMV 菜单在我玩过的游戏中百里挑一的
设计黑榜
直接开门见山吧
《马力欧派对8》简直是菜单和 UI 设计的垃圾场
功能上　勉强过得去
但这外观也太…丑了
有件怪事
主菜单是16:9的纵横比
而游戏则是4:3
既不统一　也没必要

Chinese: 
字体设计是我所见过最差的
主菜单的字体没居中
字距不规律
不过最大的问题是不同字体如同倒垃圾一般的滥用
大部分设计师建议将不同字体和风格的选择降低到2～3种
光是主菜单就有5种不同的字体和字体处理方式
这里　这里　这里　这里
还有…
这里
这还不是游戏里最差的
《马力欧派对8》 的字体排印
使用了多种边框、投影、渐变
和字体一样　根据内容使用不同效果是好的
但是游戏却把三种效果全部用上了
看看任意玩家开局时的文字

English: 
The typography here is some of the worst I’ve
seen.
The type in the main menu items are off center.
The kerning, the spacing between individual
letters, is uneven in spots, but the biggest
issue here is the dump truck of different
typographic styles in the menus.
Most designers would recommend keeping your
different font choices and styles down to
about 2 or 3 at a time.
The main menu alone has up to 5 different
fonts and type treatments.
Here, here, here, here, and here.
This isn’t even the worst example of this
in this game.
Mario Party 8’s typography inconsistently
switches between using multiple outlines,
drop shadows, and gradients for contrast.
Like fonts, it’s a good idea to use these
effects sparingly on text, but instead the
game likes to use ALL THREE of these effects
at once.
Look at the text that appears at the start
of someone’s turn.

Chinese: 
字体有两个边框
其中还有一个丑绝了的灰到金的渐变
在红色色块和这线之间还有投影
这简直是字体排印的噩梦
不同模式之间也不统一
菜单、桌上游戏画面、迷你游戏画面
以及结果画面
它们各有特色　也各有槽点
简直不知道从哪说起
设计红榜
我实在是不太喜欢“死亡空间”系列
因为我就是
咳咳
叼奶嘴的懦夫
但是《死亡空间》的 UI 非常棒
类似《密特罗德 Prime》的头盔界面的进化
好比 UI 就存在于游戏世界中
这叫做“剧情 UI”
《死亡空间》里　角色的装备就是界面

English: 
The font here has 2 outlines, one of which
has an ugly golden gradient, and there’s
also a drop shadow in between this line and
the red fill.. this is a typographic nightmare.
There’s NO cohesiveness between modes either.
The menus, boardgame screen, minigame screen,
and the result screen all have something unique
and terrible in their type.
It’s just all over the place.
Good Design
*Dead Space music*
I can't say I'm really into the Dead Space
series because I'm what some may call...
*clears throat*
a big man baby coward.
But Dead Space has some nice UI.
It's almost like a direct evolution of Metroid
Prime’s helmet HUD where the UI actually
exists in the world.
This technique is called Diegetic UI.
In Dead Space, your character's equipment
IS the interface.

English: 
The RIG system displays your health on the
spine of your character with a distinct neon
color that changes as your health changes.
The RIG holographic menus themselves are beautifully
laid out, organized and intuitive with clean
and easy to read typography and typesetting.
The neon blue is a strong contrast against
the rusty and unsaturated oranges, yellows,
browns, and grays that are common in Dead
Space’s palette.
I also appreciate that because the UI is physically
in front of the character, it makes sense
that the game doesn’t pause when you dig
through menus - which was a pretty rare idea
at the time.
The holographic design is also applied to
your weapons with your ammo count placed right
next to your crosshair and dotted lines and
shapes appear to explain the dismemberment
mechanic.
The ideas here might seem simple, and visually
it might even be a bit plain but the way Dead
Space makes a seamless and useful UI blend
into its world is nothing short of masterful.
Bad Design

Chinese: 
RIG 系统会在角色脊椎上显示血量
（RIG：Resource Integration Gear，资源整合装甲）
使用鲜艳的荧光蓝表示血量
RIG 全息投影菜单排布规则、字体简洁
荧光蓝和《死亡空间》大部分背景的
粗糙、不饱和的橘色、黄色、灰色形成强烈对比
我还注意到　既然 UI 是显示在角色面前的
那么打开菜单时游戏不会暂停就显得很合理
这在当时是非常少见的
全息投影也应用在了武器上
弹药数会显示在准星边
三点连线配合肢解系统
这些想法看似简单
从视觉上还略显平淡
但是《死亡空间》使用无缝、沉浸式 UI
堪称绝妙
设计黑榜

English: 
For our final bad UI entry...
ugh screw it
I'm going back to Mario Party 8 because...
wow.
This is just all over the place.
And I mean that literally!
Nothing really follows a clear grid structure
which is one of the keys to good UI design.
Every element here is misaligned or haphazardly
placed.
Most of the submenus are weirdly framed with
these checkered backgrounds.
The menu elements don’t use this framing
at all, overlapping the borders.
Menu headers have this strange ornamental
design that doesn’t really relate to any
of the other elements.
I guess it’s supposed to go with the carnival
theme but it’s not effective.
On top of that, we have this faded black bar
with instructions at the center.
Character portraits are compressed and awkwardly
cropped.
And there are a ton of different button shapes
and formats throughout the menus with no good
rhyme or reason.

Chinese: 
到最后一个 UI 例子了
额…去他妈的
我还是重新批斗《马力欧派对8》吧
哇
我简直不知道从何说起
真的
没有任何规律可谈
规律可是设计 UI 的关键之一
每个元素都错位了
子菜单以怪异的方式排列在棋盘中
其菜单元素不配合这一棋盘
边框还重叠了
菜单标题的装饰性很强　但是和其他元素完全不搭
我猜是想使用嘉年华主题
但效果不好
此外　还有这个灰黑色条框
角色图被压缩　且怪异地贴在这里
菜单里充斥着各种形状的按钮和选项
毫无技巧和原因可言

English: 
I’m sure some of you are asking “What’s
the big deal?
They're just menus and interfaces.
They don’t really matter once you get used
to them.”
And you’re not wrong.
It’s easy to ignore a bad menu..
most of the time.
Even great menus like the ones in Persona
5 occasionally have the same issues as Mario
Party.
I mean, you gotta admit, Persona 5's menus
are pretty busy.
An interface or menu is like a bridge.
A well structured one gets you to your destination
with no problem.
A rickety one can get you there too, but you’ll
feel worse about it.
I’ve mentioned a few basic rules, but a
UI doesn’t have to follow all of them.
You need to be careful, though - each rule
that a design skips increases the risk of
the design totally falling apart.
Persona 5 breaks a few of these rules in service
of its overarching theme.
Mario Party breaks them for no real benefits.
A UI designer needs to understand the rules
and why they exist if they want to break the

Chinese: 
我相信有人会说“那又咋样
只是菜单和界面而已
习惯了以后都不重要”
这也不算错
你很容易忽略烂界面
…大部分时候吧
即使是《P5》偶尔也会出现和《马派8》一样的问题
我是说　你得承认
《P5》的菜单太花哨了
界面和菜单就像是一座桥
一座好桥可以让你无阻碍地到达目的地
一座烂桥同样可以　但是你会不舒服
我提到了几个基本准则
虽然一个好的 UI 不需要满足全部
但是你需要小心
每当你忽视一个准则
就提高了 UI 变烂的风险
《P5》打破了一些准则　为的是迎合主题
《马派8》则是毫无理由地破坏准则
UI 设计师需要理解准则
明白它们存在的理由　以备以后打破规则

English: 
rules effectively.
*Chill vibes outro music from Persona 5*
