ICON图标设计

article/2025/10/9 18:30:01

ICON承载了App大部分功能的引导入口,是交互设计中是相当重要的一环。
ICON有一种象征意义或隐喻性,并在日常生活中经常遇到。icon代表了一些行动、事、人、真实的、虚拟的视觉符号。
ICON不仅是图标这么简单,它承载了文字的含义,将文字图形化,而让人使用最少的时间来理解这个按钮的含义,ICON是审美与功能完美融合的元素。

一、ICON设计原则

1,意义明确

这个很容易理解,当你要做一套icon时,它首先要有自己明确的含义:
这个放在那里?
这个是干什么的?
这个想要传达什么含义?

能否让用户一眼就能看出来表达的含义,这是评判icon好坏的第一标准。
在这里插入图片描述

2,简洁
含义表达清楚了,接下来就是icon的表达形式,因为面积小,所以过于复杂会带有一些不必要的麻烦,比如看不清内容,含义模糊,这就要求设计师在去除冗余的细节的同时,保证icon目的和功能性,并且整体风格要和整体的视觉协调统一。
在这里插入图片描述

3,可用性
可以通过查找性测试和预测性测试来得到icon的可用性。
查找性测试:被访者需要按照任务点击图标,后台需要计算被访者在不伴随文本标签的同时,找到正确图标的操作时间,首次点击的正确率。
预测性测试:需要被访者推断这个图标所代表的功能,并推测点击后会发生什么。
4,一致性
当满足以上几条原则后,最后需要注意的就是所有icon的一致性,比如颜色,线条粗细,感情特征,开口等等…
只有保持最终的一致性,你的设计才是完整的。
在这里插入图片描述

二、ICON设计规则

1,基本型

画icon和插画一样都是由最基本的形状慢慢组装来的,界面上所有的icon都可以近似成一个基本形状,比如各个方向的长方形、圆、三角形、正方形等。

2,图标的大小

图标的大小不只是物理上的大小统一,眼睛在很多情况下都是欺骗你的,眼见未必为实。

比如两个物理大小相同的形状,一个圆和一个正方形。正方形总是看起来会大一些,因为填补了更多的空间。
所以我们需要把正方形缩小一点,才会让视觉看起来大小相同。
3,栅格

一般绘制会调出网格系统,我们为了保持图标的一致性,需要设定一些辅助的尺寸来保证视觉大小统一性
4,角度

大多数情况下,是使用45度角,或者他的倍数。
5,线的粗细

一般来说用2px或者2的倍数,必要的情况下可以用3px。
不要介入过多的粗细,因为会破坏一套图标的统一性和凝聚力,并且不太建议用太细的线条,除非你刻意做线性风格图标。
在这里插入图片描述

6,尺寸

没有太大限制,现在2424和4848是目前比较标准icon尺寸。
7,工具

工具方面推荐使用ai绘制,因为在圆角和形状切割方面有着较大的优势,sketch的简洁方便也是个不错的选择,但是在转为svg格式的时候会产生许多不必要的东西,如多余的图层、纯颜色层、蒙版等等。

三、ICON设计细节

1,拼接处断线
2,复杂处平衡
3,避免中心断线
4,一笔画完

当然如果实在不能一笔也别勉强,设计图标的时候需要考虑到使用场景及规则,所有的视觉风格应该有相关联的点,比如线条的粗细,圆角的统一,断点的统一等。

总结:

最后,功能图标和桌面上的应用图标不是一回事,比如应用图标非常需要设计师打造一枚个性十足的icon,来引起用户的注意。
在这里插入图片描述
而页面的功能icon往往是相对安静的存在,哪怕没有了也是没关系,比如抖音的底部工具栏是用文字来代替图标。


http://chatgpt.dhexx.cn/article/6afJsvby.shtml

相关文章

Icon图标格式(用于生成*.ico图标)

原本我程序里用的的图标都是网上下载或者在线用png转成ico,但是之前那个公司不能上外网,而ps和fw都不能直接生成ico格式(ps可以找转ico的插件)。后来,网上找了个C#图片转ico的例子,借助的Icon类&#xff0c…

网站favion.ico图标

Favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上。 目前主要的浏览器都支持favicon.ico图标 一 制作favicon图标 1 把品优购图标切成png图片 2 把png图片转换为ico图标,这需要借助第三方转换网站,例如&#xff1…

icon图标

最近公司要求项目可配置主题颜色,包括一些小图片也要改变颜色,,所以用icon图标是最好的了 iconfont-阿里巴巴矢量图标库这里可以找到很多图片资源,右上角搜索你想要的图片的关键词,就会有很多图片供你选择 如果我们只…

Linux命令之iconv命令

一、命令简介 日常工作中我们需要将windows生成的文件上传到Linux系统,有时候会因为编码问题出现显示乱码。例如我上传了一个csv文件到Linux服务器上,默认编码为GB2312,在Linux打开则会出现乱码,我们需要将文件进行编码转换。icon…

aardio Html解析库 htmlParser (三) 节点属性获取

当我们找到了节点后,就可以根据属性来查找节点内不同的值。 1. 可以根据节点直接获取的属性值 2. 节点提供了一个方法来取标签内的属性值 3. 节点的所有属性存在放在Attributes集合对象中,所以也可以直接使用它获取标签属性 4. Attributes.Count 包含标…

HttpClient 与 HtmlParser 简介

HttpClient 与 HtmlParser 简介 本小结简单的介绍一下 HttpClinet 和 HtmlParser 两个开源的项目,以及他们的网站和提供下载的地址。 http://blog.csdn.net/dancen/article/details/7570911 HttpClient 简介 HTTP 协议是现在的因特网最重要的协议之一。除了 WEB 浏…

