網(wǎng)站建設中ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格發(fā)布者：本站     時(shí)間：2022-05-30 15:05:36

從線(xiàn)框型Q版卡通畫(huà)演變出來(lái)的MBE風(fēng)格，設計采用了更大更粗的描邊，相比沒(méi)有描邊的扁平化風(fēng)格插畫(huà)去除了里面不必要的色塊區分，更簡(jiǎn)潔、更通用、易識別。粗線(xiàn)條描邊起到了對界面的絕對隔絕，突顯內容，表現清晰，化繁為簡(jiǎn)。

MBE風(fēng)格是怎么來(lái)的呢？其實(shí)MBE不是什么單詞的縮寫(xiě)，MBE是一名法國的設計師，他于2015年年底在dribbble網(wǎng)站上最先發(fā)布了這種風(fēng)格的作品，紅遍了全世界，所以這類(lèi)風(fēng)格以MBE命名。然后世界各地的設計師根據風(fēng)格的特點(diǎn)做出了很多優(yōu)秀的作品，以下是我總結的幾處觀(guān)點(diǎn)與大家分享～

一、MBE風(fēng)格特點(diǎn)
任何設計都有其自身的特點(diǎn)，也有同其它物質(zhì)所持有的共性，特點(diǎn)就是與眾不同掌握這些與眾不同的特性，就可以嫻熟的使用出這項技能。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

1、線(xiàn)條
MBE風(fēng)格最大的特點(diǎn)就是，比原本插畫(huà)更粗更大的線(xiàn)條光環(huán)一般把作品詮釋的更加閃耀。在使用的這些線(xiàn)條的時(shí)不但要結合色彩學(xué)還要對作品寄予情感理解的更加通透，當然也不能缺少對審美的認知。

?有斷點(diǎn)

黑色線(xiàn)條好處是可以突出內容，壞處就是會(huì )產(chǎn)生壓抑感削弱內容主題使物體失去生動(dòng)特性，MBE很好的用斷線(xiàn)的處理方法解決了這個(gè)難題,這些斷線(xiàn)的處理并不是根據圖形的去限定個(gè)數，它們的數量多少是跟位置有直接關(guān)系的。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

1：圖中的鯨魚(yú)和恐龍都是體積比較龐大的動(dòng)物，大面積過(guò)度的線(xiàn)條讓動(dòng)物本身顯得有點(diǎn)嚴肅，作者在鯨魚(yú)的嘴部、噴泉的尾后部分都適當使用了斷線(xiàn)結合動(dòng)物本身的特點(diǎn)處理出來(lái)斷點(diǎn)的既能起到效果又不失美觀(guān)。

2：寶塔和鎖的處理都是在密集的線(xiàn)條交匯處做斷點(diǎn)，破除了畫(huà)面的壓抑感讓整體看起來(lái)更加透氣。

3：杯子和狐貍的看起來(lái)雖然都是獨立的個(gè)體，但是仔細觀(guān)察他們都有一個(gè)圍繞的共同特性，杯子里面裝著(zhù)水大狐貍抱著(zhù)小狐貍這樣的設計內容是要更突出他們之間的緊密關(guān)聯(lián)所以設計師們只選擇一處做斷點(diǎn)，此時(shí)如果在他們之間多加幾處斷點(diǎn)就會(huì )破壞這種氣氛使畫(huà)面的關(guān)系產(chǎn)生被分離的感覺(jué)。

?無(wú)斷點(diǎn)

扁平化圖形＋黑色粗線(xiàn)＋斷線(xiàn)處理是MBE風(fēng)格的固定搭配，但是斷線(xiàn)的處理并不適合在所有的圖形上，既要保持這種新風(fēng)格又要完成想表達的設計，在線(xiàn)條的顏色和粗線(xiàn)處理上就要有些不同的處理手法。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

1:汽車(chē)的整體構造屬于比較精致細膩的圖形，如果使用黑色粗線(xiàn)勢必會(huì )遮蓋住車(chē)體細膩的結構無(wú)法表達出一輛精致跑車(chē)的視覺(jué)傳遞，設計師將描邊線(xiàn)條調細并把黑色改為深灰色在地面部分適當增加斷線(xiàn)處理，既突出整體的精致奢華又保留的設計獨有風(fēng)格。

2：元寶圖形的使用環(huán)境是在煙花點(diǎn)綴的簇擁之中如果使用過(guò)多的斷線(xiàn)處理畫(huà)面整體就會(huì )感覺(jué)被散開(kāi)，設計師使用了紅色中偏黃并降低飽和度的顏色很好的消除原本使用黑色線(xiàn)條的壓抑感，并且這種偏暖的紅色會(huì )更加增加元寶金光閃耀的色澤。

溢出

MBE風(fēng)格除斷線(xiàn)以外最大的特別就是色塊的溢出，其含義應該是想表達物體通過(guò)光照折射出來(lái)的陰影因為通常溢出的方向都是高光的對側。MBE早期使用色塊溢出作品較多后期基本已經(jīng)很難見(jiàn)到，原因是因為早期作品圖形都偏于簡(jiǎn)單色塊溢出的處理可以給畫(huà)面營(yíng)造質(zhì)感增加對風(fēng)格的印象，而后期作品復雜度提升溢出部分無(wú)論在顏色還是整理型上很難融合，讓圖形本身突兀破壞本來(lái)想傳遞設計思想。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

2、色彩
?單色系

分析物體包含內容是否屬于一種（材質(zhì)、數量、介質(zhì)）上述特性屬性唯一時(shí)，即可使用單色系搭配方法找出物體的深淺關(guān)系營(yíng)造質(zhì)感，畫(huà)面表達會(huì )更為完整明確。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

?鄰近色＋補色

在色系上作者M(jìn)BE有時(shí)候也會(huì )用不同色系制造圖形的氛圍，顏色的基本范圍會(huì )控制在三種顏色以下，分別采用鄰近色加補色形成，以下圖形中包含的紅、黃、綠、在色環(huán)上角度分別為22.5°的兩色間，色相差為1的配色，均屬于鄰近色相配色。而藍色角度為180°左右，色相差為8的配色，稱(chēng)為補色色相配色。

當想要表達的物體在一個(gè)數量以上或者物體本身某一處的材質(zhì)與其它地方不同，使用顏色區分能更好的傳遞畫(huà)面所要的表現的內容，不用刻意保持色相的單一性。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

?鄰近色＋類(lèi)似色

鄰近色是指在色環(huán)上相近的兩個(gè)顏色，在色彩學(xué)中還有類(lèi)似色相配色、對照色相配色，在模仿和研究MBE風(fēng)格時(shí)不用墨守陳規的去遵循作者的設計元素，在找到規則之后可以靈活使用才是設計的王道。

中國設計師SA 9527這組的設計中使用了另外一組鄰近色加上類(lèi)似色的使用（紅、粉、橘、黃）更好的表達了一種新年的氣氛。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

?寫(xiě)實(shí)派

在色相的使用上，設計師會(huì )遵循色彩基礎原理來(lái)進(jìn)行配色，但是在不同環(huán)境下為了能更明確的表達物體本身之間的關(guān)系，在藝術(shù)形態(tài)上會(huì )更加具象。

立陶宛的設計師Justas Galaburda在表現形式上更加貼近現實(shí)，藍天、白云、國旗、漢堡和薯條中的配色均采用現實(shí)中的物體顏色做為填充。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

3、圖形
MBE風(fēng)格的背景圖最初只有圓形、小花瓣、加號三種也是最常用的三種圖形，它們是隨著(zhù)MBE而來(lái)也這種風(fēng)格標志直到今天也一直被沿用。

當然天生具有靈活思維的設計師們不會(huì )僅僅停留在這三種元素的組成，通過(guò)不同位設計師的演變它們被改變顏色、位置、大小另外也衍生了一些與扁平風(fēng)格的結合，這種改變都是通過(guò)圖形本身特有的氣質(zhì)而改變。

1:鯨魚(yú)的背景圖形重新組成之后是不是有噴出水花的感覺(jué)。

2:小蜜蜂飛舞的足跡結合扁平的漸變色加上漫天飛舞的小星星真的很有feel。

3:茶壺中間的葉子很好的區分的茶具之間靠色的問(wèn)題，并給畫(huà)面增加了茶水很新鮮的意味。

4:山體中間的云也是自然恰到好處。

5:太陽(yáng)會(huì )因日出而東日落而西，太陽(yáng)的動(dòng)態(tài)氣氛給畫(huà)面增加了幾分活力。

6:仙女棒五彩繽紛的氣氛，光照出來(lái)的時(shí)候會(huì )閃閃發(fā)光。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

MBE風(fēng)格看似簡(jiǎn)單但是其中好的作品總結出來(lái)的經(jīng)驗也是通過(guò)設計師們的實(shí)踐經(jīng)驗得來(lái)的,有了這些設計理論在設計的時(shí)候對我們最終達成的效果的會(huì )有著(zhù)很大的幫助。

以上總結觀(guān)點(diǎn)希望能對大家的設計有一些些的幫助，歡迎大家留言討論更多設計風(fēng)格的研究。

二、MBE風(fēng)格制作教程
1：畫(huà)一個(gè)圓，選中兩端的錨點(diǎn)各縮進(jìn)4px，復制粘貼這個(gè)圓去掉填充色選擇描邊顏色設置描邊10x，用鋼筆工具在描邊上增加幾個(gè)錨點(diǎn)，選擇中間錨點(diǎn)刪除就可以形式一個(gè)圓的斷點(diǎn)。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

2：將填充色改為粉色，復制兩次使用路經(jīng)查找器切割出一個(gè)圓的一小部做為圓的陰影，再用同樣的方法做出一個(gè)高光。

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

3：復制兩次圓，將其中一個(gè)圓縮小擺放到合適的位置使用路徑查找器切割出（這是小優(yōu)的眼鏡）眼鏡的位置，然后填充為藍色，復制眼鏡關(guān)閉填充色設置描邊10px，再復制眼鏡和臉部高光使用路徑查找器切割出眼鏡高光的部分設置色值

ui設計風(fēng)格解析之MBE描邊線(xiàn)條設計風(fēng)格

4：使用上面相同的方法做出一朵花和眼鏡上白色高光，一個(gè)小優(yōu)的頭部就做好了。