这五个经典Adobe图标,藏着哪些设计巧思?

0 评论 742 浏览 1 收藏 8 分钟

五个看似简单的图标,背后却是Adobe数十年产品演进的缩影。从拟物到极简,从功能隐喻到文化符号,这些“常青树”图标不仅定义了设计工具的操作逻辑,更见证了人机交互语言的变迁。

Adobe的产品大家应该都用过,每个产品里都有很多一些经典且有特色的工具图标。今天介绍五个Adobe图标,称得上是设计圈的“常青树”。它们陪着Adobe走过几十年,跟着旗下的王牌产品一起成长,一路迭代却始终不过气。

每个图标背后都有段故事,不止于设计,更藏着技术、文化、用户需求和这些年产品的变迁~

01 “眼睛”图标

核心功能:控制图层显示 / 隐藏

“眼睛”图标是经典的设计隐喻,用得广好理解,用来表达“显示/隐藏”“可见/不可见”这种对立的概念。

在早期浅色版PS中,最开始用来控制图层“显示/隐藏”的是版本A,效果做得特别逼真,睫毛、瞳孔都看得清楚。

后来推出深色版本的PS,写实的“眼睛”看着有点怪,就重新设计了在浅/深背景下效果差不多的版本B。

现在的“眼睛”图标早就从精致的写实风,变成了简约抽象的符号风,适用范围更广,能让人明白是“控制可见性”。

同时,针对浅深不同的颜色模式,“眼睛”图标在保持形状不变的情况下反转了颜色,这样在不同平台或者设备中都能使用样式更统一的图标。

02 魔棒”图标

核心功能:一键实现图像便捷操作(如选色)

“魔棒”图标的设计一直围绕“魔法”展开,但现在四芒星成了AI标志性元素后,就得重新考虑“魔棒”的展示效果,既要保留“魔棒”的标志元素,又要和AI功能图标有区分。

在新版PS中,“魔棒”图标保留了原来的闪光样式,重新调整了闪光元素的位置、大小和旋转角度。从最开始的单个A版样式,改成了旋转后的B版样式,最后用了三个独立闪光元素的C版样式,彻底和AI功能区分开。

03 “钢笔”图标

核心功能:精准绘制矢量路径、贝塞尔曲线

现在“钢笔”图标是很常见的设计,但回溯到1987年Adobe Illustrator刚推出时,它才真正成为“创建、编辑矢量路径”的代名词。

它不是用来随手画的“铅笔”,也不是用来涂色的“画笔”,而是能精准画贝塞尔曲线、做矢量图的“钢笔”。

这么多年,“钢笔”代表“矢量绘图”的核心意思没改,但图标的朝向调整过。

在Illustrator 15版本里,“钢笔”角度被旋转倾斜,目的是更好地适配按钮空间,还能和其他工具图标的方向保持一致。

04 “裁剪”图标

核心功能:修剪、旋转、矫正图像

从Photoshop 1.0版本开始,“裁剪”图标就存在了。它的设计灵感,来自暗房里洗照片时用的遮罩框,特别是框上的角线。这么多年“裁剪”图标虽有小调整,但一直是个经得起时间考验的经典符号。

这些年“裁剪”图标做了不少优化:

  • 去掉原来的对角线,外观更简洁;
  • 加了箭头,用来表示图片旋转功能。

星号标记的地方,是这些年Adobe尝试调整标尺交叉位置的情况,直到2020年才确定了现在“左上右下”的位置顺序(这亿点变化你发现了吗…)

05 “软盘”图标

核心功能:保存文件(本地/云端/U盘)

“软盘”图标和“电话听筒”图标一样,都是拟物化设计的代表——就算很多人没见过真正的软盘,也知道它代表“保存”。

用图标表示抽象操作本身就不容易,再加上这么多年存储设备一直在变,软盘图标的“长寿”更让人惊讶。

从最开始代表软盘的A版图标,到后来代表光盘/硬盘的B版图标,再到现在代表保存到云端的C版图标,它的含义一直在延伸。

但看到这个经典符号,大家就知道是“保存”,这就够了。

最后

图标虽小,但影响力却很大。

寥寥几个像素,却承载着丰富的意义、记忆和隐喻。随着工具、用户和平台的不断发展,作为指引的图标也在不断演变。

这些图标的变化告诉我们,设计不是一成不变的,而是一个不断倾听用户、测试效果、优化改进的动态过程,有时甚至会回归到那些有效的经典设计里。

所以下次你点图标时,不妨多停一秒,好好看看这个藏着很多故事的小小图像。

本文由人人都是产品经理作者【Clip设计夹】,微信公众号:【Clip设计夹】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!