ICON图标设计

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://www.rhkb.cn/news/44462.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

logo设计图案创意有哪些?分享一些logo设计妙招

作为品牌的核心标志,logo图案的设计至关重要。一个好的logo可以让人们对品牌形象有深刻的印象,而一个糟糕的logo则会给人留下不良的印象。在设计logo时,有一些创意和妙招可以帮助我们设计出更好的logo。 创意1:选择合适的颜色和字…

谈一谈正向代理和反向代理?

谈一谈正向代理和反向代理? 什么是代理服务器(Proxy Serve)?为什么使用代理服务器?什么是正向代理什么是反向代理正向代理和反向代理的区别正向代理的应用反向代理的应用 什么是代理服务器(Proxy Serve&…

反向代理的实际应用

反向代理位于客户端和网络服务器之间。反向代理三个主要的特点是安全、负载平衡和易于维护。反向代理还可以可以在身份品牌和优化中发挥作用, 1、加强网络安全 用户可以创建或者配置反向代理,以此根据客户端请求的性质,将请求转发到多个内部服…

ChatGPT和Web3:人工智能如何帮助您建立和发展您的 Web3 公司

ChatGPT是OpenAI在2022年11月推出的聊天机器人。该机器人建立在OpenAI的GPT-3人工智能家族上,并通过监督学习和强化学习技术进行了优化。 与ChatGPT机器人聊天时,你会感觉自己在与一个懂得一切并以非常教育性的方式回答的朋友交谈。回答在许多知识领域非…

Python 4.0的新特性和优势 |盘点 | 2023年最值得学的编程语言TOP 5,Python再度夺冠!

ChatGPT狂飙160天,世界已经不是之前的样子。 新建了人工智能中文站https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 在技术的推动发展中,编程语言的作用功不可。目前在技术领域约有600种语言,人们对编程语言的认识和掌握情…

抗衡特斯拉擎天柱,人形机器人第一股实至名归?

文 | 智能相对论 作者 | 佘凯文 前有ChatGPT带动之下大热的AIGC,后有仍在大银幕热映的《流浪地球2》,要问今年开年,哪个赛道最火?非机器人莫属。 机器人行业有着“制造业皇冠顶端的明珠”之称,其技术程度代表着一个国家…

盘点 | 2023年最值得学的编程语言TOP 5,Python再度夺冠!

ChatGPT狂飙160天,世界已经不是之前的样子。 新建了人工智能中文站https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 在技术的推动发展中,编程语言的作用功不可。目前在技术领域约有600种语言,人们对编程语言的认识和掌握情…

上海二季度平均薪资13486元,这些信息值得关注!

一、全国平均月薪 近日,智联招聘发布《中国企业招聘薪酬报告》(下称“报告”)显示,二季度,国内38城企业平均招聘薪酬为10266元/月,较一季度的10101元/月环比上升1.6%,比去年同期下降0.7%。从地…

2023年度编程排行重磅发布,JS连续11年霸占榜一

编程语言千千万,你最喜欢用哪一个? 最近,在调研了全球超过9万名开发者之后,程序员社区 Stack overflow 重磅发布了《2023 Developer Survey》,从这份报告中,我们可以了解到当前最热门的工具、最主流的技术…

今年的互联网公司时薪排行榜!

最近在职级对标网站上看到了一个排行榜,是针对国内的一线互联网企业做的调研,汇总了他们的平均时薪水平。 很贴心的,他们将工程师根据工作经验和水平,分为初级、中级、高级、资深、专家/架构这五个水平,出了5个排行榜。…

网络安全学术顶会——SP 2023 议题清单、摘要与总结(下)

注:本文由ChatGPT与Claude联合生成 121、QueryX: Symbolic Query on Decompiled Code for Finding Bugs in COTS Binaries 可扩展的静态检查工具,如Sys和CodeQL,成功地发现了源代码中的错误。这些工具允许分析人员编写应用程序特定的规则&…

何止ChatGPT,6个AI神器让你的工作更高效!

ChatGPT,一直是个神秘的存在。 现在,除了ChatGPT,有了这些神奇的AI工具,你的生活和工作将变得更加高效和有趣。 今天我要分享一些非常有用的AI效率神器,让你的工作、生活更简单,让你的创作更具创意。 1、…

chatgpt赋能python:用Python下载附件:一种方便快捷的方式

用Python下载附件:一种方便快捷的方式 随着互联网的不断发展和信息的爆炸增长,人们需要从万维网上获取各种各样的信息和资源。这些资源包括文本、图片、视频和其他附件。当我们在网上浏览网页时,我们可能会遇到一些需要下载的附件&#xff0…

深度:美国顶级SaaS公司发展启示录!

深度:美国顶级SaaS公司发展启示录! 近年来,云计算的日益普及以及从传统软件向基于云的解决方案的转变,在此背景下美国的SaaS行业在迅速成长。根据Statista的数据,2016年至2020年期间,美国SaaS收入以25.5%的…

走进人工智能| Computer Vision 数字化时代的视觉启示录

前言: 计算机视觉是通过模仿人类视觉系统的工作原理,使计算机能够感知、理解和解释图像和视频的能力。 文章目录 序言背景适用领域技术支持应用领域程序员如何学总结 序言 计算机视觉是人工智能领域的一个重要分支,它涉及使计算机能够“看”…

TransUnet官方代码测试自己的数据集(已训练完毕)

*************************************************** 码字不易,收藏之余,别忘了给我点个赞吧! *************************************************** ---------Start 首先参考上一篇的训练过程,这是测试过程,需…

OpenPCDet 训练自己的数据集详细教程!

文章目录 前言一、pcd转bin二、labelCloud 工具安装与使用三、训练仿写代码对pcdet/datasets/custom/custom_dataset.py进行改写新建tools/cfgs/dataset_configs/custom_dataset.yaml并修改新建tools/cfgs/custom_models/pointrcnn.yaml并修改其他调整事项 数据集预处理数据集训…

ChatGLM-6B模型训练自己的数据集

ChatGLM-6B模型训练自己的数据集 上期我主要分享了一下ChatGLM-6B官方模型的部署、官方数据集的微调、推理以及测试过程,这期我将主要分享一下使用ChatGLM-6B微调自己数据集的过程。上期链接 1.首先将自己处理好的数据集拷贝到’ChatGLM-6B/ptuning/’文件夹下&am…

刚拿到北京户口就离职,员工赔了180000!

推荐专门分享AI技术的公众号 关注后,回复:ChatGPT ,领取账号 公众号“互联网坊间八卦” 之所以写这个话题,是因为今天又看到了一个关于北京落户的案例。 前不久,北京市政府发布工作报告。数据中提到,2022年…