从零开始画图标系列：图标应用详解

在 UI 计划中，图标不是孤独存在的。我们进修图标的计划，不是为了画一组套图，然后上传到计划平台平分享或求赞，而是要在真实的项目中施展浸染。假如不相识图标应用到项目中的常识点，那么真实的图标计划程度就会在项目计划进程中被消费。

以是，最后一章，说的就是器材图标在项目中应用的要领，我信托这是在网上很难找到的分享，提议细心阅读。

一套应用中的图标规格

图标是一个应用不行或缺的构成元素，在应用的界面中四处可见。也由于图标的常见性，我们每每必要在一个应用中应用多套图标，这和崇尚简约的第一印象是有背离的。

许多新手，都觉得我们只要计一律套大而全的图标，在项目中对应提取即可。但有许多场景，假如只行使一种图标范例，那么结果会很是差劲。好比，我们看看下面的淘宝配置页，前后包括了 6 种以上的图标。是太伟大了没错，但假如我们把图标都替代成统一套呢?

可以望见，右侧替代后的案例，结果很是的不抱负，缺乏比拟和意见意义性。交互法则中说：如无须要，勿增实体，但对付图标的行使来说，这就是须要。

应用内的图标规格差异，可以用两个属性来分别，巨细友善势威风凛凛。

1. 图标的尺寸

巨细就是图标的尺寸规格，有些界面的元素权重低，图标的尺寸就小，有些权重高的则反之。好比在 Apple Music 的播放界面，播放快进等按钮，作为页面最重要的按钮，尺寸很是大，其余可以点击的图标次之，而暗示音量的两个按钮则最小。

确定图标尺寸，是我们在项目中举办图标计划的第一件事。但尺寸简直定，不是我们凭空拟定出来的，我们要先构建出现实的「场景」举办说明，即先完成了界面的高保真原型或交互原型。

下方是我本身做的原型演示，在构建了这样的页面往后，我会在原型中搜查，我总共用了几多种图标的尺寸，它们别离会应用在哪些场景中，然后清算出来。假如呈现了一些认为没有须要的，可以将它们举办调解归并成一种尺寸。

以是，在这个案例中，我清算出了 4 种图标的尺寸：

• 48pt：分类、快速进口大图标
• 32pt：底部 TabBar 图标
• 24pt：通例器材图标
• 16pt：小型提醒图标

定好了这 4 种规格，我们在后续的计划上才有明晰的计划偏向。再温习一遍，为什么我们必要先定尺寸再计划，而不是同一计一律套很大的图标举办缩小。

由于图标要尽也许满意像素对齐的要求，通过缩小的图标每每在细节上会产生错位、恍惚、丢失等题目。且在大画布上计划图标和一开始就在小画布中计划，两者在进程中获得的视觉反馈是完全纷歧样的，先在大画布画完，再缩小到 16pt、12pt 的规格时每每会显得太伟大，或描边太粗。

2. 图标的气魄威风凛凛

图标尺寸确认完往后，下面就是确认图标的气魄威风凛凛了，和尺寸一样，我们要应用什么气魄威风凛凛的图标，是必要在已经具备视觉雏形的页面中比拟确定的，而不能提前开始计划。

在我的计划流程中，凡是会将图标放在项目标最后再开始计划，缘故起因就是图标的视觉样式气魄威风凛凛是取决于所处位置和情形的，是「先有界面样式，再有图标气魄威风凛凛」的。

在通例环境下，假如一个应用中有多套图标，那么平凡的中小尺寸图标行使一样平常的线性或面性气魄威风凛凛即可。而在分类、快速进口这些具备装饰性、大尺寸的范例中，就应该行使一些更激进的计划气魄威风凛凛。好比下图是 58 同城客户端应用图标案例：

凡是，一种气魄威风凛凛会应用在一种「种别」的图标中。上方案例属于较量抱负的状态，一种类此外图标对应一种尺寸，可是在一些更伟大的情形中，每每统一种尺寸下还会包罗差异类此外图标。

图标的差异状态

图标在一个产物中，除了充当装饰以外，每每也可以作为按钮来行使。每个应用中都有大量的图标可以举办点击和交互，好比底部导航栏，头部的动静图标、宣布图标等等。

当一个图标能被操纵后，那么我们就要留意到它的状态变革。从导航栏图标举例，通例的选中状态是改换色彩，但也有越来越多的应用会在选中状态采纳差异的计划气魄沤背同通过更富厚的样式示意来晋升可看性。好比淘宝、QQ 的底部导航栏。

尚有，一些包括在控件内的图标，也会跟从控件状态的改观产生改观。譬喻在账号输入框中，假如选中了输入框，那么图标的色彩也获得改变。假如输入框今朝处于不行输入状态，那么图标也会对应置灰。

及格的 UI 计划师会充实思量到图标所调动的各类状态，并在提交给开拓的进程中会举办具体的声名、归类。以及，充实运用 Sketch 等软件中的组件成果，晋升项目标服从和最后的产出成就。

图标的标注和切图

在我们完成了界面和图标的计划往后，要提交我们的计划给开拓职员。个中，包括我们的标注和切图。抛开其余计划元素不谈，我们就讲讲图标的切图必要遵循哪些类型，它和字体都是在这个进程中最轻易堕落的处所。

应用图标的导出我们已经在上一章提到过，以是下面照旧以器材图标的声名为主。

1. 图标的界线

我们要回到第二章器材图标的类型中，当我们确定出图标的尺寸时，不是要把图形计划得正好撑满这个尺寸，而是操作格线体系来界说它们的巨细。

许多新人会在这个进程中发生迷惑，那么在标注的进程中，我们标注的到底是图形到其余元素的间隔，照旧图标外外观到此外图形的间隔。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!