如何提升你游戏中的UI美术水平
修改于05/12700 浏览开发心得
一、请为你的游戏挑选一款合适的字体
很多开发者没有注意到其实UI界面中最重要的元素是字体，一款合适的字体能给整个游戏的界面感官带来蜕变。
请看案例
原生黑体字体
适合科幻题材的吉利银河美好体（可商用）
那么如何挑选适合自己的字体呢？
我总结出了一些小经验可供参考：
黑体：通用
宋体：古风、武侠、修仙
楷体：古风、武侠、修仙
圆体：卡通、动漫、Q版
科技：科幻、未来、电子
顺手分享一个免费可商用字体网站：100font.com - 免费商用字体大全 - 免费字体下载网站
当然 如果你不知道自己的游戏适合什么风格，那就每个都尝试一遍 留下最好看的即可
如何替换项目中的字体：1.将字体文件后面加.png 然后就可以上传到素材库中；2.上传后和塔拉拉说将这个文件的.png后缀移除，然后将其使用为当前项目使用的字体文件
注意：如果你的游戏替换了字体导致部分玩家加载不出来字体，那可以使用以下方法尝试解决
解决字体无法加载的问题
二、图标细节简化
并不是越细节的东西越好用，尤其是图标。请看案例
高细节图标
低细节扁平化图标
可以很明显的感觉到高细节的图标会让玩家信息检索能力受到阻碍，扁平化低细节图标能大大提升“瞬时易读性” 从而降低玩家的上手门槛 视觉不容易造成疲劳
以下是我常用的一些扁平化图标素材站
三、文字易读性 颜色与描边
首先大家需要明白一个道理，UI实用性大于一切。你的UI应该服务与玩家能够清晰明了的传达信息，而不是为玩家造成阅读障碍。
反面案例
可以看到这个案例，文字的信息易读性非常差。
主要原因是开发者选择的背景明暗色彩比较复杂，单一的文本颜色无法胜任所有场景。
优化后
那么优化思路就很清晰了 1.为信息添加一层新的纯色背景，这里我选择使用队伍颜色来作为单行信息背景 2.为文字添加描边增强易读性 3.使用交错布局 按照双方队伍方向交错排布，防止大量信息密布导致视觉疲劳
四、排版布局
结合以上3点，再通过合理的排版布局。就能搭配出不错的UI
反面案例
反面案例的问题：1.信息遮住了整块卡面立绘 2.文字不明显 有阅读困难
优化后
那么优化思路就很清晰了，首先观察整体图像是长方形，那么更适合左右布局，把文本信息都移到左侧留白区域，人物立绘往右侧走，那么基础的排版就已经完成了。然后再结合以上三点，去优化文字颜色/描边/字体 就能得出一个不错的UI
5/12日更新 新增案例
卡牌UI应该以快速收集信息为主
请问以上两个卡牌UI哪个UI的信息简单明了 阅读成本低？
答案显而易见是右边的
设计卡牌游戏时你要想清楚，哪些数值是非常重要的。比如“费用”“攻击力”“生命值”
那么应该重点突出这些数值，而不是藏起来不让玩家发现
优化前
发现问题1.重要数值不明显有阅读困难 2.卡面细节太多不适合这个大小（和简化图标一样的道理）3.可以尝试添加一个AI生成的桌面背景
优化后
按照以上思路进行优化后结果
其他、一些零零碎碎的小技巧
1.活用倾斜文本，能有意想不到的效果
斜体用 nvgSkewX 不用 rotate
2.九宫格切割法 节省资源量
要点 说明
坐标约定 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，避免除零错误
尾声
暂时想到这么多，有新的技巧的话会更新。