隨著用戶(hù)使用 WPS Office 的場(chǎng)景逐漸多樣化、對(duì)產(chǎn)品的體驗(yàn)要求也逐漸提高，我們?cè)谝曈X(jué)層面上圍繞著「以用戶(hù)為中心」開(kāi)始了一次全新的視覺(jué)改版：追求簡(jiǎn)潔、高效、一致的辦公環(huán)境，精心打造極致的辦公體驗(yàn)。

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

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

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

設(shè)計(jì)過(guò)程

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

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

LOGO 升級(jí)

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

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

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

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

界面視覺(jué)改版

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

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

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

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

資源優(yōu)化

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

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

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

品牌插畫(huà)

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

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

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

全新皮膚

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

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

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

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

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

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

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

最后

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

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

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