赞助商
立即赞助

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

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 设的范畴。如果这领域一提升,那么针对性训练的效果反不理,需积累视觉、图形的整体设能力。

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

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

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

相关文章

有时候觉得做的图标有点奇怪,但又不知道哪里奇怪,今天就来分析两个原理,看看有谁中招了! 亲密性 排版有四大原则,其中有...
ui设计
最近的工作一直在和筛选打交道,为公司 B 端系统做了一次设计调整,去解决目前系统中筛选功能交互繁琐的问题。 首先我们先从...
B端设计
近年来,互联网进入下半场,C 端流量红利逐渐消退,很多企业转向了 B 端服务,随之而来的是产品设计者的转型,现在越来越多的...
B端产品
一个设计作品呈现到用户面前,第一眼进入眼帘的就是产品的视觉表现,而产品的色彩在其中起到了举足轻重的作用,毫无疑问色彩...
入门
在之前的文章《从零开始画图标系列:线性图标设计实战演示!》中,我们已经讲解了线性图标的绘制方法,在本篇文章,我们就可...
入门
@菜心设计铺 :前几天做了《暴风影音 App 重设计》,不过还没做完,所以今天主要讲讲我寻找改版切入点的方法——品牌探索。 到...
ICON
理论概述 1. 理论表述 任何系统都存在固有的复杂性,无法减少;唯一的问题是谁来处理它。 2. 理论背景 特斯勒定律(Tesler...
特斯勒定律
目前我主要深耕于B端设计中,深知B端图标设计与C端有很大的不同,无论是应用的场景、设计的理念,都有非常大的差异,而现在网...
B端产品