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

改版背景

1. 改版的原因是什么?

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

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

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

2. 設計目標

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

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

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

確定方向

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

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

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

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

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

2. 提高文檔辨識度

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

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

3. 提高內容閱讀效率

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

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

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

資源統一

1. 格式圖標

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

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

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

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

通過多項規則的定義,最終產出新風格的文檔圖標樣式。

2. 操作圖標

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

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

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

3. 缺省頁插畫

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

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

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

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

設計系統

我們創建了針對文字和圖層樣式的樣式庫,方便設計師和開發快速地溝通,規范化可以避免出現特殊樣式的情況。

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

總結

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

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

點贊 19
收藏 42
繼續閱讀相關文章

發表評論 已發布 2

還可以輸入 800 個字
 
 
載入中....
2 收藏