如何设计一套合理的图标

新知榜官方账号

2023-10-16 22:52:27

如何设计一套合理的图标

图标设计的艺术风格应一致，构成元素应合理，从以下几点出发思考：

是否符合用户的使用习惯？
当前系统的显示原则是什么？
是否符合产品定位？
是否具有很强的识别性？
图标设计的艺术风格是否一致？
构成元素是否合理？

图标的设计，首先要看懂界面的需求，需对每个功能图标的定义非常清楚，否则会造成很多不必要的麻烦。例如：我们所设计的结果不能被用户理解，或者一图多意，使用户无法正常操作。在图标设计中，我们必须做到视觉上、功能上、可用性高度匹配。

对于界面需求，首先我们需要懂界面，从硬件上讲我们必须先明确该产品界面大小尺寸、系统要求、媒介要求。从软件上讲，我们需要设定产品界面设计的风格、构图方式、布局版式、产品主题图标主题元素等。只有这一系列的内容确定下来，我们才能有把握地完成图标的设计。例如：产品界面的尺寸大小直接影响应用图标的位置、大小、可响应范围，例如3.5英寸屏和5.5英寸屏对图标数量的承载就不能一样。

图标设计所采用的元素大多为用户常见并熟悉的物件，原则上是越贴近用户的心理越好。例如：音乐我们可以联想到音符、CD光盘、音乐播放器耳机、钢琴、古筝、萧、鼓、播放开关等，这些都是很直观的可看到的和音乐有直接联系的设计元素。当这些元素被找出来，我们只需要完成“词语--图形”之间的转化，依据产品的特性，来确定适当的设计风格来完成图标的设计，例如：这个图标是简洁的，还是复杂的；拟物的还是扁平的；华丽的还是淡雅的；多色彩的还是单色的。

在图标设计中，隐喻也是一种常用的设计思维方式，也就是找出物与所指之间内在的联系，捕捉事物对象的特征，提炼元素，再创作，做到这一点需要设计师丰富的联想能力和对生活的细微观察。

思路

首先我们需要考虑图标的造型，系统图标按照造型构图可分为线构图、面构图、线和面的组合构图。然后，我们需要考虑产品的性质，不同性质的产品图标设计所采用的元素也是不一样的，表现出来的效果自然也不一样。例如：一个美食类型的App，如果该产品针对的目标群体是年轻人，那么对于图标的设计我们就需要仔细考虑了。是写实的还是简洁的；色彩的选择是丰富的、鲜艳的，还是简单的、某一色系下的；是浪漫的，还是安静的。最后，设定图标主题。一组应用图标设定主题后，我们需要根据主题找出相对应的元素，通过元素重组来完成整套图标的设计。有一点我们需要注意，在做主题图标设计时，需要尽量地简化和概括元素。

制作

视觉一致
●一致的线条粗细，图标组合方式，规范圆角大小。
●使用统一主题的设计元素或符号。
●色彩一致，采用套色，无论是多色彩还是单色彩，需在明度上或者纯度上有一项保持一致。
识别性
●图标组合元素不宜过多，最多三项。
●尽可能简化图标，图标不宜过度繁琐。
●对于元素的选择，需恰到好处，便于用户识别。

以上是如何设计一套合理的图标的详细解释。

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

寻求报道，请

关键词

分享至微信：

相关工具

墨刀AI

墨刀推出的AI产品原型设计助手

美图设计室

美图推出的AI海报设计工具，一键生成海报宣传图

illostrationAI

AI插画生成，low poly、3D、矢量、logo、像素风、皮克斯等风格

Magician

Figma插件，AI生成图标、图片和UX文案

Designs.ai

AI设计工具

阿里云智能logo设计

阿里云推出的智能Logo设计

Lineicons-超过5000种图标的手工制作线条合集

Lineicons-超过5000种图标的手工制作线条合集Lineicons是一套收录超过5000种图标的合集，主要设计风格为手工制作线条图标，适合使用于各种现代化用户界面。Lineicons分为两种方案：FreeBasic和Pro，前者免费，但可使用的图标图案532个，而且没有提供AI源文件，使用时

分类标签 Lineicons图标手工制作线条免费付费

12-05 08:46

iPhone更换应用图标方法

