隨著用戶使用 WPS Office 的場景逐漸多樣化、對產(chǎn)品的體驗要求也逐漸提高，我們在視覺層面上圍繞著「以用戶為中心」開始了一次全新的視覺改版：追求簡潔、高效、一致的辦公環(huán)境，精心打造極致的辦公體驗。

設(shè)計目標(biāo)

從體驗出發(fā)，尋找設(shè)計切入點，經(jīng)過多方探索和需求分析，明確了此次更新的設(shè)計目標(biāo)：

• 內(nèi)容成為主角，為用戶提供更高效的工作環(huán)境；
• 更準(zhǔn)確的表意，讓視覺資源的表意更清晰準(zhǔn)確；
• 構(gòu)建設(shè)計規(guī)范，讓多端視覺與交互擁有一致性；

設(shè)計過程

我們從桌面客戶端出發(fā)進(jìn)行問題洞察，隨后擴(kuò)展到對應(yīng)的更多模塊。以產(chǎn)品 LOGO 為起點到首頁、組件頁、應(yīng)用中心、彈窗、窗格等等功能模塊。結(jié)合前期討論的設(shè)計目標(biāo)進(jìn)行設(shè)計的風(fēng)格探索，經(jīng)過多次探討與比對，最終確定了現(xiàn)在大家所看到的 WPS 2021 版年度更新。

在設(shè)計風(fēng)格探索中，我們時刻提醒自己，是否體現(xiàn)了三個視覺核心原則：簡潔、高效、一致。設(shè)計方向基本確定后，我們梳理了一份初期的規(guī)范文檔，方便團(tuán)隊內(nèi)部協(xié)作，為后續(xù)串聯(lián)升級 WPS 龐大的業(yè)務(wù)模塊視覺打下基礎(chǔ)。在后續(xù)的推進(jìn)中，持續(xù)通過實踐逐步完善這份規(guī)范。

LOGO 升級

作為一款軟件產(chǎn)品，LOGO 是產(chǎn)品的標(biāo)識，也是用戶認(rèn)識品牌的開端。

所以設(shè)計升級開始，我們便重點升級了 WPS LOGO：在延續(xù) W 圖形的前提下，用「紙張是文字信息傳遞載體」的設(shè)計理念和「協(xié)同是未來辦公新模式」的遠(yuǎn)景構(gòu)想作為出發(fā)點，用紙張層疊與卷曲的形態(tài)刻畫出層次更豐富、更具動感的新 LOGO。

同時為了品牌視覺傳達(dá)的規(guī)范與統(tǒng)一，WPS PC端、手機(jī)端的 LOGO 統(tǒng)一使用全新的 LOGO。

當(dāng)用戶認(rèn)識品牌的開端完成升級后，使用感知最強(qiáng)、停留時間最長的「界面視覺改版」便成了我們此次升級最為核心的重點。

界面視覺改版

自從 WPS 提出一站式服務(wù)后，為電腦逐個安裝辦公軟件的年代早已過去，現(xiàn)在 WPS Office 包含了文檔編輯、文檔管理、云文檔、海報、日歷、待辦等豐富的應(yīng)用，一款軟件就能勝任多數(shù)人的日常工作需求。

為了更好的用戶體驗，此次版本，對 WPS PC端、移動端的新首頁與組件頁進(jìn)行了全新視覺升級，采用扁平直的視覺基調(diào)，確保讓用戶更專注于內(nèi)容本身。

WPS 2021 年度更新的顏色在色彩方面提升了飽和度和明度，使頁面更有活力、不枯燥沉悶。同時還刻意對頁面做降噪和扁平化處理，摒棄了之前通過長投影區(qū)分層級關(guān)系，化繁為簡。模塊劃分方面，采用加大模塊間的間距和少量分割線，通過加大關(guān)鍵信息層級，在保證層級之間關(guān)系明確的同時，讓界面更加干凈和具有呼吸感。

此外，在考慮示意性和拓展性后，我們對原內(nèi)容區(qū)的塊面圖標(biāo)進(jìn)行了優(yōu)化，使得界面更有層次感。

資源優(yōu)化

WPS Office 組件擁有強(qiáng)大的文檔處理能力，其中工具欄是主要的功能區(qū)，因此也是產(chǎn)品優(yōu)化的重要模塊之一，隨著版本迭代，工具的數(shù)量越來越多，目前單純工具欄圖標(biāo)已近千個。

