22屆實體班作品復(fù)盤

~新的一期分享來了~

本期邀請的分享嘉賓是22屆實體班的之之同學(xué)！

一位應(yīng)屆畢業(yè)生的卷王！

話不多說！上車！

設(shè)計師：之之? ?

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

收集資料

在學(xué)習(xí)期間非常想嘗試一套與眾不同的二次元科幻風(fēng)格的作品。初期把目標(biāo)放在了植物科技相關(guān)的科幻題材。

搜集素材期間找到了現(xiàn)在的這張立繪，就打算試試這張看上去有點像蒸汽朋克的風(fēng)格。

初期情緒版

通過觀察發(fā)現(xiàn)背景和立繪人物本身的元素，嘗試了解相關(guān)的時代背景。逐步完善并最終確定了柴油朋克風(fēng)格。

篩選關(guān)鍵詞

甚至還找了那個年代有關(guān)的招貼設(shè)計：蘇聯(lián)海報、二戰(zhàn)海報等。

我們作為設(shè)計師，需要有一定程度對東西方藝術(shù)史的了解，才能在分析畫面的時候，知道背后的風(fēng)格描述，從更源頭的角度去提取設(shè)計元素的特征，讓我們的畫面更有說服力。

尋找風(fēng)格

優(yōu)先制作了風(fēng)格海報來輔助初期確定畫面調(diào)性。

根據(jù)已有主題和刻畫方式找到了另一套立繪并對他們進行了色調(diào)調(diào)整。增加角色豐富度。

招貼作為關(guān)鍵詞我決定以它作為視覺語言。

草圖

抽卡界面

根據(jù)初步界面草圖，決定從展示型界面開始細(xì)化。既有排版，又有控件，美貌和功能兼?zhèn)洹?br>

控件細(xì)化

根據(jù)上課內(nèi)容，發(fā)現(xiàn)控件的完成度對于整張界面的完成度來說很重要。所以我將重點和精力主要放在控件上，嘗試將這些控件做得好看的同時又有意思。

皮皮老師建議我去看一些乙女類游戲和一些英倫復(fù)古風(fēng)格的平面海報，去參考一下他們的排版和控件的層次。工業(yè)藍(lán)圖可以作為控件的一些點綴，豐富層次。

在十連抽按鈕上則選擇票據(jù)輪廓造型。我甚至腦補了一下動效表現(xiàn)，一個復(fù)古電影開場。

很多同學(xué)在做界面的時候常常把精力用在大塊的背景和精致的人物立繪處理上，但其實控件作為我們界面里面最小的單位嗎，它往往也是體現(xiàn)完成度的很重要的一個標(biāo)準(zhǔn)。

一個小小的控件里，也同樣需要漂亮的排版，豐富層次和匹配的字體。

系統(tǒng)圖標(biāo)

也是根據(jù)工業(yè)藍(lán)圖關(guān)鍵詞，做了一些元素的腦暴聯(lián)想，用圓規(guī)，尺，刻度線、回形針等作為界面中的扁平圖形和控件的設(shè)計靈感。

很多同學(xué)在做扁平圖形的時候找不到元素，這個時候我們可以觀察立繪，從人物服飾，發(fā)飾，甚至是所處的場景中，去做一些提取，這些都是你靈感的來源。也是你情緒版中不可或缺的。

適當(dāng)?shù)奶鎿Q一些巧合的角度和圖形。這些圖形設(shè)計出來后，不只是你的扁平圖標(biāo)，還可以用作花紋，甚至替換一些LOGO的字體筆畫。

一圖多用，不浪費！

期間我想過豐富一下界面色彩，用了一點深橘色，效果并不是很理想，最終版去掉了。

細(xì)化對比

Ps.后續(xù)在做包裝的過程中發(fā)現(xiàn)背景圓形的顏色對比還是過強了，做了調(diào)整。在十連抽的控件顏色選擇上也做了調(diào)整。

角色屬性

想趁著這套作品補一下自己的排版短板，所以找了大量參考，在一定程度上減少了我對排版的恐懼。有備不慌~

七日登錄

我開始考慮做一張不一樣一點的界面。好好利用我的關(guān)鍵詞，增加風(fēng)格感。

于是就有了這個符合時代背景的以老式電腦或者復(fù)古打字機為設(shè)計元素的想法。在有限的條件下玩出不一樣的設(shè)計。

前期方案

初版本選擇了一個最常規(guī)的構(gòu)圖方式，沒有做過多的變化。

前期方案

這期間又有了新的想法：打印機打印出的紙張上放領(lǐng)取獎勵。但我有一個困惑：按照常理是不是要選擇豎版構(gòu)圖，這樣打印邏輯才是對的。

