所在位置:首页 > 设计资讯 > 企业VI设计 > 具有更高能力的上海企业vi设计公司-10个图标设计规则

具有更高能力的上海企业vi设计公司-10个图标设计规则

如果使用得当,图标会为您的UI 设计添加形式和功能。它们可以通过立即识别来加速用户交互,还可以为您的用户界面设计添加风格和视觉趣味。

 

使用图标不需要很复杂。如果做得正确,即使是几个放置得当的图标也可以改善您的用户体验。在您的下一个UI 设计中实施它们之前,具有更高能力的上海企业vi设计公司为您准备的10个图标设计规则。

 

 

1.保持图标简单

 

不要使您的图标设计过于复杂。使它们尽可能简单,尤其是在较小的尺寸时。最好的图标是用户可以立即识别的简单形状和象形图。


具有更高能力的上海企业vi设计公司-10个图标设计规则.png 

 

2. 让它们可识别

 

图标应立即可识别。如果让用户想知道图标的含义,它就违背了他们的目的。不要让用户想知道图标应该是什么,因为这只会导致他们想知道图标的目的是什么,从而损害整体用户体验。

 

 

3.赋予图标意义

 

用于图标的图像应该具有易于理解的含义。含义应该与图标的功能直接相关,例如主页的房屋图标。虽然隐喻有时很容易被用户破译,但更多文字图标通常可以更快地识别。


具有更高能力的上海企业vi设计案例.png 

 

4.确保它们是可扩展的

 

图标通常以小尺寸使用,但您可能偶尔会发现想要使用更大版本(甚至更小版本)的用例。出于这个原因,请确保您的图标看起来不错,无论它们显示的大小如何。随着尺寸变大,您可以逐渐使用更复杂的图标,但请确保不要让它们变得过于复杂。

 

 

5. 使图标易于访问

 

如果您没有使用文本标签来伴随您的图标,请确保您实现了正确的alt 标签,以便使用屏幕阅读器的人仍然可以访问它们的功能。

 

与此类似,请确保您的图标具有足够的对比度并且尺寸足够大以便可以访问。您还应该确保图标周围的触摸目标足以让可能有精细运动控制问题的用户仍然点击预期区域。

 

 

6.注意颜色

 

作为一般经验法则,图标应该是单一颜色。此外,不要为每个图标使用不同的颜色,除非它直接有助于使它们更有用。在大多数情况下,您可能会使用不同的颜色来指示活动图标,而其余的则是另一种颜色。

 

 

7. 始终使用向量

 

具有更高能力的上海企业vi设计公司创建自定义图标时,您应该始终以矢量图像格式创建它们。这样,它们可以轻松缩放而不会失去清晰度或脆度。保存它们以用于数字产品时,SVG 文件类型是最佳选择,因为它保留了图标的可伸缩性和透明度。

 

SVG 的下一个最佳替代方案是将它们保存为无损PNG 文件,因为它们将保持透明度并且质量不会下降。

 

 

8. 保持图标统一

 

你的图标在样式和大小上应该是统一的。使用风格不一致的图标会使用户感到困惑,并使您的界面看起来很混乱。使用大小不同的图标会产生类似的效果。

 

在尺寸方面,视觉重量比精确的像素尺寸更重要。

然而,在尺寸方面,视觉重量比精确的像素尺寸更重要。为此,您可以设计视觉权重较低的图标,比较重的图标稍大一些。

 

例如,比较星形和方形图标。如果使它们具有完全相同的像素尺寸,则由于其更坚固的外观,正方形实际上会显得更大。通过将星星的手臂稍微延伸到正方形的尺寸之外,您可以创建看起来相同大小的图标。请务必将它们放在相同尺寸的容器中,以便保持适当的放置和间距。


上海图标设计.png 

 

9. 优先考虑清晰

 

用户不应该想知道图标是什么,更不用说它代表什么了。确保您使用的图像可以立即被用户识别,并且他们不会试图弄清楚您的图标应该是什么。

 

您还需要确保您的图标所代表的功能清晰。每当您使用通用图标以外的任何东西时(我们稍后会介绍),请考虑添加文本标签来解释图标的作用。它对新用户非常有帮助,并确保用户不会对不同图标的作用感到困惑。

 

 

10.使用通用图标

 

谈到图像学,不要试图重新发明轮子。当然,独特的创意图标可以为您的用户界面增添视觉趣味。但是,如果用户不理解它们或它们难以破译,那么您将损害整体用户体验。

 

对于常用功能,坚持使用人们识别的图标。以下是具有更高能力的上海企业vi设计公司推荐的图标示例:

 

主页的房子图标

三条水平线表示汉堡菜单

用于搜索的放大镜

用于编辑或修改内容的铅笔

竖起大拇指或喜欢某事的心

喜欢某事的心或星星

保存书签的书签

一个箭头从广场顶部出来,分享一些东西

向下指向正方形以下载内容的箭头

用于设置的齿轮或齿轮

显示某事的锁定图标是安全的

 

 


一分钟了解探鸣设计公司
好设计直接找总监谈
聊思路,理方向,谈费用,听听总监建议再做决定
相关案例
Relevant cases
点击查看更多案例

总监微信

复制成功

业务咨询 何先生

业务咨询 何先生