你可以在这里看到一个非常有名的品牌标志设计升级的过程,如何在保证已有用户的识别情况下对品牌的标志进行优化升级,需要考虑什么?也许这篇文章可以带给你答案。

本文为翻译内容,来自Sketch官方博客
翻译:张洪Heo
推荐访问原文地址:立即访问

“我们试图探索尽可能多的想法,看看我们能用这种新风格做些什么。”

上个月,我们发布了Mac应用程序的70版,对MacOS Big Sur进行了重大的用户界面更新。

虽然我们的设计团队花了很长时间来研究如何让Sketch在升级后的操作系统上看起来很棒,但他们还有另一个项目需要考虑–为Mac应用程序添加一个新图标。

用户界面需要数百个小时的工作才能达到像素完美,但重新设计一个可以整天坐在你的Dock(和你眼前)的图标,每天都不是一件容易的事情。

本周,我们与该项目的设计负责人Prekesh坐在一起,了解他是如何为新时代重新想象Sketch图标的,以及为什么它从来都不像重现我们著名的钻石那么简单。

实验

重新想象一个在整个行业如此知名的图标并不是一件容易的挑战。对于Prekesh来说,目标是尝试和做一些新的事情,同时保持Sketch的精髓。

他苦笑着说:“我想我创建的第一份文件‘绝对不是白盒上的钻石’。”“我们试图探索尽可能多的想法和选择,看看我们能用Big Sur的新风格做些什么。”他不是在开玩笑。这一过程始于在iPad上用苹果铅笔绘制的近50个概念。

他解释说:“我只是开始勾勒出一大堆想法,不管这些想法有多奇怪。”“我们的目标是把想法扔到墙上,看看哪些坚持住了,哪些没有坚持下来,以及我们可以继续前进的是什么。”接下来,他把这些素描带到Sketch中,开始探索不同的方法,以更高的保真度。

Prekesh在最初的草图阶段探索想法时有一些乐趣:“并不是所有这些想法都能真正成为应用程序的图标,但我把我最喜欢的那些拿到了Sketch上。”

当他在我们内部的Slack频道发布最新消息时,兴奋之情开始增长,他从团队中的其他设计师那里得到了大量有用的反馈。当普雷凯什思考完全重塑应用程序图标的利弊时,一些比较“流行”的设计确实引起了一些兴趣。

在探索了一些将矢量编辑和钢笔结合在一起的方法后,Prekesh发现,随着图标缩小,这些想法变得杂乱无章,再加上,Sketch不仅仅是一个矢量编辑器。

普雷凯什在制作铅笔等额外工具时玩得很开心,但这些想法只停留在单色上。

他解释说:“我们尝试放弃钻石,但考虑到它是我们品牌的重要组成部分,这似乎有点愚蠢。”

“所以我们创造了一系列新的钻石形状–有些有透视,有些没有;有些有更多的脸,有些更少。”

从那时起,问题就变成了哪些元素效果最好,以及如何将这些元素与不同的背景相结合。

他开始转向使用钻石的想法,但方式不同。他设计了一个旧的自上而下的图标,并将其调整为适合蠕动的形状。

寻找平衡点

要在前景形状和背景形状之间取得恰当的平衡尤其困难。他说:“我们很快就发现,圆形长方形背景和钻石之间经常存在视觉上的斗争。”“我们知道我们需要找到一种方式让他们互相称赞,而不是争抢观众的注意力。”

这些是在图标中包含Sketch UI元素的第一批想法。Prekesh试图在钻石和侧边栏中加入一些透明度。

随着概念工作的继续,窗户和钻石的比喻仍然存在。平衡背景和钻石被证明是一个挑战,这导致Prekesh略微简化了背景。

随着工作的进展,出现了两个领跑者,两个人的背景都很相似-一个使用的是非常接近我们现在的钻石的东西,另一个采用了更3D的方法。

由于我们正在刷新图标,Prekesh还制作了一个新的3D版本的钻石。您将看到这个略微倾斜的变体在本页面的其他模型中使用。

然后,他使用Blender创建了粗略的3D渲染,以供照明参考。

最后,经过几周的内部测试和整个公司团队的大量投入,最终做出了明确的决定。

这将是我们最后的图标:

通过剥离图标的基本背景,并为侧边栏添加微妙的透明度,我们认为它达到了很好的平衡。

一切都在细节中