我們希望新圖標(biāo)設(shè)計能達(dá)到清爽、規(guī)整的效果，為此重新繪制了 1200+ 功能區(qū)圖標(biāo)。通過延續(xù) 2019 版的「線為主面為輔」的設(shè)計風(fēng)格，在色彩上進(jìn)行了去色處理，線面結(jié)合讓圖標(biāo)更具表現(xiàn)力、有層次，每個圖標(biāo)繪制都以表達(dá)基本特征為主。圓角細(xì)節(jié)的處理相比舊版看起來更清晰明確，不再圓潤曖昧。

除了功能圖標(biāo)之外，首頁圖標(biāo)、缺省插畫、加載動效和應(yīng)用中心圖標(biāo)等的資源也都進(jìn)行了全新設(shè)計，且在 WPS PC端、移動端做了替換統(tǒng)一。

品牌插畫

WPS Office 32 年的歷史積累，使得產(chǎn)品的功能特性十分豐富，但這也讓用戶在使用時經(jīng)常接觸到各種不同的歡迎頁、引導(dǎo)頁、介紹頁等反饋界面。

在此次改版中，為了讓反饋界面的品牌視覺化、情感化，以及提升內(nèi)部設(shè)計師的協(xié)同效率，我們?yōu)榇舜蛟炝似放撇瀹嬻w系，統(tǒng)一了品牌視覺。

在設(shè)計風(fēng)格上，結(jié)合辦公場景中的人和物，設(shè)計了一套簡潔清爽的插畫；在色彩上，則在飽和度和明度進(jìn)行提升，使界面更有活力且不沉悶，并明確了插畫各顏色的使用規(guī)范，保證協(xié)同效率提升。

全新皮膚

此次更新，WPS 2021 年度更新還推出了全新的暗色調(diào)模式（界面）。在光線較暗的場景下，能讓用戶擁有更舒適的使用體驗。

色彩管理方面，我們使用了語義化的方式，讓不同皮膚間的顏色通過映射建立起關(guān)系，并明確各顏色的使用規(guī)范，這有效保證了使用顏色的規(guī)范性，也大大提高了設(shè)計研發(fā)效率。

超級會員的專屬皮膚，延續(xù)了超級會員的黑金風(fēng)格，提升了會員的尊貴體驗。為了達(dá)到深度定制，還特別對頭像、字體樣式、對話框和按鈕等組件，進(jìn)行專屬化設(shè)計。

設(shè)計規(guī)范

每種設(shè)計風(fēng)格，都有對應(yīng)的視覺感受，這就如一本“無字之書”，雖然沒有明確書寫出來，但卻能清晰傳達(dá)情感，WPS 亦是如此。在去年設(shè)計探索過程中，逐漸形成的新設(shè)計樣式，結(jié)合 WPS 2021 年度更新的設(shè)計原則「簡潔、高效、一致」，我們確定了新的設(shè)計風(fēng)格。

設(shè)計方向已經(jīng)明晰，還需要能落實到產(chǎn)品的每處細(xì)節(jié)，做到視覺統(tǒng)一。這就需要梳理出一份具有指導(dǎo)意義的設(shè)計組件庫和說明。

我們運用原子設(shè)計原則，搭建底層設(shè)計資源庫。從視覺基礎(chǔ)元素開始，賦予顏色含義，統(tǒng)一字體樣式，建立圖標(biāo)和插畫資源庫等等。對界面里的元素進(jìn)行結(jié)構(gòu)層次劃分，形成了分類合理、體系完整且通用性較高的基礎(chǔ)設(shè)計規(guī)范，讓設(shè)計師進(jìn)行各模塊設(shè)計的同時，也為整體視覺的一致性打下了堅實的基礎(chǔ)。

最后

隨著工作方式的轉(zhuǎn)變，圍繞著「多屏、云、內(nèi)容、AI、協(xié)作」未來辦公的到來，辦公場景會更加豐富。我們思考，如何能讓用戶在交互過程中有更好的體驗？這需要從用戶角度，并結(jié)合實際場景去認(rèn)真思考，才有助于把用戶體驗越做越好。對此，我們砥礪前行，把產(chǎn)品升級的出發(fā)點落實到用戶服務(wù)之上，為用戶提供更輕松的辦公體驗。

當(dāng)決定要做改版時，我們知道這是一次對設(shè)計團(tuán)隊的考驗，也深知還有許多產(chǎn)品體驗需要改進(jìn)。從前期的大量調(diào)研與分析，到中期方案的過審，再到設(shè)計稿的真正落地，我們腳踏實地一步一個腳印，在這過程中，也讓我們迸發(fā)了許多好想法，未來還會繼續(xù)努力，為用戶提供 All in One 的極致辦公體驗。

歡迎關(guān)注作者微信公眾號：「WPS辦公助手」