图标设计｜探索WPS 3000个图标设计背后的故事-技术圈

▲点击"三分设"关注，回复"社群"加入我们

欢迎来到专业设计师学习交流社区

三分设｜连接知识，助力全球 1 亿设计师成长

转自：CED设计团队

编辑：益达

共 2668 字 26 图预计阅读 7 分钟

Part 1

项目背景

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

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

‍‍

Part 2

升级过程

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

Part 3

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

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

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

Part 3

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

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

1.如何正确处理表意？

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

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

2.如何正确验证表意？

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

Part 5

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

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

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

1.制定流程

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

2.专人统筹

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

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

3.严格控质

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

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

‍

Part 6

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

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

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

‍

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

‍

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

The End

总结

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

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

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

— The end —

以下三分设文章，你可能也感兴趣

▽

📚 原创文章精选📚

看 Apple CarPlay 如何提升驾驶安全和驾驶体验

一起看看《对马岛之魂》如何打造初次对抗体验

制定 “小目标”，了解产品管理中的结构化思维

35+ 的 Windows 系统到底有什么了不起？

导师与学员的高效交流 APP 设计 —— Lightship

🙋 我们一起聊设计 🙋‍♂️

高质量，学设计行交流微信群

期待与更多优秀用户体验设计师一起成长

PS：欢迎大家关注三分设，每天早上9点，准时充电。分享优质设计、创意灵感、新知新识，定期大咖老师直播分享，零距离连麦，答疑解惑。添加小小虫微信号【 Lil_Bug 】，备注【 三分设 】加入！（只面向星标了公众号三分设的粉丝）