对于Prekesh来说,正是这些小细节让我们的新图标变得特别。“我喜欢它的微妙之处,”他说。有一些细节和小版本会更新以前的图标,但不一定会偏离使草图图标成为草图图标的原因太远。但是,在他画了那么多古怪的草图之后,他对我们最终得到的设计会让人们感到熟悉感到失望吗?

“不完全是–在我们所有的探索之后,这是一种感觉正确的选择,”他解释说。“有些细微的细节我很喜欢。圆角矩形背景实际上是Sketch的Big Sur用户界面的简化表示,左边的边栏是透明的,这意味着它会略微呈现出墙纸的背景颜色。这颗钻石本身也得到了一些喜爱-普雷凯什从头开始重新绘制和重新着色,以改善对比度,使它略微更有活力。此外,一个新的、更深的阴影让人感觉它真的漂浮在UI前面。

侧边栏中微妙的透明度意味着你可以通过图标获得桌面壁纸的提示

普雷凯什说,他的灵感来自Big Sur的新设计和苹果自己的图标-他是这些图标的铁杆粉丝。“我喜欢这个新方向,”他说。“圆角矩形图标的限制无疑会鼓励人们更有创意地使用这个空间。”回想起重塑这样一个知名偶像的过程,普雷凯什承认,他感到肩上的巨大责任。他解释说:“一开始有点超现实主义,因为在我的整个职业生涯中,我基本上都在仰慕前几个偶像的设计师。”对于伊曼纽尔(我们的首席设计官)和马塞洛(马菲尔,我们的设计总监)来说,委托我探索和创造应用图标的下一代感觉非常棒。但是压力是很大的!。

他笑了。

Sketch系列图标

似乎重新设计你每天都会在你的Dock上看到的图标还不够挑战,这并不是旅程的终点。
除了您使用的Mac应用程序版本,我们还维护了几个测试版本,每个测试版本都处于不同的开发阶段。

从QA团队的Debug版本和早期的实验版本,一直到我们的Private和Public Beta版本,我们对每个版本都使用不同的图标,所以很清楚谁在测试什么功能,什么时候测试。

在此之前,每个发布版本都有不同颜色的钻石。在顶行:Release、Beta和Private。最下面一行:内部、实验和调试。

以前,我们只是用不同颜色的菱形来表示不同的版本。但对于macOS Big sur来说,普雷凯什决定找点乐子。他解释说:“我想到了一些想法,从‘Xcode构建’图标一直到公开发布图标,都是字面上的视觉进步,它们在某种程度上讲述了一个故事。”“但这只会对我们内部有意义,而且感觉不像是解决这些问题的正确方法。”结果是六个完全独特的图标,每个图标都有自己的配色方案和味道。对于普雷凯什来说,这是一个机会,可以把一些早期的、更古怪的想法变成现实。

这个以Matrix为灵感的设计几乎成为我们Debug版本的图标。最终,团队决定了一种感觉更接近Xcode蓝色MacOS图标的设计。

“我们的实验版总是包含我们正在开发的最新功能,而Glenn[Hitchcock,设计团队的另一名成员]想要尝试一些东西,证明它真的‘就在那里’。”
那为什么不把钻石放到太空呢?“

实验版本图标。在这种情况下,它确实做到了名副其实。

那藏在窗帘后面的那个图标呢?“这个有点好笑。我们想在推特上调侃这个新图标,所以我花了大半天的时间为预告片中要用到的东西画布料,“他笑着说。“在做了这么多工作之后,我意识到我们实际上可以用它来做我们的私人测试版图标。”这样我就省了不少时间!“

普雷凯什笑着说:“马塞洛特别告诉我不要在这上面花太多时间,因为这是为了Twitter,而我在图标上还有更多的工作要做。”

对于Prekesh来说,挑战是给每个图标赋予自己的身份-并确保它传达了一些关于人们应该从这个版本中期待什么的信息。他对结果很满意。公平地说,他们与团队其他成员在内部也相处得很好。

整个团队都集合起来了。第一排:Release、Beta和Private。第二排:内部、实验和调试

他笑着说:“我怀疑有些人会看到这些,并想把它们作为他们的Sketch图标。”
“嘿,我只能说:我们正在招聘–来加入我们吧!”我们喜欢让你看到我们在Sketch上所做的幕后工作。您想看什么?让我们了解一下社交网站,我们会在下一次试看时考虑你的想法。目前,我们希望您喜欢使用最新的Mac版本。