如何重新设计3000个图标？来看金山团队的实战案例！

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

项目背景

近些年，WPS 组件页在完善基础功能的同时，增加了许多新功能。新功能的持续增多，虽然满足了用户更广泛的需求，但也使界面中的功能入口越来越多，一定程度上增加了用户的认知负担。

在日常使用 WPS Office 办公时，图标是用户接触最频繁的界面元素之一。它通过更直观、轻松的阅读体验来指导用户的操作行为，从而有效提高产品的易用性。为此，我们以 “让用户更高效地完成工作” 为目标，用了大半年的时间，完成了 WPS Office 组件页 3000 个功能图标的视觉升级。

WPS 改版案例合集：

实战案例！WPS 2021 年度设计改版完整复盘

随着用户使用 WPS Office 的场景逐渐多样化、对产品的体验要求也逐渐提高，我们在视觉层面上围绕着「以用户为中心」开始了一次全新的视觉改版：追求简洁、高效、一致的办公环境，精心打造极致的办公体验。

项目实战复盘！WPS Office 移动端全新改版项目总结

金山 WPS Office 移动端是金山公司打造的、运行于多平台上的全方位全功能办公软件，国内同类产品长期排名领先，支持查看、创建和编辑各种常用 Office 文档。

升级过程

本文将从圈定核心范围、正确处理表意、制定协作模式和适应不同场景等几个方面来详细阐述我们对组件页功能图标视觉升级的全过程。

紧密结合数据，圈定核心范围

面对数量如此庞大的功能图标，我们必须从中找到最核心的一批图标重点突破。如果能快速确定核心图标的视觉风格，其他图标也能由此展开快速推进。为此，我们找到了产品同学，详细了解了功能的使用情况。 我们计算了 3 月份 PC 端三大组件功能区各个功能的日均点击次数，从高到低排序，得到了点击排名前 50 的功能。为了更直观地体现排序情况，我们制作了表格：

根据排序情况，我们圈定了点击量 Top50 功能的图标作为核心图标，重点围绕这批图标进行了设计和优化。

深入理解功能，正确处理表意

确定了核心图标之后，我们又开始了新的思考。用户能否清晰地理解图标的含义？用户能否快速找到自己想要的功能？带着这些疑问，我们进行了深入的研讨。

1. 如何正确处理表意？

要想正确处理表意，必须深入理解功能。我们针对核心功能进行了反复地体验与透彻地研究，确保大家都能准确理解这个功能是什么、有什么作用，从而明确、统一了图标的表达形式和重点元素。

除了结合自身深刻的理解，我们也找了同类产品进行对比，力争寻找出最符合用户认知的图形表达方案。

2. 如何正确验证表意？

功能图标产出后，我们积极邀请产品同学进行审核，针对有争议的图标，我们进行了充分地讨论，并结合双方的要求输出优化方案。同时，我们也通过用户访谈的方式去访问公司里的同事，观察他们的反应、操作过程以及操作结束后的反馈，最终选择了更能快速传达这个功能的图标。

反复打磨推敲，制定协作模式

我们需要绘制将近 3000 个功能图标。为了应对如此庞大的工作量，组内提出了协作绘制的方案，确保能在规定时间内完成目标。

这个项目是我们首次使用多人协作的工作模式。在实施过程中，我们遇到了例如绘制流程不规范、项目进度难把握、质量标准难统一等诸多问题。为了解决这些问题，我们实施了 3 个措施。

1. 制定流程

为了更好地协作绘制图标，我们制定了规范化的流程。这个流程可以帮助我们严格管控好每一环节，规范好每一步，让每一位同学都能快速上手，了解绘制图标的工序，规范地展开工作，最终完成图标绘制任务。

2. 专人统筹

我们以小组为单位，根据各组人数分配不同数量的图标，并结合各组所负责的业务发放对应的图标。图标绘制工作是列入到各组的需求安排里，以业务需求去安排人员和交付时间。考虑到各组人员紧缺与业务繁重的情况，我们有专门的统筹人把这 3000 个图标进行分批处理和分发，按批次定量绘制图标，减少堆积压力。

作为统筹人，需要跟进各组图标分配情况、沟通协调、绘制进度、绘制指引、质量把控等多个事项。同时，也要做到定时收集反馈和提出优化建议，逐步完善多人协作绘制图标的模式，确保图标绘制项目如期完成。

3. 严格控质

为后续产出的图标达到一个专业的水平。我们制定了一套系统的 2021 版图标绘制规范，解决现存图标绘制表意不清晰、风格不统一、体量不一致等问题。通过严格规范图标的绘制，能够让大家绘制出来的图标质量是符合标准的。

每一批图标绘制完成后，都需要自行进行图标设计自查。各组自查没问题就会统一交付到统筹人，再一遍又一遍审核，如遇不通过图标，将通知返稿直到调整通过才算是绘制完成。

套色技术支持，适应不同场景

图标绘制完成后，还剩下最关键的一步 —— 套色。WPS 2021 的功能图标需要兼容四大组件（WPS、WPP、ET、PDF）、适配深浅色皮肤和个性皮肤、同时还要尽量降低资源包大小，因此图标的适应性对于我们来说是个很大的问题，此时就需要用套色来解决。

套色的原理是通过修改 SVG 图标文件中的代码来修改图标的颜色。设计只需要对输出的图标文件进行颜色标记，然后研发再通过这些标记替换颜色，实现图标颜色的变化。

目前，这种套色方式已经在组内试验完成并在各个业务的图标绘制工作中进行了推广。套色给我们的工作提供了很大的便利，主要体现在 3 个方面：

这个套色工具我们命名为「Style Icon」。通过这个套色工具，我们实现了不同主题皮肤的兼容，这是落地后的部分皮肤界面效果。后续如果有更多的皮肤需要适配，都能很好的适应。

总结

在设计层面，经历了不同阶段的探索和优化，我们逐渐找到了设计上需要关注的平衡，例如创新与易用的平衡、认知与行为的平衡、用户习惯的平衡等。平衡好这些，会为我们的产品迭代提供很好的指引。

在协作层面，第一次使用多人协作的模式，快速完成了 3000 个 图标的绘制，并取得了预期成效。在持续不断的图标迭代上，还会面临越来越多的挑战。我们将继续完善多人协作模式，并将这种模式运用到更多项目中去。

在套色工具层面，为了让一套图标适应到不同的场景，是我们一直以来的难题。 如今，设计研究的套色工具就可以完美解决了，这对于我们来说，是非常大的突破，也是设计价值体现之一。

感谢阅读！

欢迎关注作者微信公众号：「CED设计团队」