如何更好的设计图标？优先注意这些容易被忽略的细节

新知榜官方账号

2023-07-05 07:06:53

如何更好的设计图标？优先注意这些容易被忽略的细节

B端产品经理要负责对目标行业和市场进行深入的分析和调研，了解客户的需求、痛点、期望和行为，找到产品的价值主张。

图标可能是设计师设计产品组合中最重要的设计示例之一，但因为图标在页面中的尺寸很小，虽包含着很多细节，但也是经常被低估的设计示例之一。作者总结了图标设计的属性以及在图标设计中，很重要但容易被忽略的知识点，一起来看看吧。

用法

在UI设计中，图标主要有两大类：一类是APP启动图标，每个APP独一份；另一类是系统icon，搭配文字，方便用户快速理解信息，也是这篇文章重点讲解的内容。

风格

常见的图标风格有线性、面性、彩色、写实、3D等，图标的选用因页面的设计风格、图标的位置等原因会有所差异，主要的作用是反馈动作和吸引用户更多注意力。

线形/面性：最基本也是做常用的风格，广泛用在页面设计中。
彩色：通常用于反馈用户的操作或者增加用户的注意力。
3D/写实：当页面中的某哥内容需要引起用户高度注意时使用，一下抓住用户的视线。

重量

简单的线性图标重量轻，看起来更简约，不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容，那么更适合选用简约的、重量轻的线性/面形图标，防止页面过于杂乱。相反，如果当前的页面中只有文字，信息量很少，那么更适合利用重量大的彩色甚至3D图标来增加页面的丰富性，让页面看起来更有设计感，给用户带来视觉上的愉悦，简约而不简单。

属性构成

图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等，表达式规则是统一的，以便只给观看者识别图标所需的最小更改。

描边粗细：手机上常用到的描边粗细有2px、3px、4px。2px的看起来会显得更加精致，4px的描边视觉较重，可以用在优先级较高的区域作为功能性图标,。
端点/节点：图标的端点有平头、圆头和方头，图标的节点有斜接连接、圆角连接、斜角连接，具体使用哪种样式要根据页面的情况统一设置。
圆角半径：方形的图标边角过于锋利，用户有时候看起来会不舒服，圆角图标更圆滑，相对来说更容易让用户接受。虽然圆角用的更普遍，但具体使用哪种，还是要考虑页面的整体风格再决定。

网格

图标的外形有圆形、方形、三角形甚至不规则形状的，所以我们很难将不同形状的图标尺寸完全统一。这个时候网格就起到很关键的作用，有了网格相当于提前将图标限定范围，在网格范围内根据图标的重量和重心灵活调整大小，这样会让不同形状的图标看起来更统一。

视觉校正

由于设计软件的局限性，虽然有些图形已经居中对齐，但有时候还需要进行视觉校正。最典型的图标案例是“播放”图标，利用设计软件对齐中间的三角形后，会发现三角形的位置看起来偏左。利用软件对齐后，我们还需要再用眼睛确认一遍，我们可以将三角形向右移动，保证三角形的重心与圆形的重心一致，这样整个播放图标看起来会更舒服。

比例

图标比例通常使用8的倍数作为基准，例如8px、16px、24px和32px，以便在各种环境中进行流畅地切换。除此之外，在移动端等屏幕尺寸较小的页面中，还会使用4px的倍数，来实现多功能性。

清晰

图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小，要尽可能做到对用户友好，可以使用一些简单的隐喻设计，但含义不能过于复杂。一个图形能说明的问题，没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义，这样反而会影响用户的操作。

一致性

一个产品有很多页面，线性、面性等多种图标风格可以一起使用。但在同一个页面场景中，执行相同功能的图标应该保持相同的样式。

熟悉感

针对不同的系统，我们可以选用大多数用户熟悉的图标，这样用户能更快地理解图标的含义。

以上就是常用却容易忽略的图标设计细节，希望通过这些内容能帮助你对图标设计有更深的认识。

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

寻求报道，请

关键词

分享至微信：

相关工具

MasterGo AI

国产产品设计工具MasterGo推出的智能UI设计助手

Looka

AI在线设计和生成logo

Designs.ai

AI设计工具

Color Wheel

AI灰度logo或插画上色工具

图宇宙

高品质AI智能设计平台

羚珑

京东推出的商品图智能设计小工具

金丝兰慕美发推出98元人工AI调色染发

