如何重新設(shè)計(jì)3000個圖標(biāo)？來看金山團(tuán)隊(duì)的實(shí)戰(zhàn)案例！

項(xiàng)目背景

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

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

WPS 改版案例合集：

升級過程

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

緊密結(jié)合數(shù)據(jù)，圈定核心范圍

面對數(shù)量如此龐大的功能圖標(biāo)，我們必須從中找到最核心的一批圖標(biāo)重點(diǎn)突破。如果能快速確定核心圖標(biāo)的視覺風(fēng)格，其他圖標(biāo)也能由此展開快速推進(jìn)。為此，我們找到了產(chǎn)品同學(xué)，詳細(xì)了解了功能的使用情況。 我們計(jì)算了 3 月份 PC 端三大組件功能區(qū)各個功能的日均點(diǎn)擊次數(shù)，從高到低排序，得到了點(diǎn)擊排名前 50 的功能。為了更直觀地體現(xiàn)排序情況，我們制作了表格：

根據(jù)排序情況，我們?nèi)Χ它c(diǎn)擊量 Top50 功能的圖標(biāo)作為核心圖標(biāo)，重點(diǎn)圍繞這批圖標(biāo)進(jìn)行了設(shè)計(jì)和優(yōu)化。

深入理解功能，正確處理表意

確定了核心圖標(biāo)之后，我們又開始了新的思考。用戶能否清晰地理解圖標(biāo)的含義？用戶能否快速找到自己想要的功能？帶著這些疑問，我們進(jìn)行了深入的研討。

1. 如何正確處理表意？

要想正確處理表意，必須深入理解功能。我們針對核心功能進(jìn)行了反復(fù)地體驗(yàn)與透徹地研究，確保大家都能準(zhǔn)確理解這個功能是什么、有什么作用，從而明確、統(tǒng)一了圖標(biāo)的表達(dá)形式和重點(diǎn)元素。

除了結(jié)合自身深刻的理解，我們也找了同類產(chǎn)品進(jìn)行對比，力爭尋找出最符合用戶認(rèn)知的圖形表達(dá)方案。

2. 如何正確驗(yàn)證表意？

功能圖標(biāo)產(chǎn)出后，我們積極邀請產(chǎn)品同學(xué)進(jìn)行審核，針對有爭議的圖標(biāo)，我們進(jìn)行了充分地討論，并結(jié)合雙方的要求輸出優(yōu)化方案。同時，我們也通過用戶訪談的方式去訪問公司里的同事，觀察他們的反應(yīng)、操作過程以及操作結(jié)束后的反饋，最終選擇了更能快速傳達(dá)這個功能的圖標(biāo)。

反復(fù)打磨推敲，制定協(xié)作模式

我們需要繪制將近 3000 個功能圖標(biāo)。為了應(yīng)對如此龐大的工作量，組內(nèi)提出了協(xié)作繪制的方案，確保能在規(guī)定時間內(nèi)完成目標(biāo)。

這個項(xiàng)目是我們首次使用多人協(xié)作的工作模式。在實(shí)施過程中，我們遇到了例如繪制流程不規(guī)范、項(xiàng)目進(jìn)度難把握、質(zhì)量標(biāo)準(zhǔn)難統(tǒng)一等諸多問題。為了解決這些問題，我們實(shí)施了 3 個措施。

1. 制定流程

為了更好地協(xié)作繪制圖標(biāo)，我們制定了規(guī)范化的流程。這個流程可以幫助我們嚴(yán)格管控好每一環(huán)節(jié)，規(guī)范好每一步，讓每一位同學(xué)都能快速上手，了解繪制圖標(biāo)的工序，規(guī)范地展開工作，最終完成圖標(biāo)繪制任務(wù)。

2. 專人統(tǒng)籌

我們以小組為單位，根據(jù)各組人數(shù)分配不同數(shù)量的圖標(biāo)，并結(jié)合各組所負(fù)責(zé)的業(yè)務(wù)發(fā)放對應(yīng)的圖標(biāo)。圖標(biāo)繪制工作是列入到各組的需求安排里，以業(yè)務(wù)需求去安排人員和交付時間。考慮到各組人員緊缺與業(yè)務(wù)繁重的情況，我們有專門的統(tǒng)籌人把這 3000 個圖標(biāo)進(jìn)行分批處理和分發(fā)，按批次定量繪制圖標(biāo)，減少堆積壓力。

