2025-3-17 天宇 圖標設(shè)計文章及欣賞
對于 UI 設(shè)計師來說，圖標設(shè)計的能力至關(guān)重要，也是提升感官體驗的重要方向。對于一些初入行業(yè)的設(shè)計師，習慣下載圖標素材應(yīng)付項目需求，失去了動手能力培養(yǎng)的機會。甚至一些多年工作經(jīng)驗的老司機，依然還擺脫不了使用素材的習慣，稍微復雜一點的技法就會難以駕馭。
1. 切勿過度素材化
對于初入職場的設(shè)計師來說，偶爾運用素材可以理解，但是一定要學會拆解和分析，掌握還原設(shè)計的技巧和能力。
過度依賴素材容易導致思維固化，不愿意去創(chuàng)造，失去創(chuàng)新設(shè)計的能力；也容易導致眼高手低，有想法卻實現(xiàn)不出來，極容易萌生放棄的念頭；素材拼貼形式完成的設(shè)計，在規(guī)范性和細節(jié)性上面也是大打折扣的，導致設(shè)計作品不夠精細化和規(guī)范性。
2. 刻意練習強化
我們需要通過刻意練習來提升圖標設(shè)計的能力，根據(jù)一萬小時定律，技法層面的提升都是通過反復磨練達到的。
3. 擺脫素材才能規(guī)范化
圖標設(shè)計從素材習慣過度到設(shè)計動手其實很容易，但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設(shè)計規(guī)范化的關(guān)鍵，然后再統(tǒng)一風格和細節(jié)規(guī)范，掌握數(shù)字化關(guān)系也是需要我們反復研究的課題。
比如以這個天氣圖標來舉例，相信很多同學都能畫出來，但是有沒有把控里面的數(shù)字關(guān)系就難說了。通過以下示意圖我們可以看出來，大圓和小圓之間的比例關(guān)系是 4:3，而間距的關(guān)系也與圓形的大小有著數(shù)字關(guān)系。這些數(shù)字關(guān)系可以使得圖標設(shè)計更加精細化，也能引導我們?nèi)ヌ剿髟O(shè)計背后量化的標準和關(guān)系。
4. 質(zhì)感的層層強化
當我們繪制完圖標的造型之后，運用合適的風格進行質(zhì)感強化也是尤為重要的。這里我先運用其中的一個風格來完成，選擇了磨砂玻璃質(zhì)感的效果。為了質(zhì)感和層級關(guān)系更加明顯，這里單獨對局部進行了光影強化和邊界處理，看看以下步驟拆解圖感受一下。
備注：運用的軟件功能是背景模糊，Sketch 或者 Figma 等軟件皆可實現(xiàn)。
5. 延展界面場景
為了進一步強化圖標練習，延展了一個簡單的界面場景，一個由宮格布局組合成的界面設(shè)計。為了填充所需的內(nèi)容，先把之前的一些圖標作品放進去占個位置。雖然都是質(zhì)感一類的圖標，但是由于透視、配色、風格和細節(jié)規(guī)范等不一致，整體還是存在一定的排斥感。
6. 根據(jù)界面環(huán)境重新調(diào)整
由于界面設(shè)計屬于深色主題，之前練習的天氣圖標放入場景中顯得過于突出，而且玻璃質(zhì)感的通透性沒有得到很好的發(fā)揮。于是根據(jù)界面環(huán)境對天氣圖標進行了重新調(diào)整，以深色關(guān)系調(diào)整了云朵部分，針對太陽的配色和尺寸比例也進行了調(diào)整，如以下效果圖。
7. 延續(xù)風格補全設(shè)計
以調(diào)整后的天氣圖標作為風格規(guī)范，延續(xù)了其它業(yè)務(wù)場景的圖標設(shè)計，在透視關(guān)系、細節(jié)規(guī)范、配色比例和光影效果等方面進行了直接延續(xù)。在光影方向上面選擇了縱向區(qū)分，左邊三個選擇左上角打光，右邊三個選擇右上角打光。（當然也可以統(tǒng)一一個方向設(shè)置光影）
8. 統(tǒng)一性還是差異化
完成的整體設(shè)計視覺風格雖然比較統(tǒng)一，但是也有一些問題存在。圖標之間缺少差異化，過度統(tǒng)一容易視覺疲勞，于是在統(tǒng)一性和差異化上面開始糾結(jié)了。
為了既保障圖標設(shè)計表達的統(tǒng)一性，又能形成視覺感的差異化，做出了調(diào)整配色關(guān)系的決定。根據(jù)天氣圖標的配色關(guān)系延續(xù)出了其它色系，看看最終的效果如何。
你喜歡哪一版？
關(guān)于統(tǒng)一性和差異化因人而異，在朋友圈征集意見也是各有差異，那么你會喜歡哪一版呢？歡迎留言區(qū)一起互動交流。
藍藍設(shè)計的小編 http://www.yvirxh.cn
