南京网站建设——设计师必看的图标(icon)设计指南

2020/09/24

图标设计是UI设计中非常重要的环节,因为除了文字和图片的排版之外,在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。全文16,834字,阅读时长约35分钟。

 

图标是UI设计中除了文字之外最不可或缺的视觉元素,在设计中看似只占一个很小的区域,但是它却是考验设计师基本功的重要标准,了解图标相关的概念,以及正确绘制的方法,是入门 UI设计的必备条件。

 

本文尽量将图标进行系统一些的介绍说明,当然仅一篇文章是不可能面面俱到包含所有知识点。内容比较基础,主要以 设计概念 和 设计思路 为主,对图标相关的内容进行组织梳理和分类,便于小伙伴们建立图标的概念体系。过程中也有针对几种典型的图标结构进行实操代练,想要把图标设计的更好,这就需要我们在平时勤加练习外,还要进行深度的思考,希望我的这篇梳理可以给大家带来帮助。

 

图标的定义

图标,也称为icon或Picoto,是计算机世界对现实世界的隐喻和概括,代表软件产品中的功能及操作。它的本质是一种符号,它采用对这个世界的隐喻,来指代功能,含义,用途等。

 

图标做为国际通用性语言,生活中随处可见,例如商场导视中收银台图标、出口图标、卫生间图标等,日常手机里使用的那些App图标,如微信、电话、短信等。的确,图标的形式有很多种,它可以应用在很多场景中,并且表现方式非常丰富,有线的、有面的、还有拟物的等。   

 

图标的类型

拟物图标

由于人们都是通过以往的认知来理解新事物,所以基于这一点,早期应用界面必然要采用拟物风格,以便于人们的理解和操作。是一个由实物 → 符号的发展历程。

 

例如「保存」图标就是将「软盘」符号化之后形成的图形,「软盘」是「保存」图标的实体。但随着时间的推移,人们逐渐将长期接触的符号本身作为一种新的实体,在大家的眼里,它不再是一个具象事物的抽象符号,而是直接当成一个实体来使用,甚至这个符号的实体已经淡出历史,但人们还在习惯性使用这个符号。

 

更具体点来说,拟物设计就是追求模拟现实物品的造型和质感,通过叠加高光、纹理、材质、阴影等各种效果对实物进行再现(也可适当程度变形和夸张);扁平化设计就是摒弃以上对效果(尤其是高光、阴影等能造成透视感的效果)的追求,转而通过抽象、简化、符号化的设计元素来表现。你还记得曾经熬夜画写实图标的日子嘛~上千个图层不在话下有木有!

 

产品应用图标有不同的风格,这些风格有可能偏拟物,也有可能很扁平,有可能很抽象,也可能很具象。通过不同的设计风格可以更加标新立异,从而被用户记住。因此能在第一时间赢得用户的好感和记忆非常重要,将产品图标设计的好看且容易被人记住就成了非常重要的任务。应用图标的风格主要有以下几种。

 

中文文字图标

中文是我们的母语,每一个汉字都令人记忆深刻,文字也是最直白的信息,而且不容易被曲解,所以很多国内的产品都会使用文字作为自己的产品图标。中文设计模式即字体设计,提取应用名称中的一个或多个汉字,进行设计变形,变形后的字体图形具有产品属性的外貌特征。常见中文图标又分为单字、多字和字加图形的几种类型。

 

应用图标尺寸规格

iOS应用图标

iOS6及之前的版本,应用图标的圆角半径都可以通过1/4圆绘制出来,即绘制标准的圆角矩形即可,主屏幕应用图标为114*114px,使用20px圆角半径,App store应用图标为512*512px,使用90px圆角半径等。从iOS7开始,主屏幕应用图标调整为120*120px,并且不再是标准的圆角矩形,而是某种连续曲线,接近于26-27px圆角半径。

 

APP中的功能图标

除了产品图标,还有一种图标被称为功能(或系统)图标,功能图标指的是担负一定功能和含义的图形,一般来说需要像文字一般地被人迅速理解,所以表达方式上不适合特别复杂,如微信底部四个系统图标就使用了比较简洁的线性风格。

 

