2018-7-31 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
前言：
在話題展開前我想提出一個(gè)怪現(xiàn)象：為什么現(xiàn)站酷，簡(jiǎn)書上這么多人分享板式設(shè)計(jì)，banner設(shè)計(jì)，字體設(shè)計(jì)其中不乏一些工作十年以上的資深前輩，但是還是有很多人當(dāng)設(shè)計(jì)頁面的時(shí)候還是腦袋空空，只能素材網(wǎng)站搬運(yùn)，然后修修改改草草了事，長(zhǎng)此以往。
在以往的工作中我遇到許多的設(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ì)的感悟來之不易，他需要我們不厭其煩的一版一版的做和思考；或長(zhǎng)或短取決于：做的多少，看的多少，思考多少，時(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è)“分”字，將整體分解成簡(jiǎn)單的個(gè)體。那為什么我們不能嘗試將這些理論應(yīng)用在banner的設(shè)計(jì)上呢？
“何理論都不如現(xiàn)實(shí)具體”這話不是我說的，是別人說的；確實(shí)，不得不說實(shí)例更直觀，更讓人信服
但在這之前我們可以通過以上的討論得出banner“分層設(shè)計(jì)”概念：將banner分解成不同的層級(jí)元素，讓復(fù)雜的頁面轉(zhuǎn)化為簡(jiǎ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)我們意測(cè)了這么多內(nèi)容卻還沒付之于實(shí)踐，當(dāng)有紙上談兵之嫌；我們不妨用一些“敵人”試一試這把大寶劍是否鋒利；在選擇“敵人”的時(shí)候，我想試試電商類的，大家都應(yīng)該了解電商類的“敵人”是較為兇悍的一種。
我在素材網(wǎng)站上搜索三張電商類banner，依次對(duì)決；
我們先看第一張：
如上圖所示：我們以縱向和橫向?yàn)榻Y(jié)構(gòu)進(jìn)行分層，通過觀察這是一張平面的banner，背景較為簡(jiǎn)單，比較適合橫向分層；
我們將這張banner分為了三層：①裝飾層，②文案層，③主體層，④裝飾層；不難發(fā)現(xiàn)當(dāng)這張banner被分為三層之后，每一層的內(nèi)容所剩無幾，且變的極為簡(jiǎn)單：
①.裝飾層：是簡(jiǎn)單的幾何體構(gòu)成；
②.文案和主體層：是運(yùn)營(yíng)提供的素材；
可能會(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ì)上，如果單以橫向+縱向去分層可能理解起來并不是那么容易，場(chǎng)景中出了有很多復(fù)雜的元素。我們不妨進(jìn)行深一點(diǎn)的思考這個(gè)頁面的構(gòu)成，通過觀察他是否類似一個(gè)擂臺(tái)；是的，這個(gè)頁面構(gòu)成的場(chǎng)景類似擂臺(tái)，如果我們已經(jīng)理解到這里了，我想已經(jīng)開始分析了。
方法如下：縱向分層+橫向分層+場(chǎng)景聯(lián)想
我們從縱向開始（從后往前，因?yàn)楸尘翱偸呛?jiǎn)單易識(shí)別）：①.背景層 ②.文案背景層 ③ .文案 ④.產(chǎn)品層 ⑤.產(chǎn)品裝飾層 ⑥以及前后景的裝飾層
①.背景層:一個(gè)深色漸變的背景+疊加一個(gè)線條圖案，這樣的紋理圖案素材網(wǎng)站上很多。
②.文案背景層:到文案背景層的時(shí)候內(nèi)容就很多了，且變的復(fù)雜了，可能有些無從下手，可能會(huì)有疑問為什么會(huì)左邊擺兩個(gè)柱子后面又?jǐn)[一個(gè)，但別忘了我們還有一個(gè)場(chǎng)景聯(lián)想,那么現(xiàn)實(shí)場(chǎng)景擂臺(tái)是怎樣的我找了張圖（大家請(qǐng)忽略圖片質(zhì)量）
看到這里的時(shí)候我想大家已經(jīng)可以理解場(chǎng)景中元素是如何來的；基于現(xiàn)實(shí)場(chǎng)景的設(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ǎng)景。
⑤.產(chǎn)品裝飾層:我們可以看到，產(chǎn)品下面放的是方塊，設(shè)計(jì)基本準(zhǔn)則有一則便是親密性，很顯然這里放方形比圓形更符合擂臺(tái)場(chǎng)景。
說到這里這張海報(bào)所剩的裝飾元素已經(jīng)不需要再說了，裝飾元素太多了。很多的幾何元素都可以作為裝飾。
那么這三個(gè)案例已經(jīng)都說完了，我們這里可以總結(jié)下“分層設(shè)計(jì)”的方法有哪些：1.橫向分層 2.縱向分層 3.橫向+縱向+場(chǎng)景
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ì)”的概念。以便思路可以參與探究，廢話不多說，我們這就開始
這是我在前一段時(shí)間做的618活動(dòng)頁面（完整的可以去我的主頁看看，就在上一篇），我解讀下思路和流程（畢竟我不是專業(yè)的電商設(shè)計(jì)，可能沒有專業(yè)的做的震撼人心，但技法不是我們這次探討的范圍），大家如果產(chǎn)生很好的想法，或者更棒的設(shè)計(jì)大家也可以交流指導(dǎo)。
在和甲方溝通后，拋去前一稿，在這一稿我運(yùn)用了：縱向分層+橫向分層+場(chǎng)景聯(lián)想
第一步：在我看了很多電商大佬的高端操作之后，我用了場(chǎng)景聯(lián)想：就做個(gè)舞臺(tái)，對(duì)我們這個(gè)場(chǎng)景就是舞臺(tái)，是舞臺(tái)，不是上面的擂臺(tái)（這里要偷笑，我借鑒了不少第三個(gè)案例大佬的設(shè)計(jì)，作為設(shè)計(jì)我們大膽的承認(rèn)我們是站在前人的肩膀做設(shè)計(jì)）
第二步：當(dāng)我們有了場(chǎng)景之后，就要開始分層，不單單是banner的分層，我把正個(gè)頁面也做了分層，如下圖
當(dāng)我們把整張頁面分層排列出來后，大家有沒有發(fā)現(xiàn)，這似乎由設(shè)計(jì)首頁在向填充首頁轉(zhuǎn)變，只要在對(duì)應(yīng)的位置填充上對(duì)應(yīng)的內(nèi)容，實(shí)際而言搶購(gòu)內(nèi)容，優(yōu)惠券額度，產(chǎn)品圖片，文案，價(jià)格都是甲方準(zhǔn)備好的，那似乎只有banner才使我們的重點(diǎn)；
第三步：ok,我們回到banner上，我直接把第三個(gè)案例分的結(jié)果搬過來：①.背景層 ② .文案背景層 ③ .文案 ④.產(chǎn)品層 ⑤.產(chǎn)品裝飾層 ⑥.以及前后景的裝飾層。然后依次進(jìn)行填充來組成我們banner
我想先從背景層開始，因?yàn)楸尘巴ǔ］^為簡(jiǎn)單且容易出效果（ 我會(huì)按照步驟填充東西，內(nèi)容可能有點(diǎn)長(zhǎng)，但勝在更直觀）
①.背景層：漸變背景+疊加紋理
②.文案背景層-⑤.產(chǎn)品裝飾層：在有了背景之后便開始填充文案背景層，之前我們已經(jīng)用場(chǎng)景聯(lián)想:得出用舞臺(tái)作為我們的場(chǎng)景；對(duì)可以百度有一萬個(gè)舞臺(tái)選擇一個(gè)進(jìn)行建模。對(duì)于一個(gè)舞臺(tái)，大屏幕，音響，背景音樂，人這些都是很輕易聯(lián)想到的，也是舞臺(tái)標(biāo)配；于是就了一個(gè)我們的舞臺(tái)場(chǎng)景；然后在舞臺(tái)的兩側(cè)放置一些方塊，來放置我們的產(chǎn)品。
③.文案層-④.產(chǎn)品層：c4d的立體字+齒輪+燈管常見到不能再常見的表現(xiàn)形式；產(chǎn)品找個(gè)適合的角度擺放上去
⑥.裝飾層：在現(xiàn)實(shí)場(chǎng)景中豐富舞臺(tái)的裝飾是必不可少的，我們不妨找些和舞臺(tái)相關(guān)的元素作為裝飾，比如燈管，煙霧，和一些幾何形體至于后面的大樓我直接在c4d自帶的模型拿出來的，適當(dāng)?shù)耐祽幸幌隆?
通過案例和實(shí)操我們發(fā)現(xiàn)“分層設(shè)計(jì)”確實(shí)很實(shí)用，那么能做些延伸應(yīng)用到別的事物上嗎？
當(dāng)然可以，我舉個(gè)小栗子：記得第一次在站酷發(fā)完整的項(xiàng)目的時(shí)候，包裝起來感到十分著急，想法很多，但不知道要怎么說，說哪些內(nèi)容，然后半天憋不出一屏來，結(jié)果最后也是說的亂七八糟。后來我就換了種方式，我打算先看看別人都是怎么發(fā)的：
我準(zhǔn)備了十幾個(gè)產(chǎn)品進(jìn)行分析，結(jié)果在我分析到兩三個(gè)之后我就感覺我不用分析了，他們的套路都是一樣的，我們只要擬好了框架，剩下的就是填充內(nèi)容。現(xiàn)在想一想這算是一種分層方式的延伸。我們?cè)僖淮螐?qiáng)調(diào)了“分”字的含義，希望能靈活的運(yùn)用。
4.總結(jié)
“分層設(shè)計(jì)”的概念探究到這里相信大家已經(jīng)明白了，但這是不是掌握了就能做出好的設(shè)計(jì)呢？這個(gè)問題顯然是不夠嚴(yán)謹(jǐn)?shù)模拖衩罪堉蟮暮貌缓贸裕粏稳Q于米的質(zhì)量；水，時(shí)間，煮的方式也在其中。這和設(shè)計(jì)類似，方法有了，我們還需要合理的排版，場(chǎng)景的聯(lián)想（比如要做個(gè)中秋的頁面，我們是否由中秋聯(lián)想到月亮，嫦娥，月餅，玉兔等相關(guān)的元素），色彩的運(yùn)用等；
當(dāng)然這些在分層之后是可以借鑒的，但這些都是設(shè)計(jì)的基礎(chǔ)理論，這也是考驗(yàn)一個(gè)設(shè)計(jì)的基礎(chǔ)是否扎實(shí)。這就像職場(chǎng)中流傳一個(gè)老板分別讓一個(gè)員工和一個(gè)領(lǐng)導(dǎo)咨詢客人什么時(shí)候來訪，員工回了明天到；領(lǐng)導(dǎo)說了具體到的時(shí)間，位置等，我想設(shè)計(jì)也是一樣，頁面是否合理，流暢，美觀基礎(chǔ)的深淺和經(jīng)驗(yàn)很關(guān)鍵，這就需要我們不單單是理解，要多記，將理論結(jié)合案例多做。
藍(lán)藍(lán)設(shè)計(jì)( www.gyxygd.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn