近日，百度網(wǎng)盤(pán)10.0上線(xiàn)了全新的設(shè)計(jì)語(yǔ)言D20，許多同學(xué)不明覺(jué)厲，今天超級(jí)葉將為大家解析百度網(wǎng)盤(pán)新圖標(biāo)的設(shè)計(jì)風(fēng)格及繪制方法。

01 D20是什么

D20是百度UXC在百度網(wǎng)盤(pán)10.0版本中推出的全新設(shè)計(jì)語(yǔ)言，也就是大家這次想要學(xué)習(xí)的圖標(biāo)的指導(dǎo)風(fēng)格——「賽博朋克」+「蒙德里安」，我想叫它「賽格風(fēng)」，賽博朋克+蒙德里安的格子。

蒙德里安

蒙德里安，是由荷蘭畫(huà)家皮特·科內(nèi)利斯·蒙德里安所創(chuàng)立，主張以幾何形體構(gòu)成“形式的美”，作品多以垂直線(xiàn)和水平線(xiàn)、長(zhǎng)方形和正方形的各種格子組成，反對(duì)用曲線(xiàn)，完全摒棄藝術(shù)的客觀形象和生活內(nèi)容。

蒙德里安和他的著名作品《勝利之舞》

蒙德里安的抽象畫(huà)又稱(chēng)「格子畫(huà)」，這構(gòu)成了百度網(wǎng)盤(pán)新圖標(biāo)的主框架。

賽博朋克

賽博朋克（Cyberpunk），是?？貙W(xué) (Cybernetics) 與朋克 (Punk) 的結(jié)合詞，為以計(jì)算機(jī)或信息技術(shù)作主題的科幻故事分支。故事情節(jié)通常關(guān)于社會(huì)秩序在受高度控制下出現(xiàn)弱點(diǎn)而被主角利用。此分支是對(duì)科幻小說(shuō)一貫忽略信息技術(shù)高速發(fā)展的一種自我修正。隨著賽博朋克受到更多人留意和關(guān)注，現(xiàn)在也衍生出相關(guān)的電玩游戲、音樂(lè)、時(shí)尚。

Cyberpunk conception via Sergii Golotovskiy

TOKYO OLYMPICS 2020 via Vladislav Solovjov

賽博朋克的主要特點(diǎn)是科技、迷幻、酷炫，霓虹燈是賽博朋克的常見(jiàn)元素之一，這種風(fēng)格的視覺(jué)作品多以藍(lán)、紫、青等冷色調(diào)為主。

百度網(wǎng)盤(pán)新版圖標(biāo)想要體現(xiàn)賽博朋克的科技感，又希望傳達(dá)出積極向上、新鮮活力的視覺(jué)效果，于是百度UXC團(tuán)隊(duì)在Shutterstock平臺(tái)上獲取到用戶(hù)下載最頻繁的顏色，分別是——UFO Green、Plastic Pink、Proton Purple。

UFO Green（飛碟綠）

這種鮮艷的綠色喚起了人們對(duì)郁郁蔥蔥的鄉(xiāng)村風(fēng)光以及旋轉(zhuǎn)的二進(jìn)制代碼（黑客帝國(guó)）的想象。它既自然又超自然，其名稱(chēng)反映了其超凡脫俗的品質(zhì)。 

Plastic Pink（塑料粉）

這款粉紅色可以追溯到某個(gè)標(biāo)志性的玩具，但在意義上卻帶來(lái)了全新的展示。它有著深沉的色調(diào)，可以捕捉夜晚城市的電光。

Proton Purple（質(zhì)子紫）

想想嗡嗡作響的霓虹燈，嗡嗡作響的設(shè)備，振動(dòng)的手機(jī)。這種鮮艷的紫色代表了我們?nèi)粘Ｉ钪忻黠@的正電荷。

在新版圖標(biāo)設(shè)計(jì)中，百度UXC采用了“通過(guò)折疊像素?cái)?shù)據(jù)和十六進(jìn)制編碼”統(tǒng)計(jì)出的高飽和度的漸變色，再輔之以補(bǔ)色相搭配，傳遞出年輕個(gè)性化的特點(diǎn)，這構(gòu)成了百度網(wǎng)盤(pán)新圖標(biāo)的主色調(diào)。

