2018-7-31 ui設計分享達人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
前言：
在話題展開前我想提出一個怪現(xiàn)象：為什么現(xiàn)站酷，簡書上這么多人分享板式設計，banner設計，字體設計其中不乏一些工作十年以上的資深前輩，但是還是有很多人當設計頁面的時候還是腦袋空空，只能素材網(wǎng)站搬運，然后修修改改草草了事，長此以往。
在以往的工作中我遇到許多的設計對各網(wǎng)站的vip趨之若鶩，然后設計的時候很自然選選模板，點擊下載， 隨便換換文案圖片就完事了；
大量模板的使用確實加快設計出圖的速度，但我并不認為這是個好的現(xiàn)象，在我看來設計好像是在一中不斷糾結，甚至是難過中感悟，而隨之我們的感悟漸深對于同一種事物看的轉態(tài)變發(fā)生了改變，這種對設計的感悟來之不易，他需要我們不厭其煩的一版一版的做和思考；或長或短取決于：做的多少，看的多少，思考多少，時間的跨度以及智商的高低；而經(jīng)常使用模板減少了我們的做和想，從而延遲這種感悟的到來，讓我們進步愈發(fā)的緩慢。
以上是設計要經(jīng)歷并持續(xù)的過程，這個話題當然需要更全面更深入的描述；但我們此次的重點不在這里，姑且聊到這里為止。
切入正題，下面我于進行描述：1.“分成設計”形成的起因和概念
2.banner中的“分層”表現(xiàn)和方法
3.“分層設計”的應用和延伸
4.總結
1.“分成設計”形成的起因和概念
讓我形成“分層設計”這個概念是前一段時間在做了一個電商的活動首頁時產(chǎn)生的；當時和雇主溝通了頁面的展現(xiàn)形式，在網(wǎng)上找了些參考，心里有了一個模糊概念便開始用c4d建模了，結果模型建了兩天仍然效果不理想，一氣之下就刪除了，決定重新構思。
冷靜下來我決定反思為什么首屏構建了兩天仍然沒有達到理想的狀態(tài)，是與雇主溝通的不清楚嗎？或者技法實現(xiàn)不了我想并不是；
坐在樓梯上想一想有點苦惱，對于一個設計而言想做去一次大的，結果卻做上不足做下有余，畢竟不是才入行的新手。
我想起了本職工作中：UI界面的信息層級呈現(xiàn)和CG建模中一個經(jīng)典的坦克分解案例
UI信息層級：通過對頁面信息的層級劃分，讓用戶通過眼球移動，按照一定的順序獲取信息，幫助用戶自然獲取和理解信息
CG坦克模型分解：通過對坦克模型逐步分解成單個的幾何形體，從而實現(xiàn)整個坦克的建模
在我們了解了UI界面中的信息分層，和CG建模坦克的分解設計后；令人驚訝的是，兩個不同的行業(yè)卻有著驚人的相似都在于一個“分”字，將整體分解成簡單的個體。那為什么我們不能嘗試將這些理論應用在banner的設計上呢？
“何理論都不如現(xiàn)實具體”這話不是我說的，是別人說的；確實，不得不說實例更直觀，更讓人信服
但在這之前我們可以通過以上的討論得出banner“分層設計”概念：將banner分解成不同的層級元素，讓復雜的頁面轉化為簡單的元素進行設計。
2.banner中的“分層”表現(xiàn)和方法
當我們經(jīng)過“糾結——思考——總結”得出了一個令人驚喜的banner設計方案，這似乎比成功設計一張滿意的作品更加讓人興奮；因為我們在陷入靈感匱乏的牢籠，卻在角落里發(fā)現(xiàn)了一把看似無往不利的大寶劍。這似乎讓我們有種沖破牢籠翱翔于九天之外的希望，將大促頁面，詳情頁，ui界面設計等各種強大的敵人狩首于劍下。
當我們意測了這么多內(nèi)容卻還沒付之于實踐，當有紙上談兵之嫌；我們不妨用一些“敵人”試一試這把大寶劍是否鋒利；在選擇“敵人”的時候，我想試試電商類的，大家都應該了解電商類的“敵人”是較為兇悍的一種。
我在素材網(wǎng)站上搜索三張電商類banner，依次對決；
我們先看第一張：
如上圖所示：我們以縱向和橫向為結構進行分層，通過觀察這是一張平面的banner，背景較為簡單，比較適合橫向分層；
我們將這張banner分為了三層：①裝飾層，②文案層，③主體層，④裝飾層；不難發(fā)現(xiàn)當這張banner被分為三層之后，每一層的內(nèi)容所剩無幾，且變的極為簡單：
①.裝飾層：是簡單的幾何體構成；
②.文案和主體層：是運營提供的素材；
可能會有疑問文案還有排版的難度，我有兩種不錯且快速的方法：1.繼續(xù)分層可根據(jù)大小，主次，中英文，親密性等等等；2.花瓣搜索文案排版，將有成千上萬的排版方式你可以優(yōu)雅的選擇其中一種。
有了以上的討論我們很自然的得到“分層設計”的第一種方法：橫向分層
ok，接下來我們再探索有沒有別的方式，來看第二張：
這是我們討論的第二張：這張貝貝的圖片可不好找，大概花了十分鐘才找到比較合適的案例圖，至于原因我在后面會聊到。通過觀察很容易發(fā)現(xiàn)這張圖比較適合在縱向分層：①背景層，②文案背景層，③文案層，④產(chǎn)品層，⑤前后景裝飾層等
我們逐個講解下
①背景層：填充主題貝貝少女色系，然后模糊了一下，這哪怕對于學ps兩天的人都能做的出來
文案裝飾背景層：圓形幾何形體，然后疊加圖層樣式，色彩用了不同的深度，好了這些都是技法以及基本的色彩理論，這里不做過多的描述，如果你想做個類似的完全可以圓形改成正方形或者別的形狀，樓梯改成圓柱或者舞臺等等的幾何形狀
②文案層：字體稍作了變形，在ps中兩鍵+T結合三鍵+T這些基礎的技法對于一個設計的難度不高于打開一個榴蓮
為了少點啰嗦，后面的產(chǎn)品和元素的擺放我這里就不做過多的說明，后面還有一個案例需要仔細的講解
這里可以直接得出“分層設計”的第二種方法：縱向分層
通過上面兩個案例的分析相信大家對“分層設計”的概念已經(jīng)有所了解，但在實際的工作中單一的橫向分層和縱向分層確實十分少見，如果有認真觀察第一個案例，不難發(fā)現(xiàn)單一的橫向分層并不準確，因為他還有背景層和主題裝飾層，所以在實際應用中多以橫向+縱向的形式呈現(xiàn)，那么我在第三個案例會結合縱向+橫向去分析這兩年比較常見的C4D的頁面，也是較為復雜的頁面。
這是浦桑尼克天貓618的頁面
在復雜頁面的設計上，如果單以橫向+縱向去分層可能理解起來并不是那么容易，場景中出了有很多復雜的元素。我們不妨進行深一點的思考這個頁面的構成，通過觀察他是否類似一個擂臺；是的，這個頁面構成的場景類似擂臺，如果我們已經(jīng)理解到這里了，我想已經(jīng)開始分析了。
方法如下：縱向分層+橫向分層+場景聯(lián)想
我們從縱向開始（從后往前，因為背景總是簡單易識別）：①.背景層 ②.文案背景層 ③ .文案 ④.產(chǎn)品層 ⑤.產(chǎn)品裝飾層 ⑥以及前后景的裝飾層
①.背景層:一個深色漸變的背景+疊加一個線條圖案，這樣的紋理圖案素材網(wǎng)站上很多。
②.文案背景層:到文案背景層的時候內(nèi)容就很多了，且變的復雜了，可能有些無從下手，可能會有疑問為什么會左邊擺兩個柱子后面又擺一個，但別忘了我們還有一個場景聯(lián)想,那么現(xiàn)實場景擂臺是怎樣的我找了張圖（大家請忽略圖片質(zhì)量）
看到這里的時候我想大家已經(jīng)可以理解場景中元素是如何來的；基于現(xiàn)實場景的設計，由擂臺聯(lián)想到木樁做為裝飾元素，而在c4d中齒輪是作為最常見的元素，作為設計發(fā)揮下想象應用一下我想這是不難的。設計來源現(xiàn)實且高于現(xiàn)實，這并不是我說的，我只是合理的拿過來應用一下，顯然這句話很好詮釋了設計之道。
③.文案層:c4d的文字設計+燈管這些設計很常見，各大素材網(wǎng)站都可以搜索的到；關于技法這里不做過多的探討，這是設計的基礎。
④.產(chǎn)品層:這個沒有可說的，放上在自家的產(chǎn)品，調(diào)整下色彩融入場景。
⑤.產(chǎn)品裝飾層:我們可以看到，產(chǎn)品下面放的是方塊，設計基本準則有一則便是親密性，很顯然這里放方形比圓形更符合擂臺場景。
說到這里這張海報所剩的裝飾元素已經(jīng)不需要再說了，裝飾元素太多了。很多的幾何元素都可以作為裝飾。
那么這三個案例已經(jīng)都說完了，我們這里可以總結下“分層設計”的方法有哪些：1.橫向分層 2.縱向分層 3.橫向+縱向+場景
3.“分層設計”的應用和延伸
當我們了解了“分層設計”的概念和方法，是否還是和以往一樣前面讀了感覺不錯，有那么點意思。但是實操起來還是一臉懵逼，不急，我會運用這個我們探討出來的概念進行實際案例的設計，并分享完整的流程，希望通過案例的演示能理解“分：的含義和用途；
但是在實操案例之前，我想請大家理解并記住“分層設計”的概念。以便思路可以參與探究，廢話不多說，我們這就開始
這是我在前一段時間做的618活動頁面（完整的可以去我的主頁看看，就在上一篇），我解讀下思路和流程（畢竟我不是專業(yè)的電商設計，可能沒有專業(yè)的做的震撼人心，但技法不是我們這次探討的范圍），大家如果產(chǎn)生很好的想法，或者更棒的設計大家也可以交流指導。
在和甲方溝通后，拋去前一稿，在這一稿我運用了：縱向分層+橫向分層+場景聯(lián)想
第一步：在我看了很多電商大佬的高端操作之后，我用了場景聯(lián)想：就做個舞臺，對我們這個場景就是舞臺，是舞臺，不是上面的擂臺（這里要偷笑，我借鑒了不少第三個案例大佬的設計，作為設計我們大膽的承認我們是站在前人的肩膀做設計）
第二步：當我們有了場景之后，就要開始分層，不單單是banner的分層，我把正個頁面也做了分層，如下圖
當我們把整張頁面分層排列出來后，大家有沒有發(fā)現(xiàn)，這似乎由設計首頁在向填充首頁轉變，只要在對應的位置填充上對應的內(nèi)容，實際而言搶購內(nèi)容，優(yōu)惠券額度，產(chǎn)品圖片，文案，價格都是甲方準備好的，那似乎只有banner才使我們的重點；
第三步：ok,我們回到banner上，我直接把第三個案例分的結果搬過來：①.背景層 ② .文案背景層 ③ .文案 ④.產(chǎn)品層 ⑤.產(chǎn)品裝飾層 ⑥.以及前后景的裝飾層。然后依次進行填充來組成我們banner
我想先從背景層開始，因為背景通常較為簡單且容易出效果（ 我會按照步驟填充東西，內(nèi)容可能有點長，但勝在更直觀）
①.背景層：漸變背景+疊加紋理
②.文案背景層-⑤.產(chǎn)品裝飾層：在有了背景之后便開始填充文案背景層，之前我們已經(jīng)用場景聯(lián)想:得出用舞臺作為我們的場景；對可以百度有一萬個舞臺選擇一個進行建模。對于一個舞臺，大屏幕，音響，背景音樂，人這些都是很輕易聯(lián)想到的，也是舞臺標配；于是就了一個我們的舞臺場景；然后在舞臺的兩側放置一些方塊，來放置我們的產(chǎn)品。
③.文案層-④.產(chǎn)品層：c4d的立體字+齒輪+燈管常見到不能再常見的表現(xiàn)形式；產(chǎn)品找個適合的角度擺放上去
⑥.裝飾層：在現(xiàn)實場景中豐富舞臺的裝飾是必不可少的，我們不妨找些和舞臺相關的元素作為裝飾，比如燈管，煙霧，和一些幾何形體至于后面的大樓我直接在c4d自帶的模型拿出來的，適當?shù)耐祽幸幌隆?
通過案例和實操我們發(fā)現(xiàn)“分層設計”確實很實用，那么能做些延伸應用到別的事物上嗎？
當然可以，我舉個小栗子：記得第一次在站酷發(fā)完整的項目的時候，包裝起來感到十分著急，想法很多，但不知道要怎么說，說哪些內(nèi)容，然后半天憋不出一屏來，結果最后也是說的亂七八糟。后來我就換了種方式，我打算先看看別人都是怎么發(fā)的：
我準備了十幾個產(chǎn)品進行分析，結果在我分析到兩三個之后我就感覺我不用分析了，他們的套路都是一樣的，我們只要擬好了框架，剩下的就是填充內(nèi)容?，F(xiàn)在想一想這算是一種分層方式的延伸。我們再一次強調(diào)了“分”字的含義，希望能靈活的運用。
4.總結
“分層設計”的概念探究到這里相信大家已經(jīng)明白了，但這是不是掌握了就能做出好的設計呢？這個問題顯然是不夠嚴謹?shù)?，就像米飯煮的好不好吃，不單取決于米的質(zhì)量；水，時間，煮的方式也在其中。這和設計類似，方法有了，我們還需要合理的排版，場景的聯(lián)想（比如要做個中秋的頁面，我們是否由中秋聯(lián)想到月亮，嫦娥，月餅，玉兔等相關的元素），色彩的運用等；
當然這些在分層之后是可以借鑒的，但這些都是設計的基礎理論，這也是考驗一個設計的基礎是否扎實。這就像職場中流傳一個老板分別讓一個員工和一個領導咨詢客人什么時候來訪，員工回了明天到；領導說了具體到的時間，位置等，我想設計也是一樣，頁面是否合理，流暢，美觀基礎的深淺和經(jīng)驗很關鍵，這就需要我們不單單是理解，要多記，將理論結合案例多做。
藍藍設計( www.wnxcall.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。