下载手机 APP

如何提升你游戏中的UI美术水平

精华修改于07/062541 浏览开发交流

TapTap

一、请为你的游戏挑选一款合适的字体

很多开发者没有注意到其实UI界面中最重要的元素是字体，一款合适的字体能给整个游戏的界面感官带来蜕变。

请看案例

TapTap

原生黑体字体

TapTap

适合科幻题材的吉利银河美好体（可商用）

那么如何挑选适合自己的字体呢？

我总结出了一些小经验可供参考：

黑体：通用

宋体：古风、武侠、修仙

楷体：古风、武侠、修仙

圆体：卡通、动漫、Q版

科技：科幻、未来、电子

顺手分享一个免费可商用字体网站：100font.com - 免费商用字体大全 - 免费字体下载网站

TapTap

当然如果你不知道自己的游戏适合什么风格，那就每个都尝试一遍留下最好看的即可

如何替换项目中的字体：1.将字体文件后面加.png 然后就可以上传到素材库中；2.上传后和塔拉拉说将这个文件的.png后缀移除，然后将其使用为当前项目使用的字体文件

注意：如果你的游戏替换了字体导致部分玩家加载不出来字体，那可以使用以下方法尝试解决

TapTap

解决字体无法加载的问题

二、图标细节简化

并不是越细节的东西越好用，尤其是图标。请看案例

TapTap

高细节图标

TapTap

低细节扁平化图标

可以很明显的感觉到高细节的图标会让玩家信息检索能力受到阻碍，扁平化低细节图标能大大提升“瞬时易读性” 从而降低玩家的上手门槛视觉不容易造成疲劳

以下是我常用的一些扁平化图标素材站

iconfont-阿里巴巴矢量图标库

https://game-icons.net/

调整后最终上线游戏就是《点点宇宙》感兴趣的可以去体验一下，这款游戏是纯程序化美术，0美术资产素材

三、文字易读性颜色与描边

首先大家需要明白一个道理，UI实用性大于一切。你的UI应该服务与玩家能够清晰明了的传达信息，而不是为玩家造成阅读障碍。

TapTap

反面案例

可以看到这个案例，文字的信息易读性非常差。

主要原因是开发者选择的背景明暗色彩比较复杂，单一的文本颜色无法胜任所有场景。

TapTap

优化后

那么优化思路就很清晰了

1.为信息添加一层新的纯色背景，这里我选择使用队伍颜色来作为单行信息背景

2.为文字添加描边增强易读性

3.使用交错布局按照双方队伍方向交错排布，防止大量信息密布导致视觉疲劳

四、排版布局

结合以上3点，再通过合理的排版布局。就能搭配出不错的UI

TapTap

反面案例

反面案例的问题：1.信息遮住了整块卡面立绘 2.文字不明显有阅读困难

TapTap

优化后

那么优化思路就很清晰了，首先观察整体图像是长方形，那么更适合左右布局，把文本信息都移到左侧留白区域，人物立绘往右侧走，那么基础的排版就已经完成了。然后再结合以上三点，去优化文字颜色/描边/字体就能得出一个不错的UI

5/12日更新新增案例

TapTap

卡牌UI应该以快速收集信息为主

请问以上两个卡牌UI哪个UI的信息简单明了阅读成本低？

答案显而易见是右边的

设计卡牌游戏时你要想清楚，哪些数值是非常重要的。比如“费用”“攻击力”“生命值”

那么应该重点突出这些数值，而不是藏起来不让玩家发现

TapTap

优化前

发现问题

1.重要数值不明显有阅读困难

2.卡面细节太多不适合这个大小（和简化图标一样的道理）

3.可以尝试添加一个AI生成的桌面背景

TapTap

优化后

按照以上思路进行优化后结果

6/5日新增案例

TapTap

道具文本信息UI排版优化案例，左侧为原UI，右侧为我优化后的UI。

先分析问题：

1.这个UI中的文本字号太多太乱

2.文本颜色都是一个色调没有主次信息分段效果

[表情_怒]

优化思路：

1.一级文本（主标题、副标题）的文本颜色改为青色（游戏中的主色，用来突显文本），二级文本（通常是正文内容）采用纯白色，三级文本用灰色（通常不那么重要但是必须显示）

2.为属性区域绘制一个圆角矩形框来划分区域

3.已解锁和未解锁用常规的绿色红色区分

4.统一UI中的文本字号

在美术UI设计中，一级、二级、三级文本通常指按照信息层级划分的文字样式，用于帮助用户快速理解内容结构和优先级。具体解释如下：

一级文本：最关键、最突出的标题或核心数据。例如页面大标题、弹窗标题、金额、重要状态标签。通常字体最大、最粗、颜色最醒目（如深色或品牌色），用于吸引第一注意力。
二级文本：次要的标题、信息分组或辅助说明。例如分类标题、功能模块标题、简要描述。字号和字重比一级小、略轻，颜色可能使用次级色或灰色，帮助用户区分内容块。
三级文本：最次要的细节、注释、版权信息。例如详细描述、提示文字、标签副信息、页脚说明。字号最小、颜色最浅（如浅灰），不干扰主视觉，用于补充但不抢眼。

其他、一些零零碎碎的小技巧

1.活用倾斜文本，能有意想不到的效果

TapTap

斜体用 nvgSkewX 不用 rotate

2.九宫格切割法节省资源量

TapTap

要点说明

坐标约定 cx/cy 为中心点，内部自动转换为左上角 destL/destT

缝隙消除相邻 patch 各向对方扩展 1px（padL/padT/padR/padB），配合 nvgScissor 裁剪，防止高分屏出现缝隙

images 结构 { handle = nvgCreateImage(...), w = 原图宽, h = 原图高 }

inset 选取一般等于素材四角装饰的尺寸；若素材上下/左右不对称则用四边独立版本

0 值处理 if dstW > 0 and dstH > 0 ... 跳过尺寸为 0 的 patch，避免除零错误

3.本人参与美术的游戏，欢迎大家学习指点（7.6日更新）

尾声

暂时想到这么多，有新的技巧的话会更新。

猜你想搜

taptap 制造ui美术提升

TapTap 制造应用

9.8