首页

图标设计如何快速过稿?来看看这篇文章的锦囊妙计

高劲


图标设计如何快速过稿?来看腾讯设计师的私藏方法

最近遇到一个同学,说做了很多稿图标的方案最终还是没有确定下来,但眼看着产品马上就要上线了,该怎么办。经过一轮沟通,发现他陷入几个新手设计师在画图标比较容易犯的问题:

  • 面对产品提出的疑问,不知道如何拆解,仅停留在表面的理解,“美”or“丑”
  • 思考的方案呈现不够系统,导致多次修改,也未被采纳
  • 对于图标多方案的设计输出缺乏方法,漫无目的的设计方案
  • 思考不够发散,存在局限性,不敢大胆突破
  • 过度纠结,都在做方案,做出了但方案都不过关

图标设计如何快速过稿?来看腾讯设计师的私藏方法

从以上这几个问题,我们进行深入思考,会发现其实这些只是表面上的问题,实际上是在说什么呢?

  • 美 or 丑:实际上是我们对于图形或图标的设计趋势是否了解,我们设计的图标设计是否符合现在的趋势,我们阐述方案的时候是否足够的自信这个是现在流行的风格?
  • 多次修改:这个实际上是反馈我们呈现方案的功力或者能力,我们做的设计是否足够系统性,多套方案中是否有命中对方想要的点
  • 漫无目的的设计:基于上述第 2 点的框架下,我们在输出图标的时候设计呈现的维度是否足够全面,从表意到图形美观度上是否有足够多的思考
  • 局限性:因为日常看得少,所以在实际案例设计的时候也会受到局限,因此养成日常积累的习惯比临时思考会更好
  • 过度纠结:这种表现是表明你已经陷入到了设计本身,而缺乏跳出来看看更多参考的勇气了,这时应该先停住,找找参考,帮助打开思考壁垒

图标设计如何快速过稿?来看腾讯设计师的私藏方法

基于以上这个案例,分享下我在日常设计中常用的一些方法,希望可以帮助遇到相同问题的小伙伴们进行一些答疑,从而帮助你们打破壁垒,高效成长。

下面发改分成 3 个部分来进行阐述:思考维度的锻炼;图形的设计方法;系统化方案呈现

思考维度的锻炼

当我们要设计一个图标的时候最容易入手的就是图标的表意,从表意延伸到图形的设计,然后再加以不同的设计手法(线、面、线面等等)。

1. 图标的表意

图标的表意方式,大概可以拆分为以下几种:具有普识性的图标、可进行表意延伸的图标、通过组合的图标、抽象的需要关联的图标。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

2. 普识型图标

即我们在现实生活中常见且具有常识性性的图标,例如:删除、添加、放大、搜索、笔记本、手机、眼睛、礼物等等。这类的图标重点在于形体的打磨上需要多花一些时间,从不同的角度进行尝试,比如以删除为例子,同样的造型但可以有不同的设计表现。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

3. 表意延伸的图标

即一个事物可以被延伸为一个或者多个图形表现的图标,例如:点赞、浏览、设置、收藏、评论、事件等等。例如点赞-延伸为你很棒用大拇指来表达,游戏延伸为游戏手柄、设置-延伸为机械操作用齿轮来表达,评论延伸为对话使用对话框来表达,浏览-延伸为用眼睛的图标表达。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

除此之外延伸表意的图标可以有多种设计方式,例如以事件为案例。

  • 方案 A:事件具有时间性,所以可以考虑用日历来置换;
  • 方案 B:事件具有告知的行为,所以考虑用喇叭来突出这个行为;
  • 方案 C:事件具有档案的意味,所以我们可以用表单的图形来做沿用。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

4. 组合型图标

主要是指该类图标的表意需要通过 2 个以上的图形进行组合才能更加准确进行表现,例如:群、群聊、好友、添加联系人、情侣、转账、红包。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

5. 创造类图标

特指认识中没有,因为产品需要被二次创造出来的图标,一般在一些新生业务中会常出现,这类图标初期往往需要伴随文字一同出现。例如:微信的朋友圈、视频号、小程序、手机系统的 Wi-Fi、蓝牙等类型等图标。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

图标的表现方法

常规的图标表现方法(线形、线面、面形、插图、叠色等等)我们基本都了解,但作为设计师更应该知道潮流趋势,清楚现在流行什么类型的设计,这样才能让你作出更加出彩的设计。

这里分享几种目前最流行的图标设计类型:

1. 磨砂质感图标

磨砂质感图标作为 2020 年底最流行的图标,已经在不少 APP 中看得了相关的设计,从设计方法上并不难,重点还是在于是否有需要和应用场景。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

2. 插图+磨砂质感

图标使用小插图的方式进行绘制,然后再结合高斯模糊的视觉表现手法,整体让图标更具有层次感和通透感。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

3. 3D 质感图标

3D 作为这 2 年最流行的设计趋势,自然也牵动着设计师的心。但 3D 的打磨相对会比较耗费时间,不过仍然是值得一试的设计方式之一,目前在 APP 的设计中比较少见到应用,或许会成为 2021 的趋势之一。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

4. 3D 磨砂质感图标

基于 3D 与毛玻璃图标的结合,整体的表现结合了这 2 种风格的特点,既保留了毛玻璃图标的通透,同时也具有 3D 的空间感。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

5. 流光溢彩的图标

算是属于渐变类型的一种,但颜色和细节的跨度相比常规的渐变图标更加丰富,整体让人感觉具有流光的效果,更加具有未来感。不过从目前来说,更适合作为独立的应用 APP 设计,作为常规的图标设计需要一定的接受度。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

图标的设计方法

想要了解设计的方法之前,我们得了解有哪些类型的图标,具体大家可以查看我之前撰写过的文章,里面有详细的分析了图标的设计类型。除此之外,这里还可以分享下我日常中设计图标使用的方法。

这个专题也有超详细的分类和教程 → https://www.uisdc.com/zt/icon-drawing-guide

1. 表意+基础形

基础形体使用普适性较高的图标造型,在图标的亮点或者点缀处通过表意关联进行创意设计,从而让图标获得新的感受,但又具有较高的识别性。案例:例如我们以日历图标为案例,可以比较直观的使用日历的普识图形,然后通过日期的方式来进行强调赋予图标生命力,然后再叠加上颜色和质感,并且增加一点小趣味的折角设计。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

2. 关联延展

基于实际场景的认识来进行图形关联延展,并且进行一定的美感升级及图形的优化,延展出最终的图标设计,这种方法可以大大提高大家对于图标的识别度。案例:设计一个快速聊天表意的图标,聊天我们常规使用气泡,快速我们可以关联为闪电,然后把气泡和闪电进行结合。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

3. 组合升级创意

利用一些正负形的创意方法,使用 A、B 图形的进行有机融合或剪切,使其获得新的图标造型,让整体的图标感受更具有创意点。案例:例如我们尝试画一个具有宇宙感受的游戏图标,可以通过手柄和星球的有机结合让整体的图标带有游戏和星球的意思,整体提升了表达的创意。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

系统化方案呈现

方案的呈现属于设计的一部分,虽然不能起到决定性的作用,但好的呈现效果往往可以帮助我们得到更好的印象分,这里分享一下我在设计过程中尝试的一些方法。方案的大小或者输出的类型也决定着我们呈现方案的类型,下面根据不同的类型分享不同的呈现案例。

1. 纵横对比法

适用于需要大量尝试的时候,以穷举输出为典型案例,我们可以用最基础的图形为中心点,结合图形的表意和图形风格进行纵横的发散性扩展,例如横向为表意、纵向为图形风格,中间部分属于交叉部分。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

案例模版

图标设计如何快速过稿?来看腾讯设计师的私藏方法

2. 单个图标创意思考

对于一些标志类或重要的图标,我们需要阐述我们的设计想法或者来源,这种呈现的方式就可以很直观且简洁的表现我们的思考。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

案例模版

图标设计如何快速过稿?来看腾讯设计师的私藏方法

3. 整套输出

对于一整套的图标,我们需要在案例上呈现图形的设计规则,包括但不限于有:圆角、角度、组合规范、斜度等等。除了呈现图形之外,请补充上颜色的应用规则、颜色的表意等等。

图标设计如何快速过稿?来看腾讯设计师的私藏方法

案例模版

图标设计如何快速过稿?来看腾讯设计师的私藏方法

总结

