对icon图标设计的思考方法

新知榜官方账号

2023-07-19 03:42:53

对icon图标设计的思考方法

icon的话题很大，我目前把话题设定在应用层面，讨论的是icon的实际应用层面分两个部分来说，一个是app，另一个是web。把关于icon的问题单独拿出来讨论，似乎很没有必要，在如今的大环境中，大多数人都在做着搬运工的工作，一张电影海报都尚能抄袭，何况一个小小的icon。但我认为，在UI设计中，细节的部分恰恰占主要的位置，大到布局的呈现，小到一个微交互的思量，判断一个人在一个领域的专业程度，就看他有没有量化当中的细节，我们都知道这个字大了，那么是大多少？我们都知道这里看着不舒服，那么有没有具体实际的解决方案？所以，我把icon拿出来讨论是很有必要的，因为我们是设计师，我们注重细节，我们的每个设计都需要有背后的逻辑支撑，这样才能站得住脚。

在app的应用层面

在GUI中的icon如何显示原创性？众所周知，在iconfont我们可以下载到很多类型的图标，甚至包括svg，ai的源文件，如此一来，有些人在做图的时候会直接下载源文件直接用，因为设置啊，消息啊，这类的图标大家已经形成了共识，不会有太大变化。那么，原创的意义在哪里？在手机里显示的icon一般需要极简化，这也是为什么ui设计风格从拟物化到极简化的过程。第一，手机的显示屏有限，如果icon过于花哨，会影响用户的视觉视线，毕竟除了少数以美感为主app，大多数app还是以功能性为优先。这里有一个问题，极简不等于毫无装饰的粗鄙化，除了统一线条粗细之外，我们还可以动一些小心思，让这个小东西变得更加精致，灵巧。

Icon原创的风格在哪里表现？我举三个比较典型的例子。

色块叠加：根据app的整理风格而定，比如虾米，它整体改版以后显得灵动轻巧，那么它理所当然的用线性icon来契合主题。线性图标也有它特别的地方，比如最近drbbble上流行的用带透明度的色块叠加的风格就很有意思，用饱和度较高的色块去装点原本平板的线形icon。
微拟物化：在ios11之后，有大批的app开始恢复部分拟物风格，为什么是部分呢，因为他们大多采用的不是传统拟物风，而是在扁平化的基础上做一些小阴影，小渐变，让应用简介而不单调，这种趋势越来越流行，我猜想是用户看腻了寡淡的扁平化，设计师也做腻了无趣的线形图标了吧。
渐变质感：渐变是一个神奇的手法，大多物体叠上渐变以后更加有层次感。想要渐变用的出神入化还得好好学习用色，我比较推荐在app中使用的不是那种看起来像特效的渐变，而是一个色系中的微渐变，这样的渐变会使icon看起来更加有质感，也具备层次感。

在web中的应用

本文没有提到缺省页的设计，想放到web中一起来说。因为微博中icon的设计模式跟缺省页更加相似。web也分三种类型，一种是后台设计，这种类型把视觉导引导的功能做好就可以；一种是功能类网站设计，这种类型icon跟app中差不多，以功能性为主，不需要夸张的装饰；最后一种是官网类设计，这类官网以展示为主，就需要设计师具备较强的视觉设计能力了。一般在banner中用的是插画，在下面介绍每个功能的时候，就需要用到装饰类型的icon。因为网页上的视觉范围很大，比app大很多，如果做的过于简单，就显得单调，画面不满，这时候就要发挥icon的装饰功能。

统一化：在web上的空间较大，把icon统一化很有比较，这里不是指线条粗细的统一，而是外形，用一个圆形或是方形统一起来，看起来更有秩序。
复杂化：在web上的设计，icon需要刻意的将它复杂化一些，用很多小icon来打造一个组合，更有表现力。
场景化：有些内容用场景化的表达方式更加有趣，可以把整个画面的故事性提高，用户阅读起来也绘声绘色。

本页网址：https://www.xinzhibang.net/article_detail-8226.html

寻求报道，请

关键词

icon 应用层面 app web 原创性细节

分享至微信：

相关工具

Logomaster.ai

AI Logo生成工具

Uizard

AI网页、App和UI设计

Eva Design System

基于深度学习的色彩生成工具

ColorMagic

AI调色板生成工具

Vizcom

AI渲染转化手绘图为产品设计图

Dora AI

AI在线生成精美3D动画的网站

CorelDRAW和Adobe Illustrator之间的比较

CorelDRAW和Adobe Illustrator之间的比较CorelDRAW和Adobe Illustrator是常用的平面绘图矢量软件。本文对比了它们的软件定位、侧重点和发展方向，总结出它们的优劣，并提供使用建议。软件定位不同Adobe Illustrator软件是美国Adobe公司出品的，

分类标签 CorelDRAWAdobeIllustrator矢量软件

