探索用Figma做游戲UI設(shè)計(jì)
點(diǎn)擊 ▲ 三分設(shè) 關(guān)注，和 10 萬設(shè)計(jì)師一起成長
三分設(shè) x 騰訊設(shè)計(jì)族
前言
記得2021年《Figma一站式設(shè)計(jì)交付》中提到，F(xiàn)igma本身是一個(gè)矢量設(shè)計(jì)軟件，所以個(gè)人認(rèn)為Figma比較適用于制作一些偏扁平、卡通的游戲UI風(fēng)格。
縱觀全網(wǎng)Figma基本都是To B 、To C類的產(chǎn)品應(yīng)用，很少人會(huì)往這個(gè)游戲這個(gè)方向研究了，因此我開啟了一段Figma針對(duì)扁平類游戲UI設(shè)計(jì)的探索之旅，結(jié)合Figma Config 2022姍姍來遲的AutoLayout 4.0的使用，以英雄聯(lián)盟鮮明的?？怂箍萍硷L(fēng)格代表性更高。(以下案例僅為個(gè)人示范，與官方產(chǎn)品效果及資源無關(guān))
此次練習(xí)設(shè)計(jì)主要總結(jié)了一些設(shè)計(jì)技巧：
異形的自適應(yīng)按鈕、自適應(yīng)面板背景（AL4.0絕對(duì)定位+約束拉伸）
數(shù)字、字母動(dòng)畫（AfterDelay嵌套）
異形按鈕的做法
起初一個(gè)同事在大群里問，像這種異形的漸變按鈕在Figma里面做Autolayout組件嗎？
由于當(dāng)時(shí)正在使用skewDat插件。于是就想到兩種解決辦法：
對(duì)文本Autolayout之后，Autolayout層用skewDat插件傾斜 -10度，再對(duì)里面的文字傾斜10度，就得到了（負(fù)負(fù)得正）。
把兩邊異形的部分單獨(dú)抽出來，中間部分就可以做自適應(yīng)。
但其實(shí)以上兩種方法，都會(huì)有一些問題：
尺寸上會(huì)有小數(shù)點(diǎn)，不夠精確（像素控感到難受）
不能做不規(guī)則漸變填充（45度、角度漸變等）
不能給整個(gè)形狀增加描邊（如上圖最后一個(gè)按鈕）
文字不能入侵到異形部分
后來，在不斷的實(shí)踐過程中也發(fā)現(xiàn)了基于Autolayout 3.0更優(yōu)的解法，類似于做點(diǎn)9圖的效果得到更好的設(shè)計(jì)延展（限高，寬度自適應(yīng)/限寬，高度自適應(yīng)）。在AutoLayout4.0發(fā)布后，這個(gè)方法有了絕對(duì)定位的加持，實(shí)現(xiàn)變得更容易了(寬高可自適應(yīng))。
異形設(shè)計(jì)的自適應(yīng)
在大多數(shù)To B 、To C的應(yīng)用場景中，常規(guī)的按鈕如純色、漸變、幽靈、投影/發(fā)光按鈕+各種直角、圓角、全圓角，AutoLayout都能輕松的完成自適應(yīng)。
但在游戲設(shè)計(jì)中，按鈕的背景一般都不會(huì)做的規(guī)矩和太扁平，總會(huì)做一些和游戲主題匹配的樣式，會(huì)有一些特殊的異形裝飾，類似?？怂箍萍祭锍顺Ｒ?guī)的矩形按鈕，還有被圓和三角形切割的異形按鈕，因此也特意用Figma做了一些比較知名的游戲按鈕來做驗(yàn)證。
常規(guī)按鈕：可以拆解成一層文本，和一個(gè)填充/漸變層，通過添加Autolayout完美自適應(yīng)寬高。
游戲按鈕：可以拆解成一層文本，和一個(gè)可以自適應(yīng)拉伸的背景組件，在AutoLayout 4.0 后也能完美地自適應(yīng)寬高。
那具體應(yīng)該怎樣才能做到自適應(yīng)，同時(shí)文字和背景層能很好的分離切換呢？
AL3.0 & 4.0 中的實(shí)現(xiàn)原理
其實(shí)早期在Figma官方介紹Autolayout 3.0的Playground文件中，就隱藏了一種思路：
仔細(xì)觀察這幾個(gè)頭像，通過父級(jí)定寬FixedWidth + Autolayout + SpaceBetween的方法，因此我們按鈕還是拆成一個(gè)文本結(jié)構(gòu)層、一個(gè)背景拉伸層，并且一般按鈕來說都是定高的，只需要水平自適應(yīng)文本長度。借助這個(gè)點(diǎn)，結(jié)合Autolayout的Spaces Between 來完成按鈕和背景重疊一起的效果。
AutoLayout 4.0+組件屬性
得益于負(fù)間距、絕對(duì)定位、堆疊順序、組件屬性的特性，可以省略一層文本結(jié)構(gòu)層，通過組件屬性直接賦能在主按鈕上。背景層的處理使用絕對(duì)定位，以及約束填滿整個(gè)按鈕的大小，這樣就可以輕松實(shí)現(xiàn)寬高自適應(yīng)的按鈕背景了。
剩下的重點(diǎn)是制作出可自適應(yīng)拉伸的按鈕背景圖層即可。
自適應(yīng)拉伸核心細(xì)節(jié)
Figma中做自適應(yīng)拉伸主要使用約束Constraints的Top、Bottom、Left 、Right和Top&Bottom、Left&Right進(jìn)行定位以及布爾運(yùn)算的Union、Subtract進(jìn)行加減運(yùn)算，這樣出的圖像既能夠自適應(yīng)拉伸，也能夠保持一個(gè)整體同時(shí)方便調(diào)整樣式。
最終的效果類似CSS3 Border-Image 邊框圖像、Android 的 9-patch點(diǎn)九拉伸圖、iOS的Slicing 拉伸、Flutter的centerSlice。
(視頻中按Tab切換下一個(gè)圖層，Enter進(jìn)入圖層，Shift+Enter返回上級(jí)圖層)
按鈕重疊核心細(xì)節(jié)
文本結(jié)構(gòu)層：文本圖標(biāo)層可以建立不同的Variants+Autolayout，來實(shí)現(xiàn)切換純文、左圖標(biāo)+文本、文本+右圖標(biāo)等多種方式。（Autolayout 3）
當(dāng)然也可以使用AutoLayout 4 通過添加組件屬性，一個(gè)組件就能完成。
按鈕背景層：背景層內(nèi)的元素注意使用約束Constraints的Left & Right和Top & Bottom。如果有多個(gè)按鈕背景層做切換 ，也可以使用Variants。
整體按鈕AL3.0：做水平自適應(yīng)按鈕，使用垂直方向的AutoLayout，間距設(shè)置Auto即為Spaces Between效果，Padding設(shè)為0。(垂直自適應(yīng)按鈕，則使用水平方向的AutoLayout，寬度設(shè)置為固定寬度）
整體按鈕寬度設(shè)為Hug Contents ，高度均需設(shè)為按鈕的固定高度如32。
文本結(jié)構(gòu)層BtnText的Resizing寬度設(shè)置Hug Contents或Fill Container用于Padding調(diào)整左右邊距，高度同整體按鈕。
按鈕背景層BtnBg的Resizing寬度設(shè)置Fill Container用于自適應(yīng)拉伸寬度，高度同整體按鈕。
注：如果出現(xiàn)背景層蓋住了文本層，交換一下圖層順序即可。
整體按鈕AL4.0：嵌套一層父級(jí)AutoLayout，Padding可以用于方便調(diào)整文本層和背景層之間的內(nèi)填充。
其中文本結(jié)構(gòu)層BtnText的Resizing寬度設(shè)置為Hug Contents，Hug Contents，這樣按鈕可以單行或多行自適應(yīng)。
背圖層設(shè)置為絕對(duì)定位，寬高同父級(jí)AutoLayout，并且設(shè)置約束Constraints的Left & Right和Top & Bottom，這樣就可以完美自適應(yīng)寬高。
注：如果出現(xiàn)背景層蓋住了文本層，交換一下圖層順序即可，或者在AL更多設(shè)置中調(diào)整CanvasStacking的順序。
虛化蒙版細(xì)節(jié)
細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)LOL這個(gè)Play按鈕在hover的時(shí)候，會(huì)有一些朦朧的煙霧流動(dòng)效果。這個(gè)核心的細(xì)節(jié)點(diǎn)主要是把遮罩的描邊圖層加一層LayerBlur，這樣作為蒙版的時(shí)候就能有類似PS的虛化效果。
自適應(yīng)面板背景
在游戲設(shè)計(jì)中，彈窗面板一般都是固定幾個(gè)大中小尺寸的，這樣方便統(tǒng)一。從截圖可以看出，LOL手游中基本上也就是有大中小三個(gè)基礎(chǔ)尺寸，也會(huì)有做定寬自適應(yīng)高，定高自適應(yīng)寬的彈窗。
有了前面的自適應(yīng)拉伸基礎(chǔ)后，其實(shí)面板背景就已經(jīng)學(xué)會(huì)了，這樣就可以很方便地延伸出不同的面板背景。
在AL4.0的加強(qiáng)下，這個(gè)面板實(shí)現(xiàn)更輕松。在對(duì)文字內(nèi)容的AL基礎(chǔ)上，只需要給背景設(shè)為絕對(duì)定位并且設(shè)置約束Constraints的Left & Right和Top & Bottom，這樣就可以完美自適應(yīng)寬高。
數(shù)字、字母動(dòng)畫
在游戲設(shè)計(jì)中，不乏使用數(shù)字增長的效果強(qiáng)調(diào)個(gè)人資產(chǎn)數(shù)據(jù)。
在過去的一些原型動(dòng)畫設(shè)計(jì)工具如Flinto、Principle都沒奢望過能做數(shù)字滾動(dòng)的效果，但Figma不一樣，組件內(nèi)的交互讓我有了些想法。那在Figma中應(yīng)該怎么做呢？
數(shù)字滾動(dòng)動(dòng)畫
我們可以簡單的分析思路：
【原子】把0~9，A~Z拆分成獨(dú)立的原子組件，方便統(tǒng)一管理大小、樣式；
【自循環(huán)】把0~9~0，A~Z~A使用AfterDelay建立自循環(huán)動(dòng)畫，如每個(gè)狀態(tài)停留100ms，那10個(gè)剛好1000ms（1秒）。由于自循環(huán)后會(huì)直接播放，所以可以給一個(gè)【-】作為起始幀，也方便后續(xù)調(diào)整延遲。
【輸出結(jié)果】把自循環(huán)動(dòng)畫 → 原子(最終結(jié)果)，建立組件集系列；
最后在需要的地方直接調(diào)用Number to / 具體數(shù)系列的組件，在【-】狀態(tài)分別調(diào)整Delay延遲時(shí)間，讓字母錯(cuò)開完成結(jié)束。
注意：
在原子級(jí)組件，建議設(shè)置每個(gè)組件的寬高一致，因?yàn)榇蟛糠肿煮w都是非等寬字體，對(duì)1、7、E、F、I、J、L、M、W顯示的寬度差比較大， 后期對(duì)組合結(jié)果進(jìn)行Autolayout排列的時(shí)候，非等寬的組件會(huì)出現(xiàn)異常，缺失動(dòng)畫。
由于Figma會(huì)記錄元素最終的渲染狀態(tài)，就會(huì)導(dǎo)致數(shù)字動(dòng)畫在原型流Prototype Flow里只能播放一次，需要手動(dòng)按R重置。
重復(fù)字母翻動(dòng)動(dòng)畫
2021全球總決賽中，有這么一個(gè)影視包裝設(shè)計(jì)畫面 Make / Break ，那這個(gè)效果其實(shí)Figma也能輕松實(shí)現(xiàn)。
得益于文本繼承的特性，可以只設(shè)計(jì)一個(gè)動(dòng)畫組件就可以完成核心步驟。
Start幀，以兩行的方式輸入同一個(gè)字符，勾選ClipContent 裁剪超出Frame的內(nèi)容用于只顯示第一行字母，以SmartAnimate切換至End幀。
End幀，調(diào)整位置，顯示第二行字母，以1ms延遲Instance的方式直接跳轉(zhuǎn)回Start幀。
最后在調(diào)用的時(shí)候，調(diào)整每個(gè)組件的Delay延遲時(shí)間，讓字母錯(cuò)開播放。
特別說明的是：這個(gè)效果在原型播放約3次以后，會(huì)變慢（原因未知）,可以按R來重置效果。
一些期望的Feature
基于上面的討巧的方法，有了一些大膽的期望：
背景圖層的填充模式提供一種 類似Slicing的拉伸模式，即可使用輕便的AutoLayout結(jié)構(gòu)自適應(yīng)寬高拉伸
- END -
我們相信設(shè)計(jì)師和創(chuàng)造者一樣是思想家
