作者：jeasonqiu，腾讯IEG品牌设计
| 导语 记2021年《Figma一站式设计交付》中提到，Figma本身是一个矢量设计软件，所以个人认为Figma比较适用于制作一些偏扁平、卡通的游戏UI风格。(以下仅个人临摹练习使用，非官方内部源文件)
记得2021年《Figma一站式设计交付》中提到，Figma本身是一个矢量设计软件，所以个人认为Figma比较适用于制作一些偏扁平、卡通的游戏UI风格。
纵观全网Figma基本都是To B 、To C类的产品应用，很少人会往这个游戏这个方向研究了，因此我开启了一段Figma针对扁平类游戏UI设计的探索之旅，结合Figma Config 2022姗姗来迟的AutoLayout 4.0的使用，以英雄联盟鲜明的海克斯科技风格代表性更高。(以下案例仅为个人示范，与官方产品效果及资源无关)
此次练习设计主要总结了一些设计技巧：
异形的自适应按钮、自适应面板背景（AL4.0绝对定位+约束拉伸）数字、字母动画（AfterDelay嵌套）起初一个同事在大群里问，像这种异形的渐变按钮在Figma里面做Autolayout组件吗？
由于当时正在使用skewDat插件。于是就想到两种解决办法：
对文本Autolayout之后，Autolayout层用skewDat插件倾斜 -10度，再对里面的文字倾斜10度，就得到了（负负得正）。把两边异形的部分单独抽出来，中间部分就可以做自适应。但其实以上两种方法，都会有一些问题：
尺寸上会有小数点，不够精确（像素控感到难受）不能做不规则渐变填充（45度、角度渐变等）不能给整个形状增加描边（如上图最后一个按钮）文字不能入侵到异形部分后来，在不断的实践过程中也发现了基于Autolayout 3.0更优的解法，类似于做点9图的效果得到更好的设计延展（限高，宽度自适应/限宽，高度自适应）。在AutoLayout4.0发布后，这个方法有了绝对定位的加持，实现变得更容易了(宽高可自适应)。
在大多数To B 、To C的应用场景中，常规的按钮如纯色、渐变、幽灵、投影/发光按钮+各种直角、圆角、全圆角，AutoLayout都能轻松的完成自适应。
但在游戏设计中，按钮的背景一般都不会做的规矩和太扁平，总会做一些和游戏主题匹配的样式，会有一些特殊的异形装饰，类似海克斯科技里除了常规的矩形按钮，还有被圆和三角形切割的异形按钮，因此也特意用Figma做了一些比较知名的游戏按钮来做验证。
那具体应该怎样才能做到自适应，同时文字和背景层能很好的分离切换呢？
其实早期在Figma官方介绍Autolayout 3.0的Playground文件中，就隐藏了一种思路：
仔细观察这几个头像，通过父级定宽FixedWidth + Autolayout + SpaceBetween 的方法，因此我们按钮还是拆成一个文本结构层、一个背景拉伸层，并且一般按钮来说都是定高的，只需要水平自适应文本长度。借助这个点，结合Autolayout的Spaces Between 来完成按钮和背景重叠一起的效果。
得益于负间距 、绝对定位 、堆叠顺序 、组件属性 的特性，可以省略一层文本结构层，通过组件属性直接赋能在主按钮上。背景层的处理使用绝对定位 ，以及约束填满整个按钮的大小 ，这样就可以轻松实现宽高自适应的按钮背景了。
视频加载中...
剩下的重点是制作出可自适应拉伸的按钮背景图层即可。
Figma中做自适应拉伸主要使用约束Constraints的Top 、Bottom 、Left 、Right和Top&Bottom 、Left&Right 进行定位以及布尔运算的Union、Subtract 进行加减运算，这样出的图像既能够自适应拉伸，也能够保持一个整体同时方便调整样式。
最终的效果类似CSS3 Border-Image 边框图像、Android 的 9-patch点九拉伸图、iOS的Slicing 拉伸、Flutter的centerSlice。
视频加载中...
(视频中按Tab切换下一个图层，Enter进入图层，Shift+Enter返回上级图层)
当然也可以使用AutoLayout 4 通过添加组件属性，一个组件就能完成。
注：如果出现背景层盖住了文本层，交换一下图层顺序即可。
细心的同学会发现LOL这个Play按钮在hover的时候，会有一些朦胧的烟雾流动效果。这个核心的细节点主要是把遮罩的描边图层加一层LayerBlur，这样作为蒙版的时候就能有类似PS的虚化效果 。
视频加载中...
在游戏设计中，弹窗面板一般都是固定几个大中小尺寸的，这样方便统一。从截图可以看出，LOL手游中基本上也就是有大中小三个基础尺寸，也会有做定宽自适应高，定高自适应宽的弹窗。
有了前面的自适应拉伸基础后，其实面板背景就已经学会了，这样就可以很方便地延伸出不同的面板背景。
视频加载中...
在AL4.0的加强下，这个面板实现更轻松。在对文字内容的AL基础上，只需要给背景设为绝对定位并且设置约束Constraints的Left & Right和Top & Bottom ，这样就可以完美自适应宽高。
视频加载中...
在游戏设计中，不乏使用数字增长的效果强调个人资产数据。
视频加载中...
在过去的一些原型动画设计工具如Flinto、Principle都没奢望过能做数字滚动的效果，但Figma不一样，组件内的交互让我有了些想法。那在Figma中应该怎么做呢？
我们可以简单的分析思路：
【原子】把0~9，A~Z拆分成独立的原子组件，方便统一管理大小、样式；【自循环】把0~9~0，A~Z~A使用AfterDelay建立自循环动画，如每个状态停留100ms，那10个刚好1000ms（1秒）。由于自循环后会直接播放，所以可以给一个【-】作为起始帧，也方便后续调整延迟。【输出结果】把自循环动画 → 原子(最终结果)，建立组件集系列；最后在需要的地方直接调用Number to / 具体数系列的组件，在【-】状态分别调整Delay延迟时间，让字母错开完成结束。
注意：
在原子级组件，建议设置每个组件的宽高一致，因为大部分字体都是非等宽字体，对1、7、E、F、I、J、L、M、W显示的宽度差比较大， 后期对组合结果进行Autolayout排列的时候，非等宽的组件会出现异常，缺失动画。由于Figma会记录元素最终的渲染状态，就会导致数字动画在原型流Prototype Flow里只能播放一次，需要手动按R重置。2021全球总决赛中，有这么一个影视包装设计画面 Make / Break ，那这个效果其实Figma也能轻松实现。
视频加载中...
得益于文本继承的特性，可以只设计一个动画组件就可以完成核心步骤。
Start帧，以两行的方式输入同一个字符，勾选ClipContent 裁剪超出Frame的内容用于只显示第一行字母，以SmartAnimate切换至End帧。End帧，调整位置，显示第二行字母，以1ms延迟Instance的方式直接跳转回Start帧。最后在调用的时候，调整每个组件的Delay延迟时间，让字母错开播放。特别说明的是：这个效果在原型播放约3次以后，会变慢（原因未知）,可以按R来重置效果。
基于上面的讨巧的方法，有了一些大胆的期望：
背景图层的填充模式提供一种 类似Slicing的拉伸模式，即可使用轻便的AutoLayout结构自适应宽高拉伸游戏类UI 设计主要针对游戏的图标、登录界面、游戏界面、局内道具等方面进行设计。游戏分为网页游戏、客户端、移动端等，本章主要就移动端的UI 设计进行介绍。
特点：
◆ 游戏UI 设计首先应该考虑到良好的人机交互界面。
◆ 其次要考虑到游戏界面的操作逻辑、界面美观，使用户在感观上得到良好的视觉体验。
◆ 要具有一定的大众娱乐性、互动沟通性、真实角逐性。全民参与的游戏可以以任何人为服务对象，给大家带来欢乐。游戏也可成为人们沟通的话题之一，具有一定的社交性质。
图1
图2
1.1 游戏类APP UI 设计——休闲类游戏
当前，手机已然成为人们日常生活必不可少的一部分，而休闲类游戏往往就可以打发空闲时间。这类游戏的基本特点都是上手时间较短，不必花费过多的精力与财力，游戏中途可以随时中止。休闲类游戏是在劳作之后进行放松的娱乐方式，而不是让用户为之着迷而忘了正业。
图3
设计理念：棋牌类的休闲类游戏, 为双人对抗模式，可以在闲暇时间与朋友进行游玩。
色彩点评：橘黄色与橙色相互搭配，给人一种暖暖的视觉感受，可以使人专注于游戏中。
图3 游戏为休闲类的小游戏，便于人们放松心情。以红色作为整体背景，橘色作为游戏区域的背景，很好地划分了区域空间。橘色和红色为邻近色相互搭配，可使页面更有层次感，使人产生舒适、和谐的感觉。
图4 作品为飞行类游戏过关界面，游戏结算界面中间突出了三颗橘黄色的星星，满星则代表完美通关，两颗或一颗则表示虽然通关却有不足。
图 4
图5 作品作为双人对战的休闲类游戏，通过在表格中填写OX，使对方不能成排连接起来。游戏页面结合星球形状，通过配色创造一种深度感，可使界面拥有立体空间感。
图 5
1.2 游戏类APP UI 设计——动作冒险类游戏
冒险类游戏通常指需要玩家自己操控角色进行冒险的游戏，通过游戏中的NPC 进行任务交互来推动游戏情节发展。每款冒险类游戏都有自己独特的装备系统，同时可以看到角色的基本属性信息，还可以根据用户自己的喜好与道具的好坏配置装备，从而更顺利地通关。
图 6
设计理念：游戏过关的结算页面，采用直线线条设计，给人一种简洁之美。
色彩点评：黑色背景下突出了黄色的结算区域。
图6 作品为勇士闯关游戏的结算页面，设计中以六边形图形为主，下方的四边形为底层图案，凸显出页面的层次感。勇士闯关类游戏，在界面中应用皇冠、勇士头像、佩剑等图像，使用户可以沉浸在游戏的设定情景中。
图 7
图7 作品为游戏中的人物版面设置，可以对人物身上的道具进行更换升级。游戏风格偏向原始部落，在UI 界面设计上采用木纹、石纹的图案，颜色也以自然色作为基调。
图 8
图8 作品为偏向暗黑系的游戏UI设计，本页面为人物的背包设计，对背包中的装备进行点击就可穿戴，同时还包括消耗品和一些任务道具，可以进行登记和与NPC 的交易。
游戏类APP UI 设计技巧——游戏结束界面中评星的妙用
游戏关卡结束的时候总会出现一个评分总结页面，有的是采用数字，有的则采用图形给人一个直观的视觉感受，星型图形就是最常见的一种，通过直观的图形盈缺体现了用户的成绩。
图 9
配色方案
图 10
游戏类APP UI 设计赏析
文源:《APP UI设计手册》
版权归原作者所有
编辑：郑高京
相关推荐
《APP UI设计手册》
作者：孙芳
清华大学出版社出版
相关问答
无论是学什么,方式很重要,循序渐进,稳扎稳打才是王道。对于一个小白来说,就像是一张白纸不知道从何学起,网上有海量的信息,白花花全是不用钱的教程,但是不...
你好,我是柏小陌OK,一名UI设计师,很荣幸可以回你的答问题,以下是我个人的一些见解,希望对您有帮助。先说结论:图形用户界面设计和游戏界面设计有很大的区别...
学历不代表一切,个人努力才重要本人初中结业,全课合格是校长给的,为了就业。开了十年的货车,油车最后为了改变命运,学习家具设计及软件学历不代表一切,个人努...
关于游戏美术研发制作,我也有发言权,下面说说我个人想法:先说大环境。目前游戏竞争激烈,游戏公司也不好过,每年都很多大大小小的游戏公司倒闭。国内除了...关...
随着UI设计的大火,薪资水平也是不断提升,动辄上万都是小意思。故而大家都认为学UI设计可以让我们过上好的生活,找一份有前景的岗位。那么如何学习UI设计才能成...
[回答]UI即UserInterface(用户界面)的简称。UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UI,一般是指对软件的人机交互、操作逻辑、界面美观的整体...
这个问题要根据自身对知识和软件的掌握熟练度来决定,所以没有明确的答案。但是也分两种情况,一是正规美术院校毕业,有基础的,二是非美术院校和其他行业半路...
作为一名IT从业者,同时也是一名计算机专业的教育工作者,我来回答一下这个问题。首先,Web前端、UI设计、游戏开发和大数据这几个领域,目前都形成了各自比较庞...
国内UI设计的基础都是零学起。明确的说大学基本上是UI设计专业的,UI是一新型的行业,即使平面设计转UI,也是需要从零学起,因为UI的技法和平面是很多不一样的,...
有兴趣爱好你已经成功一半,但是话说回来,任何一个工作当你把它当成一个职业的时候,他就没有你自己想象的那么简单,那么好玩,那么挣钱了。祝你好运,加油有兴趣...
