赞助商
立即赞助

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

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

前面的章节,已经系统地讲图标的设计方法,相信认学习并践的同学,已经以设计出优的图标。

但, UI 设中,图标不孤立存的。我们学习图标的设,不了画一组套图,然后传到设平台中分享或求赞,真实的项目中发挥作用。如果不了解图标应用到项目中的识点,么的图标设计平会在项目设计过程被损耗。

所以,最一章,说的就是工具图标在项目中应用的方法,我相信是在网上很难找到的分享,建议仔细阅读。

一套应用中的图标规格

图标是一个应用不或缺的组成元素,在应用的界面中随处见。也因为图标的常见,我们往往需要在一个应用中应用套图标,和崇尚简约的一印象是有背离的。

很多新手,都以我们只设一套全的图标,项目中对应提取即可。但很多场景,如果只使用一种图标类型,那么效果会非常差劲。比如,我们看看下面的淘宝设置页,后包含了 6 种以的图标。太复杂了错,但如果我们把图标都替换同一套呢?

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

可以看见,右侧替换后的案例,效果非常的不理,缺乏对比趣性。交互规则中:如无必,勿增实体,但对于图标的使用,这就必。

应用内的图标规格不同,可以用个属性来划,大和风格。

1. 图标的尺寸

大就是图标的尺寸规格,有些界面的素权重低,图标的尺寸就,有些权重高的则反之。比如在 Apple Music 的播放界面,播放快进等按钮,作为页面最重要的按钮,尺寸非常大,其它可以点击的图标次之,而表示音量的个按钮则最。

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

确定图标尺寸,是在项目中进行图标计的第一件事。但尺寸的确定,不是凭空制定出来的,要先构建出实际的「景」进行析,即先完成了界面的高保真型或交互型。

方是我自己做的原演示,在构建了这样的页面后,我会在原中检查,我总共了多种图标的尺寸,它们分别会应在哪些场景中,然后整来。如果现了一些觉得没有必要的,可将它们进行调整合并成一种尺寸。

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

,在这个案例中,我整了 4 种图标的尺寸:

  • 48pt:类、快速入大图标
  • 32pt: TabBar 图标
  • 24pt:常规工具图标
  • 16pt:小型提示图标

定好了这 4 规格,我们在后续设计上才有明确设计。再复习遍,为什么我们需要先定尺寸再设计,而不是统设计套很大图标进缩小。

因为图标要尽能满像素对齐的要求,通缩小的图标往往在细节上生错位、模糊、丢失等问题。且在大画上设计图标和一开始就在小画中设计,两者在程中得到的视反馈是完不一样的,先在大画画完,缩小到 16pt、12pt 的规时往往显得太复,或描边太粗。

2. 图标的风

图标尺寸确认完以,下面就是确认图标的风,和尺寸一样,我们要应用什么风的图标,是需要在已经具备视雏形的页面中对比确定的,而不能提前开始设计。

我的设流程中,通常会将图标项目的后再始设,原因就图标的视觉样式风格取决于所处置环境的,「先界面样式,再图标风格」的。

在常规情况下,如果一个应用中有多套图标,那普通的中尺寸图标使用一的线性或面性风格即可。而在类、快速入这些备装饰性、大尺寸的类型中,就应该使用一些更激进的计风格。比如下图是 58 同城户端应用图标案例:

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

通常,一种风格会应用在一种「类别」的图标中。上方案例属于比较理想的状,一种类别的图标对应一种尺寸,但是在一些更复杂的环中,往往同一种尺寸下还会包括不同类别的图标。

图标的不同状态

图标在一个产品中,除了充当装饰以外,往往也可以作为按钮来使用。每个应用中都有大量的图标可以进行点击和交互,比如底部导航栏,头部的消息图标、发布图标等等。

当一个图标被操作后,那么我们就要注意到它的状态变。从导航栏图标举例,规的中状态是更换色彩,但有越来越多的应会在中状态采取同的设计格,通过更丰富的样式表现来升可看性。如淘宝、QQ 的导航栏。

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

还有,一些包含在控件的图标,会跟随控件状态的变更发生变更。例如在账号输入框中,如果中了输入框,那么图标的色彩得到改变。如果输入框目前处于可输入状态,那么图标会对应置灰。

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

合格的 UI 设计师会充分考虑到图标变换的各种状态,并在交给开发的过程中会进行详细的说明、归类。及,充分 Sketch 等软件中的组件功,升项目的效率和最后的产成果。

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

图标的标注和切图

在完成了界面和图标的计以后,要提交的计给开发人员。其中,包含的标注和切图。抛开其它计素不谈,就讲讲图标的切图需要遵循哪些规范,它和字体都是在这个过程中最容易出错的地方。

应图标的导我们已经在上一章到过,面还是工具图标的说明为。

1. 图标的边界

我们要到第二章工具图标的规范中,当我们确定图标的尺寸时,是要把图形设计得正好撑满这个尺寸,而是利格线系统来定义它们的大小。

很多新会在这个过程生疑惑,那么在标注过程,我们标注到底是图形到其它元素距离,是图标轮廓到图形距离。

其,图标的距离是根据外部轮廓进行计的。虽个轮廓我们肉眼不见,但它包含的内在规律以帮助我们忽略一不必要的小问题。

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

