項(xiàng)目實(shí)戰(zhàn)復(fù)盤！WPS Office 移動(dòng)端全新改版項(xiàng)目總結(jié)

金山 WPS Office 移動(dòng)端是金山公司打造的、運(yùn)行于多平臺(tái)上的全方位全功能辦公軟件，國(guó)內(nèi)同類產(chǎn)品長(zhǎng)期排名領(lǐng)先，支持查看、創(chuàng)建和編輯各種常用 Office 文檔。用戶在手機(jī)和平板上可以隨意切換使用，滿足用戶隨時(shí)隨地辦公的需求。

改版背景

1. 改版的原因是什么？

在這次改版前，WPS Office 移動(dòng)端由于平臺(tái)項(xiàng)目多年發(fā)展方向不同，在 Android 和 iOS 系統(tǒng)平臺(tái)下是截然不同的，功能操作和視覺風(fēng)格都存在很大的差異。我們不是做一個(gè)工具，而是做一個(gè)辦公品牌。當(dāng)向用戶介紹、推廣 WPS 產(chǎn)品的時(shí)候，拿出各端界面一致的產(chǎn)品，品牌歸屬感更強(qiáng)。

根據(jù)內(nèi)部統(tǒng)計(jì)數(shù)據(jù)了解到，每天有數(shù)萬(wàn)用戶是有跨平臺(tái)使用的習(xí)慣，即有在兩個(gè)平臺(tái)下打開和編輯文檔的需求。用戶群數(shù)量不算少，而兩端不統(tǒng)一的問題會(huì)給這批用戶造成困擾，使用的學(xué)習(xí)成本變高。

兩端的不一致除了給用戶造成使用上的困難外，內(nèi)部設(shè)計(jì)師對(duì)于同一個(gè)功能也需要針對(duì)兩端的風(fēng)格進(jìn)行設(shè)計(jì)，無(wú)論從風(fēng)格和尺寸上都存在差異，大大降低設(shè)計(jì)師的工作效率。而隨著近幾年「設(shè)計(jì)系統(tǒng)」的普及，我們逐漸有意識(shí)地思考和探索設(shè)計(jì)資源的整合和統(tǒng)一的可能性。移動(dòng)端進(jìn)行了一次全新視覺體驗(yàn)的大版本迭代，對(duì)用戶和內(nèi)部來說，都是勢(shì)在必行的。

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

改版的最終目的是為了讓用戶更低門檻、更低學(xué)習(xí)成本地跨端使用。用戶在 PC 上的使用習(xí)慣，在移動(dòng)端也受用，跨端使用更順暢。而根據(jù)我們挖掘的各項(xiàng)問題，最終得出改版的核心目標(biāo)。

• 風(fēng)格統(tǒng)一。將兩端從交互到視覺的方式進(jìn)行梳理與整合，提供用戶一致的功能操作和視覺體驗(yàn)。
• 資源復(fù)用。建立統(tǒng)一資源庫(kù)，內(nèi)部設(shè)計(jì)師使用同一套控件資源庫(kù)，避免同一個(gè)功能出現(xiàn)多套資源的情況。
• 提高效率。配備完整的規(guī)范，使新風(fēng)格的設(shè)計(jì)有理有據(jù)，以文檔傳閱的方式，提高設(shè)計(jì)師與產(chǎn)品開發(fā)等工作流程的溝通效率。

在開始改版前，我們就將整個(gè)改版的流程以及所需要的產(chǎn)出內(nèi)容，提前梳理了出來。這樣有利于我們?cè)诤罄m(xù)的工作中把控時(shí)間和產(chǎn)出，也方便與產(chǎn)品開發(fā)溝通時(shí)間節(jié)點(diǎn)，明確流程目標(biāo)，加大設(shè)計(jì)在改版過程中提高效率的作用。

確定方向