老師給我的建議是邏輯對的前提下角度可以不這么死板，形式也可以多樣化。

這個過程中我疏忽掉的一點是，已領(lǐng)取和未領(lǐng)取之間的狀態(tài)對比。皮皮老師給到的建議已領(lǐng)取的換成打印在紙張上的效果從而作出區(qū)別。質(zhì)感做舊斑駁感。這樣做既有區(qū)別又符合風(fēng)格的統(tǒng)一。

在獎勵的排版上，也建議進行一些調(diào)整，有序中做出一些錯落的變化，不至于呆板。

很多同學(xué)在界面的統(tǒng)一性上無從下手，如果做到統(tǒng)一又變化，最直觀的方法就是資源的復(fù)用：可以是造型，可以是顏色，可以是刻畫手法。都可以作為你的統(tǒng)一性方向。不光考慮到美觀，我們做界面對于功能的區(qū)分也要明確，未領(lǐng)取和已領(lǐng)取的狀態(tài)一定要很明顯。

給用戶一個直接明確的展示，降低用戶的理解成本。

LOADING

進度條直接化身成畫在紙上的一條延長線！

彈窗

23K老師建議作品里面加入彈窗界面，增加一些項目感。想了兩個方向，一個是海報方向，一個是界面框方向。23K老師的建議是，結(jié)合關(guān)鍵詞電影、做一個電影招貼的擬物彈窗。

字體的選擇是美術(shù)字還是系統(tǒng)字也是困擾我的問題。

最終為了匹配招貼效果，做成了美術(shù)字。

LOGO

命名溯源到時代背景：柴油朋克，以內(nèi)燃機為代表，于是在內(nèi)燃機的相關(guān)詞條下面找了一個詞，賦予logo含義呼應(yīng)主題。

一開始選擇的字體，比較柔和，在皮皮老師的建議下，我將所有圓角的地方改成直方角并將“奧”字里面的“米”替換成角色身上的閥門元素。

字體設(shè)計，有時候為了更貼合主題風(fēng)格，會使用一些手法，替換筆畫就算是其中一種。把字體也當(dāng)成一個圖形來看，筆畫的組合就是圖形的組合。替換的圖形，一定要直接或間接跟主題相關(guān)。并且跟文字的風(fēng)格和繁簡程度也要統(tǒng)一。

“循環(huán)”我們可以聯(lián)想到和循環(huán)箭頭做結(jié)合。增加圖形感和設(shè)計感。

包裝元素

最后包裝時所有界面變成瀑布圖之后，界面整體感覺更直觀了，風(fēng)格是否統(tǒng)一，細(xì)節(jié)刻畫的程度是否統(tǒng)一，在這個階段還能整體調(diào)整一次。在包裝的時候復(fù)用一些界面小設(shè)計，包裝也一樣需要風(fēng)格統(tǒng)一。

整套作品耗時3-4周，我個人很喜歡，把我想設(shè)計的點都做到了，達(dá)到了我的預(yù)期。

未來需要努力的方向：

1.效率：

更加深入的理解了老師說的“想明白”也就是是所謂的設(shè)計思路清晰的前提下，情緒版和參考圖的收集會非常的精準(zhǔn)。真的可以大大提高效率。

2.風(fēng)格化：

在這套作品中，學(xué)到了很多藝術(shù)和歷史方面的知識。認(rèn)識到好的設(shè)計是需要一些人文支撐的。這套作品在這方面仍有不足。后續(xù)會多提升自己對藝術(shù)的認(rèn)知。

3.圖形的設(shè)計：

圖形的復(fù)用還有一些不熟練。

字體設(shè)計也算是圖形設(shè)計，也要多加練習(xí)。

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

輔助3D建?；蛞恍﹦討B(tài)效果的設(shè)計能讓作品更豐富，這也是我后續(xù)需要補習(xí)的一項技能。

最后非常感謝葉子學(xué)堂23K老師、皮皮老師和其他老師一直以來的幫助！

對順利完成學(xué)業(yè)的我也要說一聲：辛苦了~

之之同學(xué)的圖感很好，找到的參考圖每次都讓我眼前一亮，但是在深度分析參考所運用的美術(shù)技法，點線面穿插構(gòu)成時深度還不夠。

在未來還需要反復(fù)練習(xí)，做到盡量還原味道的同時，保留界面功能的主次關(guān)系。

之之同學(xué)的設(shè)計敏感度非常好，情緒版的完整程度堪稱班級小楷模~不愧是小卷王~

經(jīng)過這一套作品的練習(xí)，相信他對于設(shè)計的理解更深了一個層次。希望她繼續(xù)保持熱情~對于字體的設(shè)計還需要多多練習(xí)哦~

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

你這么好看(???)

務(wù)必留下贊贊~（壓上了~）?