1. 爱猫说设计狮网首页
  2. 有干货

图标设计诀窍 | 七大技巧教您设计一致且连贯的图标组合

创建一致并连贯的图标组不是简单的任务。了解该如何运用这七个专业设计诀窍掌握图标设计。

图标设计是设计能够代表物品、动作、程式等等图形象征的过程。图标随处都能看到;你可能在街道标志、电话或是网站到达页面看过他们。他们通常都是平面设计,有着清晰边缘与平滑曲线,以确保所有尺寸的可读性。

图标的主要目的就是快速而清晰地传达视觉讯息。有效的图标能够打破语言藩篱,为所有观看者提供普世意义。他们在你需要促进特定动作时非常重要,例如导航至机场或是在软件界面中使用不同的命令。

随着时间发展,网站设计需求的增加让数位图标变得更加重要。你可以在 Sketch 等使用者界面程式,或者像是 Adobe Illustrator 的向量图软件里设计图标。

需要一些协助以完成下个图标设计专案?继续阅读能让你精通图标设计的七个珍贵技巧。


1. 坚持单一风格

在沉浸于图标设计前,请先思考风格方向。这不只代表要让所有图标保持特定的视重、颜色或美学。风格方向也需要将图标出现位置以及人们的观看方式纳入考量。为程式界面设计的图标与大型海报用的图标就有所不同。

<span class='yzk_title_5586'>图标设计诀窍 | 七大技巧教您设计一致且连贯的图标组合</span>-爱猫说设计狮网
图标作者 PureSolution

决定了图标风格方向之后,请保持一致。拥有多种变化与视重的图标组可能会自相矛盾。如果不确定图标是否彼此相搭,你可以将他们摆放在一起,然后判断哪一个图标不合群。不要匆忙行事;完善图标组可能会需要好几次的修改。


2. 忠于特定题材

浏览图标组会注意到的主要内容就是特定而一致的主题。图标组通常都有指定主题,不论那是音乐程式还是银行网站。

<span class='yzk_title_5586'>图标设计诀窍 | 七大技巧教您设计一致且连贯的图标组合</span>-爱猫说设计狮网
图标作者 Keep Calm and Vector

如果觉得你的图标组太模糊,请坚用单一主题或题材。举例来说,相较于混用医疗与办公用品图标,请思考与医疗产业密切相关的图像。混合超过一种类别的图标可能会让图标组产生混淆且妨碍设计讯息。


3. 运用网格

你曾试过在空白纸张上设计图标吗?随着时间过去,你画出的线条和形状会开始不平直并且参差不齐──如果不在稍后整理就会变成一团糟。拥有像素完美图标的秘诀就在方形网格上。

网格能够充当图标的边界──他们激励你在有限的空间里创作。仰赖网格的设计师通常都有特定的设计风格,并且在整个图标组里保持相同的尺寸。

<span class='yzk_title_5586'>图标设计诀窍 | 七大技巧教您设计一致且连贯的图标组合</span>-爱猫说设计狮网
图标作者 Dacian G

开始设计下个图标组之前,请从网格或方格纸开始,以便轻松地在边界里设计。网格纸能够加速设计流程,而且可以避免不必要的修改。


4. 全程使用相同配色

大多数的设计师在早期就会了解一致的配色对设计来说非常重要;图标设计也不例外。全程保持一致的配色能够让多个图标彼此间拥有连贯性。

选择配色时,请确认颜色符合图标组主题。举例来说,复古色调可能就不适合电脑零件的图标组。

<span class='yzk_title_5586'>图标设计诀窍 | 七大技巧教您设计一致且连贯的图标组合</span>-爱猫说设计狮网
图标作者 vasabii

根据经验法则,请避免在图标中使用过多色彩;坚持三种颜色或更少,并且选择能够相搭的色调,像是互补色或相似色。

想找下个图标设计专案可用的色彩灵感?请查看这 101 个颜色组合、25 个复古配色,以及 20 个节庆主题色调──全都是免费的。


5. 保持相同的视重和尺寸

除了让图标组维持相同的配色之外,拥有一致的视重和尺寸也很重要。图标组内有过多变化可能会影响整体设计讯息,让图标看起来不匹配。

<span class='yzk_title_5586'>图标设计诀窍 | 七大技巧教您设计一致且连贯的图标组合</span>-爱猫说设计狮网
图标作者 Bloomicon

如果你忠于轮廓或形状,请确认每个图像的尺寸和视重都是统一的。例如,在上方的图标组中,每项设计的圆圈和线条宽度都是一致的。如果觉得有疑问,请使用网格和尺规。


6. 设定严格的图标规范

想要在图标组里保持一致性,请设定一些规则。他们可能像是在每个设计里加入圆角矩形那样简单──或是更加复杂的作业,例如在每个图标里使用 4 像素的轮廓,15 像素的网格界限,以及一致的圆圈与十字结合。不论规则是什么都要贯彻到底。随着时间过去,你会发现图标们开始变得协调。

<span class='yzk_title_5586'>图标设计诀窍 | 七大技巧教您设计一致且连贯的图标组合</span>-爱猫说设计狮网
图标作者 davooda

7. 确认所有尺寸的清晰度

大部分线上或程式界面的图标尺寸都相对的小。设计图标时,请尝试调整大小,以确保每个图标即使在最小的尺寸都能保持清晰。精细的图标常常在缩小时失去细节表现,而这会让他们变得难以阅读与理解。

<span class='yzk_title_5586'>图标设计诀窍 | 七大技巧教您设计一致且连贯的图标组合</span>-爱猫说设计狮网
图标作者 PureSolution

多方测试图标的不同变化;这样能够协助你了解设计中哪些方面是不可或缺,而哪部分是装饰性的。如果你的图标组由轮廓形状和曲线组成,请考虑配合实色以平衡构图。最重要的是让每个图标都能有效沟通。如果图标难以解读,请考虑修改设计。

爱猫说是一个完全独立的媒体,运营只靠网络广告支撑,如果您支持爱猫说设计狮网的话,请对此网站关闭广告拦截功能(如:Adblock)爱猫说设计狮网衷心的感谢您。

本文来自作者:请叫我网站管理员,资源整理不易,且下且珍惜。如果您觉得不错,欢迎评论。本文观点不代表爱猫说设计狮网立场,转载请联系原作者。

若本文章的资源已经失效,您可以在评论区告诉我们,我们将及时更新。如果您想要获取更多资源,并与我们进行互动,请加入我们的官方QQ群:284300445。爱猫说设计狮联盟

发表评论

登录后才能评论

联系我们

15298802030

在线咨询:点击这里给我发消息  爱猫说设计狮联盟

邮件:admin@imaoshuo.cn

工作时间:周一至周五,9:30-18:30,节假日休息

QR code
error: 注意:本站内容受到保护!