iPhone更换应用图标方法很多小伙伴已经看腻了iPhone上的部分应用图标，确实iPhone不能换主题，虽然默认图标也很耐看，但也会是视觉疲劳。现在就和小伙伴们分享一下iPhone手机更换图标的方法，主要还是通过快捷指令，如果你已经知道方法的话就不需要仔细看了。首先我们可以进入：macosicon

分类标签 iPhone更换图标快捷指令

12-05 08:45

AI的新时代：DotApp将如何重塑人机交互？

AI的新时代：DotApp将如何重塑人机交互？随着人工智能技术的不断发展，人机交互方式也在不断演进。传统的人机交互方式主要是基于键盘、鼠标、触摸屏等输入设备和显示器等输出设备进行交互，但这种方式在某些场景下并不够便捷和自然。而现在，随着新型人机交互方式的不断涌现，如语音交互、手势识别、虚拟现实等，人

分类标签 AIDotApp人机交互

11-11 08:01

从手机App到AI原生应用琢磨事关注2023-11-060评论1339浏览1收藏15分钟

从手机App到AI原生应用，探讨未来的发展方向手机App作为移动互联网时代的代表，已经成为人们生活中不可或缺的一部分。然而，随着技术的不断发展和人们对于使用体验的不断追求，App也在不断地升级和改进。其中，AI原生应用被认为是未来的发展方向。所谓AI原生应用，指的是应用程序具有人工智能能力，能够通过

分类标签手机AppAI原生应用2023

11-07 08:03

PICO裁员，字节的战略性撤退自象限关注

PICO裁员，字节的战略性撤退自象限关注近期，PICO出现多位核心业务负责人离职和调岗，加上今年的多次裁员，PICO员工已离职近半，市场部门员工更是已经离职近三分之二。虽然字节一再否认相关报道的真实性，但可以看到的是，PICO内部正在经历一场巨变，这背后不只是PICO的窘迫，更是整个VR行业的“生死

分类标签 PICOVR字节裁员战略撤退大模型

11-01 08:02

制作WiFi图标教程

制作WiFi图标教程WiFi图标是现代生活中经常用到的一个图标，本文将介绍如何使用Adobe Illustrator制作WiFi图标。以下是具体步骤：使用矩形工具绘制一个正方形，将填充转换为描边。点击比例缩放工具，缩放比例百分之二十五。移动中间的正方形到左下角位置，调整对齐。复制一份小正方形，在最前

分类标签 WiFi图标教程

10-20 22:22

Adobe全家桶全面更新，图标变化大，功能进一步升级

Adobe全家桶全面更新，图标变化大，功能进一步升级在办公软件中，除了微软的Office办公全家桶之外，我们最常接触的恐怕就是Adobe的全家桶了。近日Adobe全家桶也进行了全面更新，尤其是在软件的图标上做了较大的变化，所有的软件图标都取消了原先的正方形样式，更改为平面化的半圆角设计，乍一看和苹

分类标签 Adobe全家桶更新功能升级

10-16 23:00

有没有矢量图标素材软件？Icons8 for Mac提供图标设计资源

Icons8 for Mac：最大的矢量图标素材库很多设计师都会遇到如何获取矢量图标素材的问题，今天我们为大家介绍一款非常好用的矢量图标素材软件——Icons8 for Mac。Icons8 for Mac是世界上最大的图标集合之一，提供数千个专业制作的矢量图标供您在数字设计中自由使用。该软件适用于

分类标签矢量图标素材软件Icons8forMac

10-16 22:58

图标释义：利用图标语义引导用户行为

图标的定义与特征图标是具有指代意义或标识性质的图形，界面中的图标是功能标识。它是程序标识、数据标识、命令选择、模式信号或切换开关、状态指示。图标设计就是将一定的含义转化为图形，或者说把文字语言“翻译”成图形语言。图标的优势①交互的高效性。图标具有高度浓缩并快捷传达信息、便于记忆的特性。图标之间的差异

分类标签图标用户体验交互设计

10-16 22:56

AI技术在图像处理领域的应用及前景

AI技术的不断发展使得它在许多领域的应用越来越广泛，其中之一就是图像处理领域。AI不仅可以进行创作和绘画，还可以进行图像的标注、去噪、增强、分割等一系列处理。首先，AI可以用来进行图像标注。对于大型图像数据库的标注，需要耗费大量的人力和时间。但是，利用AI技术，可以实现自动化的图像标注，大大提高了效

分类标签 AI技术图像处理自动化标注

10-16 22:54

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