图标设计虽然是一个小内容但却很重要,反映着着整个页面的精致度,在 UI 界面来说是除界面排版之外最重要的一环,因此是很值得我们去研究的设计之一,建议在日常工作中多练习多看。



文章来源:优设网     作者:ID设计站


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

图标设计,你需要了解这些...

鹤鹤

本文目录

  • 图标风格汇总

  • 图标设计流程

  • 案例讲解

  • 图标资源输出



01 常见图标风格汇总

  • 线性

  • 面型

  • 线面



1、线性

  • 单色

  • 双色

  • 渐变

  • 不透明度

  • 一笔成形

  • 断点



1.1单色

单色线性拥有简洁、清晰的特性,在视觉层级上较低,适用于基础功能图标。b端较为常见,移动端常见在设置页面或导航栏通知、分享等图标设计上。 


1.2双色

双色线性在单色的基础上丰富配色,解决了单色线性原本过于单调的问题,在提升趣味性的同时,也将视觉层级进行了提高,同样适用于基础功能图标。在使用过程中需要注意的是丰富的配色会偏向年轻化,需要考虑是否符合产品风格及主流目标用户审美。 



1.3渐变

线性渐变还可以在用色上进行区分,简洁的用色可以给人带来科技、炫酷感,在车载ui中较常见。丰富的渐变配色则更适合运营入口设计,有着年轻化、热烈的氛围。 



1.4不透明度

线性双色可以和不透明度风格进行很好的比较,前者视觉更跳跃,个性更鲜明。而后者在使用时普适性更强,即丰富配色细节,又避免视觉过于跳跃(可以把它理解为同类色配色)。所以在大多数使用场景下,不透明度风格都是一个很好选择。 



1.5断点

断点风格有线性单色&双色该有的个性,并且在线性双色基础上继续提升趣味性,使用需要注意产品目标人群年龄段。 



1.6一笔成型

该风格设计感和个性都极强,很考验设计师对造型绘制的把控,功底不够就很容易导致设计后出现识别问题。所以设计难度较大,且延展性较弱,难以表达复杂语义,使用需谨慎。



2、面性

  • 单色

  • 双色

  • 不透明度

  • 晶白

  • 磨砂玻璃

  • 等轴侧(2.5d)

  • 渐变

  • 新拟态

  • 轻质感

  • 明暗质感

  • 写实

  • 抽象

  • 卡通插画

  • 像素风格



面性与线性的区别在于前置视觉面积更大,整体视觉层级比线性高。下面部分和线性风格重叠的内容就不赘述。




2.1单色



2.2双色



2.3不透明度

面型不透明度风格,通过调节前后不透明度可以带来较强的空间感,使用场景较广泛。



2.4晶白

晶白严格来说也算质感图标(白色质感)的一种,常见于品类图标设计,通过透明度、投影、渐变等参数调节,使整体立体感和空间感都很强。



2.5磨砂玻璃

又叫毛玻璃风格,是通过背景模糊,或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受,但由于容易与浅色背景相融,造成对比度不足难以识别的问题,所以在使用中需要注意无障设计。



2.6等轴侧

也叫2.5d,有很强的趣味性,及识别度,适合重要入口或运营设计。但这类风格较为卡通,且表现花哨。使用需要注意应用场景及目标人群年龄段,避免干扰信息阅读和不符和产品风格。



2.7渐变

这类风格可以很好的吸引用户注意力,在电商、美食类产品中较常见,主要注意配色干净协调。



2.8新拟态(Neumorphism)

新拟态图标色彩相对单一,与背景融合度较高,通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大,再有这类风格与背景对比较弱,无障设计问题较大。



2.9轻质感

通过大量渐变、投影来表现立体感,整体风格偏年轻化,常见在教育类产品中,使用注意配色干净和谐。



2.10明暗质感

通过调节同一色相不同明度、饱和度来营造前后空间感,整体风格统一。


2.11写实

这类图标特点很明显,有极高的识别度,目前美团外卖品类区入口就是该风格,整体偏年轻化。主要考验设计师造型绘制、技法表现能力。



2.12抽象

通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术(装饰)价值更大,不追求识别度,美观即可。



2.13卡通插画

这类风格既可以做图标又可以做空状态插图,设计美观有特色即可。



2.14像素风格

这类移动端界面较少见,目前只在一个海外电商产品(Jollychic)中看过,还有就是一些像素游戏中,比如「泰拉瑞亚」、「我的世界」。



3、线面

  • 线面

  • 描边插画



3.1线面

和线性双色图标类似,趣味性较强,具备个性化特点,可以做Tab选中状态。 



3.2描边插画

类似卡通插画,在卡通插画基础上加入描边。同样颜色,在一些特定的前后交接处利用线条做区分,算是多一种设计表现形式,同样美观有特色即可。 




4性格

  • 粗线

  • 细线

  • 圆角

  • 直角



4.1粗线

力量感、稳重、男性等感受



4.2细线

品质感、精致、女性化 



4.3圆角

安全、亲和、年轻



4.4直角

严谨、正式、果断利落 

由于图标风格繁多,所以以上列举并不包含所有图标风格。



02 图标设计流程

  • 明确语义

  • 关键词详解发散

  • 确定风格

  • 提取造型

  • 创意输出



1、明确语义

图标存在的目的是起引导作用,在丰富页面视觉的同时,帮助用户更快的获取信息(当然图标的使用意义还有很多)。设计师在将文字翻译成图标前,必须先理解其文字含义。因为最终呈现的图标,需要用户一眼能准确反翻译其中含义(艺术抽象、装饰类图标除外)。

在C端设计中,以Tab为例,一些常见文案:首页、分类、发现、我的,这类语义还算比较清晰的。但在B端设计或工具类APP中就会遇到一些复杂语义。以我的工作来说,目前在做一款网站搭建工具,后台常会需要设计组件及对应的图标,比如:滑动商品、多图列表、上拉图文列表这些语义比较复杂的图标,在一定程度上会比较难精准传达文案。



2、关键词详解发散

这一步有点类似情绪版使用,但不同的是:我们需要将确定的词(A)进行详细解释,再将解释文案中关键的词语进行发散,得出一系列相关联的词(A1、A2、A3…)。有时间还可以根据这些词找到对应的图片,再看在这些相关联的图片中,有哪些细节可以传递最开始我们确定的那个词(A)的意思。



3、确定风格

我们可以借助情绪版,根据产品定位和目标用户描述,再结合应用场景,在目前已有的风格中找到符合产品气质,符合当前模块视觉层级的图标风格。

前面我们已经了解了目前常见的图标风格有三大类:线性、面型、线面,其中还有很多细分,比如在线性中又分粗线(沉稳、力量)、细线(品质)、曲线(女性化),还有圆角、直角,每种类型所传递的感受都不同。在创意前期,我们将每个点合理进行随机组合(如下图)即可创造一种更新颖的风格。



4、提取造型

经过关键词详解发散,其实我们已经获得了很细节点,接下来将这些细节点进行合理融合后,就可以得到代表同一语义但形式各异的基础图标样式(此时还只是想法阶段,可以通过手绘方式记录组合形式,不用特别精细化)。




5、创意输出

在设计执行前我们需要先了解两个大知识点: 
  • 图标设计规范

  • 图标设计注意点


5.1图标设计规范

  • 常见图标尺寸

  • 图标盒子使用


5.1.1、常见图标尺寸

在界面图标设计中最常用尺寸:12x12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)



5.1.2、图标盒子使用

什么是图标盒子?其作用是什么?

图标盒子即图标约束网格,来源于Material design。使用图标盒子有利于使我们创造的系列图标保持规范与统一。



5.2图标设计注意事项

  • 简洁美观

  • 易于识别

  • 细节统一

  • 像素对齐

  • 视觉大小一致

  • 饱满透气

  • 融入品牌基因



1、简洁美观

图标是否美观,会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。在UI界面功能图标设计中,通常会尽量减少不必要的细节,降低图标复杂度,来帮助用户快速识别。当然图标也有丰富细节的做法,常见在一些重要运营入口上。



2、易于识别

识别度的问题,在最前面明确语义中就有提到过,这里就不赘述。



3、细节统一

在细节中包含:表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等(不同风格图标的细节不同,这里只是列举部分),上述细节在系列图标中都应保持一致。



4、像素对齐

在图标绘制中,需尽量避免坐标位置xy或宽高参数出现小数点,以此保证最终导出的图标是清晰的。



5、视觉大小一致

由于不同图标外轮廓不同,就会导致哪怕在物理大小上相同的图标(假设都是24x24),但视觉上可能还是会给人大小不一致的感受,因此我们需要借助前面提到的图标盒子进行约束调整。