WPS Office 是一款全功能辦公軟件，里面包含了非常多編輯和查看文檔的功能，所以設(shè)計(jì)的期望是給用戶一種簡(jiǎn)單、高效的使用體驗(yàn)。在考慮設(shè)計(jì)的過程中，我們將這兩個(gè)特點(diǎn)作為切入點(diǎn)，加入到我們的探索方向中，作為重要的考量因素。

1. 回歸最純粹的瀏覽體驗(yàn)

在分析舊版本中，我們會(huì)發(fā)現(xiàn)兩端的首頁(yè)都有不同的內(nèi)容顏色占比，比如 Android 版本中頭部的紅色導(dǎo)航欄，iOS 版本中的應(yīng)用入口。讓用戶第一眼無(wú)法關(guān)注到真正想查找的文檔區(qū)域。

而用戶使用 WPS Office 的首要目的就是查找和編輯文檔，所以我們將首頁(yè)中的非關(guān)鍵位置的顏色存在感降到最低，把原本容易造成干擾的導(dǎo)航欄統(tǒng)一成淺灰色，用戶可以把注意力集中在文檔列表中，快速找到需要被打開的文檔。

同時(shí)把品牌顏色放在用戶常用操作上，在用戶需要時(shí)，也能快速定位到關(guān)鍵功能上，提升瀏覽效率。

2. 提高文檔辨識(shí)度

四大組件，文字、表格、演示和 PDF，是用戶日常使用最多的文檔格式。用戶點(diǎn)擊進(jìn)入文檔后，我們希望用戶可以在第一時(shí)間知道自己處于哪個(gè)文檔，便于用戶識(shí)別。

WPS Office 功能非常豐富與強(qiáng)大，因此也有容易造成用戶理解上的難度，所以我們對(duì)所有操作功能都配上了專屬的圖標(biāo)，搭配文字后盡可能讓用戶感知到該功能的作用。

3. 提高內(nèi)容閱讀效率

稻殼（Docer）是金山辦公旗下專注辦公領(lǐng)域內(nèi)容服務(wù)的平臺(tái)品牌，為各行業(yè)用戶提供專業(yè)的原創(chuàng)模板、辦公文庫(kù)和職場(chǎng)課程，為稻殼用戶不斷創(chuàng)造多樣化、個(gè)性化的優(yōu)質(zhì)辦公內(nèi)容資源及服務(wù)。

視覺上，我們將原本金剛位的圖標(biāo)進(jìn)行更新，在純色的基礎(chǔ)上增加了金黃色的細(xì)節(jié)點(diǎn)綴，豐富會(huì)員的尊貴感。

頁(yè)面結(jié)構(gòu)上，應(yīng)用了組件化思維，將版塊中的不同內(nèi)容進(jìn)行了拼合，如版塊由標(biāo)題 - 標(biāo)簽 - 內(nèi)容三個(gè)模塊拼合，組成新的版塊。這樣除了能讓用戶有統(tǒng)一的視覺感受，還能減少創(chuàng)建不必要的樣式，降低了設(shè)計(jì)師和程序員的開發(fā)成本。

資源統(tǒng)一

1. 格式圖標(biāo)

文檔圖標(biāo)在兩個(gè)平臺(tái)中并不統(tǒng)一，是兩個(gè)截然不同的風(fēng)格，Android 是扁平簡(jiǎn)約風(fēng)格，iOS 為寫實(shí)風(fēng)格，文檔格式的顏色塊和標(biāo)識(shí)偏小，一眼不容易分辨。

在設(shè)計(jì)新風(fēng)格圖標(biāo)之前，我們對(duì)原有文檔格式的圖標(biāo)色彩進(jìn)行梳理，發(fā)現(xiàn)色彩的使用沒有太多的參考。根據(jù)用戶每日打開文檔數(shù)作為數(shù)據(jù)參考，經(jīng)過簡(jiǎn)單分析，就可以清楚地發(fā)現(xiàn)用戶每日打開的常用文檔類型。