12-04 06:14

三款AI绘图工具的优缺点比较

三款AI绘图工具的优缺点比较在近年来的发展中，AI绘图工具在设计领域中得到了广泛的应用。本文将重点介绍三款常见的AI绘图工具，分别是Adobe Illustrator、Sketch和Figma，它们各自的优缺点以及在设计领域中的应用。1. Adobe IllustratorAdobe Illustr

分类标签 AI绘图工具AdobeIllustratorSketchFigma

12-04 06:13

如何选择一款适合自己的调色软件？

如何选择一款适合自己的调色软件？世界上的色彩千千万，科技的发展也使得曾经简单的黑白转变为上千万甚至上亿像素的色彩，这样让更多的人通过屏幕了解到世界上各种美好的事物~但是！尽管屏幕上的色彩更加细腻多样了，但终究还是无法与人眼相媲美。例如眼睛看到的与拍下来的景色之间相差了一层梦幻的“滤镜”，而这层“滤镜

分类标签调色软件摄影后期LUTs

11-30 02:23

荣耀Magic4系列发布，适合商务人士使用的手机

荣耀Magic4系列发布，适合商务人士使用的手机荣耀Magic4系列是一款很适合商务人士使用的手机，其外观配色设计和系统功能支持和配色也都非常亮眼。本文详细介绍了荣耀Magic4系列的设计、配色、屏幕、系统等方面的特点和优势。荣耀Magic4系列包含了多种配色，包括瓷青、流金、亮黑、釉白四种颜色，P

分类标签荣耀Magic4系列手机商务人士

11-30 02:22

DaVinci Resolve - 专业影视后期处理软件

DaVinci Resolve - 专业影视后期处理软件DaVinci Resolve是一款专业的调色软件，将专业8K编辑,色彩校正,视觉效果和音频后期制作等功能集于一体的影视后期处理软件。广泛应用在影视后期,栏目包装,宣传片、广告片等领域。该软件的调色页面设有全新HDR面板，可让您创建自定义色调范

分类标签 DaVinciResolve影视后期处理调色软件

11-30 02:21

电影感的塑造——从后期调色说起

电影感的塑造——从后期调色说起电影感的塑造，离不开构图、景深、分辨率、镜头运动，今天就单从后期调色来说，怎么使自己拍的片子，瞬间赋予“电影感”。导入素材，回批，调色，输出，就是几个简单的操作步骤，但是背后暗藏玄机。调色的意义，不外乎两种，一是提升画面品质，二是增加氛围感受。以《爱乐之城》为例，其实体

分类标签电影感后期调色构图

11-30 02:20

荣耀Magic3系列手机影像系统

荣耀Magic3系列发布以来，荣耀水桶机这个称呼已经是荣耀Magic3系列手机的大众评价了，因为其均衡的配置受到了众多消费者的好评。不少消费者入手了这一款手机除了体验高端的旗舰配置，还有其强大的影像系统。在2021年的9月份荣耀召开了发布会，宣布在荣耀Magic3系列加入了计算摄影技术，也就是多主摄

分类标签荣耀Magic3系列影像系统多主摄融合计算摄影

11-30 02:19

视频翻译：使用MyHeyGen免费翻译任意时长视频

视频翻译：使用MyHeyGen免费翻译任意时长视频近期，一款名为“视频翻译”的工具引起了广泛关注。这不是一个简单的网页应用，而是一个可以免费部署在个人电脑或服务器上的实用程序。它的强大之处在于能够翻译任意时长的视频内容。所谓的视频翻译，实际上是指同声传译。虽然这类工具并非近期才问世，市场上已有多款成

分类标签视频翻译MyHeyGen免费

11-28 08:59

如何查找和选择齿轮图标-完全指南

如何查找和选择齿轮图标-完全指南如果您需要一个齿轮图标，但不知道从哪里开始，本文将为您提供完整的解决方案。步骤1：输入所需要的内容首先，您需要输入所需要的内容，例如“查找齿轮”。步骤2：选择备选然后，在给出的备选中，选择您所需要的齿轮图标。步骤3：下载图标接下来，在图标上点击下载按钮，并可以调整图标

分类标签齿轮图标选择

11-10 02:29

Web前端系列课程：CSS319字体图标

Web前端系列课程：CSS319字体图标本文介绍了CSS319字体图标的优点和使用方法，以及推荐了几个常用的字体图标生成网站。 CSS319字体图标的优点 CSS319字体图标可以做出跟图片一样可以做的事情，比如改变透明度、旋转度等，但本质其实是文字，可以很随意的改变色、产生阴影、透明效果等等。它

分类标签 Web前端CSS319字体图标

11-10 02:28

ChatGPT Midjourney 文心一言文心一格 bing新必应 Stable diffusion 稿定设计墨刀AI mastergo Adobe Firefly runway