6、饱满透气

图标的饱满透气,不一定需要加入很多笔画(描边、装饰等)细节。而是尽可能在形成风格的同时,简化能影响识别度的关键笔画,通过调节笔画大小、长短、位置使图标达到一个最平衡状态。


以如下途牛_我的页面_功能区图标为例:

图中标红图标就存在饱满度不足,及内部较拥挤的情况,第一感受是看起来不舒适,品质感比较低。除此外,还存在如下问题:


  • 图标大小很明显不一致

  • 设计语言不统一,有圆角有直角

  • 图标风格不一致,有透明度+分割形式(我的保单)、有纯透明度形式(专属顾问、我的收藏)、还有其余单色实心形式



7、融入品牌基因

在图标中融入品牌基因可以有效的提升产品品牌感,作为高阶设计师必备技能之一,常见提取维度:

  • 颜色

  • 设计语言

  • Logo轮廓 


以我之前的豆果美食项目为例,提取到如下细节:

颜色:提取黄色、绿色两类颜色 
曲率(设计语言):品牌Logo走线顺滑、自然、圆润,个性鲜明 
分离(设计语言):黄色区域与绿色区域虽不相交,但存在联系。(分离间留白) 


根据提取到的基因,最终得到如下两套风格不同,但语言相同且都具备品牌感的图标。


Logo轮廓:在图标中融入品牌logo外轮廓(Google Play),或根据logo轮廓结合应用特性进行延展(Microsoft)。



03案例展示

就以途牛为例,对我的页面功能图标进行优化。 


1、明确语义

根据文案进行详细翻译,帮助我们充分理解文案。



2、关键词详解发散

以「专属顾问」为例:

释义:有专门的知识或经验,受聘为机关团体或单独个人提供专门咨询的人。

提取释义中关键信息,生成关键词:专业专人,再根据关键形容词发散一系列具象名词。



3、确定风格

根据产品调性和模块视觉层级以及考虑延展性,初步确定如下风格组合起来是比较适合:


线性:双色、不透明度、断点 
面性:单色、双色、不透明度、轻质感、明暗质感 
线面:线面 


在实际查看中,发现Tab的风格为单色+不透明度+断点风格。

为了和Tab拉开差异,最终确定以如下风格进行组合表现比较符合产品调性:

线性:双色

面性:单色、双色、不透明度、轻质感、明暗质感

线面:线面



4、提取造型

通过手绘或大脑想象进行造型构思,这里我就不展示手绘过程(行吧,我承认就是画的太丑了不敢放)。



5、设计执行

由于不同风格对图标造型构思有所影响,且图标类型很多,不同特点组合起来样式更多。案例精力有限,所以只以线性双色风格做演示,希望大家灵活使用。


这一步就是将手绘图形矢量化,在矢量化创意过程中,我们可能会对手绘的图形进一步简化细节或新增造型,这都很正常。只需注意在整个绘制过程中遵循图标设计规范,以及注意图标设计注意事项即可。

图标盒子使用


创意输出


Tips

在绘制造型时需注意,图标文案详解中的关键词也有优先级,以如下「礼品卡」图标为例,是表达礼品的意思多?还是表达卡的意思多?这个会影响图标中相关元素的面积大小。站在商业角度看可能会更倾向于方案2,突出礼品,来吸引用户。站在入口文案清晰传达的角度,可能我会更倾向于方案1。 

1or2?


最后对专属客服进行多风格尝试,最终效果如下:


附上部分绘制过程中的淘汰稿:



04图标资源输出

在将图标输出给前端前,需要沟通好使用何种格式,目前常用图标格式分为两大类: 


矢量格式

  • SVG:缩放无损、体积小、支持前端样式修改参数、单色情况下方便前端修改颜色来表达图标状态,减少重复上传。


位图格式

  • PNG:支持透明格式

  • JPG:兼容性强,适合大尺寸高饱和度图像

  • GIF:动态图标使用,缺点是透明情况下边缘容易出现锯齿。



这里主要介绍静态图标中,svg格式在工作中如何输出给前端同学使用(借助iconfont)。


svg图标交接方式:

1、图标资源优化

在iconfont官方绘制指南中有描述,在导出前需要按如下规则优化图标资源:



2、选中图标导出svg格式

以Figma为例,优化图标资源后,选中图标将输出格式选择为导出svg。



3、上传iconfont

在资源管理下,选择需要上传的位置。


选择上传图标 



4、选择颜色提交模式

去除颜色并提交:适合单色图标,去除颜色提交可以方便前端使用代码修改参数,减少不同状态图标重复上传。

保存颜色并提交:适合多色图标(注意:在单色情况下,选择保留颜色提交,前端则无法通过代码修改图标颜色)。



最后当我们把图标都上传好后,就可以将前端同学拉入团队项目中开心进行玩耍。

文章来源:站酷  作者:幺零三

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


一个简单的图标设计需求,如何做好差异化的?

高劲



每天努力的用心的去做设计,挺开心的,其中最开心的细节就是“思考自己的设计如何与别人的不一样”,让你的差异化产出得到认可后,这将是一件非常非常幸福的事情。

今天和大家分享一个前一阵子做的小案例,做的一个直播货币,名字叫星币。

思考过程如下:

  • 发散一些关键词
  • 造型上的差异思考
  • 配色上的差异思考
  • 加一点可爱的小表情

发散一些关键词

其实“星币”可发散的空间很小,因为已经非常具象了,无非就是星星、和钱币。

我们可以看下大概的感觉:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?

但是如果按照上面的感觉做,那最后出来的效果一定很常规,这也就有了我接下来的思考。

造型上的差异思考

我们仔细观察,一般参考中的星星都是非常规矩的,无非就是尖角圆角的区别:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?

要么就是胖瘦的区别:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?

所以这次我打算做一个不那么规矩的,有点跳远的感觉、又有点星火的感觉,所以我把星星的一个脚拉长:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?

然后再把两个胳膊往上抬一抬:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?

这样就好像是一个跳跃的小人一样,会相对来说活泼一些。

接下来为了让整体更加和谐,我在钱币周边挖了一个小口:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?

目的就是配合那只伸出来的脚,让整体感觉更加巧妙一点。

配色上的差异思考

其实星币很容易联想到金黄色,如果按照这个设想来做,那就会比较普通,所以我选择让他和直播、社区的配色一致:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?

这样在颜色方面也就有点自己的调性了。

加一点可爱的小表情

刚才不是说让这个星星看起来像个跳跃的小人嘛,那一般人都有表情的,所以我们完全可以再加上一个可爱的表情:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?

让整体更加生动形象。

当然,如果星币在面积小的场景下是看不清表情的,所以需要做成两种,一种是有表情的, 一种是没有表情的。最后,还可以再做个有质感的:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?

后来发现质感做的有点脏,于是又优化了一下质感,效果如下:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?

总结

整个构思和执行的过程还是可以的的,也得到了大家的认可,不过很可惜的是,后来名字改了,改成了能量币,哈哈哈哈,通过能量,我又联想到了太阳,太阳能嘛,执行原理都是一样的,大概效果如下:

一个简单的图标设计需求,腾讯设计师是如何做好差异化的?


文章来源:优设网    作者:菜心设计铺


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

两个图标改了13版,我是如何逐步优化的?

高劲

今天这个需求是直播间 pk 后,主播胜利与失败的两个状态设计,过程经历了很多次修改,现在来分享一下自己的感受。

  • 状态还是需要有一些设计感的
  • 结构不能乱画,要有基本逻辑在
  • 颜色层级一定要分明
  • 根据情绪设计形象
  • 根据情绪选择色系
状态还是需要有一些设计感的

其实最开始我有点天真了,以为这种状态直接画个圈圈,写个胜、败两个字,然后做下颜色区分就完事了:

两个图标改了13版,我是如何逐步优化的?

但这根本行不通,看起来像是未完成的交互稿,一点设计感都没有。

于是我开始思考如何增加设计感了。

结构不能乱画,要有基本逻辑在

如何增加设计感?

其实无非就是给这个状态增加细节呗,尤其是这个胜利的状态,我想到麦穗、翅膀等元素,最后选用了翅膀的元素,绘制了一个样例如下:

两个图标改了13版,我是如何逐步优化的?

但被说到这个结构是乱画的,哈哈,一下戳到了我的痛点,确实是胡乱画的,各种圆圈没什么逻辑。