在新版本中，將主要文檔格式定義出專屬的顏色后，將用戶使用率較低的文檔顏色統(tǒng)一成一致的顏色，這樣用戶可以快速識(shí)別出常用的文檔。

我們調(diào)整了圖標(biāo)的結(jié)構(gòu)和范圍，提高圖標(biāo)的辨識(shí)度。

通過多項(xiàng)規(guī)則的定義，最終產(chǎn)出新風(fēng)格的文檔圖標(biāo)樣式。

2. 操作圖標(biāo)

WPS Office 作為國(guó)內(nèi)最強(qiáng)大的文檔處理軟件，組件內(nèi)的每個(gè)操作都會(huì)配有圖標(biāo)作為輔助圖形，讓用戶快速尋找所需操作。而在舊版本中，兩個(gè)平臺(tái)的操作圖標(biāo)很多存在同一個(gè)功能，出現(xiàn)在兩端的圖標(biāo)風(fēng)格各異的情況（尺寸，圓角等問題），對(duì)設(shè)計(jì)師和用戶都容易造成混淆。

統(tǒng)一操作圖標(biāo)的風(fēng)格是很有必要的工作，我們對(duì)所有操作圖標(biāo)進(jìn)行梳理，匯總近千個(gè)圖標(biāo)，定義新的視覺樣式規(guī)范，進(jìn)行整體的繪制。

雖然這項(xiàng)重繪工作量很大，但是統(tǒng)一資源后，兩端使用同樣的樣式，并且有專屬的分類命名，使用起來不再出現(xiàn)混淆，減少資源庫(kù)的容積。

3. 缺省頁(yè)插畫

梳理兩端的缺省圖，形式比較單調(diào)，缺少趣味性，因此在這次改版中也針對(duì)情感化的插畫進(jìn)行調(diào)整。我們將插圖的構(gòu)圖以主體 + 背景 + 點(diǎn)綴小人物拼合的方式，增加插圖的場(chǎng)景感。

插畫師還給不同場(chǎng)景繪制了數(shù)十個(gè)不一樣的人物動(dòng)作，來模擬用戶不同場(chǎng)景下的人物特征。

配色上將原本的單色圖增加了多個(gè)顏色，給用戶更豐富的視覺感受。

經(jīng)過幾次風(fēng)格探索后，最終選定當(dāng)下流行的插畫風(fēng)格，面型圖形表示內(nèi)容，搭配小人物元素，豐富場(chǎng)景，樂趣滿滿，等你來發(fā)現(xiàn)。

設(shè)計(jì)系統(tǒng)

我們創(chuàng)建了針對(duì)文字和圖層樣式的樣式庫(kù)，方便設(shè)計(jì)師和開發(fā)快速地溝通，規(guī)范化可以避免出現(xiàn)特殊樣式的情況。

為了讓設(shè)計(jì)系統(tǒng)更易于推廣，還撰寫了詳細(xì)的設(shè)計(jì)規(guī)范，將所有涉及到新風(fēng)格的設(shè)計(jì)樣式、布局尺寸和使用說明都記錄下來，方便跟開發(fā)溝通，降低來回溝通的成本和出錯(cuò)次數(shù)。

總結(jié)

這次改版最終有明顯的成效，兩端控件和樣式統(tǒng)一后，大大降低了設(shè)計(jì)師的設(shè)計(jì)成本，把跨端設(shè)計(jì)成為一種可能性，體驗(yàn)上降低了的用戶學(xué)習(xí)成本。為了讓用戶可以感受到一個(gè)更整體統(tǒng)一的應(yīng)用，把很多精力放在了設(shè)計(jì)上。項(xiàng)目時(shí)間緊急的情況下，還有很多優(yōu)化點(diǎn)沒有實(shí)現(xiàn)，都作為以后繼續(xù)優(yōu)化的方向，希望給用戶提供更好的體驗(yàn)感受，享受到方便快捷的辦公方式。

歡迎關(guān)注「MU設(shè)計(jì)團(tuán)隊(duì)」公眾號(hào)：