22屆實(shí)體班A醬同學(xué)的作品總結(jié)復(fù)盤(pán)！

22屆下半年的實(shí)體班完美收官！

同學(xué)們的作品都太過(guò)精彩

今天為大家?guī)?lái)的是實(shí)體班優(yōu)秀畢業(yè)學(xué)員——A醬同學(xué)的作品《時(shí)之都市》

讓我們一起看看A醬同學(xué)是如何對(duì)學(xué)習(xí)期間作品進(jìn)行復(fù)盤(pán)的吧~~~

設(shè)計(jì)師：?A醬

指導(dǎo)老師：?皮皮、23K

決定做一套二次元風(fēng)格帶有科技感的作品

收集資料

定立繪，參考圖偏機(jī)甲方向，參考元素有卡扣、拼接元素，點(diǎn)線裝飾較多。

定情緒版，偏向潮流感、科技全息投影方向。

初級(jí)情緒版

大致確定參考圖和主題元素后，開(kāi)始制作最初的情緒版。

先確定了世界觀劇情：經(jīng)過(guò)改造的機(jī)械少女保護(hù)都市的故事。

關(guān)鍵詞：機(jī)甲、電池、電源接口、芯片、HUD面板、全息地圖等。

另外還找了一些顏色參考，根據(jù)與角色的適配度，選定了幾個(gè)方案整理，初步確定了要做的幾個(gè)界面。

第一版

落地我首選了角色屬性界面。

構(gòu)圖選擇了以角色為中心的居中構(gòu)圖，角色屬性界面是以UE為主的弱包裝界面，能做的構(gòu)成還是很有限，所以為了豐富界面的設(shè)計(jì)，我在兩側(cè)的UE排版上花了一點(diǎn)小心思。

第一版設(shè)計(jì)稿先確定了UE，根據(jù)情緒版的關(guān)鍵詞和顏色參考，背景上做了彈框和科技點(diǎn)線面元素的裝飾。為了突出輕薄感，底板和控件我選擇做一些半透處理再裝飾一點(diǎn)點(diǎn)的點(diǎn)線豐富層次。

完成后，發(fā)現(xiàn)以藍(lán)色為主的界面主題色沒(méi)有什么特點(diǎn)。按鈕的選擇狀態(tài)和常態(tài)也沒(méi)有作出區(qū)分，交互的層次沒(méi)有拉開(kāi)，界面效果并不是很理想。

第二版

分析完第一版的問(wèn)題后，先針對(duì)顏色的問(wèn)題進(jìn)行了修改。

調(diào)整了幾個(gè)版本的主色調(diào)，也相應(yīng)修改了一些小控件的顏色搭配。根據(jù)立繪的用色，降低了點(diǎn)綴色的飽和度，以高級(jí)灰為主。

最終確定第一張綠色版本作為主色調(diào)，同時(shí)綠色給人生物科技的感受，很契合我的主題。

（內(nèi)心Os：粉色的風(fēng)格其實(shí)也不錯(cuò)，但是科技感略微有些弱，只好放棄。)

最終調(diào)色版

最終版

解決了顏色的問(wèn)題之后，接下來(lái)就要解決層次沒(méi)有拉開(kāi)的問(wèn)題。

按鈕的選擇狀態(tài)和常態(tài)在輪廓上做了區(qū)分。

為了更突出科技感，右側(cè)的信息改成了帶小透視的HUD面板形式。結(jié)合原有的復(fù)古科技的感覺(jué)，裝飾細(xì)節(jié)側(cè)重于面與線的結(jié)合。增加了光感和倒影的處理。

關(guān)于細(xì)節(jié)部分點(diǎn)線面提取，很多同學(xué)會(huì)根據(jù)自己的初步感受直接生搬硬套而不是提前進(jìn)行分析。除了分析包含哪些點(diǎn)線面造型外，面狀裝飾和線條的關(guān)系、距離、比例，點(diǎn)狀裝飾一般會(huì)出現(xiàn)在哪些結(jié)構(gòu)附近等規(guī)律也需要總結(jié)出來(lái)。盡可能把原畫(huà)作品內(nèi)產(chǎn)生的裝飾節(jié)奏應(yīng)用到控件中去，才能保證產(chǎn)生有體系的視覺(jué)語(yǔ)言。從這個(gè)角度來(lái)看，這張圖還是有非常多的提升空間的，在控件設(shè)計(jì)上和原畫(huà)結(jié)合的不夠緊密

抽卡界面

做好角色信息這張偏弱包裝的界面，想嘗試制作一張偏展示型的界面。

展示型界面可以在排版和構(gòu)成上做更多變化，元素的使用上也有更多的選擇。

第一版

做的比較簡(jiǎn)單，大致確定了構(gòu)圖，添加了一些元素。但效果不太好，有點(diǎn)松散，前后層次依然不是很分明。

