APP设计当中如何用好实心图标和线性图标

作为设计师,画过那么多图标,不管是实心图标还是线性图标、还是扁平化图标等等。

在app设计当中,到底哪些场景,哪些界面,哪些功能是需要用到实心图标,哪些是需要用到线性图标的。如果刚好你也有这样的疑惑,那么就来跟随学堂君一起学习揭秘吧~

问题就是:在APP设计当中,什么情况下适合用实心图标,什么情况用线性图标的呢?

 

 

1、运用实心图标和线性图标区分不同的状态

自从iOS7发布之后,苹果规范了图标的使用原则,将两种互补的图标风格用来表示两种状态:当图标不是当前选中状态时,它完全是空心的;而一旦这个图标被点击,或处于激活状态时,它便会被填充,这能帮助用户区分当前处在哪个功能页面中。

由于今天大部分UI中的图标使用都会遵循这个原则,因此,如果你错误地使用了图标的状态,将会让用户感到非常迷惑。

如下图所示:

运用实心图标和线性图标区分不同的状态

 

2、运用实心图标用于分割层次,区分信息的重要程度

实心图标——往往用于分割层次,区分信息的重要程度;

线性图标——由线性组成,能够给人轻松,精致的感觉,对信息方向有一定的引导作用。

来看看它们的特征:

 

用不同图标区分信息的重要程度

举个例子,在一排空心图标中插入一个实心的,和一排实心图标中放置一个空心的,对比之下就会发现,实心的图标相比较空心的而言,视觉注意力更有力度,让用户更容易抓到重点。

区分信息的重要程度

如某些APP 列表前面的图标采用的方式:

APP图标性质

(实心图标往往用于分割层次,区分信息的重要程度)

3、运用空心图标引导信息方向

空心图标(即线性图标)由线性组成,能够给人轻松,精致的感觉,对信息方向有一定的引导作用。

在实际的设计中,实心和空心图标往往是结伴出现的,我们若能处理好它们之间的相互关系,将会使信息传达事半功倍。

app图标应用
上图案例中,左图采用实心和空心图标结合的设计,丰富了视觉内容层次,效果要比右图好。

 

看完以上三点,想必你也会对在APP设计当中如何用好实心图标和线性图标有一定的了解了吧!

 

 

每天更新,
全站高品质素材免费下载!