美化框，這個(gè)項(xiàng)目從我去年開(kāi)始就一直在研究，和盒友們一起更新使用體驗(yàn)，一步步從設(shè)計(jì)再到驗(yàn)證...最終形成了我自己的設(shè)計(jì)規(guī)則。

這篇的指南文章，我想為想設(shè)計(jì)但找不到辦法的您，和正在迷茫的您，提供可能會(huì)在項(xiàng)目中會(huì)用到的理想尺寸和想法，從怎么設(shè)計(jì)到動(dòng)畫(huà)導(dǎo)出的格式，幫助您成為一名創(chuàng)作者。

在我用半透明的覆蓋的位置是重點(diǎn)設(shè)計(jì)的區(qū)域，但設(shè)計(jì)元素不能覆蓋到功能。比如說(shuō)護(hù)甲、技能、武器，我們所做的只是覆蓋原UI，然后對(duì)它進(jìn)行視覺(jué)設(shè)計(jì)。

怎么開(kāi)始設(shè)計(jì)

截一張1920x1080的圖，把截圖放在編輯軟件里。描邊畫(huà)出大概區(qū)域，然后可以簡(jiǎn)單地制作一些素材（也可以去找素材），但是當(dāng)涉及到專業(yè)的設(shè)計(jì)時(shí)，事情就會(huì)變得復(fù)雜得多...比如讓靜態(tài)變成動(dòng)態(tài)，會(huì)多出很多步驟。

保持視覺(jué)的“一致性”

從你開(kāi)始設(shè)計(jì)的第一步就是確定風(fēng)格，所有元素都需要保持一致性。一致性是你給觀眾印象最平衡的部分，設(shè)計(jì)的一致性說(shuō)明我們的所有元素都具有相似性。包括字體、顏色、素材、元素大小、定位等等，它們需要根據(jù)排版或者項(xiàng)目的邏輯使用，在畫(huà)布中以相同的方式分布。

決定設(shè)計(jì)的“重心順序”

血條-計(jì)時(shí)器-武器-隊(duì)友-物品

重心指的是最重要的設(shè)計(jì)區(qū)域，更像排版里的“層次關(guān)系”，具有明顯的結(jié)構(gòu)。換句話說(shuō)，要清楚地去傳達(dá)設(shè)計(jì)上不同內(nèi)容的相對(duì)重要性。例如，海報(bào)上的文字標(biāo)題的突出和這篇文章的標(biāo)題。

讓你理清楚重心的順序是讓好你分組去設(shè)計(jì)，不必想的太復(fù)雜。

設(shè)計(jì)不能太復(fù)雜，保持平衡

很多玩家都不喜歡“花里胡哨”的視覺(jué)優(yōu)化，原因是“過(guò)多的視覺(jué)會(huì)遮住功能UI”，我們的任務(wù)只是把設(shè)計(jì)元素與其他設(shè)計(jì)元素相關(guān)聯(lián)，素材層次的元素權(quán)重相等，以實(shí)現(xiàn)視覺(jué)和諧。

人物素材不能與隊(duì)友框疊加

就素材重心而言，視覺(jué)效果和文本在大多數(shù)的項(xiàng)目范圍內(nèi)應(yīng)該差不多，但是人物素材占的比例很大，不小心的話會(huì)讓視覺(jué)失衡。我的建議是“人物素材”不能與其他UI疊加，留下更多呼吸空間給觀眾。

動(dòng)態(tài)導(dǎo)出的格式

動(dòng)態(tài)文件不到1MB

這樣的大小想必你也心動(dòng)不已吧，我非常鼓勵(lì)你也這樣做。雖然這是OBS流媒體的典型大小，但它仍然為你提供了很大的靈活性來(lái)支持你的設(shè)計(jì)。保持較小的文件大小可確保你能使用的任何“流媒體”應(yīng)用程序，但不包括直播姬和直播伴侶。我不建議你做的動(dòng)畫(huà)文件保存為“MOV”，因?yàn)槲募笮〕跄愕南胂蟆艽螅瑤装費(fèi)或者幾個(gè)G。像直播伴侶之類的應(yīng)用程序會(huì)用硬件去加速你的動(dòng)態(tài)文件，性能不能保證，絕對(duì)會(huì)卡頓。

解決辦法：Adobe Media Encoder 2020或更高的版本，導(dǎo)出webm格式，然后設(shè)置alpha透明通道。

最后

我的每種方法都有明顯的缺點(diǎn)和優(yōu)點(diǎn)，可能是我理解的設(shè)計(jì)規(guī)則不會(huì)讓很多人接受，也沒(méi)有完美的選擇。如果你想設(shè)計(jì)這些，得想想你準(zhǔn)備花多少時(shí)間、金錢和精力，然后選擇最適合你的方式。