既然作為參與式探究，清晰的了解來龍去脈是必不可少的環(huán)節(jié)；我盡量用盡可能少的文字描述清楚，但我畢竟不像作家那樣擅長用語言去表達(dá)。以至于文章可能顯得有些啰嗦，請(qǐng)大家包涵。
前言：
在話題展開前我想提出一個(gè)怪現(xiàn)象：為什么現(xiàn)站酷，簡書上這么多人分享板式設(shè)計(jì)，banner設(shè)計(jì)，字體設(shè)計(jì)其中不乏一些工作十年以上的資深前輩，但是還是有很多人當(dāng)設(shè)計(jì)頁面的時(shí)候還是腦袋空空，只能素材網(wǎng)站搬運(yùn)，然后修修改改草草了事，長此以往。
在以往的工作中我遇到許多的設(shè)計(jì)對(duì)各網(wǎng)站的vip趨之若鶩，然后設(shè)計(jì)的時(shí)候很自然選選模板，點(diǎn)擊下載， 隨便換換文案圖片就完事了；
大量模板的使用確實(shí)加快設(shè)計(jì)出圖的速度，但我并不認(rèn)為這是個(gè)好的現(xiàn)象，在我看來設(shè)計(jì)好像是在一中不斷糾結(jié)，甚至是難過中感悟，而隨之我們的感悟漸深對(duì)于同一種事物看的轉(zhuǎn)態(tài)變發(fā)生了改變，這種對(duì)設(shè)計(jì)的感悟來之不易，他需要我們不厭其煩的一版一版的做和思考；或長或短取決于：做的多少，看的多少，思考多少，時(shí)間的跨度以及智商的高低；而經(jīng)常使用模板減少了我們的做和想，從而延遲這種感悟的到來，讓我們進(jìn)步愈發(fā)的緩慢。
以上是設(shè)計(jì)要經(jīng)歷并持續(xù)的過程，這個(gè)話題當(dāng)然需要更全面更深入的描述；但我們此次的重點(diǎn)不在這里，姑且聊到這里為止。
切入正題，下面我于進(jìn)行描述：1.“分成設(shè)計(jì)”形成的起因和概念
2.banner中的“分層”表現(xiàn)和方法
3.“分層設(shè)計(jì)”的應(yīng)用和延伸
4.總結(jié)
1.“分成設(shè)計(jì)”形成的起因和概念
讓我形成“分層設(shè)計(jì)”這個(gè)概念是前一段時(shí)間在做了一個(gè)電商的活動(dòng)首頁時(shí)產(chǎn)生的；當(dāng)時(shí)和雇主溝通了頁面的展現(xiàn)形式，在網(wǎng)上找了些參考，心里有了一個(gè)模糊概念便開始用c4d建模了，結(jié)果模型建了兩天仍然效果不理想，一氣之下就刪除了，決定重新構(gòu)思。
冷靜下來我決定反思為什么首屏構(gòu)建了兩天仍然沒有達(dá)到理想的狀態(tài)，是與雇主溝通的不清楚嗎？或者技法實(shí)現(xiàn)不了我想并不是；
坐在樓梯上想一想有點(diǎn)苦惱，對(duì)于一個(gè)設(shè)計(jì)而言想做去一次大的，結(jié)果卻做上不足做下有余，畢竟不是才入行的新手。
我想起了本職工作中：UI界面的信息層級(jí)呈現(xiàn)和CG建模中一個(gè)經(jīng)典的坦克分解案例
UI信息層級(jí)：通過對(duì)頁面信息的層級(jí)劃分，讓用戶通過眼球移動(dòng)，按照一定的順序獲取信息，幫助用戶高效自然獲取和理解信息
CG坦克模型分解：通過對(duì)坦克模型逐步分解成單個(gè)的幾何形體，從而實(shí)現(xiàn)整個(gè)坦克的建模
在我們了解了UI界面中的信息分層，和CG建模坦克的分解設(shè)計(jì)后；令人驚訝的是，兩個(gè)不同的行業(yè)卻有著驚人的相似都在于一個(gè)“分”字，將整體分解成簡單的個(gè)體。那為什么我們不能嘗試將這些理論應(yīng)用在banner的設(shè)計(jì)上呢？
“何理論都不如現(xiàn)實(shí)具體”這話不是我說的，是別人說的；確實(shí)，不得不說實(shí)例更直觀，更讓人信服
但在這之前我們可以通過以上的討論得出banner“分層設(shè)計(jì)”概念：將banner分解成不同的層級(jí)元素，讓復(fù)雜的頁面轉(zhuǎn)化為簡單的元素進(jìn)行設(shè)計(jì)。
2.banner中的“分層”表現(xiàn)和方法
當(dāng)我們經(jīng)過“糾結(jié)——思考——總結(jié)”得出了一個(gè)令人驚喜的banner設(shè)計(jì)方案，這似乎比成功設(shè)計(jì)一張滿意的作品更加讓人興奮；因?yàn)槲覀冊(cè)谙萑腱`感匱乏的牢籠，卻在角落里發(fā)現(xiàn)了一把看似無往不利的大寶劍。這似乎讓我們有種沖破牢籠翱翔于九天之外的希望，將大促頁面，詳情頁，ui界面設(shè)計(jì)等各種強(qiáng)大的敵人狩首于劍下。
當(dāng)我們意測了這么多內(nèi)容卻還沒付之于實(shí)踐，當(dāng)有紙上談兵之嫌；我們不妨用一些“敵人”試一試這把大寶劍是否鋒利；在選擇“敵人”的時(shí)候，我想試試電商類的，大家都應(yīng)該了解電商類的“敵人”是較為兇悍的一種。
我在素材網(wǎng)站上搜索三張電商類banner，依次對(duì)決；
我們先看第一張：
如上圖所示：我們以縱向和橫向?yàn)榻Y(jié)構(gòu)進(jìn)行分層，通過觀察這是一張平面的banner，背景較為簡單，比較適合橫向分層；
我們將這張banner分為了三層：①裝飾層，②文案層，③主體層，④裝飾層；不難發(fā)現(xiàn)當(dāng)這張banner被分為三層之后，每一層的內(nèi)容所剩無幾，且變的極為簡單：
①.裝飾層：是簡單的幾何體構(gòu)成；
②.文案和主體層：是運(yùn)營提供的素材；
可能會(huì)有疑問文案還有排版的難度，我有兩種不錯(cuò)且快速的方法：1.繼續(xù)分層可根據(jù)大小，主次，中英文，親密性等等等；2.花瓣搜索文案排版，將有成千上萬的排版方式你可以優(yōu)雅的選擇其中一種。
有了以上的討論我們很自然的得到“分層設(shè)計(jì)”的第一種方法：橫向分層
ok，接下來我們?cè)偬剿饔袥]有別的方式，來看第二張：
這是我們討論的第二張：這張貝貝的圖片可不好找，大概花了十分鐘才找到比較合適的案例圖，至于原因我在后面會(huì)聊到。通過觀察很容易發(fā)現(xiàn)這張圖比較適合在縱向分層：①背景層，②文案背景層，③文案層，④產(chǎn)品層，⑤前后景裝飾層等
我們逐個(gè)講解下
①背景層：填充主題貝貝少女色系，然后模糊了一下，這哪怕對(duì)于學(xué)ps兩天的人都能做的出來
文案裝飾背景層：圓形幾何形體，然后疊加圖層樣式，色彩用了不同的深度，好了這些都是技法以及基本的色彩理論，這里不做過多的描述，如果你想做個(gè)類似的完全可以圓形改成正方形或者別的形狀，樓梯改成圓柱或者舞臺(tái)等等的幾何形狀
②文案層：字體稍作了變形，在ps中兩鍵+T結(jié)合三鍵+T這些基礎(chǔ)的技法對(duì)于一個(gè)設(shè)計(jì)的難度不高于打開一個(gè)榴蓮
為了少點(diǎn)啰嗦，后面的產(chǎn)品和元素的擺放我這里就不做過多的說明，后面還有一個(gè)案例需要仔細(xì)的講解
這里可以直接得出“分層設(shè)計(jì)”的第二種方法：縱向分層
通過上面兩個(gè)案例的分析相信大家對(duì)“分層設(shè)計(jì)”的概念已經(jīng)有所了解，但在實(shí)際的工作中單一的橫向分層和縱向分層確實(shí)十分少見，如果有認(rèn)真觀察第一個(gè)案例，不難發(fā)現(xiàn)單一的橫向分層并不準(zhǔn)確，因?yàn)樗€有背景層和主題裝飾層，所以在實(shí)際應(yīng)用中多以橫向+縱向的形式呈現(xiàn)，那么我在第三個(gè)案例會(huì)結(jié)合縱向+橫向去分析這兩年比較常見的C4D的頁面，也是較為復(fù)雜的頁面。
這是浦桑尼克天貓618的頁面
在復(fù)雜頁面的設(shè)計(jì)上，如果單以橫向+縱向去分層可能理解起來并不是那么容易，場景中出了有很多復(fù)雜的元素。我們不妨進(jìn)行深一點(diǎn)的思考這個(gè)頁面的構(gòu)成，通過觀察他是否類似一個(gè)擂臺(tái)；是的，這個(gè)頁面構(gòu)成的場景類似擂臺(tái)，如果我們已經(jīng)理解到這里了，我想已經(jīng)開始分析了。
方法如下：縱向分層+橫向分層+場景聯(lián)想
我們從縱向開始（從后往前，因?yàn)楸尘翱偸呛唵我鬃R(shí)別）：①.背景層 ②.文案背景層 ③ .文案 ④.產(chǎn)品層 ⑤.產(chǎn)品裝飾層 ⑥以及前后景的裝飾層
①.背景層:一個(gè)深色漸變的背景+疊加一個(gè)線條圖案，這樣的紋理圖案素材網(wǎng)站上很多。
②.文案背景層:到文案背景層的時(shí)候內(nèi)容就很多了，且變的復(fù)雜了，可能有些無從下手，可能會(huì)有疑問為什么會(huì)左邊擺兩個(gè)柱子后面又?jǐn)[一個(gè)，但別忘了我們還有一個(gè)場景聯(lián)想,那么現(xiàn)實(shí)場景擂臺(tái)是怎樣的我找了張圖（大家請(qǐng)忽略圖片質(zhì)量）
看到這里的時(shí)候我想大家已經(jīng)可以理解場景中元素是如何來的；基于現(xiàn)實(shí)場景的設(shè)計(jì)，由擂臺(tái)聯(lián)想到木樁做為裝飾元素，而在c4d中齒輪是作為最常見的元素，作為設(shè)計(jì)發(fā)揮下想象應(yīng)用一下我想這是不難的。設(shè)計(jì)來源現(xiàn)實(shí)且高于現(xiàn)實(shí)，這并不是我說的，我只是合理的拿過來應(yīng)用一下，顯然這句話很好詮釋了設(shè)計(jì)之道。
③.文案層:c4d的文字設(shè)計(jì)+燈管這些設(shè)計(jì)很常見，各大素材網(wǎng)站都可以搜索的到；關(guān)于技法這里不做過多的探討，這是設(shè)計(jì)的基礎(chǔ)。
④.產(chǎn)品層:這個(gè)沒有可說的，放上在自家的產(chǎn)品，調(diào)整下色彩融入場景。
⑤.產(chǎn)品裝飾層:我們可以看到，產(chǎn)品下面放的是方塊，設(shè)計(jì)基本準(zhǔn)則有一則便是親密性，很顯然這里放方形比圓形更符合擂臺(tái)場景。
說到這里這張海報(bào)所剩的裝飾元素已經(jīng)不需要再說了，裝飾元素太多了。很多的幾何元素都可以作為裝飾。
那么這三個(gè)案例已經(jīng)都說完了，我們這里可以總結(jié)下“分層設(shè)計(jì)”的方法有哪些：1.橫向分層 2.縱向分層 3.橫向+縱向+場景
3.“分層設(shè)計(jì)”的應(yīng)用和延伸
當(dāng)我們了解了“分層設(shè)計(jì)”的概念和方法，是否還是和以往一樣前面讀了感覺不錯(cuò)，有那么點(diǎn)意思。但是實(shí)操起來還是一臉懵逼，不急，我會(huì)運(yùn)用這個(gè)我們探討出來的概念進(jìn)行實(shí)際案例的設(shè)計(jì)，并分享完整的流程，希望通過案例的演示能理解“分：的含義和用途；
但是在實(shí)操案例之前，我想請(qǐng)大家理解并記住“分層設(shè)計(jì)”的概念。以便思路可以參與探究，廢話不多說，我們這就開始
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
