「大厂设计师」教你一文读懂图标设计

用户头像
合肥/UI设计师/1年前/1446浏览
「大厂设计师」教你一文读懂图标设计
用户头像
阿琳01
引言
在数字化时代,用户界面(UI)设计成为了连接用户与产品的重要桥梁。图标作为UI设计中不可或缺的元素,不仅承载着信息传递和导航的功能,还直接影响着用户的视觉体验和情感反应。一个优秀的图标设计能够瞬间吸引用户的注意力,传达出应用的核心功能,甚至成为品牌识别的一部分。本文将深入探讨
图标设计的基础、步骤与技巧,并通过实际案例分析
,为设计师们提供一套完整的图标设计指南。
(如果文中存在任何不准确或遗漏之处,我也非常期待各位专家的指正和建议)
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1MjA=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
本文目录
收藏
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1MjQ=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
收藏
一、图标设计的基础
1. 定义与功能
图标是一种图形符号,用于代表应用程序、功能或操作。在UI设计中,图标可以快速传达信息,提高用户的理解和操作效率。
(1).定义
:
图标设计是UI设计中的重要环节,通过创造
具有高度概括性和象征性的图形符号
来代表各种物体、动作和概念。这些符号简洁明了,能够让用户快速识别,并在软件界面、网站和移动应用等多领域广泛应用。例如,常见的“保存”图标是一个软盘形象,用户一看即知这是保存文件的功能。这种直观性是图标设计的核心价值所在。
(2).功能:
图标设计的主要功能包括
提升视觉美感、增强用户交互体验、节省空间以及提供上下文信息
。例如,在手机桌面上,微信图标用两个对话气泡简单图案代表了这个软件;在界面导航和工具栏中,图标可以快速引导用户执行特定操作,例如,“搜索”图标通常是一个放大镜的形象,用户看到这个图标就知道可以进行搜索操作。这种通用的图标设计使得用户无需额外的学习成本就能快速上手。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1Mjg=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
具有代表性的图标
收藏
2. 图标的分类
图标类型可以从多个角度进行分类,以下是根据风格、功能和交互方式等不同维度的分类介绍
(1).按风格分类
  • 线性图标:
线性图标主要为
单色线性或增加品牌色点缀
,使用轻量的线条勾勒,整体感受趋向于精致、细致,具有锐度感,不同的线条表现会带来不同的视觉感受。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1NDA=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
两种具有代表性的线性图标
收藏
  • 面性图标:
面性图标包括
单色填充、多色叠加、微渐变
等不同形式,主要通过填充颜色来表达图形,能够更好地传达出图标的力量感和重量感,依赖于外轮廓的清晰度来提高识别度。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1MzI=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
三种具有代表性的面性图标
收藏
  • 轻质感图标:
轻质感图标包括
磨砂玻璃、轻写实、晶白风
等,相较扁平图标而言,更突出图标的细节刻画和真实的质感,增加了一些轻微的阴影或质感,以增加层次感。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1NDQ=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
三种具有代表性的轻质感图标
收藏
  • 拟物化图标:
拟物化图标包括
2.5D、伪3D、3D建模
图标等,尽量将现实世界中的形状、纹理、光影融入到设计中,以模拟真实物体的外观。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1NDg=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
三种具有代表性的拟物化图标
收藏
  • 字符图标:
字符图标使用
简化和通用的图形
,如字母、数字和简单的图形符号,具有较高的识别度和灵活的适用场景。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1NTI=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
两种具有代表性的字符图标
收藏
(2).按功能分类
  • 应用图标:
应用图标是各种应用程序的识别标志,通常在应用商店里下载的一些应用程序的标志
  • 顶部导航栏图标:
常见有搜索、收藏、消息通知、扫一扫、每日签到等
  • 底部导航栏图标:
根据软件的功能模块进行分类,常见有主页、我的等一些主要的模块
  • 金刚区图标:
是整个UI界面中的核心功能区域,承载页面的主要功能和重要信息
  • 表单内图标:
常见于”我的“界面中,根据产品类型不同而有差异
  • 通用图标:
常见有箭头、睁眼、闭眼、返回、收藏等
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1NTY=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
按照功能划分的六种图标
收藏
(3).按交互方式分类
  • 静态图标:
静态图标不会随着用户的操作或界面的变化而改变状态
  • 动态图标:
