APP設計當中如何用好實心圖標和線性圖標

作為設計師，畫過那么多圖標，不管是實心圖標還是線性圖標、還是扁平化圖標等等。

在app設計當中，到底哪些場景，哪些界面，哪些功能是需要用到實心圖標，哪些是需要用到線性圖標的。如果剛好你也有這樣的疑惑，那么就來跟隨學堂君一起學習揭秘吧~

問題就是：在APP設計當中，什么情況下適合用實心圖標，什么情況用線性圖標的呢？

 

 

1、運用實心圖標和線性圖標區(qū)分不同的狀態(tài)

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

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

如下圖所示：

運用實心圖標和線性圖標區(qū)分不同的狀態(tài)

 

2、運用實心圖標用于分割層次，區(qū)分信息的重要程度

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

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

來看看它們的特征：

 

用不同圖標區(qū)分信息的重要程度

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

區(qū)分信息的重要程度

如某些APP 列表前面的圖標采用的方式：

APP圖標性質(zhì)

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

3、運用空心圖標引導信息方向

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

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

app圖標應用
上圖案例中，左圖采用實心和空心圖標結合的設計，豐富了視覺內(nèi)容層次，效果要比右圖好。

 

看完以上三點，想必你也會對在APP設計當中如何用好實心圖標和線性圖標有一定的了解了吧！

 

 

每天更新，
全站高品質(zhì)素材免費下載！