> * 原文地址：[The Icon Kaleidoscope](https://medium.com/microsoft-design/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4)
> * 原文作者：[Jon Friedman](https://medium.com/@designjon)
> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO1/the-ripple-effect-expanding-our-icon-design-system.md](https://github.com/xitu/gold-miner/blob/master/TODO1/the-ripple-effect-expanding-our-icon-design-system.md)
> * 译者：[👊Badd](https://juejin.im/user/5b0f6d4b6fb9a009e405dda1)
> * 校对者：[PingHGao](https://github.com/PingHGao), [zh1an](https://github.com/zh1an)

# 图标万花筒

#### 用全新的颜色、材质和润饰来重新设计超过 100 种图标

![新版 Microsoft 365 图标样品。](https://cdn-images-1.medium.com/max/6400/1*YTjMo-ISSffSy98XbJNiyQ.png)

空白和重新设计都没有后续的好。

去年，我们推出了 [Office 新版图标](https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f?source=friends_link&sk=499905fb0d5a65d594aab35201debf40)，向客户表明我们已经开发了产品来支持不断变化的工作环境。在这个世界里，尽管这个世界比以往任何时候都[更具有移动性](https://medium.com/microsoft-design/microsoft365mobile-3b5b7782152c?source=friends_link&sk=6f3168beb86bf945f6c512fc38c03aad)，但社交联系和协作对成功都至关重要。借助新的信息流，这个世界将具有巨大的创造力和发展潜力。

在 Microsoft 的整个产品体系中，我们一直致力于帮助促进和加强此类交互和体验。将图标设计工作从 10 种扩展到上百种，以反映这种新世界的工作既艰巨又令人兴奋。

![跨 Microsoft 生态系统扩展设计需要一个开放且灵活的系统。](https://cdn-images-1.medium.com/max/4800/1*PwcHt8KDe8R3zlVV1KkaFw.png)

但是，公司的设计团队作为一个整体聚集在一起，共同制定设计准则，以鼓励个性化的同时创造出更强凝聚力的整体。从巨鳄企业到小本经营，再到芸芸用户，产品团队确保了每个图标都能切切实实地传达出产品的真谛和更博大的 Microsoft 品牌文化。

我们共享知识，共同迭代，共渡难关，也共同分享成功的喜悦。我们比较了不同应用场景下的图标，对不同场景做了不同的改变。更重要的是，我们互相鼓舞激励。这真正是 Microsoft 万众一心的努力成果，我们迫不及待想要听到你们的反馈。

![](https://cdn-images-1.medium.com/max/4800/1*c054Q1I8PoNJoBycan9a6A.png)

![从 Windows 中的程序图标，到 Microsoft Dynamics 中的混合现实（Mixed Reality）图标，所有的新版图标都具有协调一致的气质和灵魂。](https://cdn-images-1.medium.com/max/2650/1*ub0SwM59a-Ddzpce96wyXA.png)

#### 扩大设计系统的覆盖范围

从诸如计算器这样的工具，到能让行家里手瞬间触及世界各个角落的混合现实 App，用户需求的多样性一直呈指数级增长。我们需要让我们的现代图标系统紧随时代潮流。

随着最新一轮图标焕新浪潮的到来，我们面临两大创造性的挑战。我们需要在创新和变革的同时，保持住用户的亲切感。我们还需要建立一套灵活、开放的设计系统，使其能够适应一系列不同的应用场景，同时仍旧忠于 Microsoft 的理念。

![层次丰富的渐变色、柔美的曲线以及顺滑的动态效果，使得 Edge 和 Office 的 Logo 以及其他所有图标形成一个互联的整体。](https://cdn-images-1.medium.com/max/4800/1*GFsUW-8bX2RDds_uW0MWVA.png)

我们的 [Fluent 设计系统](https://medium.com/microsoft-design/evolving-the-microsoft-fluent-design-system-9b37fb890c82?source=friends_link&sk=056e4f7cdd2085c3ec9a872846b84787)能够帮助我们应对这两个挑战。Fluent 强调的是建立亲切感 —— 针对用户的现有认知进行设计，而非要求他们养成新的使用习惯或者学习新的概念。Fluent 还意味着使一个多样化但具有关联性的系统成为可能。为了承载范围如此宽广的应用场景和体验，我们将初始库中的图标颜色、材质和润饰的进行了扩充。

![](https://cdn-images-1.medium.com/max/4800/1*h0A8hdtAAOb1kcTVWaD6eQ.png)

![](https://cdn-images-1.medium.com/max/4800/1*sDUl3QqhtUgdzaKIWVTR3g.png)

用户会花大量时间使用 Microsoft Edge 和 Office 来完成工作，所以一想到要在这些明星产品上试验新的设计风格，各个团队就兴奋不已。我们深知这些使用体验对用户有多么重要，因此，这些图标既要浑然一体，又要卓尔不群。基于大量的测试和用户反馈，我们采用了层次丰富的渐变色，拓宽了色彩范围，用丝带质感实现了活力十足的动态效果。

用户也开始借助混合现实，用全新的方式实现目标。将现实世界与数字世界在图标中交融，使我们能够突破传统思路的局限，尝试新的颜色、润饰和材质。我们需要考虑如何实现三维立体感，因此我们选择了能够反映光线、深度和更多触感的全新设计材质。

不论用户使用手机、PC 还是 VR 头戴设备来完成工作，我们想要在每一个场景里都能触及用户。最新的设计指南帮助我们统一了公司内部乃至每一个产品家族的图标构造。

#### 携手设计我们的未来

从始至终，我们都和社区同舟共济，在这条重新设计图标的路上当然也没有例外。我们为每一个图标都做了无数次的调查。从婉约到豪放，我们研究了大量不同风格的设计指导方案，收集了全世界用户的意见。我们明白了什么样的设计能引起用户的共鸣（有深度、有层次、色彩丰富、富有动感），什么样的不能（扁平化设计、简约用色），是这些经验教训引导着我们去斟酌。

![为 3D 设计意味着从 3D 开始着手。](https://cdn-images-1.medium.com/max/4800/1*RT0pp67flyIsAqhp6Wuk3g.png)

随着我们持续不断地提升技术、推出能够展现 Microsoft 未来风貌的图标集，我们的设计系统也会不断进化，从而适应我们未曾想到过的全新场景。建立一个既能涵盖从文字到抽象概念的全部范围，又能够平衡产品特征和 Microsoft 整体风格的系统，这是一个巨大的挑战 —— 但只有百炼才能成钢。

路漫漫其修远兮，但团队目前的成就已让我们颇感自豪，我们迫不及待想要得到你们的反馈。请在评论区留下你们的真知灼见！

---

**如果想要跟踪 Microsoft Design的最新动向，请在 [Instagram](https://www.instagram.com/microsoft_design/)、[Twitter](http://www.twitter.com/microsoftdesign) 和 [Facebook](http://www.facebook.com/microsoftdesign) 关注我们，或者加入 [Windows 预览体验计划](https://insider.windows.com/)。如果你有意加入 Microsoft 团队，请点击 [aka.ms/DesignCareers](http://aka.ms/designcareers)。**

> 如果发现译文存在错误或其他需要改进的地方，欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。

---

> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。