于是后来仔细思考了一下,把圆圈分为三层:

  • 一层底托
  • 一层中间层放主形象
  • 一层修饰层放在最外面

效果如下:

两个图标改了13版,我是如何逐步优化的?

然后最中间放主形象,两边放翅膀,顶部放皇冠,最终效果如下:

两个图标改了13版,我是如何逐步优化的?

这样整体看起来结构就是清晰的。

我们可以看下结构清晰和不清晰的对比:

两个图标改了13版,我是如何逐步优化的?

后面因为整体调性需要可爱一点,所以把翅膀改成了比较圆润的造型:

两个图标改了13版,我是如何逐步优化的?

效果还算不错。

颜色层级一定要分明

其实这个点是我经常和大家强调的,但有时候确实是当局者迷,自己也容易犯这样的错,比如最开始的那个效果,很明显中间暗部和周边亮部没有拉开层次:

两个图标改了13版,我是如何逐步优化的?

所以在后面的取色上,会把中间暗部做的很深,形成鲜明对比:

两个图标改了13版,我是如何逐步优化的?

这样层次才会更加明显,不然就会糊在一起。

根据情绪设计形象

最开始本来想用圆形来做失败的状态,但是后来发现有点太惨淡了,于是想着还是加点细节吧,怎么加呢?

这时候是需求方那边给的一点灵感,说失败不就是很颓的样子,就拿把翅膀下沉和胜利形成反差不就可以了,我感觉说的挺有道理,于是就尝试做了下:

两个图标改了13版,我是如何逐步优化的?

确实还可以。

根据情绪选择色系

本来想着胜利用紫色、失败用蓝绿色:

两个图标改了13版,我是如何逐步优化的?

但是发现蓝绿色多少还是会有点分散“胜利”的注意力,于是就在思考,失败是表达一种负向的情绪,那是不是可以用灰一点的颜色?

于是尝试了几个不一样的灰度:

两个图标改了13版,我是如何逐步优化的?

最后选择最后最后那个几乎接近灰色的版本,干脆一点,对比强烈一点。

我们看下最终效果:

两个图标改了13版,我是如何逐步优化的?

再看下过程稿吧:

两个图标改了13版,我是如何逐步优化的?

调整了很对次,过程还是挺值得记录的,回头一看,很有成就感!

总结

以上就是这个小需求过程中总结的一些知识点,后面还会加入一些微动效,增加氛围感。

希望可以给大家一点灵感和启发。



文章来源:优设网       作者:菜心设计铺



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

我设计的图标明明很精致,可总监还是说不专业?

高劲

今天和大家聊一聊设计细节,每个提到的细节你们都能直接拿走,并且在项目中使用。

图标比例保持体量统一

我设计的图标明明很精致,可总监还是说不专业?

这个页面相信大家平时工作中都会做到,有很多图标放在一起,里面可能是一些常用菜单,这个设计有什么问题呢?相信看在这里的小伙伴,脑海里有无数答案?不统一,还是什么?我们来分析下。

我设计的图标明明很精致,可总监还是说不专业?

首先从大家关心的统一性来说,没有任何问题,图形都是在规范的图标栅格里面,也非常的统一,那么问题出在哪里?

我设计的图标明明很精致,可总监还是说不专业?

仔细观察,我们会发现「联系人」和「历史消息」的图标过于饱满,虽然他们尺寸一样,但是比「最近使用」这个图标要大很多,原因是什么呢?因为后面这两个图标从视觉来说他们的重量太重了,所以看起来会比较大。

我设计的图标明明很精致,可总监还是说不专业?

所以今天我们在做设计时候,如遇图标瘦长或者圆形等不够饱满的情况,请酌情将图标撑满像素,来保证整体一致的视觉体量感。

我设计的图标明明很精致,可总监还是说不专业?

如果图标较饱满的情况下,可使用微缩,来保证整体一致的视觉体量感。我们文中案例之所以出现这种情况,是因为没有定义出图形体量大小具体的绘制规则,所以导致图形过于饱满,看起来会显得视觉重量不一致。

我设计的图标明明很精致,可总监还是说不专业?

所以我们第一步,对图形绘制规则进行优化,保证图形在页面中体感一致,我提供了 4 个基础图形绘制技巧和对应的辅助线参考图。

我设计的图标明明很精致,可总监还是说不专业?

所以在实际应用时,可略微在可变范围内微调,对于过于饱满的图形,高度变低时,需要增加宽度来保证视觉重量相等。

我设计的图标明明很精致,可总监还是说不专业?

这样调整后,整体的图标视觉重量就会更加均衡,也会更加规则。所以,今天如果你发现你们产品页面中图标大小体量不一样,或许是因为你忘记对图标体量进行规范。

图标尺寸比例怎么定?

图标我们在界面中使用场景很多,很多时候用大图标,有时候用小图标,我们该如何去定义小图标大小,大图标大小,这是很多同学非常纠结的。有时候就乱定,导致页面没有秩序感。

我设计的图标明明很精致,可总监还是说不专业?

第一步,我们要先去梳理页面场景,看看哪些地方会用到图标,把全部场景列出来。

我设计的图标明明很精致,可总监还是说不专业?

列出来后,我们根据你 APP 设计的最小单元的倍数来定义图标风格,比如支付宝最小单元是 4,所有间距都是 4 的倍数,那么在图标这里,也是同样的原则,全部的图标尺寸,我们根据 4 的倍数去定义几种大小,比如 24X24,32X32,44X44,56X56,72X72 等等,如果页面中不够用,同样的在 4 的倍数基础上进行新增。

图标放大后,线条粗细该如何定义?

我相信大家都有这种情况,一组图标在使用时候,会出现在各个场景,这个时候需要放大,甚至缩小,但是不知道放大后图标粗细该如何确定,直接放大,直接缩小会出现图标的细节粗细有问题,那么这种时候该如何处理?

我设计的图标明明很精致,可总监还是说不专业?

直接放大缩小,图标粗细没有任何说法,而且会显得比例非常奇怪,如何去解决这个问题?

我设计的图标明明很精致,可总监还是说不专业?

第一步:我们需要确定图标大小和线条比例,以支付宝为例,首先要确定图标大小和线条粗细比例为 14:1。当然每个比例是不一样的,你可以根据你们产品的调性去决定,如果你图标比较细,你可以设定为 10:1,这些都没有固定标准。

我设计的图标明明很精致,可总监还是说不专业?

这样的话,假如你图标需要设计一个 140X140 的大小,那么你的图标粗细就应该是 10px。

我设计的图标明明很精致,可总监还是说不专业?

如果你图标是 112 尺寸大小,那么按照 14:1 的比例,那么你图标线条粗细就应该是 8px,以此推动,通过这样的方式来保证图形的一致性和稳定性。

最后

以上三个小点,是绝大多设计师忽略掉的,也是设计中不太注意的细节,但是设计的专业程度往往就是由这些细节组成,今天这 3 个技巧,看会了之后,你就可以直接在项目中去运用。





文章来源:优设网       作者:我们的设计日记



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

高劲


不知道大家有没有被说过,设计做的不精致?拿图标举例,其实不精致的原因就是统一性没做好。我们总说做图标要统一,但是到底要统一哪些要素?有没有一个完整的自检表呢?以前我总结了 5 到 6 个要统一的要素,最近观察大家的练习之后,直接扩增到 9 个了,今天就以线形图标为例,看看我们需要统一哪 9 个要素。

大纲如下:

  1. 大小统一
  2. 圆角统一
  3. 语言统一
  4. 粗细统一
  5. 疏密统一
  6. 间距统一
  7. 比例统一
  8. 正负形统一
  9. 角度统一

大小统一

这个很容易理解,就是一组图标看起来大小是一致的。但是最近发现了一个比较重要的点,就是很多同学做一组练习,相邻的图标都差不太多,但是隔的比较远的图标放在一起就差很多了,比如下面这几个图标,就是逐渐变大的:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

所以对于大小统一,我们必须要做到,一组图标里,任意两个图标拿出来都是大小统一的,否则就是不及格。

保持大小统一的方法见这篇 – 图标设计规范。

圆角统一

圆角统一也是比较好理解的点,无非就是圆角大小,像下面这两个图标:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

如果圆角差很多,你很容易发现,因为都是差不多大小的矩形,但是我们很容易忽略一些细节,比如下面第一个图标的三角形,和旁边的日历相比,就过于尖锐:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

这是图标里面很细的细节,所以容易被忽视,大家一定要重视。

语言统一

