返回

从零开始学图标

#设计知识
#知识库
72%
进度
0/8
知识点
0
笔记
概述
图标是什么
图标的基本介绍
图标的使用场景
图标的基本分类
图标设计的基础知识
矢量图和位图
布尔运算和钢笔
图标的设计工具
图标的设计规范
表意的准确
图标的一致性
图形的视觉差
图标的栅格
像素对齐
图标设计实例
工具图标的设计实例
操作总结和线面转换
装饰图标的设计实例
启动图标的设计实例
工具图标的进阶
进阶线性图标
多种粗细风格
多色描边风格
描边缺口风格
装饰图标的进阶
轻拟物风格
玻璃拟态风格
实物贴图风格
首页知识库设计知识从零开始学图标

启动图标的设计实例

UX百科编辑部 编辑于 2024-01-1117人正在学
20

本章我们开始讲解最后一种类型的图标——启动图标。在第一章我们已经对启动图标有了基础的认识,想要在启动图标设计上入门,就要先从规范开始学习,然后了解不同的风格以及对应风格的设计过程。如果没有比较明确的学习目标,就会和学习 LOGO 设计一样无从下手。

启动图标的设计规范

说到启动图标的规范,首先会想到的,就是 iOS 提供的图标栅格。通过这个栅格,会规范图形的尺寸,以及所处的位置。

这个模板文件可以在苹果官方下载,这是地址:

点击跳转

这个模板和工具图标的使用方法类似,我们在后面的案例进一步讲解。接着,来说明一个更重要的问题,就是启动图标画布的尺寸。

默认的情况下,我们使用 1024 * 1024 尺寸来设计启动图标,这个参数在 iOS 和 Android 中都适用。

之所以使用这么大的尺寸,是由屏幕分辨率的差异和使用场景导致的。

第一,在手机硬件中,根据屏幕规格的不同,展示图标的实际像素量也不同,即图标的尺寸会发生改变。

例如在 1x 的屏幕中,图标使用 60*60px,在 2x 的屏幕中,就使用 120*120px,3x 则是 180*180px。

第二,不同设备和显示场景里,应用的图标尺寸也不一样。对于一个真实的项目来说,图标不是只放在手机上运行,无论 iOS 和 Android 的 APP 都可以在 PAD 上安装,图标尺寸规格就不同。并且,在网页或者手机应用商店里,也需要展示启动图标,显示的规格和真实应用列表中又不同。

所以,在 iOS 官方的图标模版中,我们会看见里面罗列了非常多的图标尺寸,我们只需要设计第一个 1024 规格的,将这个图标置入到 PS 的智能对象,或者 Sketch 的 Symbol 中,就可以一次性生成所有尺寸,不需要我们自己手动调整各种规格的图标输出。

应该有同学这时候还会产生疑问,模版里的画布就是一个正方形,但是大多数手机的 APP 图标使用的是圆角,所以,应该如何制作这个圆角,以及它的相关参数呢?

真实项目中,除非项目的特定要求,只需要提交正方形的图形即可,之后无论是 APP Store,还是多数安卓应用商店,都会自动对该图形进行裁切,生成符合自己系统的圆角图标

如果我们想要在设计出正方形图形后预览真实的效果,就可以用我们准备的 PSD 模版,将正方形置入到模版中即可。

网盘图标素材提取码:yxbc 复制 前往

在设计已经确认以后,我们就要导出这些图标。因为启动图标有很多拟物的设计或会使用真实的摄影素材,所以应用商店提交的格式 会选用位图格式而不是矢量格式 。导出图标,只需要导出对应尺寸的 PNG 即可。

启动图标的设计演示

在一些比较基础的应用类型中,通常会直接使用工具图标的图形设计启动图标。因为基础的 APP 服务大多有表意极其清晰的工具图标与之对应,例如邮箱、计算器、音乐、地图等类型应用,企业往往在使用一些抽象的品牌化图形与表意更清晰的工具图标中选择后者。

工具图标的设计其实很简单,就是在画板中完成两种元素的设计,一个是背景,一个是上方图标

背景的设计,有比较常见的就两种类型,纯色、渐变。而上方图标的设计里,包含的类型就是我们前面讲过的几种常见的工具图标。所以你看,只要将它们组合,就可以很轻松的设计出符合主流特征的启动图标

所以,如果我们要设计一款笔记应用,那么就可以先画一个线性的笔记图标,然后再将它置入格线模版中确认大小,再分别为它们上色,就可以完成设计了。

点赞
收藏
学会
8682017
下一篇: 多种粗细风格
风格说明 多种粗细风格是基础线性的一种简单的变体,它通过调整线性图标内部一部分秒变的粗细来增加描边的层次感,从而让图标不会显得那么无聊。 设计要点 多粗细图标最关键的就是要挑选更改粗细的那条线,但每个图标的个体情况有差异,就无法一概而论,大致上可以有两种选择。 内部线段 在大多数基础线性图标中,都存...
笔记 (0)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