赞助商
立即赞助

从零开始画图标系列:启动图标设计指南

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

本文我们始讲解后一种类型的图标 ── 启动图标。在第一章我们已经对启图标有了基础的认识,图再简单顾一遍。

从零开始画图标系列:启动图标设计指南

想要在启图标设计入门,就要先从规范开始学习,然后了解不同的风格以及对应风格的计过程。

启动图标的设计规范

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

从零开始画图标系列:启动图标设计指南

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

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

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

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

例如在 1x 屏幕,图标使用 60x60px;在 2x 屏幕,使用 120x120pt;3x 则是 180×180。

从零开始画图标系列:启动图标设计指南

第,不设备和显示场景里,应用图标尺寸也不样。于个真实项目来说,图标不是放在手上运,论是 iOS 是 Android  APP 都可以在 PAD 上安装,图标尺寸规格不。并,在网页或者手应用商店里,也需要展示启动图标,显示规格和真实应用列表又不。

从零开始画图标系列:启动图标设计指南

所以,在 iOS 官图标模板,我们会看见里罗列了常多图标尺寸,我们需要设计第个 1024 规格,将这个图标入到 PS 智能象,或者 Sketch  Symbol ,可以性生成所有尺寸,不需要我们自己手动调各规格图标输出。

从零开始画图标系列:启动图标设计指南

应该有学这时候会生疑问,模板里画布是个正形,是大多数手 APP 图标使用是圆,所以,应该如何制作这个圆,以及它相关参数呢?

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

从零开始画图标系列:启动图标设计指南

如果想要计出正方形图形后预览真实的效果,就可以用准备的 PSD 模板,将正方形置入模板中即可。

从零开始画图标系列:启动图标设计指南

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

启动图标的设计演示

1. 图标形

从零开始画图标系列:启动图标设计指南

一些比较基础的应用类型中,通常会直接使用具图标的图形设启动图标。因基础的 APP 服务多表意极其清晰的具图标与之对应,例如邮箱、算器、音乐、图类型应用,企业往往使用一些抽象的品牌化图形与表意清晰的具图标中选择后者。

工具图标设计其实很简单,是在画板完成两元素设计,个是背景,个是上图标。

背景的计,比较常见的有种类型,纯色、渐变。而上方图标的计,包含的类型就是前面讲过的种常见的工图标。所以你,只要将它组,就可以轻地计出符主流征的启动图标。

从零开始画图标系列:启动图标设计指南

所以,如果要计一款笔记应用,那就可以先画一个线性的笔记图标,然后再将它置入格线模板中确认大,再别为它上色,就可以完成计了。

2. 文字形式

从零开始画图标系列:启动图标设计指南

文形设计,背景和上样,也使用纯色和渐变,这设计主要难在于体设计上。

想要放文字,大家首先想的肯定是直用字体进去,但是切记,字体的商业版权问题是不能视而不见的。选择字体前,一定要关注该字体是否是免费的,百度或者官网都可以查询。或者一开始就在免费字库中挑选,如思源黑、思源宋、汉宗系列等等。

用字合辑:《我整理200款免费用字,放心下载不侵权!》

从零开始画图标系列:启动图标设计指南

果得直接使用字库文字太没有设计感,以选择做一次字的二次创,对新手来说简单一点。即一开始挑选一个合适的字,在 AI 中对该字进行临摹,对细节进行重新加工,比衬的整,笔画粗细的整等等。

如要设计一个我的应,那么我可取「超人的电话亭」的一个字──超,为图标上方的文字。我选用「方正兰亭大黑」为基础字形,对它进行重构即。

从零开始画图标系列:启动图标设计指南

最建议,果不是一比严肃或是传统的题材,尽量不要选用宋或是楷进行设计。

前往优设字体设计专题习更多干货:「字体设计」

3. 拟物形式

从零开始画图标系列:启动图标设计指南

虽现在整设计境中,拟物已经被扁平取代,但不代表它已经消失,或是在形式上不合理。适当的拟物设计让我们对应用功能的认识更清晰,且更有趣味。

还是老惯例,我们从简单的拟物设计入手。目前拟物的领域中,使最普遍的格是手最容易习的格,即「轻拟物」的设计。这种格需要刻画的细节相对较,更易于我们掌握,只要好渐变即可。

比如,iOS 的官方应用──文件,图标的形式就符合轻拟的特征。简单分析一遍,即确完轮廓后,通过渐变填充表示体本身的高光阴影,并添加投影制造立体感。

从零开始画图标系列:启动图标设计指南

如果设一些复杂的拟图形,可以通过多拟图标的练习会帮。今天扁平化图形当道的环境中,设得精良的拟图标往往可以满屏的扁平图标中脱颖出,于吸引用户启动应用。

总结

启动图标的介绍到这里就结束了,新手该掌握的知识点并不多。无论好的字体、图案、插画,都已入 LOGO 设的范畴。如果这领域一提升,那么针对性训练的效果反不理,需积累视觉、图形的整体设能力。

欢迎关注作者微信公众号:「电话亭」

从零开始画图标系列:启动图标设计指南

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

相关文章

一、需求挖掘理论 需求挖掘是产品生命周期的启始阶段同时也贯穿了整个生命周期,一般包含了内部和外部挖掘。 1. 内部挖掘 ...
交互设计
我是一名交互设计毕业生,入职已经快一年了。从刚开始如履薄冰般的不适应,到现在知道该如何处理大大小小的问题以及如何寻求...
入门
橙子的橙子:有个朋友拿了他做的界面,问我哪里需要修改,他总觉得不对劲,但不知道要怎么改。我把这些建议量化成可执行的标...
App设计
简介说明 1. 理论表述 对于许多事件,大约 80% 的影响来自 20% 的原因。 2. 理论背景 1896 年,意大利经济学家帕累托出...
帕累托原则
Icons8 最早是一家制作免费图标的公司,后来也开始提供各种类型素材,像是免费向量图插图下载 Icons8 Illustrations Icons...
Animated icons 2.0
对于移动端APP 而言,图标始终还是最重要的「门面」,它直接关联着产品的品牌价值,图标是否具备良好的可用性,将会直接影响...
App图标
简介说明 1. 理论表述 为了更方便地理解这个世界,人类会将接受到的大量信息进行过滤和简化。 2. 理论背景 简洁法则是所有...
简洁法则
在交互设计领域,有很多经过时间检验过的定律及法则,来作为设计的指导原理,它能够帮助产品设计者对界面上的各种视觉元素进...
UXD笔记