産品背景 Product Story

雲服務時代的到來

萬物上雲、智慧互聯，百萬級服務器組成的雲端計算時代已經到來，過去困擾個人電腦的效率、安全及規模化問題已不複存在。

鍊接各端數據的金山文檔

萬物皆可上雲，而雲文檔，即是在雲端服務器存取的文檔，具備安全可靠、多端協同的優勢。

金山文檔是什麼？

金山文檔作為一款在線協作文檔，依托雲服務，緻力讓處理文檔從原來傳統的打開編輯保存，達到多人同時編輯并且即改即同步一種全新的辦公方式。

用戶正在進行遠程協作辦公

當下正是4G向5G的過渡期，這意味着未來的金山文檔将更快的接入世界，給用戶提供更簡化流暢的辦公體驗。

為什麼要進行改版？

金山文檔（舊版）界面

舊版金山文檔最早是随着各端“文檔上雲”的趨勢，主要是作為一個通用型功能誕生的，但由于長時間的項目流轉、無系統型設計維護等原因，導緻了許多設計資源丢失，更新叠代乏力，而且當初并未承載太多的功能，模塊層級長時間簡單堆砌，導緻延展艱難，加之紅色品牌色在顔色心理學的特殊暗示等原因，組件規範擴展困難，所以決定徹底重新推翻重制。

現存主要問題

随着近兩年“Design System設計系統”與“設計中台”的流行，我們的體驗設計團隊也希望借着颠覆式重設計的機會，從底層開始重新梳理“設計理念”和“系統能力”，賦予金山文檔更一緻、更完整、更有溫度的形象。

新版設計規範

設計目标 Target Analysis

裡應外合

金山文檔作為一款平台級的産品，不光會有來自内部視覺優化的壓力，也會有來自更多外部組件接洽、延展的挑戰，因此對于重設計，我們除了關注産品本身的設計語言和品牌的重塑和打磨，也将大量的時間用于了設計系統的搭建，目标是打造一個對外部用戶、對内部産品團隊都能極大提升工作效率的産品堡壘。

兩大設計方向

走進更具體的場景去思考

結合不同的的功能與流程特色，我們從更具體的使用路徑和場景去重新思考。

對于設計方向的讨論

金山文檔為了給用戶提供更精細化的服務，其實細分為了“雲文檔管理”和“雲協作編輯”兩大模塊。

全面且強大的功能環

由于用戶在使用産品時的心流狀态的不同，在保證全局規範大體一緻的基礎上，我們也同樣将細分設計原則為【雲文檔管理-高效】和【雲協作編輯-專注】兩個大的方向，希望通過更微妙的設計，讓用戶更愉悅地完成目标。

不同場景下的設計原則

剛進入到金山文檔進行文檔管理的時候，我們希望用戶是心情愉悅、放松地面對一天嶄新的工作，從而達到高效的狀态，因此整體的設計風格是偏“簡潔”、“輕快”、“放松”的。

公共模塊情緒闆

在用色上，即便是黑白灰色裡，也加入了淡藍色的氛圍色，而藍色是一種最容易讓人産生好感、放松心情的顔色，加上整體界面以藍白為主，并在很多流程中定制了“童趣蠟筆筆觸風格”的引導插畫，為使用者提供一個開闊、清涼、愉悅的直觀感受。

公共模塊界面概覽

而當使用者開始打開文檔進行在線編輯或協作的時候，我們希望用戶能快速進入專注的工作狀态，不應該被界面UI過多地打擾，因此在專注模式下的風格是“淡雅”、“甯靜”和“平穩”。

編輯模塊情緒闆

并做了許多交互類措施，如：盡可能降低了各種反饋的力度、減少了功能的視覺層級、克制地使用高亮色等，為使用者打造一個專注、理性、沉浸工作的微觀體感。

三大編輯組件界面首頁

（文字、表格、演示）

誰在使用我們的産品？

金山文檔的用戶來自于各行各業，用戶年齡跨度較大，用戶基數較多，大多分布在18~40歲之間，因此設計風格避免過于前衛、新潮、炫彩，應盡量以穩定、易用為主；對不同的業務有不同的使用需求和各具特色的使用方法，這也同時提醒我們設計的時候需要提供簡單的交互與視覺，一切以效率為優先，并且保證較高的體驗一緻性來降低用戶的學習成本。

大家都是如何使用金山文檔的

（人物個人信息為虛構）

設計細節 Showcase

顔色