通過(guò)對(duì)「賽博朋克」和「蒙德里安」風(fēng)格的探索、提煉、融合，百度UXC總結(jié)出了自己的D20設(shè)計(jì)語(yǔ)言的主框架和主色調(diào)，也形成了「賽格風(fēng)」這種新的圖標(biāo)設(shè)計(jì)風(fēng)格。

02 如何繪制「賽格風(fēng)」圖標(biāo)

我們?cè)賮?lái)看一下百度的新圖標(biāo)，能夠發(fā)現(xiàn)：格子的主框架+漸變的主色調(diào)+白色的主視覺(jué)，這就構(gòu)成了賽格風(fēng)圖標(biāo)。接下來(lái)，我們?cè)诶L制練習(xí)中去發(fā)現(xiàn)規(guī)律并掌握它。

Step 1 繪制主視覺(jué)圖標(biāo)

以“視頻”圖標(biāo)為例，我們先畫(huà)一個(gè)播放按鈕。

值得一提的是，播放圖標(biāo)是一個(gè)三角形，我們將它放置在中間的圓形輔助線(xiàn)里面，這是遵循了視覺(jué)平衡的原理，讓它”真正居中“。

Step2 繪制主框架

賽格風(fēng)的主框架是由水平或垂直的線(xiàn)條分割而成，通過(guò)觀察百度網(wǎng)盤(pán)中的圖標(biāo)，我發(fā)現(xiàn)一些規(guī)律：格子的塊面一般是5塊或者6塊，5塊的圖標(biāo)由近似色漸變組成，6塊的圖標(biāo)由近似色+互補(bǔ)色的漸變組成，配色我們一會(huì)再講，現(xiàn)在先來(lái)分塊。

針對(duì)主視覺(jué)（播放圖標(biāo)）繪制幾條線(xiàn)，這里大家可以自由發(fā)揮，保持一種漂亮的韻律即可，但也有需要注意的地方：

1、主視覺(jué)所在的區(qū)域盡量不分割，或少分割，讓它獨(dú)占一個(gè)干凈的區(qū)域，這是為了減少視覺(jué)干擾，增強(qiáng)識(shí)別性

2、要有節(jié)奏感，每個(gè)區(qū)域的比例不能太平均，不然就成拼圖了，會(huì)顯得雜亂和小氣

3、劃分之前也考慮一下配色，這一點(diǎn)可以結(jié)合我接下來(lái)的配色講解進(jìn)行分析

關(guān)于“分割”呢，大家可以在AI頂欄“窗口”中打開(kāi)“路經(jīng)查找器”，選中所有線(xiàn)條和我們基礎(chǔ)的圓角矩形，在路經(jīng)查找器中執(zhí)行-分割，然后取消分組即可。

（執(zhí)行分割之后，被分割的圓角矩形的圖層順序會(huì)置頂，此時(shí)會(huì)覆蓋掉播放圖標(biāo)，沒(méi)有關(guān)系，我們一會(huì)在圖層列表把播放圖標(biāo)放在它們前面就是了） 

Step3 上色

接下來(lái)就是給分割好的圖形上色了，主要用到了紅黃藍(lán)及其鄰近色，我們先繪制幾個(gè)圓角矩形，為它們調(diào)制漸變色，這個(gè)在我文末分享的文件中會(huì)給到。 

上色時(shí)的注意事項(xiàng)：

1、注意調(diào)整漸變的角度，一般豎向的區(qū)域是90°，橫向的區(qū)域是0°

2、相鄰區(qū)域之間的顏色要有一定反差，可以通過(guò)調(diào)整兩者的飽和度或采用互補(bǔ)色進(jìn)行區(qū)分

3、深色區(qū)域要小、要少，主區(qū)域一定是高飽和度的鮮艷的漸變，這樣才能傳達(dá)出年輕活力的感覺(jué)

Step4 調(diào)整細(xì)節(jié)

最后一步就是把播放圖標(biāo)放上來(lái)，檢查一下構(gòu)圖、配色是否還有可以調(diào)整的地方。

今天的百度網(wǎng)盤(pán)「賽格風(fēng)」新圖標(biāo)的解析到這里就結(jié)束了，以上內(nèi)容為我的個(gè)人見(jiàn)解，不代表百度團(tuán)隊(duì)官方意見(jiàn)謝謝！

作者：超級(jí)葉

微信公眾號(hào)：葉設(shè)計(jì)的自習(xí)室