推荐

从这3个方面,快速了解产品图标设计体系的炼成

2021-04-19 00:00 5155 浏览

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

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

认识:图标的分类

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

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

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

1. 应用场景分类下的图标

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

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

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

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

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

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

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

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

2. 视觉效果分类下的图标

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

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

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

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

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

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

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

线面混合图标:线型与面型的结合。

线面混合图标因为视觉层级更加丰富,所以显得更加活泼。通常用于打造视觉调性。

扁平图标:采用扁平插画形式的图标。

扁平图标对于普通的面型图标,更加注重细节表现,视觉层级丰富,所以常用于营造产品氛围和视觉调性。

拟物风格图标:通过光影模拟真实物体质感的图标。

拟物风格图标一般都会在节日活动或游戏中更为常见,更加有气氛烘托。并且更贴近现实物体的真实质感,所以可以降低用户的认知成本。

实物贴图图标:采用真实摄影物体的图标。

和拟物风格相似,但实物贴图图标更加直接地采用真实的摄影作品。一般常用于电商和超市、生鲜类产品。

2.5D图标:2.5D立体图标。

2017-2018 年左右,2.5D 图标曾在 UI 界刮起一阵风,所以有不少设计师认为这将成为未来图标的一个趋势,但是这阵风好像很快又刮停了……可能是因为设计成本过高,且风格过于鲜明,难以被许多产品驾驭。

动手:图标的设计

前面说到的图标类型非常多,要在一篇文章中一一剖析每一种类型的图标设计确实挺难,并且复杂的图标设计其实是考验设计师的想法和软件的使用能力,要专攻这一块的话,网上的案例一搜一大把。所以我就不再做过多的讲解了。

我主要来讲一讲平台规范中提到的线型、面型图标的设计。

如果按照 MD 规范,图标的组成结构有:描边、端点、圆角、负空间、内边距与安全边距几个部分。

除了安全边距 MD 规范规定始终应保持 2dp 之外,我们改变其他任意的一个的组成结构,都可以影响到一个图标的视觉风格。

我们来看一组示例:

之所以一套图标能够保持视觉统一,就是因为保证了以上拆解出的图标组成结构细节统一。当你发现你搭建的图标体系,视觉风格总是有所差异的时候,不妨再检查一下这些细节。

管理:图标的命名

制作完成的图标,有些可能会复用于多个页面,有些可能只应用于特定的页面中。并且有一些图标我们会输出为位图,有一些图标我们又会使用线上矢量图标库来维护。导致我们的图标管理起来特别麻烦。

曾经还是 UI 小白的我,百度过一套切图命名模式,大致是「模块-类别-功能-状态」。并且文中给出了一堆常用单词,最后经过组装,通常命名后的文件名是「customer-settings-clearcache-selected@2x.png」这样的一长串英文。

文件名冗长,且对于英语不是非常熟练的我来说,每次命名文件还要附带打开一个翻译软件。翻译出来的英文,还可能不满足开发人员的命名习惯,导致他们要找很久的图标文件。

后来在日常工作中,我慢慢积累了一套我自己的命名与管理方式,不敢说专业,但希望能够帮助大家维护图标文件更加方便。

首先我会针对不同的端分为不同的文件夹,如「iOS」、「Android」、「Web」、「小程序」。

然后以中文按照「模块-名称-状态」三级命名即可。通常这样命名的图标文件为「设置-清理缓存-选中@2x.png」,没有状态区别的图标或没有特定模块可复用的图标,还可以再省去一级,这样的命名明了简单,易用易查找。

过来人告诉大家:千万不要为了形式化的命名规范而做规范,一方面加大了自己的工作量,另一方面却根本没有辅助开发更方便地找到图标文件。真是一种费力不讨好的做法。