动态图标会根据用户的交互或界面的其他变化而改变状态,如Bilibili的三连图标动效
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1NjA=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
Bilibili的三连图标动效
收藏
3. 设计原则
学习了图标的基本分类之后,设计师们在设计图标的过程中需要注意
易识别性、统一性、简洁性
等基本的设计原则。我再给大家分享几个icon设计的最佳原则帮助大家再UI设计中设计出完美的图标。
(1).图标设计的尺寸
最小的图标大小通常为12×12px
。根据行业标准,在以此为基础产生的大小值中,大部分的数值都是通过将先前的数字加倍而创建的。通常我们可以看到小、中、大这三个尺寸的图标大小。值得我们注意的是,在我们创建ICON时,应该以100%的比例设计,这样才会使得图标像素看起来比较完美。同时通过进一步放大也可以确保准确性。
  • iOS平台规范:
iOS界面的网格系统
基于4pt的倍数
。苹果官方建议最小可点击区域为44pt,以确保用户在操作时的准确性和舒适度。因此,设计IOS图标时应以此为参考,确保交互元素的可点击性。
  • Android平台规范:
Android界面
使用8dp的倍数
作为网格基础,最小操作热区要求为48dp。因此,通常建议采用48px作为常规图标的设计尺寸,以便在不同设备和分辨率下都能保持良好的触控体验。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1NjQ=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
iOS系统中美团app的图标尺寸
收藏
(2).完美像素
具有完美像素的图标会呈现出
清晰明快的线条和形状
。如今,高分辨率显示器和Retina显示器越来越流行,因此在不久的将来可能会减少对像素完美图标的要求。但就目前而言,我们所设计的图标也应该是可扩展、响应迅速并能适用于许多设备的。我们在创建具有完美像素的图标时,可以参考以下三种建议:
  • 对齐像素网格:
这种设计方法可以使直线变得非常清晰,并增加曲线和拐角的清晰度
  • 使图标保持完美角度:
有角度的线条更有模糊感。在创建图标时,完美的角度是45°
  • 边缘:
边缘的4个像素最暗,因此最少需要保留4个像素的留白,这样线条边缘看起来才会更清晰
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1Njg=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
达成完美像素的三个要求
收藏
(3). 一致性原则
图标的一致性,就是一组图标放置在一起,
图标要看起来差不多
,不能忽大忽小,我们前文提到过几何图形它们有视觉差,有的时候并不是说尺寸一样,大小就一样了,在设计过程中除了可以利用栅格系统保证图标大小统一之外,还需要注意以下几个方面要保证统一:
  • 线宽与间隙:
为了使图标看起来整洁一致,非常重要的一点就是要记住线宽和间隙的大小。这是一条我们必须遵循的规则,即:
所有线条的宽度相同
。
  • 方/圆角一致性:
包括图标在内的对象圆角半径会定义项目的外观和感觉。当我们对一组中的多个对象进行阐述时,就需要遵循这一简单的规则,即:
在方角和圆角之间选择其一
,并对整组图标应用相同的属性。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1NzI=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
线条与间隙、方圆角保持一致性
收藏
  • 视觉大小:
当我们把一个大小相等的正方形和一个圆形放在一起时,就会产生一种奇怪的感觉:圆形似乎比正方形小。为了
使我们的形状在视觉上看上去大小相同
,我们就应该把圆圈变大,或减小正方形的大小。
  • 视觉平衡:
我们经常在设计程序中使用中心对齐。虽然这种方法并没有错,但在细节方面,比如图标设计中,我们就需要相信自己的眼睛,
打破数学规律,以增强元素的平衡
。以播放按钮为例,它的形状越不对称,需要改进的地方就会越明显。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1NzY=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
视觉大小、平衡的一致性
收藏
(4).KISS原则
即Keep Simple & Starightforward,这个原则背后的想法是,如果大多数
系统保持简单操作
,那么它们就会运作得很好。用户也就会越容易理解并与之交互,而它就越有可能被放到项目设计中。那么,KISS原则是如何运用于图标设计的呢?
  • 不使用文本:
文字和图标的结合会减少图标的使用方式。此外,小尺寸的文本具有不可读性。如果我们仍然需要将文本作为支持元素,就需要使用ICON旁边的提示工具和标签。
  • 不要过度设计:
不必要的复杂性会妨碍设计目的。重复的设计也会严重影响用户体验
  • 尽可能避免不必要的元素:
