导图社区图标设计

图标设计

这是一篇关于图标设计的思维导图，其中内容包含图标设计风格的分类，方便快速了解，系统掌握图标的设计知识点。

提示: 本内容由社区用户上传并分享。平台不对内容的真实性、合法性、知识产权归属及是否侵害第三方权利进行事前审核或保证。本内容可能包含受版权保护的图片、字体或其他第三方素材，使用前请自行确认授权范围。

编辑于2021-08-11 10:03:34

图标
图标设计
图标风格

远远南岸

他的近期作品查看更多>>

图标设计

社区模板帮助中心，点此进入>>

远远南岸

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 42.7k
- 994
- 2.5k
- 402
- 0
MindMaster
产品立项报告
- 13.2k
- 974
- 353
- 4
- 0
江边朝阳
产品经理如何做好项目管理
- 13.5k
- 48
- 211
- 7
- 0
issen
经验分享：产品经理必懂的产品思维
- 11.0k
- 438
- 234
- 11
- 0
(*^▽^*)
产品诞生过程
- 6.5k
- 222
- 275
- 15
- 0
(*^▽^*)
产品周期图
- 8.4k
- 515
- 241
- 3
- 0
(*^▽^*)
开门红的思考
- 6.0k
- 2
- 86
- 1
- 0
wuyan
招创智搜
- 4.6k
- 0
- 10
- 0
- 0
零点
网易星球
- 2.8k
- 1
- 10
- 3
- 0
Risky
教学教务系统
- 4.2k
- 8
- 65
- 6
- 0
18993898710

图标设计

图标风格

线性

单色

特征

简洁、清晰

单调

视觉层级

较低

适用

基础功能图标

范围

B端常见

移动端

设置页面

导航栏通知、分享

双色

特征

比单色配色丰富

提升趣味性

视觉层级

提高

适用

基础功能图标

范围

丰富的配色偏向年轻化

考虑产品风格，流行目标用户审美

渐变

特征

科技感、炫酷感

适用

车载UI常见

范围

丰富的渐变配色更适合运营入口设计

年轻化、热烈的氛围

不透明度

线性双色VS不透明度

线性双色:视觉更跳跃,个性更鲜明

不透明度

普适性更强

丰富配色细节，避免视觉过于活跃

范围

大多数场景下

一笔成型

风格设计感和个性极强

考验设计师对造型绘制的把控

功底不足，导致设计出现识别问题

延展性弱，难以表达复杂语义，使用需谨慎

断点

个性，趣味性

注意产品目标人群年龄段

面性

单色

双色

不透明度

通过调节前后不透明度可以带来较强的空间感

使用场景较广泛

晶白

白质感图标

适用

常见品类图标设计

手法

通过透明度、投影、渐变等参数调节，使整体立体感和空间感都很强

磨砂玻璃

毛玻璃

通背景模糊，或剪切模糊图层的技法来表达通透，有层次，精致的视觉感受

容易与浅色背景相融，造成对比度不足，难以识别的问题

使用中需要注意无障设计

等轴侧（2.5D）

趣味性很强，识别度高

适合重要入口或运营设计

多见于网页插画配图设计

风格卡通，表现花哨

注意应用场景及目标人群年龄段，避免干扰信息阅读和不符合产品风格

渐变

很好的吸引用户注意力

电商、美食类产品中较常见，注意配色干净协调。

新拟态

色彩相对单一，与北京融合度较高

通过高光、投影表现一定的立体感

通常整个产品就是新拟态风格时才使用

局限性较大

背景对比较弱，无障设计问题较大

轻质感

通过大量渐变、投影来表现立体感，整体风格偏年轻化

常在教育类产品中

注意配色干净和和谐

明暗质感

通过调节同一色相不同明度、饱和度来营造前后空间感

整体风格统一

写实

图标特点很明显，有极高的识别度

美团外卖品类入口

整体偏向年轻化

主要考虑设计师造型绘制、技法表现能力

抽象

通过几何图形组合、色彩使用表达美的视觉感受。

艺术装饰价值更大，不追求识别度，美观即可

卡通插画

可图标可空状态插图

设计美观有特色

像素风格

移动端界面较少，海外电商产品（jollychic）中看过，

像素游戏

【泰拉瑞亚】

【我的世界】

面性视觉面积更大，整体视觉层级比线性高

线面

和线性双色图标类似，趣味性较强，具备个性化特点

可以做Tab选中状态

描边插画

类似卡通插画

在卡通插画基础上加入描边

同样颜色。在一些特定的前后交接处利用线条做区分

一种设计表现形式，美观有特色

性格

粗线

力量感

稳重

男性等感受

细线

品质感

精致

女性化

圆角

直角