分享:
相关内容
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
  • 用一篇干货,帮你完整掌握这套系统的竞品分析方法论
    引言在产品设计中,竞品分析是一项必备的基本技能。做竞品分析本身并不难,网络上到处都是可以参考的模板,但是怎么从这个过程中总结提炼出最有效的关键信息、为后续的业务决策/设计工作带来较大参考价值,而不是产出一份看上去详实全面却是花瓶报告,仍然值得我们不断去思考。今天这篇文章参考张在旺老师的《有效竞品分析》一书,从流程、工具、方法等方面介
  • 腾讯设计师:如何从零开始完成一套3D图标设计?
    QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级,其中也包括重要的图标图形。1. 延展思考因此基于目前较为完整的图标图形,希望可以拓展出更多不一样的设计内容,并且可以应用在不同的位置,例如空白页、运营内容、背景等等。2. 问题分析基于目前的图形可以很明显的得到 2 个问题:图标的
  • 为了追求高性价比,我们通常这样来做页面适配
    为什么要适配通常产品经理在立项前都要思考需求的实现方式:是原生做?还是 H5 做?问题的答案会因实际情况有所不同,如果追求极致体验,那原生效果更好,如果追求短频快,那就选用 H5,或是两者结合。CCtalk 是个涉及 7 大端的跨平台产品:iOS、Android、PC、Mac、Web、触屏、小程序。我们在日常项目中(尤其是用户增长类的项目)越来越多选择用 H5 实现,然后以低成本适
相关推荐
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
  • 用一篇干货,帮你完整掌握这套系统的竞品分析方法论
    引言在产品设计中,竞品分析是一项必备的基本技能。做竞品分析本身并不难,网络上到处都是可以参考的模板,但是怎么从这个过程中总结提炼出最有效的关键信息、为后续的业务决策/设计工作带来较大参考价值,而不是产出一份看上去详实全面却是花瓶报告,仍然值得我们不断去思考。今天这篇文章参考张在旺老师的《有效竞品分析》一书,从流程、工具、方法等方面介
  • 腾讯设计师:如何从零开始完成一套3D图标设计?
    QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级,其中也包括重要的图标图形。1. 延展思考因此基于目前较为完整的图标图形,希望可以拓展出更多不一样的设计内容,并且可以应用在不同的位置,例如空白页、运营内容、背景等等。2. 问题分析基于目前的图形可以很明显的得到 2 个问题:图标的
  • 为了追求高性价比,我们通常这样来做页面适配
    为什么要适配通常产品经理在立项前都要思考需求的实现方式:是原生做?还是 H5 做?问题的答案会因实际情况有所不同,如果追求极致体验,那原生效果更好,如果追求短频快,那就选用 H5,或是两者结合。CCtalk 是个涉及 7 大端的跨平台产品:iOS、Android、PC、Mac、Web、触屏、小程序。我们在日常项目中(尤其是用户增长类的项目)越来越多选择用 H5 实现,然后以低成本适
热门内容
  • 想做好线下物料?收了这份平面设计师必修的基础印刷知识
    如果一个设计师对印刷流程和工艺不够了解,那么作品落地时必将大打折扣,所以了解印刷技术方面的基础知识,是每个平面设计师的必修课。平版印刷平版印刷是将油墨印至橡皮滚筒,再藉由压力滚筒印刷至纸上。这是多种印刷方式中最常见的一种,印刷质量较好,图文精细、层次丰富,图像色彩的还原性好,大部分画册、海报、杂志、书刊、包装等都是用单张纸平版胶印
  • 如何设计小程序?来看这份超全面的指南!
    前言最近正好在做小程序相关的项目,发现现在关于小程序相关的文章还比较少,能吸收的运用到实际工作中的技巧也「比较有限」,所以我想着自己来尝试写一篇「相对全面和实战」的文章,来帮助到越来越多做小程序的设计师们。小程序的发展史2017 年 1 月 9 日,张小龙在 2017 微信公开课 Pro 上发布的微信小程序正式上线。2017 年 1 月 9 日微信小程序平台正式发布,在业界
  • 用经典的设计原则,深度解析闲鱼的用户体验设计
    今天我们主要从用户体验的部分原则来看闲鱼,主要以产品视觉设计四大原则、交互设计十大可用性原则、情感化设计来看闲鱼,今天先讲两个部分:视觉和交互的用户体验。其实主要是因为用户体验分为这个几个方面:视觉的感官体验,给用户带来的是视觉表现层的体验,所以我们把产品视觉设计四大原则来对照用户的感官体验。交互的用户体验,也就是产品设计中给用户
  • 资深UI设计师搞定输入框和表单的20个秘诀
    编者按:这篇文章来自资深设计师Taras Bakusevych,长期从事金融和企业类数字产品的设计,在表单设计领域造诣精深。这篇文章梳理了他总结的 20 条表单和输入框的设计经验,实用性极强。表单是 UI 界面中最为常见的元素,它通常是用来搜集和呈现一些数据、信息和特定的字段。在现实世界中,印刷的表格存在的时间更为久远,它们身上有很多设计可以作为重要的参考,帮助
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
联系方式
  • 400-1234-5678
  • 13333333333
  • test#qq.com