语言统一你可以理解为设计风格统一,如果一组图标里面出现了多种风格,那会显得非常不专业。

比如下面这组练习:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

大体看好像是一种语言,但仔细观察其实还是有很多细节不统一的,比如外轮廓上面有的有白色,有的没有,白色还分带描边和不带描边:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

这就是在语言上不统一的案例,大家在做练习的时候,一定要想清楚你的语言是什么。

粗细统一

粗细统一就不用说了吧,基本就是用在线性图标线条粗的,比如像这种比较明显的粗细不一致,就不应该出现了:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

这都是最最基础的问题。

疏密统一

疏密统一其实是很多新人朋友容易犯的错,比如下面这一组图标:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

大部分地方是比较透气疏松的,但是只有第二个比较密集,这样就会让人感觉比较突兀,整体不够和谐。这就是疏密程度的统一性,一定要把握住节奏感,否则就会不舒服。

间距统一

这个点一般用在断线图标上,也就是你开口大小的统一性,比如一个开很大,一个开很小:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

那就证明细节没有做到位。

比例统一

比例可以分很多种,比如颜色比例,像下面这个原作的颜色比例就没有太统一:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

在小 y 优化临摹之后,达到了颜色比例的平衡:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

再比如之前说的一个案例,粗细线条的比例:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

  • 第一个图标,粗线与细线的比例:95:5
  • 第二个图标,粗线与细线的比例:70:30
  • 第三个图标,粗线与细线的比例:100:0

在这样不统一的情况下,图标是一定不会精致的。这些都是比例统一问题出现的实际场景。

正负形统一

正负形也是没那么容易看出来的,举个例子,下面这组周楠做的图标,乍一看没什么问题,但是仔细一观察,其实我们会发现,白色面积的重量其实是不统一的,那个消息上面的“#”会偏重一点:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

当优化之后,我们再看:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

整体就会比之前统一精致很多。

角度统一

角度,也是增加图标统一感的因素之一,最常见的角度统一方式就是按照一定的倍数来制定规范,比如 30 度的倍数:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

再举一个角度其他方面的例子,在做下面这组图标的时候,最初没有考虑断线的规律:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

所以看久了会觉得有些凌乱,于是我将断线处定为右下角 45 度,如遇到圆角拐角处,可挪动靠近拐角处进行断线:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

这样我们就会看到所有的图标断线位置都大致出现在右下角的地方,最终效果如下:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

很大程度上提高了图标的统一性,并且在延展执行的时候节省了大量的思考时间(思考在哪里断)。

但是对于断线的位置是否一定要规定其出现的角度,我觉得不一定,也可以从其他角度考虑,但最终的目的还是让整体统一和谐,且延展性高。

总结

以上就是目前总结的 9 个需要统一的点,只要能把所有的统一性做好,精致一定是没问题的。






文章来源:优设网     作者:菜心设计铺



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何选择合适的图标?来看这份图标类型和风格汇总

高劲


看到好的图标我们会习惯性地截图保存,但随着收集的图标越来越多,会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题!

图标是基本但重要的表达元素,在 UI 设计中有着不可替代的作用。

常见的分类是简单的线性分类,缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。

如何选择合适的图标?来看这份图标类型和风格汇总

图片定义图标类型

对图标进行分类时,普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标,样式很简单,但可以划分到多个类别中。

如何选择合适的图标?来看这份图标类型和风格汇总

面对这样的问题,推荐使用系统性的结构来划分图标类别:

  • 首先将图标按尺寸大小分为两类;
  • 继续细分对应的面性、线性、线面结合、扁平、拟物化等类型;
  • 最后选择标准、容器、渐变、3D、手绘、阴影等风格。

如何选择合适的图标?来看这份图标类型和风格汇总

利用这种结构层级,可以明确定义图标类别。

图标尺寸

图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷,但把它缩小到 16px,这些酷炫的效果都无法呈现出来。

如何选择合适的图标?来看这份图标类型和风格汇总

在对图标归类时,首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类:

  • 大尺寸图标通常指标志性图标,例如 App 启动图标或代表品牌形象;
  • 小尺寸图标用作 UI 控件,起到引导功能或装饰目的。

图标类型

确定图标尺寸后,进一步细分图标类型:

  • 面性图标
  • 线性图标
  • 线面结合图标
  • 扁平化图标
  • 拟物化图标

如何选择合适的图标?来看这份图标类型和风格汇总

每个类型对应的图标绘制方法看 → https://www.uisdc.com/zt/icon-drawing-guide

利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中,所以在小图标分类中没有展示。

如何选择合适的图标?来看这份图标类型和风格汇总

图标组成

图标尺寸越小,展示的细节越有限。相比于大图标,小图标的尺寸有一定局限性,图标组成包括标准和容器两种。

如何选择合适的图标?来看这份图标类型和风格汇总

大图标利用尺寸上的优势能展示更多内容,分为多种组成形式。

如何选择合适的图标?来看这份图标类型和风格汇总

小尺寸图标样式

简单的图像可以更具包容性。图标的尺寸越小,越考验设计师传达信息的能力。

1. 面性图标

标准面性图标

如何选择合适的图标?来看这份图标类型和风格汇总

面性图标易识别,适合应用在小尺寸图标中。

关键点:

  • 确保图标有清晰的边缘,避免羽化;
  • 图标复杂程度随着尺寸变小而灵活调整。

如何选择合适的图标?来看这份图标类型和风格汇总

带有背景色的面性图标

彩色背景为简约设计带来了更多可能。通过这个技巧使面性图标更友好,更具吸引力。

关键点:

  • 为背景选择 4-12 种颜色。
  • 考虑图标是浅色还是深色,是否适用于所有背景色。
  • 在彩色背景上使用白色图标比黑色效果更好。

如何选择合适的图标?来看这份图标类型和风格汇总

2. 线性图标

标准线性图标

如何选择合适的图标?来看这份图标类型和风格汇总

线性图标因为简洁性和现代性而受到用户的欢迎。随着屏显越来越清晰,我们可以更加大胆地使用线性图标。

关键点:

  • 确保轮廓像素清晰。
  • 越简单越好。
  • 追求更简单的细节。

如何选择合适的图标?来看这份图标类型和风格汇总

双色线性图标

如何选择合适的图标?来看这份图标类型和风格汇总

设计小尺寸图标时,必须放弃细节并强调简单的形状。但当使用一种颜色效果不太理想时,可以考虑添加一些颜色。

关键点:

  • 使用两种搭配和谐的颜色。
  • 考虑将一种颜色用于主要形状,另一种颜色用于细节。
  • 少即是多。
  • 使用粗线条。

如何选择合适的图标?来看这份图标类型和风格汇总

3. 线面结合图标

如何选择合适的图标?来看这份图标类型和风格汇总

线面结合拥有更多细节,提升用户的愉悦感。

关键点:

  • 最好使用深色而不是纯黑色描边。
  • 限制图标的颜色种类。
  • 避免过多细节。

如何选择合适的图标?来看这份图标类型和风格汇总

4. 扁平化图标

如何选择合适的图标?来看这份图标类型和风格汇总

扁平化图标既简单又巧妙,表达品牌形象的同时具有丰富的内涵。

关键点:

  • 避免在<20px 的尺寸中使用此图标样式。
  • 选择 2-3 种颜色,可以一起使用。
  • 一种颜色为主色,另一种颜色应为高光/细节色。

如何选择合适的图标?来看这份图标类型和风格汇总

大尺寸图标样式

大尺寸图标在界面中使用较少,更多用于产品标识或品牌宣传。

1. 线性图标

标准线性图标

如何选择合适的图标?来看这份图标类型和风格汇总

在设计任何图标前,都可以先创建一个线性轮廓,确保形状看起来足够美观后再添加颜色。

关键点:

  • 这类图标最容易制作。
  • 避免出现轮廓羽化。
  • 线条粗细要一致。
  • 不要害怕添加细节。

如何选择合适的图标?来看这份图标类型和风格汇总

渐变线性图标

如何选择合适的图标?来看这份图标类型和风格汇总

添加一些渐变能让原本单一的线性图标赋予更多的个性。

关键点:

  • 在小尺寸图标中添加渐变会降低图标的可视性。
  • 选择渐变时,首先考虑邻近色。
  • 线条越粗,渐变越明显。
  • 线条细节越多,渐变越明显。

如何选择合适的图标?来看这份图标类型和风格汇总

等距线性图标

如何选择合适的图标?来看这份图标类型和风格汇总