配合設計系統的打造，我們在制定顔色規範之初，便與開發一同制定好了“變量庫”來管理顔色，每個顔色都有對應的變量，這樣不僅便于管理和溝通，同時為以後的“深色模式”或更多的“主題模式”打下基礎。

新版顔色規範

圖标

因舊版文檔格式圖标風格過時，且覆蓋不全，所以此次也将文檔格式圖标全部重置與擴展，并制定相關圖标規範

新版文件格式圖标

插畫

随着近兩年，來自Dribbble的2.5D軸側、矢量無臉人、漸變等插畫風格同質化嚴重，我們也在摸索讓人眼前一亮的新風格，在插畫師“牛奶蟲“的不斷探索下，最終敲定使用“童趣蠟筆筆觸風格”的插畫作為引導和缺省頁面的配圖。

童趣風格的引導/缺省配圖

為專注而克制

由于編輯模式的特殊性，每個組件都有屬于自己的主題色，因此針對“專注”的設計原則，我們還進行的深化的細節調整

1、清新

不難看出，在傳統客戶端中我們的各大組件都有屬于各自的主題色，按照以往的設計經驗，通常都會在界面裡大量使用主題色，來營造組件氛圍，強化品牌感，清晰地告知用戶當下的環境。

客戶端組件界面

但由于金山文檔的特色與傳統客戶端不同，雖然宏觀規範是大體一緻的，但是細節上金山文檔是以“輕“、“雲服務”、“協作”為主，我們更希望強化的重心和力度放在多人協作的相關功能上，因此弱化了傳統編輯部分的UI，将高亮色的使用面積降低，以此來營造一個小清新的氛圍。

金山文檔組件界面

2、玲珑

金山文檔作為一個雲上輕辦公的産品，區别于客戶端的明顯特征便是“小巧輕便”，因多年來WPS在專業文檔處理領域的深度耕耘，客戶端的功能可謂是星羅棋布，但同時也為視覺設計帶來了一定的難度。

由于金山文檔風格較輕，恰巧可以在某種程度上給予我們簡化視覺的機會，根據場景的差異，做了适當的簡化調整。

客戶端（左）與金山文檔（右）的工具欄對比

在信息層級上，以往大量的功能交互主要是以彈框形式呈現的，為了降低這種操作的縱向層級割裂感，将大量功能的具體操作放置于右側邊欄中，與編輯區同層，大量減少層級，讓産品更加玲珑敏捷。

框架層級簡單示意

3、輕盈

最後，“專注”的另一個體現，就是在于各種反饋樣式和投影的設計中；一般網頁産品界面中按鈕的反饋有兩大類型，一是将按鈕文字主體變為高亮，另一種則是在按鈕底闆上做簡單變色。

反饋樣式的區别

我們當然毫不猶豫地選擇了後者，由于黑白灰的場景多種多樣，我們也希望在變量參數中盡可能地做減法，因此，除高亮色反饋序列以外的常規區域，制定了一套在本色基礎上疊加透明度灰塊的方式，來體現輕盈的反饋樣式。

按鈕與控件相關規範

而對于投影的參數的選擇，也是經過了設計團隊在多個設備上長期的測試和雕琢，遵循着淡雅的方向确定的，具體的感官感受，歡迎在線上體驗我們的産品。

細膩優雅的投影（效果圖）

設計師們反複打磨着投影參數

更多的設計規範的細節尚在完善中，相信不遠的将來會給大家公開完整的規範文檔。

打造設計系統

金山文檔的未來，将會是一個非常宏大的在線辦公平台，屆時将會有各式各樣的功能組件和産品矩陣入駐，借着颠覆式改版的契機，不光從外部視覺層面重新打造産品，我們也将能極大提升内部設計效率的“設計系統思維”融入了此次的優化，通過制作設計規範、中台組件庫、在線變量庫和産品樣例庫等工具型設計文件，為“設計師”、“産品”和“開發”打造了一個高效的内部生産環境，也為後續的新組件延展提供簡單的指引。

MU Cool設計系統概覽

基于Sketch的設計系統功能，在簡單的設計規範的基礎上，又增加了“工具化”和“工程化”的部分能力，我們制作了完善原子型“組件庫”、“樣式庫”、“變量庫”、“樣例庫”和“知識庫”，利用NAS本地局域網 雲文檔 藍湖的形式，形成了一個簡單的本地設計中台，這一部分的内容将會在後續的“設計系統篇”詳細講解。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!