金山文檔全新升級-界面篇

時間：2023-06-04 17:00:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-06-04 17:00:01 來源：網(wǎng)站運(yùn)營

金山文檔全新升級-界面篇：

產(chǎn)品背景 Product Story

云服務(wù)時代的到來

萬物上云、智慧互聯(lián)，百萬級服務(wù)器組成的云端計(jì)算時代已經(jīng)到來，過去困擾個人電腦的效率、安全及規(guī)?；瘑栴}已不復(fù)存在。

鏈接各端數(shù)據(jù)的金山文檔

萬物皆可上云，而云文檔，即是在云端服務(wù)器存取的文檔，具備安全可靠、多端協(xié)同的優(yōu)勢。







金山文檔是什么？

金山文檔作為一款在線協(xié)作文檔，依托云服務(wù)，致力讓處理文檔從原來傳統(tǒng)的打開編輯保存，達(dá)到多人同時編輯并且即改即同步一種全新的辦公方式。

用戶正在進(jìn)行遠(yuǎn)程協(xié)作辦公

當(dāng)下正是4G向5G的過渡期，這意味著未來的金山文檔將更快的接入世界，給用戶提供更簡化流暢的辦公體驗(yàn)。







為什么要進(jìn)行改版？

金山文檔（舊版）界面

舊版金山文檔最早是隨著各端“文檔上云”的趨勢，主要是作為一個通用型功能誕生的，但由于長時間的項(xiàng)目流轉(zhuǎn)、無系統(tǒng)型設(shè)計(jì)維護(hù)等原因，導(dǎo)致了許多設(shè)計(jì)資源丟失，更新迭代乏力，而且當(dāng)初并未承載太多的功能，模塊層級長時間簡單堆砌，導(dǎo)致延展艱難，加之紅色品牌色在顏色心理學(xué)的特殊暗示等原因，組件規(guī)范擴(kuò)展困難，所以決定徹底重新推翻重制。

現(xiàn)存主要問題

隨著近兩年“Design System設(shè)計(jì)系統(tǒng)”與“設(shè)計(jì)中臺”的流行，我們的體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)也希望借著顛覆式重設(shè)計(jì)的機(jī)會，從底層開始重新梳理“設(shè)計(jì)理念”和“系統(tǒng)能力”，賦予金山文檔更一致、更完整、更有溫度的形象。

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

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

里應(yīng)外合

金山文檔作為一款平臺級的產(chǎn)品，不光會有來自內(nèi)部視覺優(yōu)化的壓力，也會有來自更多外部組件接洽、延展的挑戰(zhàn)，因此對于重設(shè)計(jì)，我們除了關(guān)注產(chǎn)品本身的設(shè)計(jì)語言和品牌的重塑和打磨，也將大量的時間用于了設(shè)計(jì)系統(tǒng)的搭建，目標(biāo)是打造一個對外部用戶、對內(nèi)部產(chǎn)品團(tuán)隊(duì)都能極大提升工作效率的產(chǎn)品堡壘。

兩大設(shè)計(jì)方向




走進(jìn)更具體的場景去思考

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




對于設(shè)計(jì)方向的討論

金山文檔為了給用戶提供更精細(xì)化的服務(wù)，其實(shí)細(xì)分為了“云文檔管理”和“云協(xié)作編輯”兩大模塊。




全面且強(qiáng)大的功能環(huán)




由于用戶在使用產(chǎn)品時的心流狀態(tài)的不同，在保證全局規(guī)范大體一致的基礎(chǔ)上，我們也同樣將細(xì)分設(shè)計(jì)原則為【云文檔管理-高效】和【云協(xié)作編輯-專注】兩個大的方向，希望通過更微妙的設(shè)計(jì)，讓用戶更愉悅地完成目標(biāo)。


不同場景下的設(shè)計(jì)原則




剛進(jìn)入到金山文檔進(jìn)行文檔管理的時候，我們希望用戶是心情愉悅、放松地面對一天嶄新的工作，從而達(dá)到高效的狀態(tài)，因此整體的設(shè)計(jì)風(fēng)格是偏“簡潔”、“輕快”、“放松”的。

公共模塊情緒板




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

公共模塊界面概覽




而當(dāng)使用者開始打開文檔進(jìn)行在線編輯或協(xié)作的時候，我們希望用戶能快速進(jìn)入專注的工作狀態(tài)，不應(yīng)該被界面UI過多地打擾，因此在專注模式下的風(fēng)格是“淡雅”、“寧靜”和“平穩(wěn)”。

編輯模塊情緒板




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

三大編輯組件界面首頁（文字、表格、演示）







誰在使用我們的產(chǎn)品？




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

大家都是如何使用金山文檔的（人物個人信息為虛構(gòu)）

設(shè)計(jì)細(xì)節(jié) Showcase

顏色

配合設(shè)計(jì)系統(tǒng)的打造，我們在制定顏色規(guī)范之初，便與開發(fā)一同制定好了“變量庫”來管理顏色，每個顏色都有對應(yīng)的變量，這樣不僅便于管理和溝通，同時為以后的“深色模式”或更多的“主題模式”打下基礎(chǔ)。

新版顏色規(guī)范







圖標(biāo)

