2014年,前端界面设计中流行了很多小元素,其中小图标想必是最流行的元素之一。图标自古就有,但经过设计师的不断努力和适应时代的需要,图标视觉发生了重大变化。最近关于空心图标和实心图标的讨论比较火。有评论认为,空心图标比实心图标在视觉上看起来更复杂,用户更容易感到疲劳和倦怠。对此,设计师们纷纷发表了自己的看法,有的表示赞同这种说法,也有的表示这样的言论把问题放大了太多,缺乏证据。图标也可以理解为网站中的向导,是每一个新用户都会涉及到的元素,所以无论是空心还是实心,一目了然、好记的图标才是用户真正喜欢的图标。看看下面一些空心或实心的图标案例,看看你更喜欢哪一个?1.虚化的背景上覆盖着由简单的线条、字体和单一颜色组成的镂空图标,使整个界面显得优雅。不仅如此,这种简单的设计方式也让设计者轻松了很多,效果和操作大家都很满意。#p#2.纯色的背景似乎搭配任何元素都能达到意想不到的效果,下面这个案例也不例外。经典的红白搭配,加上可爱的造型,成就了俏皮的纯色图标设计。界面底部的实心按钮和幽灵按钮也与图标区域相呼应。#p#3。APP底部的图标可以随着用户的任意切换,在空心和实心之间自由切换。与空心图标相比,实心图标给人的视觉效果更加突出和明显,更容易让用户抓住重点。主体内容左侧的小卡通图案同时采用镂空设置,尽显极简主义。#p#4.Line的界面似乎代表了大部分应用的图标设计方式。头部和底部的图标采用实心两种颜色,下拉菜单采用空心图标。虽然这样的设计比较流行,但不可否认的是,这种做法确实让整个界面看起来格外的整洁。#p#5。幽灵按钮虽然简洁大方,但如果用得太多,会让界面显得非常单调,但如果全部采用纯色图标设计,又会让人觉得别扭。下面这个案例想出了一个好办法。既然空心和实心都不合适,不如试着把两者结合起来。#p#6。两种色差明显的颜色搭配,会体现出一种自然的时尚感。黑色背景和亮黄色图标元素就是典型的例子。强烈的对比色会让空心图标看起来像实心图标,有突出重点的效果。#p#7。Metro风格的界面设计也可以用在APP的图标模块中。案例中,各种第三方分享平台的实体图标以方形元素连接在一起,让原本单调的图标瞬间活跃起来。给用户耳目一新的感觉。#p#8。传统的导航图标大多集中在一个区域,而SevenEleven的APP在这里有了很大的突破,将界面的上下左右四个部分分布在一起,简洁的界面顿时有了一种操场。大气让APP充满活力。#p#9。在天气应用程序的亮点中总会有一个天气图标的位置。如本例所示,这是另一种空心和实心结合的图标设计。#p#10。这也是纯色块与纯色图标搭配的案例。这个APP的界面设计其实很普通,但是正是因为图标的设计,网站才变得可爱。图标在网页设计中是一个很小的单位,但是它的重要性有目共睹。空心图标和实心图标在不同的环境中扮演着不同的角色,美化网页中的小细节。
