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

改版背景

1. 改版的原因是什么？

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

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

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

2. 設計目標

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

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

在開始改版前，我們就將整個改版的流程以及所需要的產出內容，提前梳理了出來。這樣有利于我們在后續(xù)的工作中把控時間和產出，也方便與產品開發(fā)溝通時間節(jié)點，明確流程目標，加大設計在改版過程中提高效率的作用。

確定方向

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

1. 回歸最純粹的瀏覽體驗

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

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

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

2. 提高文檔辨識度

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

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

3. 提高內容閱讀效率

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

視覺上，我們將原本金剛位的圖標進行更新，在純色的基礎上增加了金黃色的細節(jié)點綴，豐富會員的尊貴感。

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

資源統(tǒng)一

1. 格式圖標

文檔圖標在兩個平臺中并不統(tǒng)一，是兩個截然不同的風格，Android 是扁平簡約風格，iOS 為寫實風格，文檔格式的顏色塊和標識偏小，一眼不容易分辨。

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

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

我們調整了圖標的結構和范圍，提高圖標的辨識度。

通過多項規(guī)則的定義，最終產出新風格的文檔圖標樣式。

2. 操作圖標

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

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

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

3. 缺省頁插畫

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

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

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

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

設計系統(tǒng)

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

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

總結

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

歡迎關注「MU設計團隊」公眾號：