所以,要让标注有效,就一定不要偷懒只把图标置画中,而没有透明矩形背。

2. 图标的画布

现在有很帮助我们进行标注和切图的协工具,比蓝湖、Zeplin 等。我们只要将设计稿上传,程序以自行获取图标对应的切图。

裁切一些特元素时很好用,但通过线页面导出图标的方法,非常不牢靠的。我们过,一应用中可能出多种规格的图标,所以合理的图标切图,根据不同的规格行导出整理(如下图),不让程序员自己线具中下载,这样不仅操作起困难,且图标间不同的状态难以被轻易获取。

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

所以,项目设过程中,创建不同规格的画布(Symbol)并将它们分类排列,不仅利于我们对以后图标的调用,也方便后批导出切图到对应文件夹中。

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

3. 图标的命名

涉及到切图的导出,我们也就不得不提图标命名的规范,我之前写一篇关命名相关的文章中有比详细的提到图标命名的方法,大家以扩展阅读:《万字干货!能是最面的UI 设计师文件命名规范》。

下面我们简单讲讲图标的命规则。很多新手刚入职场的 UI 设师会不明就里的强调图标一用英文命,并且各种收集常见的英文命词汇,我首先指出这种法错误的。

因为涉及整个应用的图标系统,会出现大量寓「抽象」的图标。比如在上方案例中,有一个启动图标的中文名是「中二」,那这个词应该如何翻译?即使不受制于英文水的发挥,但是你写的英文不代表开发人员能得懂,而大量抽象词的堆积最后导致命名无法成为有效的索引条件,因为没人得懂,开发需要查找一个图标的候依旧是通过缩略图而不是命名。

,在没有具体的命名规范,亦或是程序员没有特殊要求的情况,我更建议使中命名系统,因为国多数程序员的习惯会将获取的图标进行二次命名。

命名格可以分成 3 级,格大致为:「模块_名称_状态@1x」,比如下案例:

  • 设置_钱包_亮@1x.png
  • 动态_评论_默认@1x.png
  • 登录_按钮_点击@2x.png

然,这不是唯准确命名,我们可以根据实场景自由调,大家要牢记,图标命名是为了便我们查找、检索。

最,图标 Symbol 的命名,要和图标的命名持一致,样才能到半功倍的效果。

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

4. 图标的格式

上章启动图标导出格,会根据不设备、场景导出不尺寸,并使用 PNG 格。不要担心,工具图标虽然也临设备不问题,不需要导出这么多规格。下讲讲两图标导出类型。

位图格

最常用导出格是位图 PNG 格,为显示显示倍率不,所以我们要导出 1x、2x、3x 三倍率规格图片,即设计了 16pt 图标话,我们需要导出 16pt、32pt、48pt 三尺寸。并在导出文件名后缀上标有 @1x、@2x、@3x 标注。

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

这个规格于 iOS 是 Android 都是用,虽然有 3x 以上设备,是那些设备要调用 3x 规格即可。

虽面提图标以使用矢量式导出,但对使用渐变、投影或者拟物风的图标,必须使用位图的式,否则无法完整录图形的细节元素。

矢量式

导出 3 种规的图标很烦,而且位图占用的空间往往大。所以,iOS 和 Android 为优化个问题,在之前的系统更新中默认支持矢量式的切图文件:

  • iOS 使用 PDF  1x 切图
  • Android 使用 SVG 的 1x 切图

然,如使用矢量格导出,那么切记在分类文件夹时候,要将 iOS 和 Android 分开保存,而不是混合在起。

结尾

相信这已经是全网最完最详细图标教学了,希望各位能有所收获,并能掌握入门图标设计的正确姿势。

欢迎关注作者微信公众号:「超人的电话亭

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

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

相关文章

iOS14 发布之后,在 iOS 系统中已经悄咪咪发展了好几年的「快捷指令」,终于拥有了更多的权限,更强大的能力——在它的帮助下甚...
iOS14
编者注:看过很多栅格系统的科普,还是看不懂?那本文绝对值得你花十分钟试一下!语言浅显直白,配图清晰易懂,保证轻松学会...
入门
编者注:由于我们的疏忽,未经@智铭桑 授权就用了他的插画(https://dribbble.com/shots/4946856-Designer-s-Rhapsody)作为B...
入门
简介说明 1. 理论表述 如无必要,勿增实体。 2. 理论背景 奥卡姆剃刀本身是一种哲学思想,由中世纪(十三到十四世纪)英国...
奥卡姆剃刀
@途家UED :如何把控图标设计的风格,在什么场景该如何应用,本篇文章就为大家解决这些问题。 什么是图标 图标的功能分类 ...
入门
@菜心设计铺 :图标——界面设计最重要的元素之一。 菜心经常写关于图标的教程和感悟,可见图标设计在我日常工作中占了很大比...
图标设计
找图标这个事情,对于设计师而言,其实都不是太大的问题了。不仅有大把的网站提供免费的图标下载,而且设计师自己改和设计都...
ICON
很多平台的设计风格都是偏可爱类型的,尤其是用户年龄段比较低的,比如动漫类的,校园类的等等。 就在前不久,我刚刚悟出了...
可爱图标