为什么你的图标不够专业？大厂高手用实战案例教会你！

2024 年 58 同城迎来了意义深远的企业文化焕新，借此东风，我们顺势完成了产品视觉的全面升级。并确定了简单有效，美好安乐，多元融合和自然生长作为主要原则的设计理念。这一理念，不仅是对产品视觉升级的指引，更是我们与用户建立深度连接的精神纽带。

在着手 icon 设计之初，老子《道德经》中“大方无隅”一词在我脑海闪现，而其体现出的开放，包容，和谐，自然等哲学观，与我们的设计原则不谋而合。为此次 icon 设计指明了方向。

接下来，我将从形、意、色、境、规五个维度，为大家分享这次的 icon 设计之旅。

一、“形”-方圆之间融万物

1. 形态的确定

形态是图标设计的根基，不同的形态能赋予用户截然不同的感官体验。

我们从最基础的方形和圆形出发，方形象征着规矩、法则与稳定，如同坚固基石，代表着产品的规则与秩序；圆形则寓意着和谐、包容与流动，恰似潺潺流水，展现出与用户和谐共处的态度。

基于设计原则，我们将方圆进行巧妙融合，设计出一种方中有圆，方圆结合的基础形态。既体现了对产品规则的尊重，又传递出产品与用户和谐统一的态度。

2. 与符号的结合

58 同城拥有丰富多样的业务线，每个业务线都有其独特的属性和特色。为此我们精心打造了专属符号。那么在图标的设计之中，我们便将符号融入其中。让图标更多的传递业务属性，激活用户的感知度。

3. 线条的运用

在线条的选择上，我们始终围绕方圆结合的形态设定，摒弃生硬的直线，转而追求流畅的弧线与曲线。力求体现和谐，自然，舒适的原则和体验。

二、“意”-功能与情感表达

图标作为页面中最醒目的视觉元素，其能否直观表达功能或信息，直接影响用户体验。

因此，打造让用户看得懂、有共鸣的图标设计，是我们此次设计的核心目标。

1. 选择具有普遍认知的形象

我们秉持 “以用户为中心” 的理念，在图标设计中只选用具有普遍认知的形象。例如工作对应公文包工卡，二手车对应车子，生活服务对应抹布刷子等。

这些形象简单易懂，无需过多解释，用户便能快速理解图标的含义。

2. 细节的呈现

为了让扁平的图标更具真实感和立体感，我们在图标中巧妙地加入适量的光影和细节刻画。不仅使图标更加生动形象，还能让表意更加清晰准确，让用户在使用过程中一目了然。

3. 情感的共鸣

我们深知，优秀的设计不仅要满足功能需求，更要触动用户的情感。

通过形态的建立，色彩的搭配以及细节的打磨，我们致力于为用户带来感官上的愉悦，引发情感共鸣，让用户在使用 58 同城的过程中感受到温暖与关怀。

三、“色”-色彩的巧妙运用

色彩在图标设计中起着举足轻重的作用，它能赋予图标独特的视觉吸引力。

1. 色彩体系的建立

我们基于 58 品牌色重新拓展了色彩体系，将原有的 4 种 58 品牌色融入其中。由原来的单一标准色扩展至 5 个标准色，并将其与业务进行了关联。充分展现了 58 色彩系统的开放性与包容性，为品牌形象注入了新的活力。

2. 图标色彩的搭配

我们将全新的色彩体系融入图标设计之中，为各业务线图标注入灵魂。

在图标中，通过色彩图形的虚实搭配，既突出了设计风格，又增添了趣味性，使图标在众多视觉元素中脱颖而出，吸引用户的目光。

四、“境”-营造沉浸式体验

1. 视觉层级的搭建

作为一个大型的平台型产品，图标的视觉层级搭建至关重要。合理的层级设计，既能清晰梳理平台与各业务线的层级关系，又能有效调动用户的感官体验，避免视觉疲劳。

我们将图标大致划分为三个层级：第一层级适用于平台首页的主金刚区，这里的图标是用户进入平台后首先关注的焦点，需要突出重要性和引导性；第二层级适用于平台首页的副金刚区以及业务大类页的金刚区，在保证识别性的同时，与第一层级形成对比；第三层级适用于个人中心等功能入口区域，以简洁的设计满足功能性需求。

2. 场景适用性

当然场景的适用性同样在我们的考量之中。

我们在平台首页的主金刚区图标设计中加入更多光影和质感的细节设计，突出其重要性和引导性。

二级图标我们设计更为扁平，尺寸也相对减小，对比突出的同时不影响本身识别性。

三级图标则使用线性图标，更符合功能性入口的场景属性。

五、“规”-规矩定方圆

“无规矩不成方圆”，优秀的图标设计离不开完善的设计规范。规范的制定，能确保不同设计师在后续设计过程中保持一致性，提升整体设计质量。

1. 规范的搭建

我们沉淀了一套全面的图标设计视觉规范文档，内容涵盖理念介绍，基础删格，倍率，形状符号，图形特点，使用场景等各个方面。用于指导设计师的设计工作。

同时，我们将所有产出的图标进行汇总整理，方便设计师快速查找和使用，提高设计效率。

2. 科学验证

设计的优劣不能仅凭个人喜好评判，而需要科学的验证。在整个设计过程中，我们始终坚持通过量化评估来指导每一项设计产出。通过收集用户反馈、分析数据等方式，对设计进行不断优化，确保每一次改进都能切实提升用户体验，让设计真正服务于用户。

写在最后

在探索图标设计的过程中。我们深刻认识到，图标虽小，却承载着连接用户与产品、激发情感共鸣的巨大能量。

实践中，我们通过形态设计，功能表意，色彩搭配，层级搭建等方面达成最终的设计产出。并通过规范的制定和科学验证指导后续设计。