功能图标在UI设计中占据非常重要的作用,几乎存在于每一个应用界面中,无论是在导航栏、工具栏或标签栏,还是在首页、详情页或个人中心页,都随处可见功能图标的身影。功能图标具有明确的表意功能,其作用在于替代文字或辅助文字来指引用户进行快速导航,它具有图形化的符号,比文字更加直观,符合普罗大众的认知习惯,有助于用户形成记忆思维,提高应用的易用性。同时设计精致、风格统一的功能图标提升了产品视觉效果,不但给用户带来视觉上的愉悦感,还带来了良好一致的使用体验。

 

图标绘制方法

图标的绘制方式主要有两种:布尔运算  贝塞尔曲线

 

 布尔运算

布尔指的是乔治·布尔,19世纪的一位数学家,为了纪念布尔在符号逻辑运算中的杰出贡献,所以将这种运算称为布尔运算。

 

布尔运算听起来比较难,但其实非常简单,布尔运算采用的数字逻辑推演法,主要有数字逻辑的联合、相交、相减。设计师在使用软件过程中引用了这种逻辑运算方法,对应到设计软件中,就有:合并形状、减去顶层形状、与形状区域交叉、排除重叠形状。例如两个圆形相减可以得到一个月亮的造型,这就是布尔运算。

 

功能图标在UI设计中占据非常重要的作用,几乎存在于每一个应用界面中,无论是在导航栏、工具栏或标签栏,还是在首页、详情页、或个人中心页,都随处可见功能图标的身影。功能图标具有明确的表意功能,起作用在于替代文字或辅助文字来指引用户进行快速导航,它具有图形化的符号,比文字更加直观,符合普罗大众的认知习惯,有助于用户形成记忆思维,提高应用的易用性。同时,设计精美、风格统一的功能图标提升了产品视觉效果,不但给用户带来视觉上的愉悦感,还带来良好一致的使用体验。

 

线性图标使用场景

 

在iOS所有原生应用的导航栏和工具栏都采用了2px线框的图标设计,很多APP产品的标签栏都选择用线性风格的图标设计。无疑,线性图标可以减少视觉干扰,让用户集中在产品核心功能上,同时轻量化的视觉语言也与扁平化的设计风格更为融合。它比面形图标更能塑造优美的外观,且线条本身就是一种设计语言,因此绘制整套线性图标会更加统一,具有整体感。

 

我们了解了 icon 的基本知识,那么如何设计一个好的 icon 呢?怎样评判我们的 icon 是否合适,是否贴合整个产品呢?我们需要了解什么才是一个好的 icon 。

 

我们可以从以下五个方面来检验,分别是:识别性,规范性、统一性、呼吸感与品牌感

 

我们都知道图标在APP设计中的重要性,但是打开许多APP你会发现他们的图标设计都非常普通,似乎是在图标网站上下载的素材。虽然一些优秀的设计师在进行图标设计师加入一些诸如圆角、断线等设计语言,但是仍逃脱不了与其他APP设计雷同、毫无个性的通病,使得UI看上去普通、不精致,缺少产品气质。

 

那么,该如何打造属于自己APP的独特风格呢?品牌基因为我们提供了一些线索。它是由平面设计中的VIS(视觉识别系统)引入的一种设计策略,通过对品牌形象进行延生设计形成一套完整的视觉符号。每一个APP都有其品牌形象,代表了与众不同的气质。接下来,我们就来学习如何利用品牌基因进行图标设计。

 

提取品牌图形

通常一个App的第一个tab是首页,是用户进入App后看到的第一个页面,最常见的图标设计是一个小房子的图形。首页是App中最重要的页面,承载了整个产品的核心功能,是用户浏览最多的地方,因此使用一个让人印象深刻的品牌图形作为“首页”图标是必要的,不但使App内外形成了视觉联系,同时也二次传递了品牌形象,加强了用户对App的良好印象。例如网易云音乐的首页标签就直接使用了它的品牌图形,其优点不言而喻。

 

 

南京网站建设

返回列表 >>

相关主题

出错了

Action:_after_view您所请求的方法不存在!


Action:_after_view您所请求的方法不存在!

您可以选择 [ 重试 ] [ 返回 ] 或者 [ 回到首页 ]