2.5D 图标做起来会花费很多时间,但效果往往会很好。在设计汽车、房屋、家具等实体产品时,建议优先使用 2.5D 图标。

关键点:

  • 同一组图标要使用相同的等轴测网格。
  • 2.5D 等轴图标很复杂,在较小的尺寸下会失去作用。
  • 如果可以,让所有图标都朝向同一个方向。

如何选择合适的图标?来看这份图标类型和风格汇总

手绘线性图标

如何选择合适的图标?来看这份图标类型和风格汇总

随着设计趋势向简约化、扁平化发展,很多设计师丧失了手绘图标的能力。实际上手绘图标让品牌更真实甚至更有趣。

关键点:

  • 手绘图标扫描后,再用数字方式重新绘制,这样可以保证线条粗细一致。
  • 尽量让所有的线条保持相同的颜色,这会使文件更小。

如何选择合适的图标?来看这份图标类型和风格汇总

断线图标

如何选择合适的图标?来看这份图标类型和风格汇总

标准的线性图标看起来可能会很单调,而简单灵活的断线处理能为图标增加更多个性。

关键点:

  • 断线粗细应该相同。
  • 图标的中断次数尽可能保持一致。

如何选择合适的图标?来看这份图标类型和风格汇总

双色线性图标

如何选择合适的图标?来看这份图标类型和风格汇总

关键点:

确保两种颜色具有相同的对比度,否则可能会导致用户看不清其中一种颜色,因此无法识别完整的图标。例如左下角的浅绿色对于视力弱的用户来说就很不友好。

如何选择合适的图标?来看这份图标类型和风格汇总

2. 线面结合图标

线面结合图标可以看作是添加颜色后的线性图标。线面结合具有很强的轮廓,让图标能够清晰可见。

标准线面结合图标

如何选择合适的图标?来看这份图标类型和风格汇总

关键点:

  • 使用有限的颜色和统一的线条风格,使图标具有品牌性。
  • 使用线条和点来添加更多细节。
  • 避免使用纯黑色描边。

如何选择合适的图标?来看这份图标类型和风格汇总

带有背景色的线面结合图标

如何选择合适的图标?来看这份图标类型和风格汇总

关键点:

  • 描边断开时,图标效果很更好。
  • 避免在小尺寸时使用。
  • 使用有限的调色板。
  • 考虑使用较浅的描边/背景色。
  • 考虑在图标下方添加一条水平线,使图形具有相同的位置(中间的图标示例)

如何选择合适的图标?来看这份图标类型和风格汇总

错位线面结合图标

如何选择合适的图标?来看这份图标类型和风格汇总

当填充色与描边错位时,颜色移到右边图标左上角留出高光,带来一种清新的感觉。

关键点:

  • 考虑使用断线描边。
  • 使用有限的调色板。
  • 确保描边和填充色简单且一致。

如何选择合适的图标?来看这份图标类型和风格汇总

色块图标

如何选择合适的图标?来看这份图标类型和风格汇总

这种风格的图标的特点在于并不依赖于颜色,仅将其用于装饰。

关键点:

  • 选择有限的调色板。
  • 先关注轮廓再关注颜色,颜色仅用于装饰。
  • 避免形状色和背景色过于相似,降低可见度。

如何选择合适的图标?来看这份图标类型和风格汇总

单色线面结合图标

如何选择合适的图标?来看这份图标类型和风格汇总

关键点:

  • 避免使用暖色调尤其是红色,会让用户感到压抑。
  • 首先确定合适的描边颜色,再考虑填充色。

如何选择合适的图标?来看这份图标类型和风格汇总

3. 扁平化图标

扁平化图标通常没有描边,主要使用形状和颜色来完成组合搭配。简洁、友好和适当的细节,让这类图标非常具有吸引力。

标准扁平化图标

如何选择合适的图标?来看这份图标类型和风格汇总

关键点:

  • 使用柔和的调色板,避免明亮的颜色。
  • 分清简化和添加细节之间的界限。

如何选择合适的图标?来看这份图标类型和风格汇总

带有容器的扁平化图标

如何选择合适的图标?来看这份图标类型和风格汇总

尝试让图形打破容器,带来动态的感觉。

关键点:

  • 尝试让图形从容器中凸出来,以增加深度。
  • 因为在容器中,可以添加更多的细节而不用担心图形变得混乱。
  • 尝试使用正方形、椭圆形或与品牌相关的容器形状。

如何选择合适的图标?来看这份图标类型和风格汇总

等距图标

如何选择合适的图标?来看这份图标类型和风格汇总

关键点:

  • 保持所有图标朝向同一方向。
  • 选择恰当的调色板能让图标看起来更一致。
  • 避免小尺寸使用。

如何选择合适的图标?来看这份图标类型和风格汇总

半阴影扁平图标

如何选择合适的图标?来看这份图标类型和风格汇总

半阴影图标是在扁平图标的基础上添加半色调阴影,得到更具个性的图标。

关键点:

  • 小尺寸图标不起作用。
  • 使用有限的调色板。
  • 确保所有的图标色调相似。

如何选择合适的图标?来看这份图标类型和风格汇总

长阴影扁平图标

如何选择合适的图标?来看这份图标类型和风格汇总

当图标位于容器中时,可以考虑添加长阴影,主要包括纯色阴影和渐变阴影两种类型。

关键点:

  • 使容器具有相同的颜色或类似的色调。
  • 只在大尺寸图标中使用。
  • 将半阴影与长阴影组合使用效果更好。

如何选择合适的图标?来看这份图标类型和风格汇总

4. 拟物化图标

拟物化图标实际上已经包含了大部分的样式,例如它们是立体的,有丰富的渐变和阴影。

如何选择合适的图标?来看这份图标类型和风格汇总

这种风格的图标看起来与现实生活中的图标尽可能类似,让用户感到更舒适。

关键点:

  • 考虑添加底部阴影。
  • 使光源来自同一方向。
  • 确保图标都朝向相同的方向。

目前绝大多数界面不再有这种风格的图标,可以考虑使用 3D 建模来实现这种效果。

如何选择合适的图标?来看这份图标类型和风格汇总

总结

希望大家能对图标的分类及设计有更全面深入的认识,从而构建一套完整的图标思维体系。






文章来源:优设网       作者:Clip设计夹



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

高劲

这篇文章主要分享怎么做一套毛玻璃拟态图标,以及在这基础上如何发散创意。带着这个想法,我开始逛“避寒寺”和“追波”,找可以参考的作品。这套作品我挺喜欢的,作者还做出了 3D 视角的。

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

先分析一下图标的结构。图标有三层:底部几何色块、毛玻璃主造型,带有含义的白色图形。

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

再分析俯视角度时图标的表现,方便用工具表现。

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

最后是颜色的归纳。作者用了饱和度非常高的颜色,基本都在右上角最尖尖的位置。

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

分析完以后可以开始临摹了…因为造型比较简单,我没有临摹,直接创意发散做了另一套。选主题的时候我随便开了个 APP(当时打开的是微博),觉得个人中心的快捷入口图标主题可以拿来试试。我选了深色作为背景,所以这套图标用到界面会比较难适配,和原 APP 风格也不符合。在这里单纯利用主题来做练习。

做底部的几何色块时,形状可以尽量跟主图形相关性大一些,加强它们之间的关联性,如果实在没法关联的也不必勉强。

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

我降低了几何色块的面积,增加了多一层毛玻璃形状层,并且让白色的图形更灵活,而不是雕刻在毛玻璃层上。这是我理解了原作者图标的结构之后,自己进行的改变,效果还行。

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

做的过程中,发现草稿箱如果里面放一张白色的卡纸,视觉效果还不错,所以我又做了另一种效果。最终呈现出来的效果只有草稿箱比较出彩,其它很牵强。

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

拿「照片」这个图标来进行拆分,参数分别如下:

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

这是最后呈现的效果:

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

封面图参考了小米的屏保。我用 sketch 做的,效果一般,可能用 ps 做会更逼真吧。

实战案例!「毛玻璃拟态」图标的临摹思路与原创技巧

临摹一套图标的时候,要带着目的去临摹,分析原作者每一步的处理。然后把图标拆分成不同的变量,修改这些变量的时候或许会得到不错的想法。





文章来源:优设网       作者:牙线y2x



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




用一个实战案例,帮你掌握原创图标方法论

高劲


文章主路径如下:

  • 找到优秀作品准备临摹
  • 分析作者设计语言拆分变量
  • 临摹过程与思考
  • 延展半原创图标
  • 修改变量得到原创图标

