赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.3K 0 0

前不久我在讲标签栏专题时候,有聊到过图标。(前文已提及到部分规范,本文将接引用,为防止新读者理解脱节,议先看前文)。

那一次因主题的故,不能偏题太远,所以对图标本身的讲解我行太多的剖析,多讲标签栏图标的切图、对接端落项目实操的手法。于部分读者后台给我留言,让我再全面讲解一次图标。

这一期我将分个步骤来总结一一个产品图标体系的诞。

认识:图标的分类

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

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

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

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

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

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

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

实际上 iOS 和 MD 规范中的应用图标视觉规范其实还是有所差异的,但因为在国内少有项目会独立计双应用,所以大多数候还是会一图适用双。

所以在设计应用图标时,不用过分拘泥于某平台规范,需要注意简单借助辅助网格。最要是不终端要求不输出尺寸。

应用图标不仅仅出桌面,iOS 还会通知栏、Spotlight、设置方;安卓也会状态栏、消息 push 中出。这些场景下的应用图标尺寸根据设备的不同,显示的尺寸也不同的。了保证应用图标的显示效果,需单独对每尺寸行调整,尽可能避免出半素况,以保证显示的锐利。单纯的缩并不能解决这些问题。

我总结了一份 iOS 应图标尺寸清单:

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

卓的应图标,因为杂屏原因,且图标应场景繁多,整起来过于繁琐,并且 Android 8.0之后,应图标还支持 Z 轴适配法,这一系列的容整来全可开一个章再详解了……后续我一定会再专门开一期章讲解 Z 轴适配法,原谅我考虑到篇幅原因就再赘述了。

一般安卓开遇到特定场,和 UI 进行沟通确定。

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

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

线图标:通过线条勾勒来的图标。

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

越越以「Less is More」审的时,线性图标已普及到了许多的应用程序中。一般通过描粗细、图标细节打造产品图标的区别。

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

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

型相于线型来说更加具有视觉量,更容易吸引用户关注,识度也更强。所以型图标经常被设计师用于区分线型图标选状态。

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

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

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

线面混图标:线型面型的结。

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

面混合图标因为视级更加富,所以显得更加活泼。通常用打造视。

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

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

扁平图标对于普通的面图标,更注重细节表现,视觉层级丰富,于营产氛围和视觉调性。

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

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

拟风格图标一般都会节日活动或游戏中常见,加气氛烘托。并且贴近实体的真实质感,所以可以降低用户的认知本。

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

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

和拟物风格相似,实物贴图图标更加接地采用真实摄影作品。般常用于电商和市、生鲜类品。

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

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

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

动手:图标的设计

前面说的图标类型非常多,要在一篇文章中一一剖析每一种类型的图标设计确挺难,并且复的图标设计其是考验设计师的想法和软件的使用能力,要攻一块的,网上的案例一搜一大把。所以我就不做的讲。

主要来讲一讲规范中提的线型、面型图标的计。

如按照 MD 规范,图标组成结构有:描边、端、圆、负空、内边距与安全边距几个部分。

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

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

我们看一组示例:

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

之所以一套图标能够保持视觉统一,就因保证了以拆解出的图标组结构细节统一。当发搭建的图标体系,视觉风格总所差异的时候,不妨再检查一下这些细节。

管理:图标的命名

制作完的图标,些可能会复用于多页面,些可能只应用于特的页面中。并且一些图标我们会输出图,一些图标我们又会使用线矢图标库维护。导致我们的图标理起特别麻烦。

曾经还是 UI 小白的我,百过一套切图命名模式,大致是「模-类别-功-状态」。并且中给了一堆单词,最后经过组,通命名后的件名是「customer-settings-clearcache-selected@2x.png」这样的一长串英。

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

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

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

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

过来人告诉大:千万要为了形式的命名规范而做规范,一方面大了自己的工作量,另一方面却根本没有辅助开发更方地到图标件。真是一种讨好的做法。

总结

本浅谈了图标的搭建与管,更多是在认知层面上。

欢迎大家关注者微信众号:「UCD耍家」

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

每天努力的用心的去做设计,挺开心的,其中最开心的细节就是“思考自己的设计如何与别人的不一样”,让你的差异化产出得到认可...
图标
有时候觉得做的图标有点奇怪,但又不知道哪里奇怪。今天分享的是几个常见小问题,看看大家有没有遇到过。 1. 为什么你做的投...
ui设计
为什么大爷大妈们总对排队情有独钟,为什么平常不想要的东西一打折就买一堆……震惊!原来套路你的竟然都是自己的大脑! 如今...
产品
借着疫情期间在家休假的时间,将平时用到的一些零零散散的图标绘制方法与思路进行了一次全面的汇总与沉淀。从实习期间画一组...
UI
为什么要构建 MIZ Design? 1. 背景 随着米庄 APP 用户的增长,以及 APP 不停的迭代,我们在设计上积累了越来越多的债务。越...
设计系统
用户体验是用户在使用产品或者服务中的所有的主观感受。因此我们设计的过程中要以用户为中心进行设计,不能单单为了设计一个...
产品
大家好,我是布莱恩。图标是 UI 设计中最基础也是很重要的部分,辅助人们更好的理解功能内容。随着扁平化设计风格的普及,图...
ui设计
如期而至,这是标签栏控件总结的第二期。这一期真是掏空职业经验,希望对你的工作有所帮助。 这一期我们来聊一聊标签栏中...
UI