1.2 App中的功能图标

功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，其作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时，设计精致、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来良好一致的使用体验。在《零基础学UI》书中介绍到功能图标分为面形图标、线形图标和扁平线形图标3种类型，本篇就来讲解它们通常各自出现在什么样的界面场景中。

面形图标使用场景

面形图标具有广泛的适用性，即使是在以线形图标风格主导的iOS应用里，也常常出现面形图标设计的标签栏或导航栏，它们通常是运动、时尚类应用。例如，FitTime是一款健身运动应用，在标签栏上采用了面形图标的设计，块状简练的图形使得界面风格干净清爽、简洁有力，同为健身运动应用的Keep也采用了面形图标设计。

由于面形图标的视觉占比最大化，具有强烈的视觉表现力，通常用于应用界面的主要功能入口，以方便用户快速寻找。例如，蚂蜂窝和全民K歌在首页采用了面形图标设计的功能入口，一目了然。

在应用界面中使用面形图标设计通常分为反白和正形两种类型：反白即图标填充白色且在图标之下衬以填充色彩的背板，背板按形状又分为圆形、椭圆矩形和圆角矩形3种；正形即图标直接填充色彩且无背板，按填充又分为单色、折纸、多色3种。

在采用反白图标设计时需注意图标与背板的尺寸比例，虽然没有严格的绘制标准，但从整体视觉效果上考虑，图标绘制尺寸建议最小不低于背板直径的1/2，最大不超过背板直径的0.618（黄金比例），同时还要考虑所有图标的视差一致。

圆形和圆角矩形的绘制方法很简单，直接使用形状工具即可绘制，而椭圆矩形介于这两者之间。椭圆矩形也叫超椭圆形，英文名为Squircle，是Square（正方形）与Circle（圆形）的合体。椭圆矩形最早出现在诺基亚的MeeGo操作系统中，扁平化设计趋势流行后，这种圆乎乎的独特造型逐渐受到设计师的青睐。下面就来介绍几种超简单的椭圆矩形绘制方法。

多边形绘制法

选择多边形工具，在工具属性栏设置下拉菜单勾选平滑拐角，按住Shift即可在画布上绘制出椭圆矩形。

这是最简单的绘制方法之一，如果需要调节椭圆矩形的轮廓弧度和圆角大小，可以使用直接选择工具选中锚点向中心或向外移动，向中心则轮廓弧度更平且圆角更小，向外则轮廓弧度更凸且圆角更大。千万不要通过拉伸方向线的圆点来调节轮廓弧度和圆角，这样的操作很难做到精确。

鱼眼绘制法

选择椭圆工具，在画布上绘制圆形，执行Command+T右键“变形”，在工具属性栏变形的下拉菜单选择“鱼眼”，单击对勾或敲回车确定。

布尔运算绘制法

我们可以观察到椭圆矩形是圆角矩形的四条边微微向外凸出，因此可以在圆角矩形的四条边分别添加同样大小椭圆形得到椭圆矩形。在绘制时需注意椭圆形与圆角矩形的轮廓相切（红圈标示），否则合并后的形状轮廓不平滑。

线形图标使用场景

在《iOS人机界面指南》中定义了线形图标的设计风格，所有iOS原生应用的导航栏、标签栏、工具栏全部采用了2px线框的图标设计。例如，iOS健康应用的标签栏和iOS照片应用的工具栏采用了线形的图标设计，可以减少视觉干扰，让用户集中在产品核心功能上，同时轻量化的视觉语言也与扁平化的设计风格更为融合。

线形图标是通过线条来表现物体的轮廓，它比面形图标更能塑造优美的外观，且作为贯穿图标绘制的线条本身就是一种设计语言，因此绘制整套线形图标会更加统一，具有整体感。

通常，在应用界面设计中，线形图标很少和背板同时存在，因为线框描绘的图形视觉表现力较弱，易埋没在背板的填色中，但如果掌握好一定的规则，一些简单的线形图标也可以衬以背板。例如，QQ邮箱和网易新闻表格左侧的图标简洁利落，在很小的尺寸也具有清晰的表现力。在信息复杂的首页主要功能入口，则需要加粗图标的描边才不会失去视觉重心，例如糯米；而在信息结构单一的页面中，简洁的线形图标配合背景色块，既增强视觉聚焦又统一和谐，例如微博。

扁平线形图标使用场景

近年来设计师热衷于将面形图标和线形图标结合在一起，因此创造了扁平线形图标设计风格，这种类似插画感觉的图形一开始多用于引导页、无数据页的情感表现，后来逐渐在标签栏、首页主要功能入口也出现了扁平线形图标的身影。精致的扁平线形图标令人赏心悦目，大大提升了应用的整体视觉效果，拉近了与用户之间的距离，从而建立起良好的用户印象。