大家好，我是葉子學(xué)堂24B的學(xué)員思思！
很榮幸受到文文老師邀請，在葉子學(xué)堂的公眾號上分享我的作品，這也是我轉(zhuǎn)行后完成的第一套作品。
我是一個很不典型的“工科生”，22年計算機專業(yè)畢業(yè)后，陸續(xù)在實習(xí)與工作中嘗試了PM、用研、品牌咨詢和系統(tǒng)策劃這些職業(yè)；因為小時候積累了大概十年的美術(shù)基礎(chǔ)，在這期間也給4A廣告做過外包設(shè)計，給公益公眾號畫過漫畫，還參與設(shè)計了一款腕表最終在小米有品商城上架，這也為我轉(zhuǎn)行到GUI打下了基礎(chǔ)。
而促使我決定報名葉子學(xué)堂的契機，也是看到公眾號上叉歪同學(xué)的復(fù)盤分享，他跟我一樣也是策劃轉(zhuǎn)UI，給了我很大的啟發(fā)和動力，于是來到葉子學(xué)堂進行系統(tǒng)的學(xué)習(xí)。
這次復(fù)盤我想主要分享三個模塊，是我回顧這次創(chuàng)作過程后覺得比較有意義的三個節(jié)點：
風(fēng)格的確定
關(guān)于「關(guān)鍵詞」
「確定風(fēng)格」是我一開始畫這套作品就知道，并且后續(xù)花了較多精力去攻克的難題。因為是第一次畫，又是跨行進入，經(jīng)驗不多，基礎(chǔ)的UI規(guī)范、用色技巧、細化方法等等，這些都是我在「確定風(fēng)格」途中邁過的一個個坎。期間感謝文文老師的陪伴和指導(dǎo)，讓我快速沖出新手村，把之前關(guān)于美術(shù)的積累在短時間內(nèi)發(fā)揮出來。
確定風(fēng)格的過程，我事后總結(jié)，就是經(jīng)過一張張圖，不斷填充和完善「關(guān)鍵詞」的過程。
第一張圖是課程中的一次作業(yè)練習(xí)，這里我就有意識地開始探索作品集的風(fēng)格了。在剛報班的時候，我就決定接下來要做一套「女性向」風(fēng)格的作品，所以第一張圖，盡管很多地方都畫得不成熟，也沒想好風(fēng)格的全貌，但定下來了第一個關(guān)鍵詞：女性向。
第二張圖是在上一張的基礎(chǔ)上重新畫的，找了新的立繪，確定了紫色的暗色調(diào)，同時受到《世界之外》的影響，加入了第二個關(guān)鍵詞：線。
《世界之外》參考圖
這張圖中我用比較多「線條」的元素去勾勒形狀，補充裝飾。給老師反饋后也有一些問題，比如界面里的線有點細碎，缺乏層次；背景光有些單調(diào)等。
由于是作業(yè)練習(xí)，這張圖到這里就沒有后續(xù)修改了，我把問題理解消化后就開始畫下一界面。
第三張圖是一個活動界面，受到《閃耀暖暖》某套服裝系列的啟發(fā)，想給畫面一些場景氛圍，就有了第三個關(guān)鍵詞：星空/宇宙。
《閃耀暖暖》參考圖
我想表達的情緒是宇宙空間的幽暗寂靜，所以畫面中大面積都是暗色，并加了少量點睛的亮光來烘托氛圍。（當(dāng)時想的還有一個元素是「音樂」，所以界面中間用了一些音符，但隨后這個元素就被我迭代掉了，這里不多提。）
同樣，這張圖也延續(xù)了之前「線」的關(guān)鍵詞，獎勵框體用線表達了相紙、回形針這些實物，界面中間的曲線、標(biāo)題字的背景裝飾，同樣出現(xiàn)了線。
但這張圖也有不少問題，跟文文老師溝通后，有以下要注意的點：
* 界面中純白較多，應(yīng)當(dāng)避免，需要給一些色相
* 界面中間的曲線，層次有點弱，顯得單薄
* 獎勵框的比例可以細長一點，現(xiàn)在顯得有點木訥
* 獎勵框的亮起特效，目前有點粗糙，可以多一些層次
* 獎勵框的標(biāo)題字需要和背景拉開差距，現(xiàn)在不太明顯
* 最右側(cè)獎勵框，亮部太亮，顯得過曝
其實這里最主要的問題是對于「線」這一關(guān)鍵詞理解不夠，導(dǎo)致界面里的線條顯得蒼白單調(diào)，這一問題在下面幾張圖中同樣存在。
第四張圖，主線選擇界面。一開始對于它的構(gòu)思，是想在構(gòu)圖上做些好玩的東西，所以選擇了俯視視角，會覺得比較有沖擊力。
期間又完善了作品的世界觀，所以這張主線選擇界面的設(shè)計就是：一顆奇跡石照亮了三扇門，每個門通往不同的世界。這張圖其實畫到這里我也覺得看起來怪怪的，于是就問了指導(dǎo)老師——文文老師，這才發(fā)現(xiàn)原來存在很多細節(jié)上的問題：
* 光影不合適。圖中最亮的地方打在了地上，而需要突出的中間的控件卻是暗的
* 文字透視推進的不徹底。畫面因為構(gòu)圖的原因就是要重表現(xiàn)的，文字部分的透視做的不徹底，反而會破壞整個畫面的感受
* 顏色方面，顯灰：重沒重下去，輕沒輕上來；顯臟：細碎的線比較多，地面紋理也需要再干凈點
這張的構(gòu)圖我覺得繼續(xù)畫下去可能有點駕馭不了，所以就到此中斷，試了一個新的構(gòu)圖。
到了第五張，還是主線選擇界面，重新出了兩版構(gòu)圖方案，想法是宇宙空間中漂浮著三扇門，每個門中有象征著星球的球體。
從中選擇了一版進行細化。
畫到這里，會覺得之前「女性向」的關(guān)鍵詞有所丟失，并且遇到了一個瓶頸：不知道如何深入。
大家也能看出來，畫面有了初步的氛圍，但是每個模塊的細節(jié)似乎只有單調(diào)的輪廓線。這時課上老師正好講到了「圖案」的重要性（下個模塊會展開講），于是我就以這一點為突破口，專門花時間琢磨框體紋樣的設(shè)計，這才掙扎出來，有了下一張圖。
第六張，在補充圖案設(shè)計的過程中，定下了第四個關(guān)鍵詞：塔羅，界面里用了星/月/日這些圖案元素，并且用復(fù)雜但有規(guī)律的線條將線組合成面，構(gòu)成完整的裝飾模塊。
構(gòu)圖方面，原本三個框體零散排列看起來有點亂，所以更改了構(gòu)圖透視，讓中央三個框體的排列變得有規(guī)律。除此之外，拿掉了原本左下角的星石，交互上換成了左右滑動，更直觀。
雖然這張圖有了一些完成度，但其實當(dāng)時還沒有辦法完全確定下來風(fēng)格。你會發(fā)現(xiàn)這張圖遠端的背景里，我用了一些寫實風(fēng)格的碎石點綴，但其實這些點綴與畫面近端所呈現(xiàn)的夢境、奇幻是有所不搭的。
當(dāng)時我也意識到了這個細節(jié)，但沒有想到更好的解決方案，就先開始了下一張新圖。
第七張，這張圖想畫的是主界面，將「線」關(guān)鍵詞拓展，用了較多「曲線」元素。畫面主體是暗色調(diào)，右上和左下有亮光相呼應(yīng)，協(xié)調(diào)平衡。在處理畫面中央每個點擊模塊代表的實物時，想到1999的風(fēng)格，就把它們做的有點復(fù)古風(fēng)（用了比較明顯的波點和異色手寫體等）。
《重返未來：1999》參考圖
但做到這里我意識到，這種復(fù)古風(fēng)（起碼是1999那種程度的復(fù)古）跟我前面界面想要傳達的女性向的閃耀精致是不太搭的，但一時間也沒想好這張圖現(xiàn)在要怎么改，所以也先擱置住，希望在下一張圖上，能把之前的這些對于風(fēng)格的顧慮和搖擺做好統(tǒng)一。
第八張圖，角色卡界面，終于確定了風(fēng)格。這張沿用了前面積累下來的元素：女性向、線、宇宙的幽暗（紫色暗調(diào)）等，在畫的過程中，也補充了一些新的元素來統(tǒng)一前面幾張圖想表達的感受，于是有了第五、六個關(guān)鍵詞：閃光、傾斜。
用極亮的光束與暗色的背景產(chǎn)生對比，能讓暗的部分顯得更暗，也讓畫面有了一些「閃耀夢幻」的情緒。畫面在豎直方向上做了傾斜處理，希望能打破原有網(wǎng)格界面的枯燥，增加一些趣味。
通過這張定下來了作品集的風(fēng)格之后，我開始著手調(diào)整前面幾個界面，把風(fēng)格向這個方向靠齊。
主線選擇界面，做了如下調(diào)整：
* 調(diào)整色相為紫色，加強中央?yún)^(qū)域的亮部，讓整體氛圍和整套作品更搭
* 細化了畫面下方的選擇提示條和右下角按鈕的背景曲線
* 遠端背景的寫實碎石換成飛鳥，更符合夢幻的氣質(zhì)
* 畫面右上角加了一些閃爍的虹光，增加氛圍感
主界面，做了如下調(diào)整：
* 去除原有的復(fù)古調(diào)調(diào)，旋轉(zhuǎn)木馬等實物改用模型（原來是我用AI生的圖，能看出來馬腿處有一些瑕疵）
* 增加畫面主體曲線的層次。原本的曲線有點硬，修改后給曲線整體加了點發(fā)光效果，在一些比較硬的邊緣周圍新增虛化的曲線層次，再用蒙版擦出一些清透的感覺
* 強化右上角「開始」模塊的層次。原本的按鈕周圍有很多雜物（卡片框、星球等），會分散走核心按鈕的注意力，所以這次修改就弱化了這些裝飾，強化主體
* 背景提亮，并增加豐富度。原來的背景看著很暗，也比較單一，所以就把背景的星球稍微提亮了一點，背景中增加一些有動勢的流星點綴，不至于看起來太空曠
* 增強光影氛圍，原本左下角的亮光區(qū)域有些單一，修改版增加了一些光暈效果
本模塊到這里就結(jié)束了，總結(jié)下來，我覺得風(fēng)格的確定是靠一些維度的限制來實現(xiàn)的，這些維度可以是關(guān)鍵詞，也可以是其他，重點都是告訴自己，告訴讀者，這是怎樣的一個畫面，這個畫面要用何種方式填充細節(jié)。在畫的期間我總結(jié)了一套方法，意在提供一些維度來更好地做限制，見下圖：
如果把這套風(fēng)格對應(yīng)填進去，就是這樣的：
細節(jié)的填充
關(guān)于「圖案」
還記得老師在一堂課上講過：“UI工種和原畫工種拉開差距最主要的是圖案（圖形）設(shè)計能力”，之后他又強調(diào)了圖案設(shè)計能力考察在求職過程中的重要性，所以我在后續(xù)畫界面的過程中就有意識地關(guān)注了這一塊，也盡量多留出圖案設(shè)計的空間以供練習(xí)。
前文說到在畫主線選擇界面的時候，是「圖案設(shè)計」幫我突破了瓶頸，這里詳細聊下。
圖中的框體，一開始是下圖的樣子，可以看到，有點簡陋，裝飾的東西只是簡單常見的星、月，組合形式也是直給的矩形框。后面課上老師講到進行圖案設(shè)計之前要先明確風(fēng)格要素，順著這個思路，我開始了接下來的設(shè)計。
一開始，我對于這個框體最終呈現(xiàn)的效果是有構(gòu)想的，不想要太厚重，所以主體是由輕盈的「線」所構(gòu)成。可是只有這一點并不能支撐我進行接下來的設(shè)計，所以就要尋找其他的風(fēng)格化要素，來給這個框體層層加碼，最終讓它變得豐富有看頭。我后面想到的關(guān)鍵詞是「西方」和「塔羅」，于是就找了很多歐式畫框，和一些帶有塔羅要素的裝飾線，嘗試從中提取設(shè)計語言。
最后的效果就是上圖展示的那樣，框體上下兩端用曲線纏繞成比較優(yōu)美的形狀，然后加入「星」和「淚滴」這些輪廓形狀點綴；框體左右兩側(cè)借鑒了參考中的某個畫框，用密集排列的豎線搭配「點」來填充空白部分；框體中間區(qū)域覺得有點空，就借鑒塔羅常見的方形+圓形的嵌套組合，再用點狀的虛線填充四角，讓框體四周也有細節(jié)但不至于太悶。
接下來趁熱打鐵，用類似的表達方式做了三個地點的圖形徽章：
為了豐富表達，三個徽章中又都加入了點狀虛線作為裝飾。
這套圖標(biāo)風(fēng)格確定后，后面的設(shè)計也沿用了這一標(biāo)準(zhǔn)。
總結(jié)來看，「圖案設(shè)計」真的在填充細節(jié)上幫了我不少忙，最開始畫的界面會顯得單薄、沒東西看，多半是圖案設(shè)計沒到位。我覺得每個圖案其實都是一副小型的畫作，也應(yīng)該五臟俱全，也該被鄭重對待。一幅幅小型畫作聚集在一個界面里，整體完成度自然就高了。這一點在眾多商業(yè)游戲上均有非常好的體現(xiàn)，值得我們后續(xù)多多研究，好好學(xué)習(xí)。
氛圍的完善
關(guān)于「素材應(yīng)用」
說起「營造氛圍感」，其實是我在畫圖過程中偶然間悟到的技巧。
還是這張圖。當(dāng)時畫到一半（圖中上半部分），會覺得圖案什么的也加了，為什么看起來完成度還是不夠。分析原因，我也知道是背景看起來單調(diào)，都是黑黑的一片，沒有變化，可問題是接下來要如何增加變化呢？
帶著這個困惑和文文老師溝通的過程中，她發(fā)的一張《世界之外》的宣傳圖給了我啟發(fā)，于是細細研究一番。
乍一看這張圖，會發(fā)現(xiàn)同樣是暗色背景，它就不會顯得單調(diào)，反而很有氛圍和意境。研究過后發(fā)現(xiàn)，圖中會出現(xiàn)很多用來營造氛圍的「素材」，比如光束、光斑、虹光、噪點肌理、光粒子等等，正是這些素材，讓畫面豐富了起來。（當(dāng)然，「素材」也可以自己去畫，我對素材的定義是易用性較高的裝飾元素，這些東西完全可以自己從零去畫，只是選擇現(xiàn)成的「素材」效率更高~）
有了這個收獲，我就嘗試給原有界面中加了一些「光」的素材（上上圖的下半部分），畫面立刻變得有了氛圍感，完成度也提高不少。
可以看到，之后的幾張圖中也試著繼續(xù)沿用這一方法去完善氛圍。
還有一個感悟也可以借此分享下：多多利用AI。在葉子學(xué)堂前面的課程中，業(yè)榮老師花了很大功夫去講AI的知識，也強調(diào)了AI的強大和重要性，所以在畫作品的時候，我也盡量多試著用用AI。下面這張圖沒有用到太復(fù)雜的AI技巧，只是用了一個擴圖，但我覺得效果很好。
原來的卡面資源是接近4:3比例的豎版圖，在登錄獎勵界面中，我一開始想把這張最終獎勵的卡面放大處理，但試了幾版效果都不理想。后面就想到，能不能營造一個更沉浸的環(huán)境，讓整個卡面都變成界面的背景，卡面中的人物就置身于這個環(huán)境中。于是就用AI出了幾張擴圖，將左邊的咖啡廳區(qū)域延申，變成左側(cè)標(biāo)題和獎勵框體的背景，再處理下明暗和光影，就完成了。
以上，就是這次復(fù)盤的全部。再回顧一下：
* 用「關(guān)鍵詞」錨定風(fēng)格。這趟確定風(fēng)格的過程實在不容易，經(jīng)歷了很多張圖，才用一些關(guān)鍵詞將風(fēng)格要素確定下來。我總結(jié)了一套確定風(fēng)格的腦圖，后續(xù)實踐過程中也一定會再去完善這套方法。
* 用「圖案」填充細節(jié)。圖形設(shè)計能力對于GUI工種來說十分重要，也很大程度上影響著界面的完成度，在這一點上值得深挖。
* 用「素材」完善氛圍。我覺得氛圍感大多是光與影的功勞，搞定這兩塊，再提高自己運用現(xiàn)成素材的能力，就能更好地運用技巧影響氛圍，再用氛圍傳遞情緒。
希望對大家有所幫助（鞠躬）。
寫在最后
前幾天看到游科創(chuàng)始人馮驥老師的一句話，分享給大家：“優(yōu)先打動自己，再找市場交集。”
我職業(yè)生涯的選擇是「找到自己」的過程，畫這套作品每一張圖的過程，無不都是在「打動自己」。馮驥老師說得對，只有先讓自己喜歡上所從事的行當(dāng)，所費心糾結(jié)的每個日夜，這個過程打動了自己，成果才有可能影響別人，才有可能創(chuàng)造出有價值的事物來。
畫這套圖的時候我最常聽那英在今年歌手舞臺上唱的《一顆星的夜》，我覺得和這套作品的風(fēng)格莫名有點搭，也和我當(dāng)時的心境有所牽連。
“就在明天 告訴世界 告訴自己沒辜負這黑夜”
“所有付出換我自由的路 所有付出換我夢中的路”
感謝今年與葉子學(xué)堂邂逅，感謝葉子學(xué)堂的每位授課老師，他們真的十分專業(yè)，又平易近人、真誠十足；感謝一直陪我完成這套作品的文文老師，她在我迷茫困惑時鼓勵我良多，又在我困難的節(jié)點給予指導(dǎo)和幫助，感謝你們！
最后，來看一下這套作品的匯總吧，謝謝你花時間看完這篇復(fù)盤，希望我們未來都能快快進步，越來越好~
素材來源于網(wǎng)絡(luò)，僅用于個人界面設(shè)計中使用
文文老師點評
思思同學(xué)是一個很努力也很認真的同學(xué)，作為一名轉(zhuǎn)行的學(xué)員，思思同學(xué)在做這套作品的時候需要兼顧上課，工作和作圖三個方面，雖然進度稍微的有點緩慢，但正所謂功不唐捐，念念不忘必有回響。
每周我都能看到思思同學(xué)在作品上的進步，也總能給老師帶來不同的驚喜。
因為是跟課程一起做的，所以很多綜合性的問題沒有很好的融合，前面的一張界面做了比較多的嘗試，也為他這套作品最終稿奠定了一定的基礎(chǔ)；
在做到 主線選擇界面的時候，思思當(dāng)時給這個作品的一些設(shè)定不是很能說服我，對于選中態(tài)我們之間產(chǎn)生了一些分歧，思思第一版用到的是投影（暗色）選中，未選中反而是亮光的，對于整體色調(diào)是暗色的界面來說，非常的違背交互邏輯和用戶習(xí)慣，所以我當(dāng)時給他快速的p了個效果圖（選中態(tài)為亮光）；然后再后面的細化方案中，思思同學(xué)通過版式課程學(xué)習(xí)后，一個界面做了多種方案的排版方式，盡量的讓界面有創(chuàng)意
當(dāng)時思思受到《世界之外》的影響比較大，導(dǎo)致做出來的作品很難擺脫對標(biāo)作品的現(xiàn)有框架。
這其實也是很多同學(xué)都存在的問題，即只看到了市場上成熟產(chǎn)品所呈現(xiàn)出來的視覺效果，卻忽視了影響這種視覺感受的內(nèi)因。
所以為了跟《世界之外》區(qū)分開，我給到很多關(guān)于曲線的設(shè)計點（世界之外的曲線設(shè)計不多，更多的是透視），讓這套作品盡量的“脫離”世界之外的影子，當(dāng)時正好是王者榮耀的元流之子賽季更新，里面很多的流線設(shè)計引人注目，所以就把這個想法給到思思，在后續(xù)的界面中也都有體現(xiàn)；
至于改進的地方，比如角色卡界面，整個界面的流線感覺不是很多，基本都是傾斜的塊，如果能改成流線的可能會更好。
除此之外標(biāo)題、七日登錄等活動的標(biāo)題字體設(shè)計，也有很大提升空間。
不過，作為一個策劃轉(zhuǎn)GUI的新人設(shè)計師，在不脫產(chǎn)的情況下，依舊堅持學(xué)習(xí)，并逐步實現(xiàn)作品的構(gòu)建和迭代，其實是特別的不容易。
雖然目前來看，作品中依舊存在不成熟的地方，但如果能給思思同學(xué)更多的時間，多跟老師交流溝通，多經(jīng)歷落地項目，我想他一定會做的更好，在游戲ui設(shè)計的道路上也能走的更遠！
最后也預(yù)祝思思能進入自己心儀的公司和項目~
Powered by Froala Editor
葉子學(xué)堂 官網(wǎng)：http://www.yezixt.com
212
作品
7276
粉絲
3
關(guān)注
分享能獲取更多贊？
大牛，別默默的看了，快登錄幫我點評一下吧！:)
登錄 立即注冊