兰亭妙微ui设计公司分享:为什么你的图标不够专业?大厂实战拆解,读懂图标设计底层逻辑

兰亭妙微ui设计公司分享:2024 年,58 同城完成企业文化焕新,借此契机,产品迎来一轮全面视觉升级。项目确立四大设计原则:简单有效、美好安乐、多元融合、自然生长。这套理念不仅指导整体视觉改版,更是搭建产品与用户情感连接的内核。

在启动图标体系设计时,《道德经》中 “大方无隅” 的哲思带来重要启发:开放包容、和谐自然的内核,恰好与本次设计理念高度契合,也为整套图标体系定下创作基调。下面将从形、意、色、境、规五个维度,完整复盘 58 同城图标设计的实战全过程。

一、形|方圆之间,容纳万千表达

image.png

形态是图标设计的根基,不同轮廓会直接带给用户截然不同的感知。

1. 确立基础形态

方形代表秩序、规则与稳定,如同坚实的基石,承载产品体系的严谨;圆形象征包容、柔和与流动,传递产品面向用户的亲和姿态。 结合项目设计理念,我们将二者融合,打造方中有圆、方圆共生的基础图形语言。既保留产品的秩序感,又传递出与用户共生共存的温和气质。

2. 业务符号的融入

image.png

58 同城业务线庞杂,每个板块都具备独有的业务特质。为此我们提炼专属业务符号,嵌入图标设计当中,强化业务辨识度,唤醒用户的业务认知,让图形不止是装饰,更是业务信息的载体。

3. 线条语言的取舍

线条风格延续方圆融合的设计基调,摒弃生硬锐利的直线,大量使用流畅弧线与曲线,贯彻和谐、自然、舒适的体验追求,统一整套图标气质。

二、意|兼顾功能传递与情感共鸣

image.png

图标是界面最直观的视觉符号,表意是否清晰,直接决定用户体验好坏。本次设计的核心目标:打造看得懂、能共情的图标体系。

1. 选用大众共识视觉符号

坚持以用户为中心,优先选用大众具备普遍认知的物象。例如求职匹配公文包、工卡;二手车对应汽车;生活服务对应清洁工具。 这类符号无需额外解释,用户一眼就能读懂含义,降低认知成本。

2. 适度细节丰富表达

在扁平化基底之上,增加适度光影与细节刻画,为图形赋予真实感与层次。既强化信息表意,也避免图标单薄空洞,让用户浏览时一目了然。

3. 不止功能,更要触动情绪

优秀的图标不止完成功能指引,更需要传递情绪价值。通过形态塑造、色彩搭配、细节打磨,给用户带来感官上的舒适愉悦,让用户在使用产品的过程中,感受到设计的温度与关怀。

三、色|构建有生命力的色彩系统

image.png

色彩是图标强大的视觉武器,决定图标的吸引力与气质表达。

1. 搭建全新品牌色彩体系

image.png

基于原有 58 品牌色做拓展迭代,由原先 4 种品牌色扩充为 5 套标准色,并且和各业务线做绑定适配。这套色彩体系具备开放、包容的特质,为品牌视觉注入全新活力。

2. 色彩虚实搭配提升表现力

将新色彩体系落地到图标当中,为不同业务图标赋予专属气质。通过色彩、图形虚实对比组合,强化风格辨识度,增加画面趣味性,让图标在繁杂界面中可以有效抓住用户视线。

四、境|分层设计,适配真实使用场景

image.png

作为大型平台类产品,图标不能一套样式通吃全部页面。合理划分视觉层级,梳理平台与业务的关系,避免视觉过载,打造沉浸式浏览体验。

1. 建立三级视觉层级

我们把图标划分为三个层级,适配不同页面位置:

  1. 一级图标:首页主金刚区,用户第一眼关注的区域,强调视觉权重与引导能力;
  2. 二级图标:首页副金刚区、各业务大类金刚区,保证识别度的同时,与一级形成视觉落差;
  3. 三级图标:个人中心等功能入口,以极简形态优先满足功能实用性。

2. 贴合场景做差异化处理

  • 一级金刚区图标:叠加光影、质感细节,强化重点引导;
  • 二级图标:偏向扁平化,尺寸收窄,做视觉退让,保留识别;
  • 三级图标:采用线性样式,适配功能入口轻量化的使用场景。

五、规|无规矩不成方圆,设计靠规范落地

image.png

再出色的创意,离开了规范,就很难保持长期统一。完善的图标规范,保障多名设计师协作下产出风格一致,稳定整体设计质量。

1. 沉淀完整设计规范文档

输出完备的图标规范手册,覆盖设计理念、基础网格、倍率、形状符号、图形特征、场景用法等维度,作为团队统一的设计依据。同时归集全部图标资产库,方便设计师快速调用,提升协作效率。

2. 用数据和用户反馈做科学校验

设计好坏不能只依靠设计师主观审美。项目全程引入量化评估,收集真实用户反馈、分析线上数据,持续迭代优化,让设计决策回归用户真实体验,而不是个人喜好。

写在最后

图标体量虽小,却是产品与用户之间重要的连接媒介,承载信息传递与情感共鸣双重价值。 本次项目,我们从形塑造基底、意传递信息、色赋予气质、境适配场景、规保障落地五个维度完成整套图标体系。同时依靠规范约束、用户数据验证,保障后续迭代质量。 未来,58UXD 团队也会继续延续这套设计理念,持续探索,为用户带来更有温度的设计体验。

 

 

 

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档