产品图标体系是如何炼成的?

版权申明:本教程出自“UCD耍家”原创,感谢“UCD耍家”的原创文章分享!

前不久我在讲标签栏专题的时候,有聊到过一次图标(可回顾:《了解图标落地,让前端再爱你一次》。前文已提及到部分规范,本文将直接引用,为防止新读者理解脱节,建议先看前文)。

那一次因为主题的缘故,不能偏题太远,所以对图标本身的讲解我没有进行太多的剖析,更多是在讲标签栏图标的切图、对接前端落地等项目实操的手法。于是有部分读者在后台给我留言,让我再全面地讲解一次图标。

所以这一期我将分三个步骤来总结一下一个产品图标体系的诞生。

一、认识:图标的分类

不论是从应用场景还是视觉效果来讲,图标的种类都是非常繁多的。所以对于图标的分类,其实需要落实到具体的分类标准。

如果是基于 iOS 和 Material Design 平台规范,两大平台仅从应用场景将图标分为了:应用图标(App/Product Icon)、系统图标(System Icons)。这并不难理解。

但据我所知,让大家更加感到纠结的其实是自定义图标(Custom Icons)。不清楚当下流行的图标视觉类型,也不知道该如何搭建起一套产品图标体系。所以我将对两种分类标准下的图标都进行一次总结。

1.1 应用场景分类下的图标

应用场景分类下的图标我们主要先来说一说应用图标(App Icon)。

产品图标体系是如何炼成的?

因为应用图标和我们在App界面内自定义的图标不同,App内的图标我们可以根据产品的视觉风格随意创造规范,但应用图标需要符合平台的上架规定,我们必须要遵守平台规范。

FEVTE编注:更多UI设计教程,和UI设计理论知识请访问飞特网UI设计教程栏目:https://www.fevte.com/plan/UIdesign/

实际上iOS和MD规范中的应用图标视觉规范其实还是有所差异的,但因为在国内很少有项目会独立设计双平台应用,所以大多数时候我们还是会一图适用双平台。

所以在设计应用图标时,不用过分拘泥于某一方平台规范,只需要注意简单借助辅助网格。最重要的还是不同终端要求的不同输出尺寸。

应用图标不仅仅出现在桌面上,iOS还会在通知栏、Spotlight、设置等地方;安卓也会在状态栏、消息push中出现。这些场景下的应用图标尺寸根据设备的不同,显示的尺寸也是不同的。为了保证应用图标的显示效果,需要单独对每个尺寸进行调整,尽可能避免出现半个像素等情况,以保证边缘显示的锐利。而单纯的缩放并不能解决这些问题。

所以我总结了一份iOS应用图标尺寸清单:

产品图标体系是如何炼成的?

安卓的应用图标,因为杂屏原因,且图标应用场景繁多,整理起来过于繁琐,并且Android 8.0之后,应用图标还支持Z轴适配法,这一系列的内容整理出来完全可以新开一个文章再详解了…后续我一定会再专门开一期文章讲解Z轴适配法,所以原谅我考虑到篇幅原因就不再赘述了。

一般安卓开发遇到特定场景,会和UI进行沟通确定。

1.2  视觉效果分类下的图标

在日常进行产品UI设计时,我们更多会涉及到设计各式各样自定义视觉风格的图标。许多小伙伴认为图标类别太多,难以具象地描述它们。实际上目前常见的图标类别大致可分为8种:

· 线型图标:通过线条勾勒出来的图标。

产品图标体系是如何炼成的?

在越来越以”Less is More”为审美的时代,线性图标已经普及到了许多的应用程序中。一般通过描边粗细、图标细节来打造产品图标的区别。

· 面型图标:采用填充和负空间结构的图标。

产品图标体系是如何炼成的?

面型相对于线型来说更加具有视觉重量,更容易吸引用户的关注,识别度也更强。所以面型图标经常被设计师用于区分线型图标的选中状态。

· 渐变图标:采用渐变色填充的图标。

产品图标体系是如何炼成的?

渐变图标算是面型图标的一个分支,但因为细节丰富,弥散阴影的运用更偏向于年轻化,和传统的面型图标还是有所区别,所以常被单独作为一种分类定义。