美高梅·(MGM)官方网站正网_美高梅

探索！用Fig做游戏UI设计

作者：jeasonqiu，腾讯IEG品牌设计

记得2021年《Fig一站式设计交付》中提到，Fig本身是一个矢量设计软件，所以个人认为Fig比较适用于制作一些偏扁平、卡通的游戏UI风格。

游戏UI设计的探索之旅

纵观全网Fig基本都是To B 、To C类的产品应用，很少人会往这个游戏这个方向研究了，因此我开启了一段Fig针对扁平类游戏UI设计的探索之旅，结合Fig Config 2022姗姗来迟的AutoLayout 4.0的使用，以英雄联盟鲜明的海克斯科技风格代表性更高。(以下案例仅为个人示范，与官方产品效果及资源无关)

此次练习设计主要总结了一些设计技巧：异形的自适应按钮、自适应面板背景（AL4.0绝对定位+约束拉伸）数字、字母动画（AfterDelay嵌套）

实现异形渐变按钮的方法

起初一个同事在大群里问，像这种异形的渐变按钮在Fig里面做Autolayout组件吗？

由于当时正在使用skewDat插件。于是就想到两种解决办法：对文本Autolayout之后，Autolayout层用skewDat插件倾斜 -10度，再对里面的文字倾斜10度，就得到了（负负得正）美高梅官网。把两边异形的部分单独抽出来，中间部分就可以做自适应。

但其实以上两种方法，都会有一些问题：尺寸上会有小数点，不够精确（像素控感到难受）不能做不规则渐变填充（45度、角度渐变等）不能给整个形状增加描边（如上图最后一个按钮）文字不能入侵到异形部分

后来，在不断的实践过程中也发现了基于Autolayout 3.0更优的解法，类似于做点9图的效果得到更好的设计延展（限高，宽度自适应/限宽，高度自适应）。在AutoLayout4.0发布后，这个方法有了绝对定位的加持，实现变得更容易了(宽高可自适应)。

按钮背景的自适应设计

在大多数To B 、To C的应用场景中，常规的按钮如纯色、渐变、幽灵、投影/发光按钮+各种直角、圆角、全圆角，AutoLayout都能轻松的完成自适应。

但在游戏设计中，按钮的背景一般都不会做的规矩和太扁平，总会做一些和游戏主题匹配的样式，会有一些特殊的异形装饰，类似海克斯科技里除了常规的矩形按钮，还有被圆和三角形切割的异形按钮，因此也特意用Fig做了一些比较知名的游戏按钮来做验证。

常规按钮：可以拆解成一层文本，和一个填充/渐变层，通过添加Autolayout完美自适应宽高。游戏按钮：可以拆解成一层文本，和一个可以自适应拉伸的背景组件，在AutoLayout 4.0 后也能完美地自适应宽高。

实现自适应的按钮设计

那具体应该怎样才能做到自适应，同时文字和背景层能很好的分离切换呢？

其实早期在Fig官方介绍Autolayout 3.0的Playground文件中，就隐藏了一种思路：

仔细观察这几个头像，通过父级定宽FixedWidth + Autolayout + SpaceBetween的方法，因此我们按钮还是拆成一个文本结构层、一个背景拉伸层，并且一般按钮来说都是定高的，只需要水平自适应文本长度。借助这个点，结合Autolayout的Spaces Between 来完成按钮和背景重叠一起的效果。

得益于负间距、绝对定位、堆叠顺序、组件属性的特性，可以省略一层文本结构层，通过组件属性直接赋能在主按钮上。背景层的处理使用绝对定位，以及约束填满整个按钮的大小，这样就可以轻松实现宽高自适应的按钮背景了。