基于Windows系统的ICO图标的理论分析与制作

来源:用户上传      作者:代佳佳

　　摘要：为了解决UI设计师在绘制ICO格式图标时候，对格式和尺寸的错误理解，导致无法输出适配性良好的Windows图标，提出了一种利用软件转换PNG格式图标为ICO格式图标的方法。根据ICO图标的属性，以及当前Windows系统的色彩深度和分辨率的迭代更新，对ICO图标制作的格式和尺寸进行了理论分析。在理论分析基础上，结合当下图形设计件，成功输出适配性良好的Windows图标，为UI设计师制作ICO格式图标提供了可行性的方案。
　　关键词：ICO图标;Windows系统;UI设计;色彩深度;分辨率
　　中图分类号：TP37 文献标识码：A
　　文章编号：1009-3044（2022）15-0052-03
　　随着互联网技术的飞速发展，国内软件领域兴起一种新兴行业：UI设计。UI设计即User Interface Design（用户界面设计）。UI设计是对人机交互系统、操作系统和界面系统进行整体设计[1]。UI设计通常包含三个部分，第一是原型设计，即产品功能逻辑、需求分析、高/低保真页面设计;第二是视觉设计，即根据原型设计稿完成色彩、图标、排版设计;第三是交互设计，即页面逻辑、人机交互方式、交互动效等设计。
　　而UI设计也绝非一个独立的环节，整个软件的开发，至少由产品、UI设计、前端、后端、测试、运维等构成，每种角色环环相扣，相互配合。与UI设计师工作衔接最多之一的前端工程师，有时会让UI设计师提供一种格式为.ico的图标文件。大多UI设计在此之前从未接触过这种文件格式。什么是ICO图标？要多大尺寸？怎么做？网上关于这方面的资料太少，也难以保证最终的可行性。
　　基于此，文章将详细介绍一种ICO图标制作的可行性方法，避免设计师走弯路，帮助他们更顺利地制作出适配性良好的ICO格式图标。
　　1 什么是ICO图标
　　图标是具有指代意义的标识性图形，具有高度浓缩、快捷传达信息以及便于记忆的特性[2]。UI图标设计广义上的含义是指一切带有指示性或命令的标志和符号，狭义上的含义是指数字化显示屏上显示出来的图形，也可以简单地理解为用来指引用户进行操作的图形符号[3]。图标的主要作用是使程序更加具象、更容易被理解，而好的视觉表现力则更容易激发用户的使用欲望，也可以让用户更好地理解产品和其应用程序[4]。
　　ICO图标的全称是icon file，是基于Windows开发的一种图标文件格式，后缀名为.ico。例如常见的桌面应用程序QQ、微信、浏览器图标等就是.ico格式图标文件。ICO图标可以存储单个图案、多个尺寸、多个色板，即一个ICO图标可同时存储多张不同尺寸的图片，并且可以包含透明区域。
　　2 为什么要制作ICO图标
　　2.1 初识ICO图标
　　绝大多数UI设计师第一次接触ICO图标，都是在开发Windows系统软件的时候，前端工程师要求设计师提供的。在以往的工作经历乃至专业知识培训中，UI设计师绘制和交付图标的格式都是.png，甚至于当前最新版本的专业绘图软件Illustrator和Photoshop都不支持导出.ico格式。于是大部分设计师寻求网络帮助，会发现网上信息参差不齐，提供了各式各样转换格式的工具。有的工具确实可以转换，可是前端替换后发现在桌面显示正常，在任务栏、状态栏等其他地方，要么有像素锯齿，要么有白边，要么透明区域没法正常显示……即使设计师以非常大尺寸的PNG图片来转换ICO，图标应用在任务栏处也会严重失真。那么是否是因为计算机在使用图标文件时候不是只有一张图片，而很可能是很多张不同尺寸的图片来自适应计算机不同的显示环境。
　　大多UI设计在初次接触ICO图标制作的时候，被卡的最多就在这里：不懂ICO图标并非一个尺寸的单张图片，以为计算机可以非常智能地根据当前的显示环境来缩放提供的大图。因此怎么也想不明白，即使已经给了高清大图，可为什么显示出来的会有锯齿，有白边，甚至更多问题。
　　2.2 ICO图标的优势
　　随着计算机技术的发展，Windows系统的色彩深度和分辨率不断迭代更新，计算机操作系统和显示屏也越来越高级化和多样化，这就意味着一个尺寸的图标已无法满足不同操作系统、不同显示设备，甚至是不同显示环境下的展示需求。
　　以Windows11为例，一个应用图标可能出现在桌面、任务栏、状态栏，还可能以超大图标、大图标、中图标、小图标、平铺、内容等方式显示，每一种情况下其显示尺寸均不一样。基于ICO图标可以存储单个图案、多个尺寸、多个色板的特性，ICO图标可根据当前的操作系统和显示环境，以一定的标准选择最合适的一张图像来显示。此外，ICO图标支持透明通道，所需内存小。由此相较于PNG格式，ICO图标的优势便显而易见。
　　3 ICO图标的设计尺寸分析
　　3.1 Windows图标的常用尺寸及常见应用环境
　　上面说过一个应用程序图标在不同的操作系统、不同的显示环境下显示尺寸都不一样，那么一个可用的ICO图标应该包含哪些尺寸呢？
　　常见尺寸及常见应用环境：
　　16×16px（状态栏、小图标、列表、详细信息等）;
　　24×24px（任务栏等）;
　　32×32px（Windows XP桌面图标）;
　　48×48px（Windows7/8/10/11桌面图标、中图标、平铺等）;
　　64×64px（图标放大后使用）;
　　96×96px（大图标展示）;
　　128×128px（应用程序图标）;
　　256×256px（超大图标展示）。
　　大于256×256px的图片可以使用PNG格式进行压缩（需要Windows Vista或更高版本），Windows10和Windows11支持更大尺寸512×512px和768×768px。

nlc202207151142

转载注明来源:https://www.xzbu.com/8/view-15435990.htm