第二版

修改前又收集了一些素材，想做成地鐵屏幕的形式。也想在這個(gè)基礎(chǔ)上加上HUD的元素。

調(diào)整了人物位置，拉開(kāi)控件關(guān)系。修改后視覺(jué)觀感上更整體了。

考慮到所有界面的適配性，上半部分取消了曲面屏的設(shè)計(jì)，只在下方做了透光和投影的設(shè)計(jì)。

一些小控件外形是根據(jù)機(jī)械立繪身上提取了一些圖形元素，又在邊角做了點(diǎn)線的處理，最后一版改出了想要的效果。

進(jìn)行到這一步的時(shí)候，結(jié)合立繪的戰(zhàn)斗感和綠色給人的感受，腦暴的第一聯(lián)想就是軍隊(duì)和迷彩。

在作圖的過(guò)程中并不是一開(kāi)始就把所有的元素和可能性都確定好的，在這期間會(huì)不斷地有新的想法涌出，我們只需要在這些想法中摘取最合適的方向進(jìn)行推進(jìn)即可。

因?yàn)槭乾F(xiàn)代科技，所以，挑選了幾何圖形的拼接迷彩。更加時(shí)尚，簡(jiǎn)潔，符合風(fēng)格。

在開(kāi)第一張圖的時(shí)候，立繪本身所帶的元素，可以盡量的多提取一些，除了分析角色身上裝備的結(jié)構(gòu)線產(chǎn)生的大量折線段的造型，圓角，以及色彩配比這些具體的圖形外，我們還可以圍繞角色所可能身處的環(huán)境，去想象這個(gè)世界中可能會(huì)出現(xiàn)的物件，思考這個(gè)世界的建筑感受，制造的工藝水平等等，從而拓展我們對(duì)輪廓、材質(zhì)的想象空間，并將它們整理出來(lái)，選擇其中適合作為視覺(jué)元素的關(guān)鍵詞進(jìn)行落地。

在這個(gè)階段第一張角色屬性界面中提到的元素和造型已經(jīng)被復(fù)用到這個(gè)界面里。那么就出現(xiàn)了一個(gè)問(wèn)題，大量重復(fù)圖形的組合比例，疏密關(guān)系，很多同學(xué)往往在這個(gè)階段控制不住瘋狂的做加法，但是對(duì)于這套的風(fēng)格來(lái)說(shuō)，應(yīng)該是偏簡(jiǎn)潔干凈的扁平效果，所以盡量避免圖形的大面積應(yīng)用。

圓角的大小盡量不要太大，要配合立繪的風(fēng)格。避免過(guò)大造成的Q版感過(guò)強(qiáng)。還有斜切的角度，做到統(tǒng)一。增加科技感。

所謂的科技感是來(lái)自于一定的秩序感，工業(yè)化的批量生產(chǎn)。如果斜切角度不統(tǒng)一，圓角尺寸不一致，半個(gè)像素等降低品質(zhì)的細(xì)節(jié)問(wèn)題，會(huì)出現(xiàn)較強(qiáng)的手工感。

同時(shí)在斟酌控件造型時(shí)，需要避免裝飾過(guò)多產(chǎn)生的負(fù)空間平均，搶了主體造型的識(shí)別度，也就是我們常說(shuō)的“碎”。

LOADING界面

一開(kāi)始是想延續(xù)角色屬性的風(fēng)格，背景用都市的剪影來(lái)點(diǎn)題，最終展現(xiàn)的效果比較平庸。字體的設(shè)計(jì)有些碎，沒(méi)有帶著復(fù)古科技味道。

新的一版中加了HUD的元素，盡量實(shí)現(xiàn)各界面的元素統(tǒng)一。

重新設(shè)計(jì)了字體，筆畫(huà)做粗了一點(diǎn)，單個(gè)字瘦長(zhǎng)一點(diǎn)，在復(fù)古簡(jiǎn)約的同時(shí)又有科技感。

第一版

第二版

LOGO對(duì)于一套作品來(lái)說(shuō)還是占有一定分量的。

對(duì)于這個(gè)LOGO，字體設(shè)計(jì)不一定非要面目全非的設(shè)計(jì)才是好的設(shè)計(jì)，結(jié)合立繪給你的干凈簡(jiǎn)潔感，字體也可以適當(dāng)?shù)淖鲆恍p法，只對(duì)筆畫(huà)的首尾部分做一些小的設(shè)計(jì)，根據(jù)立繪適當(dāng)做一些斜切，機(jī)械的接口切割，再添加一些小的直線豐富點(diǎn)線面即可。

關(guān)于背景部分還是有點(diǎn)不滿意。