但我们不能忘记确保每个图标在整体上下文中都是可以理解且清晰的
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1ODA=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
KISS原则的三项要求
收藏
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1ODQ=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
收藏
二、图标设计步骤与技巧
 1. 研究与分析
在图标设计的第一步研究与分析中,需要
对品牌和目标受众、竞争环境以及设计元素
进行深入的分析。下面详细介绍图标设计步骤与技巧第一步研究与分析:
(1).业务需求和用户需求
了解业务的需求背景是至关重要的。这有助于设计师
理解产品的个性和定位
,确保图标设计能够准确传达品牌信息。同时,
明确品牌的目标受众
,了解他们的需求和偏好,可以帮助设计师更好地满足用户期待,提高图标的吸引力和有效性。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1ODg=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
用户需求、业务需求与设计需求
收藏
目标受众不同
,他们对图形的期望也会不一样,比方说设计儿童产品界面和B端产品界面时,所用的颜色和形状都是有考究的。例如,儿童产品:叫叫阅读的图标设计形状会比较圆润,色彩页比较丰富;而B端产品:腾讯会议的图标设计用色就会很克制,形状也不会过于圆润。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY1OTY=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
不同目标用户对图标设计风格的影响
收藏
(2).竞品分析
分析竞争对手的图标设计,
找出差异化的设计方向
,这对于创建独特的图标至关重要。通过观察竞争对手的设计,设计师可以避免重复,并找到创新的切入点。下面以国内最大的两家电商购物平台拼多多和淘宝为例,详细说明其不同的图标设计风格时是怎样体现出不同的品牌理念和市场定位的。在UI界面设计的竞品分析中,拼多多与淘宝作为电商行业的两大巨头,其界面设计各具特色,体现了不同的品牌理念和市场定位。以下是对两家公司界面设计的详细竞品分析:
i.设计风格:
  • 拼多多:
拼多多的界面设计简洁明快,以红色为主色调,
象征着活力、热情和实惠
。首页主打拼团购物模式,整体风格更加年轻化、社交化,符合其社交电商的定位。
  • 淘宝:
淘宝的界面设计则更加稳重且富有现代感,以橙色为主色调,
寓意着财富和繁荣
。首页布局合理,分类清晰,用户可以一目了然地找到自己需要的商品。搜索框设计简洁明了,配合推荐搜索词,使用户快速定位到目标商品。
ii.色彩搭配:
  • 拼多多:
拼多多主打的红色调显得活泼可爱,符合年轻用户的审美,整体色彩搭配
简洁明快
。
  • 淘宝:
淘宝
色彩丰富
,但页面整体显得稍显杂乱,缺乏统一的色彩风格。
iii.功能设计:
  • 拼多多:
拼多多
注重用户体验
,拼团、秒杀等活动设计独特,社交元素丰富,用户参与感强。同时,拼多多的搜索框和推荐算法也更加个性化,根据用户的偏好推荐相应的商品。
  • 淘宝:
淘宝
功能丰富多样
,商品种类繁多,搜索推荐系统较为智能,但页面加载速度较慢。此外,淘宝还拥有丰富的社交功能,用户可以通过买家秀、评价等功能进行社交互动。
iv.用户体验:
  • 拼多多:
拼多多通过社交分享和拼团互动,增加了用户粘性,
用户参与感强烈
。同时,拼多多的价格战略也体现在界面设计上,页面上经常出现“xx人正在拼团”的提示,吸引用户参与拼团活动。
  • 淘宝:
淘宝作为老牌电商平台,
用户体验相对成熟
,但个性化推荐仍需提升。淘宝的购物流程相对传统,但广告较多,页面略显复杂。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2MDA=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
拼多多、淘宝的界面图标设计对比
收藏
(3).设计元素
选择能够代表品牌核心价值的图形元素
,如图标、符号或抽象图形。这些元素应当简洁明了,易于识别,同时具有独特性,能够在众多图标中脱颖而出。字体的选择应与品牌风格相符,确保字体的可读性和美观性。颜色的搭配也非常重要,需要选择能够传达品牌情感和个性的颜色,并确保颜色的搭配和谐。例如,闲鱼App的UI设计通过独特的设计元素,成功体现了品牌风格。以下是对闲鱼App图标设计的详细分析:
i.颜色:
闲鱼App采用了醒目且统一的配色方案,
以黄色为主色调
。黄色作为主色调,
给人一种温和和舒适的感觉
,同时用于强调重要的功能按钮或提示信息,使用户能够迅速识别出需要操作的按钮。针对年轻用户的喜好着重设计,采用了淡黄、淡蓝等更为年轻化的色彩,这种配色方案不仅提高了界面的辨识度,还增加了用户使用的舒适度。
ii.图标设计:
闲鱼App的图标设计非常简洁明了,
采用了扁平化+轻质感的风格,简化了复杂性
,方便用户快速识别功能。特定的图标如“待售”、“交易中”、“已售”等,帮助用户快速识别自己商品的状态。同时,几乎每个重要界面上都有闲鱼的IP形象小黄鱼,频繁强调品牌形象
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2MDQ=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
闲鱼独特的图标设计体现出独特的品牌设计元素
收藏
 2. 构思与草图
图标设计的构思与草图阶段是整个设计过程中至关重要的环节,它不仅决定了图标的最终形态,还影响着用户体验和品牌传达。
(1).构思
完成研究与分析后,我们要收集关于
“词语—图形”之间能转化的元素
,用生活中的物或其他视觉对象来代替所要表达的功能信息或操作提示。例如设计图标“发现”,我们会想到放大镜、指南针、眼睛、飞机、星球等,可以都画出来进行选择,这一阶段也称为头脑风暴阶段。但最终我们设计师选择什么来表达呢?这个时候我们不仅需要从普通角度进行思考,也要通过
分析行业角度
、以及
产品自身角度
进行思维发散。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2MTI=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
通过三个不同角度,完成词语到图形的转化构思
收藏
(2).草图
草图是设计师
将想法转化为可视化图形
的第一步。在纸上快速绘制草图,可以帮助设计师迅速探索多种构思,并在数字化之前收集灵感 。在绘制草图时,设计师应注重
简洁性和可识别性
,避免过于复杂的细节 。同时,草图还应具有一定的抽象性和概括性,以便在后续的设计中进行灵活调整 。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2MTY=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
绘制抽象与概括的草图
收藏
3. 细节处理
图标设计的细节处理是确保图标既美观又实用的关键。以下是一些关于图标设计细节处理的建议:
(1). 风格选择
把 icon 的外形确定下来后,就可以开始细化图标风格了,如果不知道该采用什么风格,不如先看看自家app的风格或设计语言是什么,可以
根据app风格细化图标风格
。比如站酷的app的页面风格是扁平、渐变、线条,那么icon就可以按照扁平、带线条的方向设计。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2MjA=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
站酷app的页面风格与图标
收藏
(2).图标的栅格系统
栅格系统即(Keyline)就是
把圆、正方向、三角形、长方形(纵向和横向)合并到一起的参考物
,方便我们在设计不同图标时进行参照对比。正确的使用删格会
让设计更加标准和统一
。网格以24*24为基准,可成倍放大或缩小。它是我们设计的“容器”。框架可以帮助我们通过选择画布的一个区域来创建设计。大家在创建设计时经常会将ICON放置在框架中,这么做的原因在于以下几点:
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2MjQ=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
栅格系统及其正确用法
收藏
  • 大小:
由于图标的几何形状,它们都具有不同的高度和宽度。为了在设计中正确使用ICON,我们就应该将它们放置在大小始终相同的框架之中。
  • 导出:
框架内的图标需要与视觉中心对齐,这对于导出带有框架的图标至关重要。
  • 组件:
如果我们使用Figma,那就需要通过创建组件来节省时间。大家可以使用“实例功能”来快速替换图标。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2Mjg=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
使用栅格系统保证图标大小一致、视觉平衡,同时也能方便建立组件库
收藏
(3).图标的一致性
我们前文提到过几何图形它们有视觉差,有的时候并不是说尺寸一样,大小就一样了,在设计过程中除了可以利用栅格系统保证图标大小统一之外,还需要注意以下几个方面要保证统一:
i.圆角统一:
圆角统一,就是
图标之间有相同造型
,然后又都有圆角的,那么他们就要
保持相同的圆角曲度
,比方说下面这组图标,图标的外形都是正方形且它们都带有圆角,可是它们的圆角曲度却明显不一样,这样就看起了不够规范和专业。
ii.风格统一:
界面中同样功能的图标,
样式和风格需要保持一致
,比方说这组图标样式,风格就保持着高度的一致,都是用的玻璃质感的磨砂材质。
iii.角度统一:
这组扁平化图标,在右边
相似的角度
都叠加了一个小色块,增加了图标的层次感,相同的角度也增加了图标的一致性和系列感。
iv.线条粗细统一:
图标的粗细要统一
,这样图标就会看起来比较精致,比方说下面的这组图标,图标外框线都是用的3px,图标里面的线都是用的2px,图标的粗细都保持一样的粗细规律,这样的图标看着也是同样的美观和一致。
v.疏密统一:
下面是一组类似于插画风格的图标,图标的风格是布线比较密集饱满,
保证布线的疏密统一
,而三个图标都遵循了这样的原则,看起来出奇的统一,所以它们看起来像是一组成套图标。
vi.透视统一:
当设计的图标是立体时,要
注意它们的透视要统一
,就像下面的这组2.5D图标,它们的设计透视就保持着高度的一致。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2MzI=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
通过六组图标学习如何保证图标一致性
收藏
 4. 命名与输出
图标设计不仅需要美观、实用,还需要
符合一定的规范和标准
。以下是关于图标设计的命名与输出的详细指南:
(1).图标设计的命名规范
i.命名原则:
命名应尽量简洁明了,
避免使用冗长或复杂的名称
。且所有命名只能为
小写英文字母
,不要使用中文或首字母大写的形式。遵循统一的命名规则,确保团队成员之间的协作效率。
ii.命名结构:
  • 通用切图命名:
组件_类别_功能_状态@2x.png(例如:tabbar_icon_home_default@2x.png)。
  • 模块特有切图命名:
模块_类别_功能_状态@2x.png(例如:bill_icon_search_pressed@2x.png)。
iii.命名结构:
  • 控件/组件:
指独立的可操作界面元素,如状态栏、搜索栏等。
  • 模块:
通常指页面中的部分区块,如背景、按钮等。
  • 功能:
指页面或模块中需要操作或点击的点。
  • 状态:
表示当前切图的状态,如默认状态、点击时状态等。
ps:图标的命名一般用英文或者拼音,如果初学者对于英文命名不好理解,那么推荐下面这个网站,它将常用图标命名汇总非常方便。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2MzY=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
图标命名表与命名网站推荐
收藏
(2).图标设计的输出规范
i.输出尺寸:
根据不同平台和设备的需求,图标可能需要不同的尺寸
。例如,iOS和Android平台对图标的尺寸要求有所不同。常用的网格绘制尺寸包括:16、24、36、48、64、128、512、1024等。对于启动图标,iOS和Android通常使用1024×1024像素的尺寸。
ii.输出格式:
位图格式:
PNG、JPG
等,适用于大多数应用场景。矢量格式:
SVG
,适用于需要无损缩放的场景。
GIF
格式:适用于动态图标。
iii.输出注意事项:
确保图标在不同尺寸下的显示效果清晰锐利,避免出现半个像素等情况。对于需要透明背景的图标,确保导出时保留透明度信息。在导出过程中,
注意保持图标的视觉一致性和平衡感
。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2NDA=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
收藏
三、应用案例分析
 1. Apple的iOS 18系统图标
随着iOS 18系统的发布,苹果公司再次对系统图标进行了更新和优化,旨在提升用户体验和视觉美感。iOS 18不仅延续了苹果一贯的简洁、直观的设计风格,还
引入了更多现代化的设计元素
,特别是在深色模式下的表现尤为突出。此次图标设计的更新,反映了苹果对于细节的关注和对用户需求的深刻理解。
(1).iOS 系统图标设计的演变历史
  • iOS 1-3 拟物设计的巅峰:
   在2007年,初代iPhone问世,iOS(当时称为iPhone OS)的图标设计以
拟物风格
为主。苹果通过逼真的纹理和立体感让图标看起来栩栩如生。
  • iOS 4-6 细节打磨:
   随着iOS的逐渐成熟,苹果在iOS 4到iOS 6之间继续使用拟物设计,但
在细节上进行了更精细的打磨
。这一时期的图标在光影效果和材质感上有了更高的表现。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2NDQ=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
iOS 1-6的图标设计
收藏
  • iOS 7-9 扁平化设计的到来:
