【游戏交互】游戏飘字（跳字）设计

“ 从信息传达、视觉、动效三个方面简单分析一下如何设计游戏飘字。”
% G: W6 x9 U5 O
游戏飘字是个啥？就是我一刀砍了怪物100血，怪物头上跳出来的100，随着游戏的不断发展，大部分游戏逐渐从无数字到有数字，到一堆复杂的数字加各种文字。
: `8 o6 u- |; n3 L, F3 B: T文章将从以下三个方面简单分析一下飘字设计
+ s9 _- h# v$ ^' D# Z

8 {. A4 k, A; G. e, S( ]
• 信息传达
  
• 视觉
  
• 动效
  / ?3 |3 X6 u" D6 e. y6 C

（文章只覆盖常规情况，不同场景的不同表达差异会很大，欢迎讨论）

. n5 M+ H/ g& T& o' d% a01 信息传达

& r/ M* A3 O6 C6 P2 b2 g    做一个设计首先要明确自己的目的是什么，飘字是为了把某些信息传达给玩家，不同游戏的表达重点不同，做设计前首先明确游戏类型和需求，玩家需要的数据是什么，提供什么信息对玩家是合适的。
    以怪物猎人为例，在早期的游戏版本，怪物没有血条，玩家也没有伤害数字，玩家只能通过经验算出自己到底造成了多少伤害，还有多久才能打死；但对于设计者来说，是为了还原真实的狩猎体验（卖官方攻略本），在十几年的发展中，没有数字和血条也成了mh系列独特的标签。

. ^% l& x  e. B1 q( K8 E  i' P

7 I- V+ O7 l4 ^3 D8 q3 amhxx，打了多少血全靠经验

    但在最新的怪物猎人世界（mhw）和怪物猎人崛起（mh rise）中，游戏增加了飘字设计，虽然怪物仍没有血条，但是依旧保留了大部分狩猎的感觉，且适当降低了玩家的门槛；
# q1 ?6 x$ k8 O- ]& t) ?    MH的数字包含了多重的信息传达：伤害数值与肉质；橙色数字代表攻击到了弱点，灰色代表非弱点，直观的颜色与特效也能准确传达攻击的信息，玩家再也不用再去攻略网站一点一点研究了。数字虽然表现非常弱，也允许玩家关闭显示，但在保证游戏的特色下，提供了数据传达，能对自己的伤害大小和类型有了一个更直观的认识，降低门槛也是游戏模式随着玩家群体变化的一种演变吧。

* ?) z3 O& R* R  s* E0 N
  T' r6 _+ H) Z+ Q+ q. q6 M* c
9 B' C: ]8 F9 w* }! \mhw

* M1 R4 E8 v! x' G    很多设计师说玩家不需要知道数字，数字会影响画面表现，玩家也也不会想要的，因此给了一个【关闭伤害数字】的选项，事实证明，玩家比起这种影响画面表现的数字，更需要信息的传递。下面是知乎一个朋友的段子
2 L) A0 E) }! ~( @  P

    再提一下《赞歌》，不仅设置了是否可以显示飘字，也可以设置飘字的透明度与大小，以适合不同的玩家。
4 V$ Z1 a) ~9 A: I! U- f


    在传递信息的过程，要适配游戏类型，一些游戏会有特殊情况，以《幻书》（回合制游戏）举例，回合制游戏需要精准传递信息，若一个技能为多段攻击时，玩家想具体了解这个技能一共打了多少血，而不是一大串不同的数字，因此游戏会把同一个技能的多段伤害合并，并每次伤害重复进行一次跳字动效，既保留了打击感，也传达明确了信息。
( z: ]8 S9 H, O, g. i
) n) x, m" \( ~0 _9 H1 Z3 r
: L& m! ?3 O# g7 S" C( p6 B
1 Y/ A( ~+ b, u2 Y; w. Y每次伤害时都会刷新一下伤害总值
" O) I* n* r) x3 B: U; N
, Q% e8 ]# f+ l3 z, `+ C( M* }    当游戏中后期，数值膨胀，要考虑好多位数的表达，例如下图的暗黑3,【5.33亿】【1.33兆】【5.73京】，不然就会是满屏幕的9999999999999，我到底打了多少？
$ x* W2 D' Y! J9 B. L    数量级不大时，或者采用逗号这种世界通用的符号区分。如：【372,482】
1 q  \: V) d) G- T6 _
& ]* X. n4 i" T2 ]
, i) I, h0 E8 E) c) X5 }! d5 Y2 u    宝可梦也是回合制，但只显示了自己的生命值，攻击过后会提醒你攻击的描述，下图的效果拔群也属于一种特殊的飘字，以一种描述的样式说明玩家是否使用了正确的属性，最新作的剑盾仍保持了一贯的做法，所以也不一定回合制就采用数字的表达。
, Z3 K+ Y6 U7 Y( w# h
# V& o- |+ _# ]% Z; u
/ s5 T1 y* k2 O; r0 k
宝可梦——效果拔群
7 d. P1 j% L/ L. g( X& r9 ?) p
    什么游戏不需要跳字呢？以ftg（格斗）游戏为例，例如拳皇，生命槽十分明显，且有二层血条的UI设计，数字会遮挡游戏画面，数字也不如直观的进度条信息传递直观。
' w0 U' x+ e" N5 _7 O9 q    因此在数据表达清晰且主要画面表现优异下，可以不使用数字表现。

" Z/ ?! A" X$ g( W1 q
' ]: _  y1 u  L; e( p2 [举个例子：
    假如现在正在做一款写实类的act游戏，某天从战斗策划里接过游戏中所有不同的伤害类型：


. g7 }1 m/ w3 v& z    上述的分类不可能去每种都画一种样式，首先按照游戏特点分出不同类别，区分后大致分为以下几类，假如这个游戏对护盾的要求不高，因此与策划讨论后，删除了护盾相关的提示，把不同种类的伤害整合了一下。
* S+ {/ c% r1 i* u4 Z    经过简单的梳理，以下为游戏的信息传达点。


6 h- _! Y& d6 V$ E2 y! R) t" B6 e    合理的传达玩家需要的信息，把所有信息都一股脑的丢给玩家是一种偷懒的行为。

02 视觉


1、视觉重量
7 f' F+ G2 y5 E2 H- B
跳字在不同类型的游戏中重量不同，主要看想要突出什么，一般来说，游戏越偏向写实，数字风格化就会越弱。

) t* g" Y# q7 f6 D# e5 ]1 _8 T. V
' |& G- N6 ]; e    举个极端例子，美国末日2这种，没有任何数字表现，比如下图一口蹦出来个-99，当场出戏。
& Z, w2 s3 k  v2 U# d; }1 p
3 m8 A3 m) q- f; b* Z$ V
7 x+ W5 R* {! }
6 \% T5 j* e3 S, J* C4 w美国末日2，强行P个-99

