浅谈设计师必看的图标和ICON设计指南

浅谈设计师必看的图标和ICON设计指南

功能图标在UI设计中占据非常重要的作用,几乎存在于每一个应用界面中,无论是在导航栏、工具栏或标签栏,还是在首页、详情页、或个人中心页,都随处可见功能图标的身影。功能图标具有明确的表意功能,起作用在于替代文字或辅助文字来指引用户进行快速导航,它具有图形化的符号,比文字更加直观,符合普罗大众的认知习惯,有助于用户形成记忆思维,提高应用的易用性。同时,设计精美、风格统一的功能图标提升了产品视觉效果,不但给用户带来视觉上的愉悦感,还带来良好一致的使用体验。

7.1 线性图标使用场景

在iOS所有原生应用的导航栏和工具栏都采用了2px线框的图标设计,很多APP产品的标签栏都选择用线性风格的图标设计。无疑,线性图标可以减少视觉干扰,让用户集中在产品核心功能上,同时轻量化的视觉语言也与扁平化的设计风格更为融合。它比面形图标更能塑造优美的外观,且线条本身就是一种设计语言,因此绘制整套线性图标会更加统一,具有整体感。

浅谈设计师必看的图标和ICON设计指南

通常,在UI设计中,线性图标很少和背板同时存在,因为线条的图形视觉表现力较弱,容易埋没在背景色中,但也不是必须的,如果掌握好一定的规则,一些简单的线性图标和背板的组合也会很协调。

7.2 面形图标使用场景

面形图标具有广泛适用性,通常在运动、时尚类应用的标签栏出现。由于面形图标的视觉占比最大化,具有强烈的视觉表现力,一般用于应用界面的主要功能入口,以方便用户快速寻找。

浅谈设计师必看的图标和ICON设计指南

功能入口的面形图标通常分为反白和正形两种类型。反白即在彩色背板上显示白色的图标,正形即图标直接填充色彩且无背板。在带有背板的图标设计时要注意图标与背板的尺寸比例,虽没有严格的绘制标准,但从整体视觉效果上考虑,图标尺寸最好不低于背板直径但1/2,最大不超过背板直径的0.618(黄金比例),同时还要考虑所有图标的视差一致。

浅谈设计师必看的图标和ICON设计指南

7.3 扁平图标的使用场景

扁平化图标实际上是线性图标和面形图标的一种组合形式,这种类似插画感觉的图形一开始多用于引导页、空状态也的情感化设计,后来逐渐在标签栏、首页主要功能入口也出现了扁平化图标的身影。精致的扁平化图标令人赏心悦目,拉近了与用户之间的距离,从而建立起良好的用户印象。

浅谈设计师必看的图标和ICON设计指南