2013年,iOS 7带来了划时代的
扁平化设计
。苹果放弃了拟物化风格,转而采用更简洁、更现代的图标设计。通过去除多余的阴影和高光,图标变得更加轻盈。简约的设计语言让整个系统显得焕然一新。这一转变不仅仅是设计风格的变化,更标志着苹果设计哲学的更新。
  • iOS 10-12 细节优化与动态效果:
iOS 10到iOS 12在扁平化的基础上,
加入了更多的动态效果与视觉层次
。图标的颜色更加鲜艳,层次感更强。例如,信息图标变得更圆润,而音乐图标的颜色更加活泼。苹果开始在图标中融入更多的交互动画,让用户体验更加生动。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2NDg=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
iOS 7-12的图标设计
收藏
  • iOS 13-15 简约与多样性的结合:
在iOS 13到iOS 15之间,苹果继续优化图标设计,
加入了深色模式
支持,允许用户根据环境光线自动调整显示效果。
  • iOS 16-18 多彩的个性化时代:
进入iOS 16,苹果推出了
自定义锁屏和小组件
功能,
图标也开始支持更多的自定义选项。
用户可以通过Focus模式设置个性化的图标风格,从而更好地表达自己的个性。iOS 17更是将这种个性化设计推向了新高度,用户不仅可以定制App图标的形状和颜色,还可以通过Widget让桌面显示更多动态信息。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2NTI=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
iOS 13-18的图标设计
收藏
(2).iOS 18系统图标具体案例分析
i.主屏幕的改动
  • 布局:
iOS 18 将会允许用户将主屏幕上的
图标放置在任何位置
,而不需要强制依次排列摆放
。
用户可以在主屏幕的任意空白位置摆放 app 和小组件,可以把它们放在程序坞上方,以便快捷使用,也可以让它们围绕墙纸主体排布。
  • 允许用户自定义图标颜色:
苹果将允许用户定制应用程序图标, 可以
让用户更改应用程序图标的颜色
。App 图标和小组件可通过深色或色彩效果变换外观,用户还可将它们的尺寸调大,创建最适合自己的体验。比如说可以将社交软件图标设置为蓝色、购物软件图标设置为橙色、银行金融类的图标设置为绿色等等,这样我们可以更加直观的对应用进行分类以及查找。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2NTY=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
用户可自由调节布局以及图标的颜色
收藏
ii.Siri应用图标
  • 历史演变:
最初的Siri图标简单而又独特。黑色背景上,「i」字母上方的绿色图形像一个
对话气泡
,简洁明了地表达了Siri作为语音助手的功能。苹果正式收购Siri并将其集成到iOS系统之后。图标采用了一个
麦克风
的形象,背景则是金属质感非常强烈的圆圈,中央的麦克风带有渐变的紫色。这一设计与当时的iOS拟物化设计风格完全一致。第三和第四版图标继续沿用麦克风形象,但设计变得更加简洁,更符合开始流行起来的
扁平化
设计趋势。从2016年开始,Siri图标的麦克风移除并被
彩色的音频波
取代,进一步强调Siri的声音识别和处理能力。2017年之后,Siri图标开始以
球体形状
呈现,内部是多层渐变色组成的动态光芒,给人一种未来感和科技感。
  • iOS 18的更新:
如果你有注意到市面上五花八门的AI产品,你会发现,这些 AI 产品的品牌标志设计也遵循了这一目标,大多数都具有相同的特征:
不构成威胁、抽象、简单和非拟人化
。从这一「创新」改变来看,重新设计的Siri标志更加符合这一个性化要求。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2NjA=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
Siri的历史演变、新版Siri图标、Siri其他AI产品的图标对比
收藏
iii.实时生成表情符号
Genmoji是苹果公司在iOS 18系统中引入的一项全新功能,它利用
生成式AI技术
,
让用户通过简单的文本描述就能自动生成独特的表情符号
。比如在发送短信的时候,可以根据当时聊天的情形实时创建新的表情符号。这些表情符号不仅能够反映你的心情和个性,还能适应不同的对话和场合。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2Njg=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
如何使用Genmoji
收藏
(3).iOS 18系统图标设计未来展望
随着技术的不断进步和用户需求的变化,iOS系统的图标设计也将不断创新和发展。未来可能会有更多
个性化和动态化
的图标设计出现以满足不同用户的需求和偏好。同时随着人工智能和机器学习技术的发展图标设计可能会
更加智能化和自动化
从而提高设计效率和质量。无论如何变化iOS图标设计都将继续秉持简洁、一致、高辨识度和视觉吸引力的原则为用户提供更好的使用体验。
 2.优秀图标网站推荐
