UI视觉设计培训中心UI设计图标培训

郑州易商务UI视觉设计培训中心开设 UI设计图标培训，先带大家了解一下图标的知识！

1. 图标功能

图标是 Web 和 App 设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被地识别，并且图标也有一定的装饰作用，可以提高界面设计的美观度。

2. 图标类型

关于图标的类型目前并没有很的分类，我根据图标的用途将其分为两大类：「功能型图标」和「展示型图标」。

2.1 功能型图标

一般来说，凡是 UI 界面中，用户可以点击的图标均可看成是功能型图标，该类图标往往代表某一功能或某一链接的跳转。

这类图标的典型应用场景就是 iOS 系统中的底部标签栏，以及 Material Design 中侧滑菜单选项的左侧。

某些列表或卡片内的图标也属于功能型图标，但这类图标往往代表一个功能，而底部标签栏图标往往代表一个页面或板块。

2.2 展示型图标

相比功能型图标，展示型图标更加具有「设计感」，是特的、有内涵的以及具备辨识度的。

一般来说，展示型图标主要是应用程序的启动图标。该类图标代表了一款产品的属性、气质以及品牌形象等。

也是用户看到的内容，设计时应尽可能让用户记住并感到愉悦

该类图标在 iOS 系统中除了出现在 App Store 里，还出现在用户下载后的桌面上，以及 Spotlight 的搜索结果和设置等地方。

3. 图标风格

图标的设计风格有很多种，例如：线性图标、面性图标、线面结合图标、扁平图标、轻拟物图标、拟物图标、手绘型图标等，我对其中常见的几种作下简要的介绍。



3.1 线性图标

线性图标是由直线、曲线、点等元素组合而成的图标样式。



该类图标轻巧简练，具有一定的想象空间，且不会对界面产生太大的视觉干扰。

3.2 面性图标



面性图标可以简单理解为对线性图标的填充，但面性比线性更加稳重和扎实，对色彩的传达也清晰明显。

3.3 线面结合图标



线面结合图标典型代表是「MBE风格」图标，其设计特点是采用了粗描边线和偏移的填充面相结合，灵动而鲜明。



粗线条起到对画面的分割，突显内容、表现清晰

3.4 扁平图标



扁平图标去掉了透视、纹理、渐变等能做出 3D 效果的元素，让信息本身作为核心被凸显出来，并且在设计元素上强调抽象、极简、符号化。

3.5 轻拟物图标

轻拟物图标没有拟物图标那么写实，也不像扁平图标那么“平”，而是利用淡淡的渐变和一些光影来达到两者之间的平衡，识别性高又不失美感