找到优秀作品准备临摹

这组图标非常有活力和创意,色彩很活泼,原作者是菜心。我也常用微渐变来做图标,但是没有尝试过加上描边,并且这种强烈的对比色也在我习惯用色外。临摹这组图标可以突破我的用色习惯。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

分析作者设计语言拆分变量

我们先逐步拆分,再进行总结。

第一步,分析原作品的结构。

图标可以拆分为线、面和小元素。我在 sketch 做的,形状的线面转换比较简单。线跟面的图层要分开,因为面图层带有反光,而线图层没有。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

第二步,确定光源的方向。

从作者的表现来看,光源在左上角,因此所有的图标应该遵循同一光源方向的原则。光源的表现会因为材质的不同而不同。比如「LIKE 灯牌」带有自发光、「铃铛」带有高光。所有物体的反光比受光面要亮一点,让人感觉很通透。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

第三步,分析原作的颜色。

不要吸色,先自己调色。刚开始会有点难,但是这种练习会帮助我们提高眼睛辨色的能力,提高色感。对比自己和原作的颜色,发现我调色不够准确,没有做到不同颜色饱和度一致,渐变色跳跃比较大。这表示我还没有理解原作的用色,后续临摹的时候需要修正。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

第四步,总结作者的设计语言。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

临摹过程与思考

分析完以后开始临摹。

先说一下体量感的问题,因为有很多设计师在做图标的时候会忽略这一点。常见的方法是拿图标框来限定,但是问题又来了,有的人限定得太死板,不会根据实际情况来微调。针对这种情况,可以拿别人的整套图标作品做反推,在临摹的时候,留意别人对体量感的把握。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

定义了大概的体量之后,我会观察图标大致的形状和角度,凭印象先把造型做出来。过程中没有把原作品放在旁边,最多在忘记的时候去看一眼。这样做的好处是,可以发现自己观察的时候漏了什么(这个方法是跟菜心学的)。下图就是第一次临摹的草稿,orz…铃铛最不好画了。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

拿着草稿来对比原图,把自己错漏的地方找出来。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

统计错漏的地方,重新调整图标,达到 90%以上的相似度后,给图标上色。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

延展半原创图标

做完这一步后,大概理解了作者做这套图标时的逻辑以及方法。我们可以开始做半原创的设计,在原作的基础上延展几个图标。我选择电商主题的「充值、签到 、赚钱、砍价」这四个图标来做。

我们先找参考素材。不管画图标、做界面,还是画插画,学会找参考非常重要。参考不是照抄,而是给我们提供灵感来源,切记不要凭空想象。有一天,团队的设计师跟我说她不会画衣服的褶皱,画起来总是怪怪的。我叫她上网找相似衣服的图片,看一下别人的褶皱和光影,她就茅塞顿开了。因为她总是用“原创”局限自己,没有找实物参考。

原创绝不是凭空想象,而是有源设计的融合。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

结合作者的设计语言做延展图标,放在原作里面也不违和的话,就成功一大半啦。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

修改变量得到原创图标

接下来是原创时间~我们将作者的设计语言其中一些变量改变,会得出不同的结果。

用一个实战案例,帮你掌握原创图标方法论(含源文件)

用一个实战案例,帮你掌握原创图标方法论(含源文件)

用一个实战案例,帮你掌握原创图标方法论(含源文件)




文章来源:优设网       作者:牙线y2x



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




从零开始画图标系列:超全面的基础知识

高劲


在 UI 的设计体系中,图标是最重要的组成部分之一,是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念,以及正确绘制的方法,是入门 UI设计的必备条件。

网上现存不少关于图标绘制的文章和教学,但不是太笼统,就是太片面。即使看了很多这种碎片化的知识,也很难在我们的认知中对它有比较全面、系统的认识,所以大多数初级的 UI设计师,始终画不好图标。

针对这个问题,我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法,让所有设计新人更快地上手图标设计。

本文共分为5个部分:

  • 图标简介:先对图标有个整体的认识,了解图标总共有哪些类型和应用场景。
  • 工具图标:最常见的工具型图标的相关规范,以及对应的设计案例演示。
  • 装饰图标:近年来使用越来越广泛的视觉型图标设计认识,以及对应的讲解。
  • 启动图标:讲解启动图标的相关规范,如何高效的进行设计。
  • 应用案例:介绍在一个 UI项目中,要应用多少种图标规格,如何设计出正确的图标。

图标的基本认识

图标,是一种图形化的标识,它有广义和狭义两种概念,广义指的是所有现实中有明确指向含义的图形符号,狭义主要指在计算机设备界面中的图形符号,有非常大的覆盖范围。

对于 UI设计师而言,我们主要针对的就是狭义的概念,它是 UI 界面视觉组成的关键元素之一。

在当下最常见的扁平化设计风格中,界面的实际视觉组成只有4种元素,图片、文字、几何图形、图标。

从零开始画图标系列:超全面的基础知识

△ 由图片、文字、几何、图标组成的界面

可以说,图片、文字、几何图形的运用,都只用到排版的技巧,而图标,是 UI设计中除了插画元素以外唯一需要我们「绘制」、「创作」的元素,一涉及到这两件事,难度就直线上升了。

本来往界面里丢一些方方圆圆、贴几张图、填一些字,就可以把界面做出来了,比如 Clear APP,不仅工作量少,而且还符合极简原则,为什么还要吃力不讨好的设计图标?

从零开始画图标系列:超全面的基础知识

△ Clear APP 的截图

这就涉及图标作用的探讨了,为了节约篇幅,更快进入大家最想看的重点干货,我就不长篇大论从上古时期人类与图形符号的纠葛开始写了,就谈对于图形界面本身,为什么图标有这么重要的地位,没它不行?

有两个原因,第一文字虽然也是一种图形符号,但相对于图标而言,文字实在太复杂了,在识别效率上有先天的劣势。再者,不同的语言,文字的长度也不同,如果换成阿拉伯语或者俄罗斯语,或许一行还装不下所有文字。图标可以以一种更高效的方式,将我们想要传递的信息进行浓缩,不仅易于识别,也能让界面更简洁,利于排版,比如下方案例。

从零开始画图标系列:超全面的基础知识

△ 应用文字替换了图标的对比

第二点,就是关于视觉的观赏性。有些页面中,如果把图标去掉了,也丝毫不会影响我们的操作效率,以及对内容的理解。但没有图标,缺少这些点缀,我们就会觉得这个页面看起来太枯燥了,不得劲,最好的例子就是应用的设置页了,见下方案例。

从零开始画图标系列:超全面的基础知识

△ 设置页有图标和没有图标的对比

既然知道了图标的作用和重要性,那么接下来,就要进一步了解在工作中我们要设计哪些图标。

可以先划分成三种大类:

  • 工具图标
  • 装饰图标
  • 启动图标

下面,我们将对它们分别进行介绍,以及展示相关的设计类型,方便读者在开始学习具体设计前,对 UI设计会创作的图标有更全面的认识。

工具图标

首先,我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型,即应用内有明确功能、提示含义的标识。作为最常见的图标类型,我们就不需要做太多的说明了。

从零开始画图标系列:超全面的基础知识

△ 常见的工具图标

虽然理解起来容易,但是它所包含的设计样式却并不少,可以把它们归纳成线性、面性两个大类,再分别进行细分。

1. 风格1:线性风格

线性图标,即图形是通过线条的描边轮廓勾勒出来的。多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓,比如上图案例,线性图标的创作空间看似不多,但实际上有非常多的调整空间。

下面我们把它们罗列出来。

从零开始画图标系列:超全面的基础知识

△ 线性风格的工具图标

2. 风格2:面性风格

面性图标,即使用对内容区域进行色彩填充的图标样式。同样,在这类图标中,也不是只能应用纯色的方式进行填充,还有非常多的视觉表现类型。

从零开始画图标系列:超全面的基础知识

△ 面性风格的工具图标

3. 风格3:混合风格

当然,在设计图标类型的时候,也不一定非线性和面性不可,有一些热衷创造和尝试的设计师,还创作出了混合型的图标,既有线性描边的轮廓,又有色彩填充的区域。常见的样式类型如下:

从零开始画图标系列:超全面的基础知识

△ 混合风格的工具图标

装饰图标

和工具图标比起来,装饰图标的视觉性作用更多。对于一些比较复杂的应用来说,过分的简约并不能弥补信息过多的信噪问题,我们要通过丰富视觉体验的方法来增加内容的观赏性,减少一屏内显示内容的数量。

