久久精品国产亚洲av日韩,亚洲中文字幕无码永久不卡免弗

【技術(shù)分享】設(shè)計(jì)圖標(biāo)的四大步驟

2024-10-12 1640 作者:

字號(hào)：【小】【中】【大】

分享到：

設(shè)計(jì)師在畫圖時(shí)總是要經(jīng)歷各種各樣的嘗試，畫icon也是同樣的，都不知道什么是最好的，只能在多次的嘗試后得出最優(yōu)解。挑選最優(yōu)解很簡(jiǎn)單，重要的是哪來那么多的方案/靈感？這篇文章就以繪制四個(gè)底部tab的icon——首頁、低碳生活、低碳商城、我的，跟大家分享。

整體是四個(gè)大步驟：

Part.01尋找參考：要先腦爆，再找參考

Part.02細(xì)化圖形：從小到大將差異化融入

Part.03細(xì)化風(fēng)格：優(yōu)先參考app的設(shè)計(jì)風(fēng)格

Part.04整體調(diào)整：最關(guān)鍵最基礎(chǔ)的設(shè)計(jì)修養(yǎng)

01、尋找參考：要先腦爆，再找參考

以最常見的「首頁」icon 為例，想到首頁你會(huì)想到什么圖形？

那一定是「房子」對(duì)不對(duì)？如果你直接去iconfont上搜首頁，也是給你出來一堆房子：

如果你的思路在開頭就僅限于此，那后續(xù)方向嘗試也會(huì)受到局限。這時(shí)需要在這一步就發(fā)散下思路，腦爆一下，可以從行業(yè)角度和自身產(chǎn)品的角度去出發(fā)。

比如現(xiàn)在畫的這個(gè)首頁 icon，屬于是環(huán)保行業(yè)內(nèi)的，那首頁 icon 是不是可以是「地球」「樹苗」？再?gòu)淖陨懋a(chǎn)品角度出發(fā)，看看app內(nèi)的LOGO、吉祥物。那么現(xiàn)在光首頁這個(gè)icon就能想到5個(gè)可設(shè)計(jì)的方向。

只有聯(lián)想的關(guān)鍵詞越多，可檢索的范圍就越廣。按照這種思路每個(gè)icon都能找到很多參考，再根據(jù)參考畫出 icon。

此時(shí)「首頁」這個(gè)圖標(biāo)畫出了以上六種圖標(biāo)造型，「樹苗」「地球」的圖標(biāo)都比較獨(dú)特，但是目前房子這個(gè)圖標(biāo)就太常見、太大眾了。

在畫圖標(biāo)時(shí)不可避免地也會(huì)有一些比較常見的、普通的 icon，就可以對(duì)這些常見的 icon 進(jìn)行調(diào)整，讓它不至于這么大眾。

02、細(xì)化圖形：從小到大將差異化融入

可以賦予普通圖標(biāo)一點(diǎn)差異化，讓它看起來更不同一些。從小點(diǎn)入手，將它基礎(chǔ)形進(jìn)行微調(diào)，從大點(diǎn)入手，可以將行業(yè)屬性和品牌圖形融入圖標(biāo)。

如果從小的調(diào)整入手，可以考慮將圖標(biāo)外輪廓做一些微調(diào)。將房子的外部造型進(jìn)行調(diào)整，一共微調(diào)出5種房子的造型：

小的調(diào)整能讓這個(gè)圖標(biāo)稍微變得不一樣一些。而從大方向上可以發(fā)生更明顯、直觀的變化，讓圖標(biāo)的差異化特征也更加明顯。如何對(duì)圖標(biāo)進(jìn)行更大的改觀？大家可以從行業(yè)屬性的融入、品牌圖形的融入去嘗試。比如這個(gè)首頁圖標(biāo)你希望他帶有環(huán)保的行業(yè)屬性，而環(huán)保類icon的參考里常見的元素有樹苗、樹葉、閃電：

這些元素都可以和房子進(jìn)行很好地結(jié)合：

除了融入行業(yè)屬性，大家也可以將自己產(chǎn)品的品牌圖形融入icon，比如像飛豬、馬蜂窩app都有將自己的吉祥物or品牌圖形融入其中：

03、細(xì)化風(fēng)格：優(yōu)先參考app設(shè)計(jì)風(fēng)格

通過以上兩步，把 icon 的外形確定下來后，就可以開始細(xì)化圖標(biāo)風(fēng)格了，如果不知道該采用什么風(fēng)格，不如先看看自家app的風(fēng)格或設(shè)計(jì)語言是什么，可以根據(jù)app風(fēng)格細(xì)化圖標(biāo)風(fēng)格。如果這款app的頁面風(fēng)格是扁平、漸變、線條：