您还未登录! 登录 | 注册 | 帮助  

您的位置: 首页 > 业务知识 > 正文

UI设计师直通车:超详细的图标基础知识

发表于:2018-05-06 作者:小思敏儿 来源:51cto 点击数:

前言PREFACE

最近在进行项目改版,对原来所有图标的设计做了统一规范,同时也从设计图标的过程中总结了一些关于图标设计规范的经验。

图标是当今世界上最通用的图形语言,很容易让人理解的语言,在如今互互联网时代,科技感十足的智能手机让人产生距离感,图标的设计使得画面不再冰冷,优秀的图标设计让界面更具有趣味性,拉进与用户之间的距离,让用户产生愉悦感,所以图标设计在ui界面设计中是必不可缺少的一个环节,作为ui视觉设计师,更是应该掌握的一项基本技能。在图标设计时并不是只考虑表面形状那么简单,我们更应该去了解图标设计的风格、原则和设计要点。

一、图标分类

象形图标,是现代比较流行的图标类型,通过其与物理对象的图画相似来表达其意义的表意文字。比如一个日历造型的图标表现的就是日历。

图标

表意图标,这种类型的图标比较复杂,需要投入学习成本来理解它,比如在学习数学的时候,要先学习并记住各种符号,通常表意文字是基本的形状,人们一般是没办法一眼认出来的它的含义的,需要去学习。

表意图标

二、图标风格

1. 拟物图标

拟物,或称拟物化,也叫做现实主义。拟物化风格是乔布斯时代的ios代表设计风格,其目的是使用户界面简单易懂,降低用户学习成本。拟物图标比较注重质感表现、构型和光影控制的这些技法。因为拟物化设计过于复杂给用户浏览信息造成了不必要的干扰,所以现在的拟物图标已经被时代所淘汰了。

2. 线性图标

目前是最流行的图标表现方式之一。是由一条等粗细度构成的图形,相比面形图标会比较有细节的表现空间,控制线条的粗细和构型能够有很多样的视觉表现。

线性图标

3. 面型图标

这类图标设计师会从现实世界中提取事物的关键外观形状特点,通过设计形式展现一个象形的剪影色块,视觉上比较醒目,但不容易刻画细节。

面型图标

4. 填充图标

填充图标是线性图标和面形图标的完美结合,采用线条构型在内部根据设计风格,选择性的填充颜色,比较个性,有更多的设计发挥空间。

面型图标

5. 手绘图标

手绘图标一般运用在游戏和手机主题设计中,视觉效果比较强烈,富有感染力,作为纯手工绘制的图标,很考验设计师的手绘表现能力。

三、方寸之间

在动手画图标之前一定要选定参考线,只有这样所有图标才能规范统一。

这套参考线是根据尺寸1024x1024px绘制的。

在绘制图标过程中,构图不能太满,要在四周要有留白,不要让设计稿进入留白区域,不然进入留白区域的图标会显得很大,整体会显得不和谐,大小不统一,所以根据不同形状的图标制定出了四种外轮廓的图标参考线。

在绘制图标过程中,为了达到视觉上的统一,可以相对的缩小外轮廓的尺寸,不用严格的遵循网格和参考线。网格是为了帮助你让图标保持统一性,如果在设计出一个伟大的图标和遵循规则之间二选一,那就打破规则。

1. 像素对齐

在制作图标时,常常会碰到图标发虚的问题,那是因为我们没有严格做到像素对齐,作为一名专业的ui设计师,必须注意到这点。

2. 多使用布尔运算

在制作图标时能用基本形状进行布尔运算的情况下,尽量不要使用钢笔工具,使用布尔运算的好处有很多:

  • 让图标更加规范
  • 后期进行修改更加方便快捷

四、用品牌基因法做图标

文章中使用的 [ 用品牌基因法做图标 ]理论源于菜心设计铺,品牌基因的定义:视觉层面的品牌基因就是通过一个事物或者提取出一个(或一组)视觉符号。

1. 提取特定形状,直接应用

最常见的方法是直接将logo作为图标,如下图:

直接将logo作为图标

2. 吸取品牌颜色

从咸鱼logo中吸取品牌色,当作品牌基因,这是也常见的一种方式

3. 抓取风格特点

抖音结合了「抖」的风格特色,运用在产品的各个环节,建立了品牌特色,让人一看到这些设计就知道是抖音。

五、结语

通过上面的分享不知道大家对图标设计有没有了大概的了解,如果大家已经对制作图标的基本原则有了基本的了解,可以自己动手试一试,光说不练假把式,自己亲自动手才能发现问题解决问题,逐渐提高自己的设计能力。如果你对图标设计特别感兴趣的话,也可以找资料深入学习,毕竟我想每一个设计师心里都有一个大师梦!

 相关文章