比如在分类列表里,是可以只使用线框和文字把大量内容浓缩到一屏以内,但实际浏览效率并不会增加,而且并不美观。

从零开始画图标系列:超全面的基础知识

△ 装饰图标在识别性上的作用

还有就是国内的界面设计环境,会根据运营需求设计进行特殊化处理,尤其在电商领域,首屏的图标都会改成首页风格的样式,增加活动氛围。

从零开始画图标系列:超全面的基础知识

△ 节日活动中的装饰图标

装饰性的图标设计,虽然没有明确的规范该怎么做,效果怎么好怎么来,但最常见的类型有四种,下面分别进行介绍。

1. 扁平风格

扁平风格的装饰图标,通常可以理解成是用扁平插画的方式画出来的图标,除了继承扁平的纯色填充特性以外,也比普通图标有更丰富的细节与趣味性。

从零开始画图标系列:超全面的基础知识

△ 扁平风格的装饰图标

2. 拟物风格

拟物风格的图标现在出现的频率越来越高,集中在大型的运营活动中,通常这些活动会通过拟物的方式将头部设计成有故事性的场景,所以自然顶部的相关图标使用拟物的设计形式会更贴合。

从零开始画图标系列:超全面的基础知识

△ 拟物风格的装饰图标

3. 2.5D风格

2.5D是一种偏卡通、像素画风格的扁平设计类型,在一些非必要的设计环境中,使用2.5D会比较容易搭配主流的界面设计风格,有更强的趣味性和层次感。

从零开始画图标系列:超全面的基础知识

△ 2.5D风格的装饰图标

4. 炫彩渐变

这是一个拗口的原创名词,找不到更合适的形容,还是觉得浮夸点符合它的气质。这种图标,就是通过一系列非常激进的渐变和撞色实现,通常还会使用彩色的阴影。

使用这样图标的区域,通常都会呈现出一副五彩斑斓的景象,只有在内容非常丰富且用户偏向年轻化的产品中可以使用,是一种非常难驾驭的设计风格。

从零开始画图标系列:超全面的基础知识

△ 炫彩渐变风格的装饰图标

5. 实物贴图

最后一种,就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的,但想想还是放进来合适。因为这种图标的出现频率非常高,有必要在后面掌握它的做法。

从零开始画图标系列:超全面的基础知识

△ 应用摄影实物的装饰图标

启动图标

最后,就要说说启动图标了。启动图标的设计比前面两种类型的图标说起来更难,因为它实际上就是把「LOGO嵌套进系统图标模版」的图标。

除了掌握必要的规范以外,启动图标的主体物设计就是 LOGO 的设计,已经超出了图标绘制本身的知识点。所以,在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习,这里我们先来了解一下它有哪几种设计形式。

1. 文字形式

使用了文字作为图标主体物的类型,通常是这类应用本身的品牌 LOGO 就使用了文字,所以这里就把字体照搬过来。

从零开始画图标系列:超全面的基础知识

△ 文字类的启动图标

2. 图标形式

对于一些偏工具,适合用简单图形传达应用功能的启动图标,就会采取使用工具图标的方式设计。

从零开始画图标系列:超全面的基础知识

△ 图标类的启动图标

3. 图形图标

图形形式看起来和图标形式很接近,但实际上完全不属于同一类型,之所以它不是图标,是因为这类图标的主体图形是一种经过高度抽象化的标识,传达的是品牌性,而不是图形的含义。

从零开始画图标系列:超全面的基础知识

△ 图形类的启动图标

4. 插画形式

对于一些比较纯粹的应用,如读本、漫画、幼儿类应用,就热衷于采用卡通形象作为图标的主体进行设计。

从零开始画图标系列:超全面的基础知识

△ 插画类的启动图标

5. 拟物形式

虽然现在扁平化的设计占据主导地位,但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说,拟物设计所传递的信息往往更直观和准确。

从零开始画图标系列:超全面的基础知识

△ 拟物类的启动图标

当然,还有其它的数之不尽的启动图标设计方式,比如明星大头照、摄影图、游戏原画等,但理解上面这些类型就够了。

前面介绍的三种图标,就是今后在进入 UI 行业设计的内容。虽然图标看起来简单,但可以玩出的花样不少。除了正确设计出图标以外,高低阶的 UI设计师之间的区别也包含图标设计类型掌握的多寡。

所以,在开始学习前,不要将设计图标的目标局限在最简单的图形绘制上,还有很多有趣的设计形式等待你们去尝试。

学习图标所需的软件

了解了图标的类型,就要开始了解做出这些图标应该使用哪些软件了。通常,UI 主要使用的设计软件包含 PS、AI、Sketch、XD四款,理论上,它们都包含了图标绘制的功能,如果我直接告诉大家去精通这4款软件那么画图标就一点难度都没有了,这是非常不负责任的,所以为了对新人更友好一点(如果已经全部精通了,就直接略过),我会分析一遍这四款软件对于图标设计的优劣,以及需要掌握的部分。

从零开始画图标系列:超全面的基础知识

1. Sketch / XD

这两款软件是我们设计 UI 界面的主力。但大家一定要记得,它们主要的功能是用来完成 UI 界面元素的排版,而不是创作和绘图。

虽然它们都包含路径、钢笔、布尔运算等功能(Sketch 相对 XD 更完善一点),想要绘制一些非常基础的线性或面性图标时没有问题,但只要涉及到比较复杂的图形,往往就束手无策。

所以,我建议所有学习 UI 的新人,都不要从这两个软件中入手,而是先掌握 PS 和 AI,后面想要快速实现一些简单的图标时,自然懂得如何使用 Sketch 和 XD。

可以说,PS 和 AI 的应用决定了我们图标设计的上限,而 Sketch 和 XD 是下限,所以,把上限拓展得越高越好。

2. Photoshop

从零开始画图标系列:超全面的基础知识

PS 是一款无论什么东西都设计得出来的设计软件,但是,它本质上是一款「位图软件」。后续的文章中会提及,在界面中采用矢量格式的图标是最理想的,而 PS 针对矢量的操作并不便捷,比如将矢量图层复制到其它软件中。

实际项目中,我们会用 PS 设计一些视觉表现相对复杂的图标,例如启动图标、拟物图标、实物图标等等。

绘制图标需要用到的 PS 功能并不太多,需要在前期学习这个软件的过程中加以筛选,重点是以下知识点:

  • 路径创建和调整
  • 钢笔工具和锚点
  • 路径图层
  • 布尔运算
  • 图层属性

虽然 PS 在实际项目中是用来画复杂的图标,但并不妨碍我们使用 PS 从最基础的图标开始画起,因为想要熟练掌握上方的知识点,简易的工具图标是最好的磨刀石,之后再学习 AI 的操作,就可以更快的上手。

3. Illastrator

从零开始画图标系列:超全面的基础知识

AI 也是 UI 设计必学的一款软件,它的功能异常丰富,主要用来设计矢量图形。对比 PS,它有更好的矢量操作支持,对于路径细节的调整上,是最全面最细腻的软件,并且 AI 中的图形还可以直接复制粘贴到其它应用的画布中。

如果掌握了上方提及的 PS 基础,那么学习 AI 也就轻松了不少,其中,AI 设计图标中有三个特殊的功能是需要重点掌握和学习的:

  • 形状生成器
  • 轮廓化描边
  • 路径查找器

花几个晚上,掌握了 PS 和 AI 的相关知识点以后,就为我们后续的学习提供了技术支持,可以进入下一阶段了。

结尾

这是图标系列文章的第一篇,信息量不算少。所以我们在结尾再总结一次,方便大家记忆。

  • 知识点一:在 UI 的界面中,图标的主要作用是用来高效地传递信息,以及起到美化界面的作用。
  • 知识点二:UI 会涉及的图标类型主要有三种,工具图标、装饰图标、应用图标。
  • 知识点三:工具图标,是界面中用来传递信息的图形符号,主要包含线性、面性、混合三种设计风格。
  • 知识点四:装饰图标,是界面中用来提升视觉体验的图形,主要包含扁平、拟物、2.5D、渐变炫彩等设计风格。
  • 知识点五:应用图标,是用来启动应用的图标,主要包含文字、图标、图形、插画、拟物等设计形式。
  • 知识点六:学习绘制图标,优先学习 PS、AI 的路径相关功能,而不是 Sketch 和 XD。




文章来源:优设网     作者:超人的电话亭



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档