* `' X9 ^- A5 b3 T    相反，以女神异闻录5（P5）为例，回合制游戏需要大幅度强化数字表现以提升游戏的打击感，数字采用的锋利与透视的效果，颜色也采用了P5的亮红，与游戏UI风格保持一致；
) M+ X* k. d6 E+ Q) q2 _/ x+ x

, w  j8 w  C! k3 h8 A& C, c1 m
9 X& R( N. ^/ Y( T2 v女神异闻录5

9 t8 L: {/ g1 L/ h2 b7 p8 k2、字体可读性
+ Z" t2 q0 x5 K9 I. p$ g
, s6 T' ~% C9 ?: \# D1 i字体需要描边或投影设计，以便在不同的场景中表达清晰，上文中的P5采用了特殊的描边，偏写实的就会采用轻微的外发光或阴影来表现。
1 C! _! G6 i7 _6 o& k' e
9 ~! x8 N- E% M4 F# e

赞歌的阴影数字

3 |4 t0 y$ b; Z, k+ J再看下图暗黑破坏神3的飘字，此款游戏偏向写实风格，飘字就采用了最简单的字体与偏暗的颜色，也没有对字体进行变形设计。
6 J+ Y$ Y% O+ p  Y$ L! ]

% V( B" D4 {0 m6 y
暗黑3
# I8 a9 ^- `1 C
; X3 `0 k6 U, f. n5 D& G3、强风格化字体
4 s6 n7 U7 p6 t: g( k$ G1 C
    做风格化比较强的作品时，字体的动效也是重点，两者相辅相成，做的时候记得统一考虑，Q版字体或者艺术字体搭配出入动效会有更好的效果，如下图的P5，高透视的字体，与放射状的出现动效。动效和视觉相互配合，以表达游戏的风格。
: |2 S, o/ E/ [; |

0 L+ V" C& d5 m+ {03 动效

    动效大致包括以下几点：【时间】【方向】【样式】【挂点】，动效和上述的视角本是相辅相成的，为了方便分类，便分开说明。
1、时间
9 K2 y% z- X. i. S& t
    所有的数字一般采用统一的时间即可，时间从600-1200ms不等，一般回合制游戏（偏数值的游戏）数字时间会更长一些，

2、方向

    方向处理有很多种，先说最常见的的砸下式，这种也是很多游戏的处理方式，动画处理简单暴力，也能体现出打击的力量感


    王者荣耀使用的抛物线式，此处有不同的设计，玩家掉血的时候，数字呈抛物线消失，表达的一种【流失】的状态，而生命恢复使用了上升的数字，代表生命变高了，以方向与颜色两种视觉要素处理信息，能让玩家更容易识别。



6 d" o6 Z' A. Y; {王者荣耀
4 t" m+ ~) U% t2 I* V/ }
" h+ M# H+ u& Y. g$ @3、样式

3 j( g' d, E+ @7 V8 Z1 k. k样式包含的颜色、大小、特效等，下图为冒险岛2暴击采用了更强的动态变化，还使用了特殊的背景强化视觉效果，弱化了玩家受到的伤害，使用了更小的字体，更弱的效果
; H& x" t; s% l
: I+ K' Y4 B7 J
4、挂点
( B- Z. L, d4 c7 N
  @3 ]7 p% G) d- X) b挂点为数字出现的位置，常见的一般会在人物的头顶出现，或者人物的附近，一般以不遮挡模型为原则。下图常规的头顶出现式
8 [2 j6 E4 z3 X! L% J- z

. ~/ `" }( i4 \. B! K+ p7 c
剑侠情缘

怪物猎人的游戏特点为攻击不同位置伤害不同，因此数字出现在了攻击到的位置，通过数字颜色也能让玩家清楚自己是否攻击到了弱点。
0 l3 t, A' r* _4 Q
, t& T6 ^, I/ W/ X
8 ^5 X; a% p; R* n5 e王者荣耀的受伤飘字的位置为人物两侧，上文也提到了数字的移动方向，表现了流失的感觉。
* r5 ]! c9 V& |6 g

% y, v/ r- A" c% E5 t' P
- x5 M1 \1 Q5 j9 C以上四点通过不同组合，设计师需要充分考虑什么是玩家需要的东西，把信息准确且美观地传递给用户。
" A* z- r8 a8 S: C# o04 结语
# c( D" A  c3 ^  d
    游戏飘字本身属于HUD的一种，可进行的创意是无限的，虽然飘字只是一个小东西，但正是众多小东西的细节才拼凑成一个完整的作品。

" v- x$ M$ T# C/ E' V# `我的公众号：

- m# ^, K5 i2 ]: X, n- C  T. m我的微信：Lwanna7

感谢阅读与分享
" _/ J! I( v2 E/ I$ I& v觉得有帮助的话欢迎点一下【赞】
欢迎交流