1、運(yùn)用實(shí)心圖標(biāo)和線性圖標(biāo)區(qū)分不同的狀態(tài)

自從iOS7發(fā)布之后，蘋果規(guī)范了圖標(biāo)的使用原則，將兩種互補(bǔ)的圖標(biāo)風(fēng)格用來表示兩種狀態(tài)：當(dāng)圖標(biāo)不是當(dāng)前選中狀態(tài)時(shí)，它完全是空心的；而一旦這個(gè)圖標(biāo)被點(diǎn)擊，或處于激活狀態(tài)時(shí)，它便會(huì)被填充，這能幫助用戶區(qū)分當(dāng)前處在哪個(gè)功能頁面中。

由于今天大部分UI中的圖標(biāo)使用都會(huì)遵循這個(gè)原則，因此，如果你錯(cuò)誤地使用了圖標(biāo)的狀態(tài)，將會(huì)讓用戶感到非常迷惑。

如下圖所示：

 

2、運(yùn)用實(shí)心圖標(biāo)用于分割層次，區(qū)分信息的重要程度

實(shí)心圖標(biāo)——往往用于分割層次，區(qū)分信息的重要程度；

線性圖標(biāo)——由線性組成，能夠給人輕松，精致的感覺，對信息方向有一定的引導(dǎo)作用。

來看看它們的特征：

 

舉個(gè)例子，在一排空心圖標(biāo)中插入一個(gè)實(shí)心的，和一排實(shí)心圖標(biāo)中放置一個(gè)空心的，對比之下就會(huì)發(fā)現(xiàn)，實(shí)心的圖標(biāo)相比較空心的而言，視覺注意力更有力度，讓用戶更容易抓到重點(diǎn)。

如某些APP 列表前面的圖標(biāo)采用的方式：

（實(shí)心圖標(biāo)往往用于分割層次，區(qū)分信息的重要程度）

3、運(yùn)用空心圖標(biāo)引導(dǎo)信息方向

空心圖標(biāo)（即線性圖標(biāo)）由線性組成，能夠給人輕松，精致的感覺，對信息方向有一定的引導(dǎo)作用。

在實(shí)際的設(shè)計(jì)中，實(shí)心和空心圖標(biāo)往往是結(jié)伴出現(xiàn)的，我們?nèi)裟芴幚砗盟鼈冎g的相互關(guān)系，將會(huì)使信息傳達(dá)事半功倍。

上圖案例中，左圖采用實(shí)心和空心圖標(biāo)結(jié)合的設(shè)計(jì)，豐富了視覺內(nèi)容層次，效果要比右圖好。

 

看完以上三點(diǎn)，想必你也會(huì)對在APP設(shè)計(jì)當(dāng)中如何用好實(shí)心圖標(biāo)和線性圖標(biāo)有一定的了解了吧！