网页设计中选择或设计图标的指南

2025-01-23 10:12:01 40
  • 收藏
  • 管理

    设计是关于交流的。作为一名设计师,如果你的访问者轻松地在你的网站上找到他想要的东西,你就已经实现了你设定的目标。在我之前的几篇博客文章中,我已经介绍了如何在你的网站设计中使用行动号召,但图标呢?图标也可以是行动的召唤,但也可以是文本的有效视觉替代品。

    图标通常一眼就能辨认出来,而且已经有了强大的、明确的概念,尽管它们可能只是你网站的一小部分,但如果没有抓住它,你的设计就会看起来俗气和廉价。

    图标与其他图像的不同之处在于,图标是普遍可识别的,并且可以在不用语言的情况下传达动作。用下面的这些来测试我的图标,然后大声说出它们代表了什么。让我们来看看你是否能在5秒内完成:

    如果你说洗手间,答案是对的!下一个..。

    我是不是听到你说‘危险’了?太棒了!

    “不能左转”?没问题。

    你是说‘下载’吗?

    ‘禁止摄影’是正确的!

    为什么辨认它们如此简单?这是因为这些图标已经变得反复和普遍地与行动或意义联系在一起。

    设计自己的图标的指导原则

    我喜欢Joel Diaz用钢笔设计图标的过程,列出了设计更好图标的5条指导方针。他谈到了5件需要牢记的重要事情:

    了解问题所在

    采取全面的方法

    明白简单就是更好

    考虑上下文?

    理解符号学

    1)理解问题:他谈到他的客户的请求是如何为文档加载错误创建一个图标,如下所示:

    乔尔建议把它剥离出来。要做到这一点:

    这个图标没有给出任何参考,所以不容易理解。

    2)采取全面的方法:在玩弄图标后,出现了这个问题。

    然而,正如他们意识到的那样,这也被用作临床标志。重复使用已经被用来表示某些东西的图标的危险是您要避免的。了解一组图标是很重要的。

    我建议通过阅读材料和做你自己的研究来做到这一点。让你的图标设计经过一群人,看看他们是否明白。

    3)认识到简单就是更好:乔尔的客户随后推荐了这一条:

    这太复杂了,比喻也令人困惑。

    4)考虑背景:然后他们考虑以下内容:

    这张图片用鲜艳的颜色和醒目的图标传达了“危险”的意思。浅颜色,如灰色和粉色,意味着问题不是很大,事情会好起来的。一个红色的、大的、闪烁的图标会让你陷入恐慌模式,就好像问题已经比实际情况更严重了。

    5)理解符号学:乔尔指出,次交流是一种符号语言,在排版中也很重要。你可以有女性化的字体、精致的字体等等(我们的博客‘What the Font’会告诉你所有这些)。

    问问你自己,你的偶像要传达什么信息。

    乔尔指出,互联网停机的标志如下:

    这些图标的完美之处在于尺寸很小,传达了一些错误的微妙信息,但浅色的图标颜色表明事情并不严重。

    Joel和他的客户最终选择了这个(相当合适的)设计来解决文档加载错误:

    更多需要牢记的最佳实践:

    让它保持优雅和简单

    避免在您的设计中使用过多图标

    坚持整体网站设计主题,即使是图标

    图标的优势

    图标是一种很好的方式来:

    1)让列表看起来很有趣

    2)增加可读性,打破文本单调

    3)加入一些个性和乐趣

    4)用图标制作页眉

    --

    《图像库》

    我们知道,伟大的图标是互联网送给网页设计师的礼物,或者只是Webydo送给设计师的礼物。这个网站为你提供了一堆免费的图标,这些图标对每种类型的设计都很好。以下是几个例子:

    多用途图标集

    万维网图标集

    MiniCool图标集

    你可以在这里探索所有的布景。

    如果您正在寻找更好的东西,请尝试Iconspel,这是世界上最大的优质图标收藏,可以完美地适应您的项目。Iconspel为数百万设计师和开发人员提供超过100万个当前图标以及每月添加的超过50,000个新图标。我们对这个出色的设计资源提供50%的特别优惠。如果您感兴趣,请转至该页面。

    继续,通过精心设计、精心挑选的图标让您的设计脱颖而出。

    上一页:要在WordPress主题中查找的6个功能 下一页:网页设计中的色彩心理&以及你为什么应该使用它
    全部评论(0)