通过前面的文章学习,相信大家已经对图标设计了如指掌了,那么作为一名合格的设计师,我们如何利用好的设计资源进行提效呢?以下是一些优秀的图标设计网站推荐:
(1).IconFinder
  • 特点:
拥有庞大的图标库,包含超过89万个图标和17936个图标集。支持多种格式下载,包括PNG、SVG、CSH等。部分图标收费,但免费图标数量也相当可观。
(2).IconPark
  • 特点:
字节跳动旗下的一款图标下载网站,相比Iconfont,图标种类不算太多,但图标的规范非常统一,也可在右侧的操作栏更改图标属性,另外还有免费的插画库可供使用。
(3).Iconfont
  • 特点:
iconfont是阿里巴巴的图标库,应该也是受众最多的一个图标下载网站,给我们平时工作提效不少,造福了不少的设计师。
(4).IKonate
  • 特点:
Ikonate是一款可以在线编辑的图标网站,涵盖了常用的一些图标,可以调节线条的粗细和大小,导出的格式是SVG。
(5).Iconduck
  • 特点:
Iconduck的优点是有273,858个免费的图标库和插画库供大家选择,储备够丰富。
(6).Icon8
  • 特点:
Icon8是一个专注于提供高质量图标和设计资源的平台。这里的图标涵盖了扁平化、线条、颜色等多种风格,都是由专业设计师和插画师手绘制作,确保了其独特性和高品质。除了丰富的图标资源,Icon8还提供了字体、照片、音效、视频、插图等多元设计资源,满足各种项目的需求。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2NzI=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
推荐的六个图标网站
收藏
此外,在选择这些图标设计网站时,还需要注意以下几点:
  • 版权问题:
   确保所选网站的图标资源符合您的使用需求,特别是商业用途时要注意版权限制。
  • 格式兼容性:
   根据项目需求选择合适的图标格式,如PNG、SVG等。
  • 更新频率:
   选择那些定期更新图标资源的网站,以获取最新的设计趋势和素材。
总结与展望
图标设计是UI设计中不可或缺的一部分,它要求设计师具备良好的审美观、对用户的深刻理解以及不断的创新能力。通过遵循设计原则、掌握设计技巧、应对挑战并关注未来趋势,设计师可以创造出既直观又吸引人的图标,为用户提供更优质的体验。在未来,UI设计将继续发挥其重要作用,成为连接用户与数字世界的桥梁。设计师们需要注意以下三个未来图标设计的发展方向:
  • 技术影响:
随着AR/VR等新技术的应用,未来的图标设计可能会变得更加互动和个性化。新技术的应用将为图标设计带来更多的可能性和挑战。
  • 用户需求变化:
未来的图标设计可能会更加注重个性化和互动性。未来的设计师需要更多地考虑到用户的个性化需求和使用场景。
  • 人工智能:
   AI辅助设计工具可以帮助设计师更快地生成和优化图标方案。人工智能的发展将为设计师提供更多的工具和支持,帮助他们更高效地完成工作。
设计师们只有不断学习和进步,才能在激烈的竞争中保持领先。持续学习不仅是个人成长的需要,也是行业发展的需求。
「大厂设计师」教你一文读懂图标设计(图ZMTQ5NzY2NzY=) - 教程 - 站酷设计师阿琳01原创素材 - 站酷ZCOOL
收藏
10
举报
|
30
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】礼物/活动icon
我的钱包-UI界面设计-app
3D卡通UI界面图标可爱插画免扣素
UI 登录界面设计模板包
科技医疗透明柜UI界面设计
新拟态风格 UI设计组件库
手表表盘UI系列
【新年UI图标】汽车icon
UI通用设计素材1
3D渐变流体抽象矢量UI背景图
【新年UI图标】钱包icon
智能家居中心 简约 UI设计组件库
盲盒APP UI设计
【新年UI图标】体育icon
【新年UI图标】旅行icon
【新年UI图标】会员icon
高级表盘系列UI源文件
UI界面 组件
新能源APP应用UIKit
【新年UI图标】30个图标
户外旅行飞机情侣假日出行
高级感金属拟物 UI设计组件库
Security Camera UI kit
你可能喜欢
相关收藏夹
大家都在看
登录注册