Spotify系统Icon重设计

我们终于在本周更新了Spotify的系统图标，自从项目开始到最后我们共耗费了四个多月，并为了保证整个产品和功能看起来协调，期间绘制了超过600个Icon。

重新设计一套系统Icon（此前已经有三年没有更新了）难度远远超出我们的预期，在设计它们的过程中，主要遇到了来自三个方面的挑战。

视觉

刚开始我们打算设计一套比较传统而又很大胆的系统Icon，从而更好的反映出品牌调性，同时又希望Icon看起来保持足够的优雅而又极简。

核心的改进：（1）保持行高一致性；（2）极简又细致的轮廓；（3）实心的；（4）扁平和3D的结合

新Icon的形状可以很好的反映出我们的圆型字体的特点：其更加尖锐又很清晰的表达Icon的整体样式，从而创建具有Spotify特性的一套Icon，同时还确保这些Icon是以最简单的形式绘制的，因为真正要考虑的是Icon背后所传达的的含义具有最低识别度的限度。

在绘制icon时，我们从圆型字体的字符、字形中寻找灵感：（1）圆角和尖角的组合；（2）使用常用的形状来定义icon的整体风格

功能

Spotify在越来越多的平台和屏幕尺寸上使用，随着业务需求量的增长，我们需要考虑的是创建一个灵活的Icon库来满足需要。以前的Icon太过于复杂了，视觉上的隐喻对于用户而言比较难以理解，并且在不同的屏幕尺寸上使用时有面临着各种问题。相反，新的icon采用的简单形状组合使我们更加的容易在任何大小尺寸的屏幕和平面中使用。

我们在整个产品中确定常见的icon大小，并适当的调整了锚点位置以确保像素完美的切合屏幕，每个icon都创建了5个自定义的尺寸，在这套尺寸组合的基础上，我们一共绘制单独了绘制了600个icon

适应性

最后的挑战是确保每个icon都能在不同的页面端口和平台中适应。刚开始时，我们会绘制Spotify中所有会使用到的icon，之后围绕着其适用性来单独设计每个icon，同时还需要花几个星期在团队和工程师进行交流，了解彼此之间的具体需求细节。

通过这种方式可以看到在不同的背景下，以前的Icon在视觉和交互上存在的一些问题，此外极简的响应式icon库可以有助于帮助我们改善产品中的一些核心的交互方式，例如上图例子中在新的导航栏中，使它们更加方便友好的访问。

设计约束

然而，在这个项目过程中最值得学习的地方就是：我们需要强迫自己在非常具体的设计、技术与产品需要中时刻保持创造性和开放性。

我们探索了主页中icon的形状的不同变化，但是最终只选择了最简单的一个，并始终牢记这一点。

上面我们讨论了技术和产品的限制，并以此为出发点而设计。在帮助用户节省时间以及更易于识别上，Spotify会与其他的功能之间建立某种联系：我们是做什么的，并帮助创建一种图形语言，在视觉和功能之间保持平衡关系。

作者：Andrea Limjoco

https://medium.com/@andrealimjoco/redesigning-the-spotify-icon-suite-63f16853ba00#.5gea4cnm3