背后的電腦視覺(jué)元素稍微有點(diǎn)搶了標(biāo)題字體。左上角部分點(diǎn)線面裝飾密度較重，令畫(huà)面的重心稍顯不平衡?？梢钥紤]給右下角增加一點(diǎn)類(lèi)似左上角的數(shù)據(jù)裝飾作為呼應(yīng)。同時(shí)弱化背景，讓標(biāo)題顯得更清晰。

關(guān)卡地圖界面

我想結(jié)合地圖做成界面，一開(kāi)始沒(méi)有做的很復(fù)雜，還是延續(xù)了前幾個(gè)界面，做了平面的HUD方案。

在對(duì)比了之前的界面后，想要與之前的界面作出顏色明暗上的變化，在點(diǎn)綴色不變的情況下做個(gè)暗調(diào)子。

于是有了第二版，做成了全息投影的方案。

信息層根據(jù)地圖角度做了透視。但因?yàn)榻ㄖ氖噶炕こ烫?，考慮到時(shí)間問(wèn)題先擱置了這個(gè)方案。

折中后，選擇了第三版作為落地版本，最終呈現(xiàn)出的效果也還不錯(cuò)。

第一版

第二版

最終版

單純的平面地圖形式使用較多，帶透視和景深的視角可以增加界面的沉浸感，同時(shí)豐富全套作品構(gòu)成多樣性。

在這個(gè)過(guò)程中大家可以根據(jù)自己制作素材的能力量力而行，如果會(huì)使用3D輔助，可以利用置換貼圖制作地面，并用材質(zhì)制作發(fā)光全息圖。如果還沒(méi)有掌握3D軟件，盡量去搜尋一些質(zhì)量較好的素材。

不要用PS的矢量工具死磕?。。?/strong>

彈窗界面

彈窗界面就選擇了常規(guī)的排版方式，主要是在一些弱層次上做了設(shè)計(jì)。

底板上的迷彩元素也是貫穿了每個(gè)界面，還做了一些小控件的設(shè)計(jì)。

整合包裝

最后將所有界面放在一起對(duì)比之后，對(duì)元素、主題色等統(tǒng)一進(jìn)行了調(diào)整。使作品更加統(tǒng)一。

整套作品從定稿到完成時(shí)間一個(gè)半月，在作圖過(guò)程中感覺(jué)比第一套流暢很多。

雖然有些方案需要比較長(zhǎng)的工期并沒(méi)有繼續(xù)下去，但是最終完成稿也達(dá)到了我的預(yù)期。

我總結(jié)了之后需要努力的方向

1.效率

第一張定整體風(fēng)格的設(shè)計(jì)稿上花了很多時(shí)間。

一些小控件會(huì)很糾結(jié)，導(dǎo)致時(shí)間的拖延。

接下來(lái)的制作過(guò)程中，會(huì)給自己定一個(gè)時(shí)限，先以整體為主，避免無(wú)意義的時(shí)間浪費(fèi)。

2.風(fēng)格化

希望下一套作品時(shí)可以對(duì)主題選擇有更多的想法和突破。

對(duì)風(fēng)格的選擇上更放飛自我，產(chǎn)出更亮眼的高精度視覺(jué)亮點(diǎn)。

在之后的工作與學(xué)習(xí)過(guò)程中，多接觸各種風(fēng)格，提高自己的審美。

3.扁平圖標(biāo)設(shè)計(jì)

扁平圖標(biāo)的設(shè)計(jì)是我很感興趣但相對(duì)比較薄弱的項(xiàng)目。

之后會(huì)加強(qiáng)這方面練習(xí)，在自己的作品中豐富一些扁平圖標(biāo)的設(shè)計(jì)作品。

4.字體設(shè)計(jì)

我希望之后可以在字形的創(chuàng)意上做更多突破。

字體的材質(zhì)細(xì)節(jié)上做的更豐富一些。

5.其他工具的結(jié)合

目前也在做一些3D的練習(xí)，希望之后的作品中可以結(jié)合3D做一些場(chǎng)景化的界面。

而且在之后的UI工作中動(dòng)效也是我想要學(xué)習(xí)的一環(huán)，可以讓作品的流程更加完整。

最終點(diǎn)評(píng)：

很棒！非常好！很大的進(jìn)步！

時(shí)間規(guī)劃上比我預(yù)期的要久，以后要牢記UI設(shè)計(jì)是為了項(xiàng)目服務(wù)，時(shí)間節(jié)點(diǎn)是非常重要的事情，在規(guī)劃創(chuàng)意方案的時(shí)候要結(jié)合制作成本考慮。

尋找視覺(jué)和落地的平衡點(diǎn)~

那么本次的分享到此結(jié)束~撒花??ヽ(°▽°)ノ?

你這么好看(???)務(wù)必留下贊贊~（壓上了~）

標(biāo)簽：