作為統(tǒng)籌人，需要跟進(jìn)各組圖標(biāo)分配情況、溝通協(xié)調(diào)、繪制進(jìn)度、繪制指引、質(zhì)量把控等多個事項(xiàng)。同時，也要做到定時收集反饋和提出優(yōu)化建議，逐步完善多人協(xié)作繪制圖標(biāo)的模式，確保圖標(biāo)繪制項(xiàng)目如期完成。

3. 嚴(yán)格控質(zhì)

為后續(xù)產(chǎn)出的圖標(biāo)達(dá)到一個專業(yè)的水平。我們制定了一套系統(tǒng)的 2021 版圖標(biāo)繪制規(guī)范，解決現(xiàn)存圖標(biāo)繪制表意不清晰、風(fēng)格不統(tǒng)一、體量不一致等問題。通過嚴(yán)格規(guī)范圖標(biāo)的繪制，能夠讓大家繪制出來的圖標(biāo)質(zhì)量是符合標(biāo)準(zhǔn)的。

每一批圖標(biāo)繪制完成后，都需要自行進(jìn)行圖標(biāo)設(shè)計(jì)自查。各組自查沒問題就會統(tǒng)一交付到統(tǒng)籌人，再一遍又一遍審核，如遇不通過圖標(biāo)，將通知返稿直到調(diào)整通過才算是繪制完成。

套色技術(shù)支持，適應(yīng)不同場景

圖標(biāo)繪制完成后，還剩下最關(guān)鍵的一步 —— 套色。WPS 2021 的功能圖標(biāo)需要兼容四大組件（WPS、WPP、ET、PDF）、適配深淺色皮膚和個性皮膚、同時還要盡量降低資源包大小，因此圖標(biāo)的適應(yīng)性對于我們來說是個很大的問題，此時就需要用套色來解決。

套色的原理是通過修改 SVG 圖標(biāo)文件中的代碼來修改圖標(biāo)的顏色。設(shè)計(jì)只需要對輸出的圖標(biāo)文件進(jìn)行顏色標(biāo)記，然后研發(fā)再通過這些標(biāo)記替換顏色，實(shí)現(xiàn)圖標(biāo)顏色的變化。

目前，這種套色方式已經(jīng)在組內(nèi)試驗(yàn)完成并在各個業(yè)務(wù)的圖標(biāo)繪制工作中進(jìn)行了推廣。套色給我們的工作提供了很大的便利，主要體現(xiàn)在 3 個方面：

這個套色工具我們命名為「Style Icon」。通過這個套色工具，我們實(shí)現(xiàn)了不同主題皮膚的兼容，這是落地后的部分皮膚界面效果。后續(xù)如果有更多的皮膚需要適配，都能很好的適應(yīng)。

總結(jié)

在設(shè)計(jì)層面，經(jīng)歷了不同階段的探索和優(yōu)化，我們逐漸找到了設(shè)計(jì)上需要關(guān)注的平衡，例如創(chuàng)新與易用的平衡、認(rèn)知與行為的平衡、用戶習(xí)慣的平衡等。平衡好這些，會為我們的產(chǎn)品迭代提供很好的指引。

在協(xié)作層面，第一次使用多人協(xié)作的模式，快速完成了 3000 個 圖標(biāo)的繪制，并取得了預(yù)期成效。在持續(xù)不斷的圖標(biāo)迭代上，還會面臨越來越多的挑戰(zhàn)。我們將繼續(xù)完善多人協(xié)作模式，并將這種模式運(yùn)用到更多項(xiàng)目中去。

在套色工具層面，為了讓一套圖標(biāo)適應(yīng)到不同的場景，是我們一直以來的難題。 如今，設(shè)計(jì)研究的套色工具就可以完美解決了，這對于我們來說，是非常大的突破，也是設(shè)計(jì)價(jià)值體現(xiàn)之一。

感謝閱讀！

歡迎關(guān)注作者微信公眾號：「CED設(shè)計(jì)團(tuán)隊(duì)」