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