“法法”同學來自網(wǎng)絡班，由“23K老師”指導，以下為作品復盤總結。

01??立項與風格確定

1.收集資料

開始決定做這個作品的時候，腦海中第一個想法就是想做一套二次元風格的比較具有潮流感的作品。于是在定情緒板時，收集的參考圖都是以扁平化、潮流化為主。此外還包含很多比較酷的二次元角色。

在整理和分析它們時，我發(fā)現(xiàn)偏現(xiàn)代科技感的角色更符合我個人的喜好。因此作品的大方向就落在了“二次元+賽博風”這個定位上。

2.初級情緒版

最開始的情緒版非常簡單。我先是寫了一個基礎的世界觀劇情，大概內容講述的是：在一個虛擬的網(wǎng)絡世界中玩家要與AI進行抗爭的故事。圍繞這個故事我設定了幾個關鍵詞：

3.定調海報

確定關鍵詞后，我開始在網(wǎng)上大量尋找參考圖和素材圖，并把關聯(lián)度較高的素材單獨進行了一個分類。接著便開始根據(jù)參考圖制作第一版“風格定調海報”。

做“風格定調海報”的時候，思路其實沒有完全放開，平面版式設計也比較簡單。

經(jīng)過老師指點后，我在初版的基礎上又進行了一次優(yōu)化，更加大膽的去疊了一些素材，最后呈現(xiàn)的效果有了不小的提升。

沿著這個思路，我后續(xù)又出了兩個版本。雖然我覺得這兩個版本的效果尚可，美感達標了，但整體上總是感覺亂亂的。

因為說不出具體原因，便跑去“騷擾”老師了。

溝通后，我明確了問題：角色和背景元素之間的關聯(lián)度低；畫面不夠整體、太碎；找的參考范圍太窄，太受局限。其中對我啟發(fā)最大的就是：做游戲UI設計可以從海報、美宣等其他視覺領域找靈感。

4.完善情緒版

我對世界觀、配色、元素篩選等內容比較有底，但是對于最終想要呈現(xiàn)的效果還不是太明確。在這個過程中，正好課程講到了情緒板，所以上完課后，我立刻把欠缺的部分做了填補和完善。同時以此為基礎，補充了一些參考圖。

5.拓展海報設計

之后的課程是一節(jié)P圖課。學完后我感到自己似乎領悟到了一絲精髓，這讓我能夠更加大膽靈活地去運用我看到的參考圖。以下為部分素材圖：

首先是對之前的第三版進行優(yōu)化。接著我依靠頭腦風暴快速P了4個版本。我做了很大的改變和嘗試，可以看出每個版本在構成上的差異還是比較明顯的。

???? ? ? ?? ? ? ? ? ? ?

有了這么多的風格海報后，我心里就有底了，可以開始思考如何將UI落地了。

02??第一張UI圖的制作

1.方案圖 版本v1.0

首先思考的是我應該做哪一個界面。由于前面做的海報都是以角色為中心，所以第一個界面自然是選“帶有角色的界面”。再細分一下，從“抽卡（帶角色）界面”和“角色信息界面”中，我選擇了前者。因為在我看來，抽卡界面的構成可以更多變，元素也更豐富。

我選擇以第七版為基礎作圖——因為它的構成比較有張力且不常見。第四版我也比較喜歡，但自我判斷落地難度較大。

在加入UE后問題很快就出現(xiàn)了。角色背景與UI的層次沒有拉開，并且畫面依然有拼湊感。

2.方案圖 版本v2.0

為了解決這些問題，我嘗試通過添加一些氛圍光、以及結合其他版本海報的處理方式對畫面層次進行優(yōu)化，這就形成了過渡版本1.5

這個版本的背景層次依然存在問題，為了避免自己陷入思維鈍性。我決定建立一個設計分支，這樣既可以解決問題，也可以和之前的設計作對比。

其實我們在設計過程中，大腦會一直出現(xiàn)各式各樣的想法。但做出選擇后，往往要拋掉大部分。

而分支設計恰好可以提供一個捕捉靈感的機會。我以永動機、人類追求無限的能量為次主題，并加上“∞”作為關鍵元素。緊接著我調整了情緒版，補充了部分世界觀劇情。沿著這個主題的關聯(lián)元素，我融合出了第二個版本。

3.方案圖 版本v3.0

對比之后，我確定第二版相較第一版在完成度上有較大提升。但我意外發(fā)現(xiàn)設計感低了，畫面的構成變普通了，元素運用也過于簡單直接。于是針對這幾個問題我又開始了新一輪的優(yōu)化。

·優(yōu)化過程

自從學會23K老師的“混沌P圖大法”后，我感覺設計過程流暢了很多。比如我把煙霧的效果進行了加強，使其不僅僅是氣氛作用，還能起到分割畫面，改變節(jié)奏，引導視覺焦點的作用。配色也使用“混沌疊色法”，在主色調下添加補色和裝飾色。

為了平衡視覺感受，加強動感，我把原立繪替換成一個天然帶有動態(tài)效果的新立繪，她跟背景的煙霧效可以更好的融合。之后是減弱底紋，補充點、線等裝飾細節(jié)。最終敲定了這個版本作為UI落地的方案稿。

4.細化完成

