對(duì)于 UI 設(shè)計(jì)師來(lái)說(shuō)，圖標(biāo)設(shè)計(jì)的能力至關(guān)重要，也是提升感官體驗(yàn)的重要方向。對(duì)于一些初入行業(yè)的設(shè)計(jì)師，習(xí)慣下載圖標(biāo)素材應(yīng)付項(xiàng)目需求，失去了動(dòng)手能力培養(yǎng)的機(jī)會(huì)。甚至一些多年工作經(jīng)驗(yàn)的老司機(jī)，依然還擺脫不了使用素材的習(xí)慣，稍微復(fù)雜一點(diǎn)的技法就會(huì)難以駕馭。
一、切勿過(guò)度素材化
對(duì)于初入職場(chǎng)的設(shè)計(jì)師來(lái)說(shuō)，偶爾運(yùn)用素材可以理解，但是一定要學(xué)會(huì)拆解和分析，掌握還原設(shè)計(jì)的技巧和能力。
過(guò)度依賴(lài)素材容易導(dǎo)致思維固化，不愿意去創(chuàng)造，失去創(chuàng)新設(shè)計(jì)的能力；也容易導(dǎo)致眼高手低，有想法卻實(shí)現(xiàn)不出來(lái)，極容易萌生放棄的念頭；素材拼貼形式完成的設(shè)計(jì)，在規(guī)范性和細(xì)節(jié)性上面也是大打折扣的，導(dǎo)致設(shè)計(jì)作品不夠精細(xì)化和規(guī)范性。
二、刻意練習(xí)強(qiáng)化
我們需要通過(guò)刻意練習(xí)來(lái)提升圖標(biāo)設(shè)計(jì)的能力，根據(jù)一萬(wàn)小時(shí)定律，技法層面的提升都是通過(guò)反復(fù)磨練達(dá)到的。
三、擺脫素材才能規(guī)范化
圖標(biāo)設(shè)計(jì)從素材習(xí)慣過(guò)度到設(shè)計(jì)動(dòng)手其實(shí)很容易，但是從會(huì)畫(huà)到畫(huà)好之間看似簡(jiǎn)單卻很難掌握。擺脫素材是圖標(biāo)設(shè)計(jì)規(guī)范化的關(guān)鍵，然后再統(tǒng)一風(fēng)格和細(xì)節(jié)規(guī)范，掌握數(shù)字化關(guān)系也是需要我們反復(fù)研究的課題。
比如以這個(gè)天氣圖標(biāo)來(lái)舉例，相信很多同學(xué)都能畫(huà)出來(lái)，但是有沒(méi)有把控里面的數(shù)字關(guān)系就難說(shuō)了。通過(guò)以下示意圖我們可以看出來(lái)，大圓和小圓之間的比例關(guān)系是 4:3，而間距的關(guān)系也與圓形的大小有著數(shù)字關(guān)系。這些數(shù)字關(guān)系可以使得圖標(biāo)設(shè)計(jì)更加精細(xì)化，也能引導(dǎo)我們?nèi)ヌ剿髟O(shè)計(jì)背后量化的標(biāo)準(zhǔn)和關(guān)系。
四、質(zhì)感的層層強(qiáng)化
當(dāng)我們繪制完圖標(biāo)的造型之后，運(yùn)用合適的風(fēng)格進(jìn)行質(zhì)感強(qiáng)化也是尤為重要的。這里我先運(yùn)用其中的一個(gè)風(fēng)格來(lái)完成，選擇了磨砂玻璃質(zhì)感的效果。為了質(zhì)感和層級(jí)關(guān)系更加明顯，這里單獨(dú)對(duì)局部進(jìn)行了光影強(qiáng)化和邊界處理，看看以下步驟拆解圖感受一下。
備注：運(yùn)用的軟件功能是背景模糊，Sketch 或者 Figma 等軟件皆可實(shí)現(xiàn)。
五、延展界面場(chǎng)景
為了進(jìn)一步強(qiáng)化圖標(biāo)練習(xí)，延展了一個(gè)簡(jiǎn)單的界面場(chǎng)景，一個(gè)由宮格布局組合成的界面設(shè)計(jì)。為了填充所需的內(nèi)容，先把之前的一些圖標(biāo)作品放進(jìn)去占個(gè)位置。雖然都是質(zhì)感一類(lèi)的圖標(biāo)，但是由于透視、配色、風(fēng)格和細(xì)節(jié)規(guī)范等不一致，整體還是存在一定的排斥感。
六、根據(jù)界面環(huán)境重新調(diào)整
由于界面設(shè)計(jì)屬于深色主題，之前練習(xí)的天氣圖標(biāo)放入場(chǎng)景中顯得過(guò)于突出，而且玻璃質(zhì)感的通透性沒(méi)有得到很好的發(fā)揮。于是根據(jù)界面環(huán)境對(duì)天氣圖標(biāo)進(jìn)行了重新調(diào)整，以深色關(guān)系調(diào)整了云朵部分，針對(duì)太陽(yáng)的配色和尺寸比例也進(jìn)行了調(diào)整，如以下效果圖。
七、延續(xù)風(fēng)格補(bǔ)全設(shè)計(jì)
以調(diào)整后的天氣圖標(biāo)作為風(fēng)格規(guī)范，延續(xù)了其它業(yè)務(wù)場(chǎng)景的圖標(biāo)設(shè)計(jì)，在透視關(guān)系、細(xì)節(jié)規(guī)范、配色比例和光影效果等方面進(jìn)行了直接延續(xù)。在光影方向上面選擇了縱向區(qū)分，左邊三個(gè)選擇左上角打光，右邊三個(gè)選擇右上角打光。（當(dāng)然也可以統(tǒng)一一個(gè)方向設(shè)置光影）
八、統(tǒng)一性還是差異化
完成的整體設(shè)計(jì)視覺(jué)風(fēng)格雖然比較統(tǒng)一，但是也有一些問(wèn)題存在。圖標(biāo)之間缺少差異化，過(guò)度統(tǒng)一容易視覺(jué)疲勞，于是在統(tǒng)一性和差異化上面開(kāi)始糾結(jié)了。
為了既保障圖標(biāo)設(shè)計(jì)表達(dá)的統(tǒng)一性，又能形成視覺(jué)感的差異化，做出了調(diào)整配色關(guān)系的決定。根據(jù)天氣圖標(biāo)的配色關(guān)系延續(xù)出了其它色系，看看最終的效果如何。
你喜歡哪一版？
關(guān)于統(tǒng)一性和差異化因人而異，在朋友圈征集意見(jiàn)也是各有差異，那么你會(huì)喜歡哪一版呢？歡迎留言區(qū)一起互動(dòng)交流。
原文地址：黑馬家族（公眾號(hào)）
作者：黑馬青年
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》畫(huà)圖標(biāo)，我是認(rèn)真的
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.lapeinture.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司