因舊版文檔格式圖標(biāo)風(fēng)格過時，且覆蓋不全，所以此次也將文檔格式圖標(biāo)全部重置與擴(kuò)展，并制定相關(guān)圖標(biāo)規(guī)范

新版文件格式圖標(biāo)




插畫

隨著近兩年，來自Dribbble的2.5D軸側(cè)、矢量無臉人、漸變等插畫風(fēng)格同質(zhì)化嚴(yán)重，我們也在摸索讓人眼前一亮的新風(fēng)格，在插畫師“牛奶蟲“的不斷探索下，最終敲定使用“童趣蠟筆筆觸風(fēng)格”的插畫作為引導(dǎo)和缺省頁面的配圖。

童趣風(fēng)格的引導(dǎo)/缺省配圖







為專注而克制

由于編輯模式的特殊性，每個組件都有屬于自己的主題色，因此針對“專注”的設(shè)計(jì)原則，我們還進(jìn)行的深化的細(xì)節(jié)調(diào)整







1、清新




不難看出，在傳統(tǒng)客戶端中我們的各大組件都有屬于各自的主題色，按照以往的設(shè)計(jì)經(jīng)驗(yàn)，通常都會在界面里大量使用主題色，來營造組件氛圍，強(qiáng)化品牌感，清晰地告知用戶當(dāng)下的環(huán)境。

客戶端組件界面

但由于金山文檔的特色與傳統(tǒng)客戶端不同，雖然宏觀規(guī)范是大體一致的，但是細(xì)節(jié)上金山文檔是以“輕“、“云服務(wù)”、“協(xié)作”為主，我們更希望強(qiáng)化的重心和力度放在多人協(xié)作的相關(guān)功能上，因此弱化了傳統(tǒng)編輯部分的UI，將高亮色的使用面積降低，以此來營造一個小清新的氛圍。

金山文檔組件界面







2、玲瓏




金山文檔作為一個云上輕辦公的產(chǎn)品，區(qū)別于客戶端的明顯特征便是“小巧輕便”，因多年來WPS在專業(yè)文檔處理領(lǐng)域的深度耕耘，客戶端的功能可謂是星羅棋布，但同時也為視覺設(shè)計(jì)帶來了一定的難度。




由于金山文檔風(fēng)格較輕，恰巧可以在某種程度上給予我們簡化視覺的機(jī)會，根據(jù)場景的差異，做了適當(dāng)?shù)暮喕{(diào)整。

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

在信息層級上，以往大量的功能交互主要是以彈框形式呈現(xiàn)的，為了降低這種操作的縱向?qū)蛹壐盍迅?，將大量功能的具體操作放置于右側(cè)邊欄中，與編輯區(qū)同層，大量減少層級，讓產(chǎn)品更加玲瓏敏捷。

框架層級簡單示意







3、輕盈




最后，“專注”的另一個體現(xiàn)，就是在于各種反饋樣式和投影的設(shè)計(jì)中；一般網(wǎng)頁產(chǎn)品界面中按鈕的反饋有兩大類型，一是將按鈕文字主體變?yōu)楦吡?，另一種則是在按鈕底板上做簡單變色。

反饋樣式的區(qū)別




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

按鈕與控件相關(guān)規(guī)范




而對于投影的參數(shù)的選擇，也是經(jīng)過了設(shè)計(jì)團(tuán)隊(duì)在多個設(shè)備上長期的測試和雕琢，遵循著淡雅的方向確定的，具體的感官感受，歡迎在線上體驗(yàn)我們的產(chǎn)品。







細(xì)膩優(yōu)雅的投影（效果圖）

設(shè)計(jì)師們反復(fù)打磨著投影參數(shù)




更多的設(shè)計(jì)規(guī)范的細(xì)節(jié)尚在完善中，相信不遠(yuǎn)的將來會給大家公開完整的規(guī)范文檔。










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

金山文檔的未來，將會是一個非常宏大的在線辦公平臺，屆時將會有各式各樣的功能組件和產(chǎn)品矩陣入駐，借著顛覆式改版的契機(jī)，不光從外部視覺層面重新打造產(chǎn)品，我們也將能極大提升內(nèi)部設(shè)計(jì)效率的“設(shè)計(jì)系統(tǒng)思維”融入了此次的優(yōu)化，通過制作設(shè)計(jì)規(guī)范、中臺組件庫、在線變量庫和產(chǎn)品樣例庫等工具型設(shè)計(jì)文件，為“設(shè)計(jì)師”、“產(chǎn)品”和“開發(fā)”打造了一個高效的內(nèi)部生產(chǎn)環(huán)境，也為后續(xù)的新組件延展提供簡單的指引。

MU Cool設(shè)計(jì)系統(tǒng)概覽

基于Sketch的設(shè)計(jì)系統(tǒng)功能，在簡單的設(shè)計(jì)規(guī)范的基礎(chǔ)上，又增加了“工具化”和“工程化”的部分能力，我們制作了完善原子型“組件庫”、“樣式庫”、“變量庫”、“樣例庫”和“知識庫”，利用NAS本地局域網(wǎng)+云文檔+藍(lán)湖的形式，形成了一個簡單的本地設(shè)計(jì)中臺，這一部分的內(nèi)容將會在后續(xù)的“設(shè)計(jì)系統(tǒng)篇”詳細(xì)講解。