金丝兰慕美发推出98元人工AI调色染发除了餐饮行业比较卷以外，我觉得美发行业也特别的卷。在红塔大道这一家金丝兰慕美发推出了一个98块钱的人工AI调色染发，它的价格非常划算，而且在这种调色情况下颜色是非常准的，不容易脱色。调色大概的意思就是很多朋友现在去染发，因为染发是属于人工调，人工会存在一个问题，

分类标签美发调色染发人工AI

12-09 00:11

免费实用的视频翻译工具MyHeyGen

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

分类标签视频翻译同声传译免费工具

11-28 08:58

如何提升产品经理的需求分析能力？

如何提升产品经理的需求分析能力？作为产品经理，提升需求分析能力是非常重要的。以下是一些方法和工具可以帮助产品经理进行需求分析：参与用户调研：通过参加用户调研，产品经理可以更好地了解用户需求，从而更准确地分析需求，设计产品功能。在用户调研中，可以采用用户访谈、问卷调查、竞品分析等方式收集用户需求信息。

分类标签产品经理需求分析用户调研

11-26 02:13

UI设计师分享常用软件

UI设计师分享常用软件我是一位有着丰富经验的UI设计师。在多年的工作中，我总结了一些我认为比较好用的设计软件，这些软件基本上都是我在工作中常用到或者和人对接中需要了解学习的一些软件。以下是我分享的干货：1.PixsoPixso是国内开发，服务器在国内的一款设计软件。它的整体界面和Figma很像，因此

分类标签 UI设计软件PixsoFigma即时设计墨刀

11-26 02:12

AI里如何制作微标

AI里如何制作微标微标是一种常见的设计元素，本文将介绍在AI中如何制作微标。制作步骤新建文件，在文件中画一个椭圆。用锚点工具在上下锚点，单击按照ctrl键复制一个旋转方向，单击右键镜像复制一个，再选择下面两个形状，按着ctrl键向下复制，按着ctrl加d重复复制。画一根直线，单击宽度工具调整线的底部

分类标签 AI微标制作

10-28 22:18

Illustrator2024：一款强大的图形设计软件

Illustrator2024：一款强大的图形设计软件Illustrator2024是一款功能强大的矢量图形编辑软件，提供多种绘图工具、路径操作、色彩管理和文字处理等功能，适用于创建和编辑各种矢量图形和插图。通过其先进的功能，用户可以轻松创建精美的矢量图形、插图和各种设计作品。同时，它还提供了智能化

分类标签 Illustrator2024矢量图形编辑色彩管理

10-22 02:52

怎么免费设计logo图标？

免费设计logo图标的方法想要免费设计logo图案的精致与美观，适合产品宣传与推广的需要吗？通过使用一键logo设计工具，填写公司名称、口号和所从事的行业，即可AI一键智能生成logo，方便快捷！现在我们随便去网上找一找，就可以发现有很多的logo设计工具，但是这里面不排除有些是针对专业的设计人士的

分类标签免费设计logo图标一键logo设计

10-22 02:50

制作富士微单X-E2S相机的图案填充与渐变工具教程

制作富士微单X-E2S相机的图案填充与渐变工具教程富士微单X-E2S相机是一款优秀的相机，本教程将通过制作该相机来学习图案填充、渐变工具等内容。首先，我们需要准备好相机的外壳图案。可以在网上搜索富士微单X-E2S相机的外壳图案，并下载到本地。接下来，我们将使用图案填充工具来填充相机的外壳。选择图案填

分类标签富士微单X-E2S相机图案填充渐变工具

10-22 02:48

AI头像品牌艺术字二维码logo生成器作用与使用教程

AI头像品牌艺术字二维码logo生成器作用与使用教程AI艺术二维码艺术字生成是一种便捷、高效创新、实用的文字设计工具，通过最先进的人工智能技术，用户可以轻松地将文字转化为独特、美观的艺术字体。一般可以用光隐艺术字小程序千星创作艺术字工具生成支持多种输出格式，如图片、文字、GIF等，用户可以将生成的文

分类标签 AI艺术字生成二维码生成器Logo设计教程

10-22 02:46

人工智能图标设计与配音的现状与发展

人工智能在图标设计和配音领域的应用人工智能在图标设计和配音领域的应用已经取得了一定的成果。在图标设计领域，人工智能可以使用机器学习和深度学习算法来自动生成设计，减轻设计师的工作负担，提高图标的质量。在配音领域，AI语音合成模型可以模仿某些著名演员的声音和音调，但仍无法完全模拟出人类的情感和语气。

分类标签人工智能图标设计配音AI机器学习深度学习

10-22 02:28

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