图标设计原则,你知道哪些?

在用户界面中,图标绝对是一个不可或缺的元素。虽然大多数图标都很小,甚至没有被注意到,但它们帮助设计和用户解决了许多问题。作为一个UI设计师需要知道的基本操作是什么,它必须是图标设计。图标设计原则是所有基础的基础,不仅可以帮助设计师快速定位,而且可以使图标更具活力。

图标的定义和功能

图标是指代计算机图形,具有高度集中、信息传输快、记忆方便的特点。图标被广泛使用,从各种软件和硬件到现实生活,我们可以看到各种图标的阴影,可以说我们的生活与图标是分不开的。

图标作为UI界面设计的关键组成部分,在UI交互设计中无处不在。一套成功的图标设计不仅需要精致的纹理和引人注目,而且具有良好的可用性。一般来说,纹理强烈的图标可以为网页增添亮点,给访问者留下深刻的印象。

图标设计原则

对于应用图标设计,有三个原则:可识别性、差异性和使用格栅线。

•识别:是图标设计的主要原则,是指设计图标能够准确地表达所代表的隐喻,使用户能够第一眼识别其所代表的含义,并从中获取相关信息。

•差异:是指不能使图标相同,同时突出产品核心和创新。让用户立即抓住焦点,给用户留下深刻的印象。

•网格线:类似于练字网格,能使图标与系统保持和谐统一,更好地相互匹配。

除应用图标设计外,还有功能图标设计。主要原则有:准确的表意、清晰的轮廓、一致性等。

•准确的表达:就像字面意义一样,要清楚地表达核心思想。如果用户看到你的图标时感到困惑,那么这个设计无疑是失败的。

•轮廓清晰:在设计图标时,最避免角落不清晰,有虚拟像素。用户认为他们的眼睛花了,或者他们的手机有问题。

•一致性:当您需要在设计中设计多个图标时,这些图标必须保持一致。如果每个图标的风格和颜色不同,用户不仅会眼花缭乱,而且容易头脑负荷。

免费的图标设计软件即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。icon-default.png?t=N7T8https://js.design/?source=csdn&plan=bttcsdn9182

图标的分类

基于功能性图标来划分

•互动图标:

具有双向信息传递能力。它不仅可以将某些信息传递给用户,引导用户执行特定的操作,还可以将控制信息传递给程序。从功能的重要性来看,它的重要性是最高的。比如登录注册按钮、开关按钮、数量按钮、点赞、转发分享等。都是互动图标。

•装饰图标:

主要是提高页面设计,加深个性化设计风格。同时,提高用户在线体验,迎合受众偏好,提高设计亲和力。比如页面升级、空页面、奖励、用户等级都是装饰图标。

•描述性图标:

澄清信息图标类型,区分不同功能或内容的视觉标记。简单来说,就是对功能的解释。例如,金刚区或个别功能区的icon设计在展示行业特征时。面对不同的用户群体,选择风格设计:早期教育应用与健康应用相比明显。目的是增强页面的层次感和认可度。

基于表现形式图标来划分

•象形图标:

象形图形是最基本、最典型的处理方法。图标与其所传达的含义直接相应。象形图形是表达名词程序图标和功能语义时最直接有效的手段。例如,名词程序的图标,如日历、时间和天气。

•隐喻图标:

两个不相关但有一些相似特征的东西通过icon连接起来,从而达到记忆和使用的目的。比如设置工具、云与云、购物袋、会员与钻石、皇冠等等。

•工具图标:

主要分为行业类别,应用广泛,受到公众或行业人士的高度认可,并长期使用。比如:建筑行业、医疗行业、化工行业等等。

•混合图标:

前三个图标的组合旨在实现不同的视觉效果和应用结构,表达设计师的个人设计风格或应用某种设计感强的软件。

基于设计风格进行分类

•面性图标:

应用范围最广,稳定性强,页面层次感较高。在设计UI页面时,应从页面层次关系和产品功能的角度考虑具体应用。表面图标的分类也很多,不仅是传统的,还有多色、渐变、不透明叠加、插图、平面投影等。

•线性图标:

使用感更轻,精致度更高,简单的风格页面使用最多,也是目前流行的风格之一。除了常见的纯色线性图标外,还分为双色或多色、各种厚度组合、间隙类型、渐变、边缘不透明叠加等。

•平面图标:

平面图标设计是去除多余的装饰效果,突出“对象”本身作为核心。设计元素强调抽象、极简主义和象征性。

•拟物化图标:

拟物化图标设计是通过叠加高光、纹理、材质、阴影等图层风格,追求模拟真实物体的外观和纹理。

•2.5D图标:

2.5D图标设计是一种不同于拟物化图标和平面图标的图标设计风格,不像拟物化那么复杂,比平面图标更三维。

图标的分类远不止于此,但所有的变化都是通过“线性、面性、线面结合”和透明度、渐变、色彩叠加、纹理、多维空间等表达方式设计的。除了掌握这些内容外,我们还需要长期的练习和思考,从数量到质量的变化,并根据不同的场景设计最合适的图标。

在UI图标设计中,您可以根据您最喜欢的建模参考进行分析。首先,抓住参考对象的关键节点,几何图形绘制一个类似的基本图形,从而形成一个骨架。接下来我们要做的是让图标有血有肉,内容逐渐丰富,最后通过不断的修改,成为我们心中最完美的图标形状。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值