在細化過程中還是會有些問題要處理。如：明暗反差過大；一些視覺點過重；元素融合不夠等。這里面最令我糾結的是頁簽樣式和字體處理，修改了很多版本。最終我還是覺得采用輕量化的設計會更符合現(xiàn)在的審美。

至此第一張圖就算完成了。它經(jīng)歷了多次打磨和迭代。雖然代價不低，但后續(xù)界面可以站在它的肩膀上，將它作為標桿。而且很多元素、圖素都可以再利用，進而提升其他界面的制作效率，方便風格的統(tǒng)一。從這個角度看，還是非常值得的。

03??后續(xù)界面的延展設計

1.章節(jié)選擇界面

在開始做情緒版的時候，弱包裝界面原本錨定的是角色屬性界面。既然我已經(jīng)有一張角色展示型界面，那為了避免重復，我把它更換為章節(jié)選擇界面。一開始思考比較簡單，就是做個平面的純版式方案。但在加上了機械質感和氛圍效果后，成圖效果一般，問題也多。以至于被老師一票否決重新設計。

既然如此，我便啟用了一個沒被落地的思路——做成HUD的形式。了解游戲的都知道，當前章節(jié)、已完成章節(jié)和未解鎖章節(jié)是需要明顯區(qū)分的內容，我沿著這個思路收集了一批新的參考圖。讓我驚喜的是這類參考還是挺多的，思路也就很快打開了。

因為有好的素材，所以整個過程比較順利，很快就做出了我心中想要的效果。

2.日常任務界面

任務界面屬于列表型界面。一開始我也就是簡單做了個列表構圖，結果做著做著發(fā)現(xiàn)排版不好看。

頁簽部分的樣式太直白，左右分割很硬，給人很厚重的感覺。于是我想到在這個界面添加主體，使其成為界面的核心刻畫點。圍繞這個刻畫點也能做一些版式上的節(jié)奏設計。

在找參考圖的過程中，一個不斷散發(fā)能量的巨大巖石吸引了我。它非常貼合我的設計主題的。并且其自身的打光效果也為了我提供了靈感。使我在處理主體和場景關系時，有了更好的方案。最后實現(xiàn)的效果也是非常棒的。

3.七日簽到界面

七日簽到是游戲中的常見功能。我最開始選擇了很常規(guī)的構圖——左側是角色，右側是獎品，非常穩(wěn)妥。但考慮到是個人作品，不是項目圖。我告訴自己應該做些不一樣的東西。

我的想法是從角色下手，結合角色搭建一個帶有視覺的背景。我翻遍了自己收集的近百張立繪，一個坐在軍備箱里的少女吸引了我的注意。

這張圖是少見的俯視角度構圖，更妙的是它還帶有一定的透視感。憑借著這兩條特色我可以有很大的發(fā)揮空間。

把它加入畫面，使用自帶的透視做出背景空間感。填入UE控件，保持周圍有較多的留白。這樣調整下來視覺感受還是不錯的。此外我也試著在冷色基調的畫面里加入一束金色光效，氛圍感就起來了。最后再添加一些暗紋和裝飾元素，就完成了。

4. LOGO 界面

我希望在LOGO的設計中盡可能的將“∞”符號、鐳射、科技感的點線面表達都融入進去，使其整體氣質更加貼合游戲主題。于是我找了一張符合思路的參考圖。

考慮到整套UI的氣質多為方形和尖角，所以圖形也是圍繞此特征做的設計。最后將背后的圖案換成了六芒星的造型，賦予科幻元素。

但做完后發(fā)現(xiàn)圖形在層次上有些搶標題字，還會導致整體過重。于是更換了形體特征，進行了減弱處理和節(jié)奏優(yōu)化。

5.整合調整

在完成了全套圖的細化工作后，我把它們排在一起又做了一輪審視?？紤]到最終會形成瀑布圖展示出來，便調整了細節(jié)元素，統(tǒng)一了光感和顏色。

04??學員采訪

Q：你好法法，先自我介紹一下吧~

A：大家好，榮哥好，我是法法。本身是做GUI的，隨著年齡的增長逐漸感受到了壓力，需要拼一把，所以就來葉子學習了。

Q：聽你的指導“23K老師”說，這套圖前后也做了6~7周的時間。平時工作很忙吧。如何堅持下來呢？

A：因為很想拔高一下自己的水平，而且二次元是我喜歡的品類之一，所以動力較足。還有一個原因是上個月剛離職，做個人作品時間多了些。

Q：原來如此，那做完這套作品后，你有感悟嗎可以分享嗎？

A：前期在定風格時，因為需要反復嘗試會花比較長的時間。但這也會讓后面更加順利。另外多了解一些有特色的風格，提高自己對藝術的認知，有助于出好作品。

圖形設計方面，可以多借用參考圖，這能讓作圖有依托。但最終還是要提升自己的原創(chuàng)設計能力。另外設計工具并不僅限于PS，結合建?；騽有Ш?，往往可以實現(xiàn)更加高級的效果，這也是后續(xù)的學習方向。

Q：感謝法法同學的分享。課程結束只是開始，我們要繼續(xù)保持聯(lián)系哦~~

A：非常感謝葉子學堂各位老師的悉心指導和23K老師一直以來的幫助，這讓我學到了很多很多。

我肯定會一直關注葉子學堂，在之后的工作中如果有問題我會來“騷擾”老師的，哈哈~