HTMLParser获取属性名

HTMLParser获取属性名方式&#xff1a; 原始网页文本&#xff1a; 1 <a title"美军被曝虐尸" href"http://www.sogou.com/web?query%C3%C0%BE%FC%B1%BB%C6%D8%C5%B0%CA%AC" target"_blank">美军被曝虐尸</a></li><li>&…

HTMLParser解析html详解

HTMLParser具有小巧&#xff0c;快速的优点&#xff0c;缺点是相关文档比较少&#xff08;英文的也少&#xff09;&#xff0c;很多功能需要自己摸索。对于初学者还是要费一些功夫的&#xff0c;而一旦上手以后&#xff0c;会发现HTMLParser的结构设计很巧妙&#xff0c;非常实…

HtmlParser使用指南

1、相关资料 官方文档&#xff1a;http://htmlparser.sourceforge.NET/samples.html API&#xff1a;http://htmlparser.sourceforge.Net/javadoc/index.html 其它HTML 解释器&#xff1a;jsoup等。由于HtmlParser自2006年以后就再没更新&#xff0c;目前很多人推荐使用jsoup代…

htmlparser的使用java_java htmlparser 简单使用入门

下面对htmlparser 简单介绍下,信息来自百度 htmlparser [1] 是一个纯的 java写的 html( 标准通用标记语言下的一个应用)解析的库&#xff0c;它不依赖于其它的java库文件&#xff0c;主要用于改造或 提取html。它能超高速解析html&#xff0c;而且不会出错。现在htmlparser最新…

java htmlparser 使用教程_HtmlParser基础教程

1、相关资料 官方文档&#xff1a;http://htmlparser.sourceforge.net/samples.html API&#xff1a;http://htmlparser.sourceforge.net/javadoc/index.html 其它HTML 解释器&#xff1a;jsoup等。由于HtmlParser自2006年以后就再没更新&#xff0c;目前很多人推荐使用jsoup代…

htmlparser补全HTML,htmlparser

源程序代码 我们的 C# 程序中经常会产生一些数据&#xff0c;这些数据可以使用 Html 表格进行展现。现在让我们开始写相关的 C# 程序吧。下面就是 HtmlMaker.cs&#xff1a;01:usingSystem;02:usingSystem.IO;03:usingSystem.Net;04:usingSystem.Data;05:usingSystem.Drawing;0…

【大数据】——Mahout(Hadoop体系的机器学习)

一、前言 Mahout 是Apache的一个开源项目&#xff0c;提供一些可扩展的机器学习领域经典算法的实现&#xff0c;旨在帮助开发人员更加方便快捷地创建智能应用程序。Mahout包含许多实现&#xff0c;包括聚类、分类、推荐过滤、频繁子项挖掘。此外&#xff0c;通过使用 Apache Ha…

mahout连接mysql时无法推荐_Mahout推荐系统初试

Mahout是Apache Software Foundation(ASF)旗下的一个开源项目,提供一些可扩展的机器学习领域经典算法的实现,旨在帮助开发人员更加方便快捷地创建智能应用程序。Mahout包含许多实现,包括聚类、分类、推荐过滤、频繁子项挖掘。此外,通过使用Apache Hadoop库,Mahout可以有效…

mahout 0.9 连接mysql_部署安装 Mahout

一、Mahout简介 Mahout 是 Apache Software Foundation(ASF) 旗下的一个开源项目&#xff0c;提供一些可扩展的机器学习领域经典算法的实现&#xff0c;旨在帮助开发人员更加方便快捷地创建智能应用程序。Apache Mahout项目已经发展到了它的第三个年头&#xff0c;目前已经有了…

mahout 推荐算法 java_推荐系统之推荐算法实战:mahout推荐算法框架

1.Mahout介绍 1.1概述 根据百度的解说&#xff0c;Mahout 是 Apache Software Foundation(ASF) 旗下的一个开源项目&#xff0c;提供一些可扩展的机器学习领域经典算法的实现&#xff0c;旨在帮助开发人员更加方便快捷地创建智能应用程序。Mahout包含许多实现&#xff0c;包括聚…

Mahout之——Mahout推荐算法API详解

前言 用Mahout来构建推荐系统&#xff0c;是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法&#xff0c;并实现了并行化&#xff0c;提供非常简单的API接口&#xff1b;困难是因为我们不了解算法细节&#xff0c;很难去根据业务的场景进行算法配置和调…

mahout 记录

mahout 记录 mahout记录 输入 mahout 是以偏好&#xff08;preference&#xff09;的形式来表达的&#xff0c;一个偏好包含一个用户ID、一个物品ID、还有一个用户对物品偏爱程度的数值 简单示意图&#xff1a; DataModel 实现存储并为计算提供其所需的所有偏好、用户和物品…

Apache Mahout初体验

1、Mahout是什么&#xff1f; Mahout是一个算法库,集成了很多算法。 Apache Mahout 是 Apache Software Foundation&#xff08;ASF&#xff09;旗下的一个开源项目&#xff0c;提供一些可扩展的机器学习领域经典算法的实现&#xff0c;旨在帮助开发人员更加方便快捷地创建智能…

java调用集群mahout_Mahout--用Maven构建Mahout项目(mahoutDemo)

前言 基于Hadoop的项目,不管是MapReduce开发,还是Mahout的开发都是在一个复杂的编程环境中开发。Java的环境问题,是困扰着每个程序员的噩梦。Java程序员,不仅要会写Java程序,还要会调linux,会配hadoop,启动hadoop,还要会自己运维。所以,新手想玩起Hadoop真不是件简单的…