眾所周知,無論是文字icon還是圖形icon,都是以快速識別作為基本目的,以簡化的圖形為基礎(chǔ),衍生出千變?nèi)f化而又有跡可循的樣子。icon因此是UI設(shè)計中必不可少的元素。特別是移動APP界面設(shè)計當(dāng)中,icon圖標(biāo)設(shè)計是我們必修課。
在整個APP界面設(shè)計當(dāng)中,icon圖標(biāo)設(shè)計也是最重要的一環(huán)節(jié)?;ㄔ赼pp圖標(biāo)設(shè)計的時間上也是蠻多的。之前學(xué)堂君也整理了APP圖標(biāo)和按鈕視覺設(shè)計規(guī)范,值得大家閱讀。
那到底什么樣的icon圖標(biāo)才算是好的APP圖標(biāo)設(shè)計呢?
學(xué)堂君收集了一些APP設(shè)計的經(jīng)驗和干貨分享給大家。大致需要滿足四個方面的要求。
第一:ICON圖標(biāo)邊界清晰
換句話說,圖標(biāo)的輪廓要清晰。具有很強(qiáng)的識別性。降低用戶的認(rèn)知成本。
所以,icon一定要有清晰的邊界,最好的方式就是清晰的線條。App內(nèi)的icon大多采用這種形式。
上面2個是 ?淘寶和微信底部tab的icon,都是采用線型作為icon的未選中狀態(tài)。
當(dāng)然,還有下面這些比較好擬物化的appicon 學(xué)習(xí)欣賞:
第二個:合適的色彩與質(zhì)地
合適的含義是,填充的色塊和紋理要有利于邊界的形成。淘寶和微信底部的tab,我們觀察被選中的狀態(tài)與選中狀態(tài)的差異,
選中狀態(tài)將部分線條改為閉合或未閉合(購物車)的輪廓填充成色塊,這里涉及到另一個問題,圖形和背景的的分離。填充的色塊和色塊底部的tab bar的灰色依舊有清晰的邊界,使我們可以容易的將icon識別出來。
第三個:一致的角度和占位符空間
icon內(nèi)輪廓的線條的角度往往是相對一致的,并且一般是均衡的角度,如45度,90度,0度,這三種角度的輪廓可以給人一種穩(wěn)定的感覺。
A、角度一致。比如iOS系統(tǒng)圖標(biāo)Quick Time Player ,Safari和launchpad的icon都采用了45度角作為內(nèi)部圖形傾斜的依據(jù)。
B、占位符空間的一致。如下圖
特別是一些重要活動的Icon圖標(biāo)設(shè)計,比如奧運(yùn)會的icon設(shè)計。在系列的icon,統(tǒng)一的傾斜角度格外重要。45度角使用的更為頻繁。
第四個:空間感的塑造
icon首先必然是平面的,大多數(shù)的icon采用的都是正視圖的方式呈現(xiàn)。
但是有些特殊的含義往往需要表達(dá)重復(fù)的意思,那么在二維空間內(nèi)展示空間的層疊關(guān)系,依賴的只能是大小恒常性。淘寶底部tab中的社區(qū)icon,兩個對話框的疊加就是這樣。
比如天氣類的圖標(biāo)設(shè)計:
還有直接依賴透視線的方式等等。
最后,APP ?icon圖標(biāo)在設(shè)計中最為基本的存在意義是識別,為了達(dá)到這個目的。希望大家可以好好遵循以上四點(diǎn)要求。多多練習(xí)。
全站高品質(zhì)素材免費(fèi)下載!