項目背景

近些年，WPS 組件頁在完善基礎功能的同時，增加了許多新功能。新功能的持續增多，雖然滿足了用戶更廣泛的需求，但也使界面中的功能入口越來越多，一定程度上增加了用戶的認知負擔。

在日常使用 WPS Office 辦公時，圖標是用戶接觸最頻繁的界面元素之一。它通過更直觀、輕松的閱讀體驗來指導用戶的操作行為，從而有效提高產品的易用性。為此，我們以 “讓用戶更高效地完成工作” 為目標，用了大半年的時間，完成了 WPS Office 組件頁 3000 個功能圖標的視覺升級。

WPS 改版案例合集：

升級過程

本文將從圈定核心范圍、正確處理表意、制定協作模式和適應不同場景等幾個方面來詳細闡述我們對組件頁功能圖標視覺升級的全過程。

緊密結合數據，圈定核心范圍

面對數量如此龐大的功能圖標，我們必須從中找到最核心的一批圖標重點突破。如果能快速確定核心圖標的視覺風格，其他圖標也能由此展開快速推進。為此，我們找到了產品同學，詳細了解了功能的使用情況。 我們計算了 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設計團隊」