在針對交互的調(diào)整上，一些細(xì)微的，視覺上很難體現(xiàn)的改動需要消耗大量的精力去思考和研究，才能產(chǎn)出最終的方案。本文作者以飛書的多維表格作為改版練習(xí)的對象，分享了分享前期整理和整體框架的部分，希望對大家有所幫助。

又到了很久也沒有分享，鴿了很久的 B 端案例改版的練習(xí)分享了。這次改版練習(xí)的對象是一個比較復(fù)雜的案例，字節(jié)飛書的 —— 多維表格。

因為該項目太復(fù)雜，所以這次只分享前期整理和整體框架的部分，后面與機(jī)會再針對不同的細(xì)節(jié)做單獨的分享。

PS：因為大多數(shù)內(nèi)容在年初整理，線上版本有一部分功能和細(xì)節(jié)改動。

一、改版的項目規(guī)劃

首先，因為多維表格的復(fù)雜性，已經(jīng)沒辦法讓我像前面的改版一樣只要簡單做下案例的分析，就可以動手完成后續(xù)的改動，這是起碼要投入一周工作量，超過 20 天（業(yè)余時間做）時長的改版。

所以一開始，我就要做好前期的項目規(guī)劃，對整體的工作內(nèi)容、流程、步驟做一遍梳理，才能確定我的工作量，和每個步驟的大致順序。

下圖是我用思維導(dǎo)圖做的初步計劃：

里面包含了 6 個步驟，前期的分析和準(zhǔn)備占了絕大多數(shù)篇幅，最后的輸出反而只有一小部分。

這也要重點給大家提個醒，針對 B 端商業(yè)項目，尤其是已經(jīng)上線了的項目，做改版、優(yōu)化、新需求，是要非常慎重的。絕對不是拿到一個項目就看著感覺改，無腦一頓猛做，單單做得快、好看，是難以符合專業(yè)團(tuán)隊的要求的，因為你很難 站在業(yè)務(wù)的角度解釋改版的邏輯和價值。

而在項目的計劃中，前期具體要分析哪些東西，是得看人下菜的。不同項目和背景中，我們可以分析的內(nèi)容、資源、材料是不同的。

比如我自己做練習(xí)，要拿真實項目的使用數(shù)據(jù) DAU 之類的做分析，顯然是不現(xiàn)實的（也沒必要），或者在有限的時間里還自己在社群招募真實用戶，做幾輪用研，也是沒可能的（我懶，肝不動）。所以要選出必要，且我能做到的分析內(nèi)容內(nèi)容出來。

任何商業(yè)項目的設(shè)計、改版，都可以用一個簡單的鏈條來概括，新手要掌握的就是這個大的框架，并學(xué)會怎么自己去填充細(xì)節(jié)，而不是背一套特別復(fù)雜的流程在自己的實踐中硬套，比如雙鉆模型。

二、項目的背景分析

分析的第一步肯定就是解決項目背景的問題，雖然我是為了做項目的改版練習(xí)，但是具體工作目標(biāo)是什么，解決什么問題的大方向依舊是要確認(rèn)下來的。

在這里我制定下來的主要目標(biāo)包含：

• 優(yōu)化多維表格的整體交互細(xì)節(jié)
• 制定更統(tǒng)一的交互應(yīng)用框架
• 為增加功能、字段提供更好拓展性
• 做出讓新人更容易理解上手的版本

然后，再更多的收集多維表格的資料，不管是從官方也好，還是從外部的一些資訊信息里檢索，從更多的維度來理解該產(chǎn)品和服務(wù)性質(zhì)。

官方介紹：飛書多維表格是一款以表格為基礎(chǔ)的新一代效率應(yīng)用。它具備表格的輕盈和業(yè)務(wù)系統(tǒng)的強(qiáng)大，融合了在線協(xié)作、信息管理和可視化能力，能夠自適應(yīng)團(tuán)隊思維和業(yè)務(wù)發(fā)展需求，是具備個性化能力的業(yè)務(wù)管理工具。

個人總結(jié)：多維表格是一個面向企業(yè)業(yè)務(wù)管理的新型協(xié)作工具，類似 Notion 的 Database View。

該類型工具并不是由一般業(yè)務(wù)需求和協(xié)作方式衍生而來，和傳統(tǒng)辦公方法、系統(tǒng)有較大的差異，意味著新用戶需要被 “教育” 才能正確使用，上手成本極高。

所以，目前大量用戶無法認(rèn)識表格中的數(shù)據(jù)視圖轉(zhuǎn)換邏輯，以及不知道這個圖表有什么用。

同時，再收集了市面上用相似功能的其它產(chǎn)品：

• Notion
• Airtable
• Clickup
• Monday
• 黑帕云
• 維表格

優(yōu)先搭建好這些宏觀的“認(rèn)識”，再慢慢往后續(xù)的細(xì)節(jié)推進(jìn)。

三、產(chǎn)品功能分析

雖然我自己課程的分析路徑是業(yè)務(wù)分析優(yōu)先，但該產(chǎn)品不是由一般的業(yè)務(wù)問題衍生而來，而是通過功能去驅(qū)動業(yè)務(wù)流程，所以我們優(yōu)先分析產(chǎn)品功能，再對功能和業(yè)務(wù)的結(jié)合點進(jìn)行分析。

我優(yōu)先繪制產(chǎn)品的功能地圖，整理了整個模塊中的主要功能和層級。

在我自己課程里會重點提功能地圖、產(chǎn)品地圖、信息地圖、頁面地圖的區(qū)別，功能地圖的主要目的是幫助我們理解這個產(chǎn)品所包含的功能有哪些。

還有個重要的原因，就是視圖之間有非常強(qiáng)的聯(lián)系，但每個視圖又有自己的功能，所以要把通用的和視圖特有的一一梳理出來。

同時，前面說過視圖是由相同的數(shù)據(jù)轉(zhuǎn)化出來的，用戶可以創(chuàng)建不同的字段類型，并生成和填充不同的數(shù)據(jù)，來組成對應(yīng)的視圖。所以，表格的類型同樣重要，我也簡單做了個整理。

在這個分析階段，還注意到一個特殊的字段“標(biāo)題”，即創(chuàng)建數(shù)據(jù)的時候用來進(jìn)行數(shù)據(jù)行索引和展示的唯一字段，便于串聯(lián)后續(xù)的其它字段內(nèi)容，是默認(rèn)存在不可修改位置的。

然后，在此基礎(chǔ)上分析每個視圖的功能特征和展示特征。

1. 分組表格

• 通過一個字段做分組依據(jù)，每個分組理論上包含多條數(shù)據(jù)。篩選允許進(jìn)行二次分組
• 每個分組欄會標(biāo)識該分組的依據(jù)（標(biāo)題），并可以選擇關(guān)聯(lián)顯示的數(shù)據(jù)內(nèi)容

2. 甘特圖類型

• 需要一個用來分組的字段類型，這個字段類型不能是標(biāo)題，基本得是人員或者標(biāo)簽，會關(guān)聯(lián)多條數(shù)據(jù)
• 甘特場景需要數(shù)據(jù)包含時間字段，如果原本沒有，在時間線中創(chuàng)建了就會出現(xiàn)

3. 畫冊類型

• 主要顯示大圖模塊，大圖可以包含多個圖片。適合收集圖片類數(shù)據(jù)內(nèi)容，并以封面圖檢索來查看詳情內(nèi)容
• 封面區(qū)域點擊進(jìn)入對應(yīng)字段內(nèi)容，圖片進(jìn)圖片大圖，附件進(jìn)附件頁
• 下方標(biāo)題點擊進(jìn)入數(shù)據(jù)詳情

4. 表單視圖

• 生成一個用來收集數(shù)據(jù)的問卷表單，通過選擇前面添加過的字段來組成一個便于錄入數(shù)據(jù)的表單內(nèi)容

5. 看板視圖

• 分組需要相關(guān)的依據(jù)，也是一個值可以關(guān)聯(lián)多個結(jié)果的屬性類型
• 可以通過拖動快速切換分組屬性值

所有視圖的頂部操作中，包含集全局和特有操作內(nèi)容，尤其是在工具欄中的功能差異，為了防止我自己看起來都亂，就創(chuàng)建一個表格來便于后續(xù)的識別和查看。

把這些理完（更細(xì)節(jié)的我就不放了），基本上產(chǎn)品有什么功能，對應(yīng)分布就非常清晰了，如果連產(chǎn)品功能內(nèi)容都沒有搞明白，頂多可以優(yōu)化視覺的內(nèi)容，但絕對無法對完成交互的設(shè)計。

四、使用場景分析

先分析完產(chǎn)品，然后就是分析符合這個產(chǎn)品使用的場景，也就作為工具它能切入到哪些業(yè)務(wù)中去，并且在這些業(yè)務(wù)環(huán)境中會應(yīng)用哪些功能，如何進(jìn)行操作，操作的順序和痛點。

嚴(yán)格意義上來說，Saas 工具的業(yè)務(wù)場景分析，是需要參與到用戶實際操作流程里做用戶研究的，但是現(xiàn)在我們并不具備這個條件，很多同學(xué)的項目環(huán)境里也不具備這樣的時間和條件。

所以，我們需要依靠一些簡單的調(diào)查、資訊收集信息，“腦補(bǔ)”出對應(yīng)的業(yè)務(wù)環(huán)境和流程，即對業(yè)務(wù)流程和操作流程進(jìn)行建模，搭建虛擬的操作環(huán)境來分析當(dāng)前交互的缺陷。

這種做法并不是就不可以，而是追求效率的一些妥協(xié)，以及項目設(shè)計的第一版都還沒正式的用戶上哪找真實的使用流程，只能去做一些場景的模擬。

所以，根據(jù)官方說明文檔介紹的客戶應(yīng)用案例，以及官方提供的模板的一些分類，我總結(jié)了幾個基礎(chǔ)的使用場景：

• 團(tuán)隊OKR管理：利用一般表格、看板和雙向關(guān)聯(lián)功能進(jìn)行 OKR 的整合
• 團(tuán)隊任務(wù)管理：通過列表、分組、看板進(jìn)行任務(wù)的分配和提醒
• 項目流程管理：通過看板、甘特、分組的方式制定項目任務(wù)內(nèi)容和計劃
• 基礎(chǔ)問卷調(diào)查：通過表單創(chuàng)建問卷，并用列表、分組展示數(shù)據(jù)信息
• ……

至于后面為了更好的反應(yīng)這些流程建模的圖例……肝不動，我就沒畫了。

簡單描述一下，比如針對團(tuán)隊 OKR，我們自己模擬一下包含 3 個用戶角色，分別是，領(lǐng)導(dǎo)A、馬仔B，馬仔C。然后每個人在 OKR 雙月報里要填寫自己的內(nèi)容，以及對齊別人的任務(wù)。

那我們就要分別將自己帶入到 3 個角色中，然后建立自己的目標(biāo)，并進(jìn)行操作……

這種模擬做得越多，就越能還原相關(guān)的場景，和發(fā)現(xiàn)產(chǎn)品的真實問題。用戶測試這件事，你只要自己帶入感夠強(qiáng)，有較好的多重人格、精神分裂能力，就可以直接模擬甲乙丙丁……

你自己就是一只軍隊……

五、相關(guān)問題整理

通過前面若干的操作使用，我們已經(jīng)可以形成大量的想法和思路了。為了防止這些想法流失，你需要每次測試完趁想法還新鮮，把它們通過文本的方式記錄下來。

記錄的內(nèi)容我拆解成兩個維度，宏觀定性分析和結(jié)構(gòu)化的五要素分析內(nèi)容。

1. 宏觀定性分析

結(jié)合產(chǎn)品功能和業(yè)務(wù)場景的定性分析，可以將問題拆解成下面幾大類：

• 初期理解困難：無法理解多維表格有什么用，創(chuàng)建的邏輯就很不符合主流工具使用情況，無法理解它包含的可能性
• 創(chuàng)建流程復(fù)雜：每次創(chuàng)建一個獨立的表時，會優(yōu)先彈出普通數(shù)據(jù)表，要從中理解一般表格和其它表格的關(guān)聯(lián)
• 視圖操作復(fù)雜：不同視圖之間的操作有差異，導(dǎo)致使用上的功能識別非常的難受
• 詳情內(nèi)容儀式感弱：編輯狀態(tài)和查看狀態(tài)沒有比較好的差異，使用感受不好，即使編輯完內(nèi)容也像還待編輯的狀態(tài)

2. 產(chǎn)品五要素分析

戰(zhàn)略、范圍、結(jié)構(gòu)沒太多能總結(jié)的略過了，就只放框架和視覺整理出來的問題。

（1）框架層問題整理

a. 多維頁面左側(cè)導(dǎo)航

• 新建表都是在表下創(chuàng)建一個新的普通列表視圖，新人不知道普通列表有什么用，老用戶也不一定要直接用普通列表
• 表的折疊和下方視圖應(yīng)用關(guān)系比較難受，所有圖表都應(yīng)該由基礎(chǔ)圖表組成，一級目錄應(yīng)該和下方有較大的差異

b. 多維頁面右側(cè)區(qū)域

• 上方全局操作欄目內(nèi)容非常擁擠，而且隨視圖變化沒有明確的規(guī)律，需要進(jìn)行合理的拆分
• 字段配置頁面的交互不是很合理，新增一個字段要左右交叉彈出3層，而且非常長，不符合菲茨定律的要求
• 生成表單功能沒有確認(rèn)提示，容易誤操作
• 相冊視圖中，縮略圖點擊進(jìn)對應(yīng)頁面完全是 “意料之外”，而詳情進(jìn)入點擊困難

c. 詳情頁內(nèi)容

• 框架寬度較小，使用體驗 “擰巴”
• 新增字段按鈕難以察覺，和外部的操作方式差異過大
• 詳情頁展開下級彈窗比當(dāng)前的還寬，瀏覽體驗極差

（2）視覺層問題整理

時間關(guān)系就放原來的記錄，不做文案的優(yōu)化了，也不一個個問題配圖解釋，感興趣的可以自己對照下線上的頁面：

• 面層次：導(dǎo)航列表和右側(cè)內(nèi)容的區(qū)分度低，頂部操作欄和實際視圖內(nèi)容沒有明確的分割識別性差
• 色彩應(yīng)用：頁面整體過“白”，導(dǎo)致關(guān)鍵因素?zé)o法凸顯，色彩帶來的功能性作用極差
• 文字應(yīng)用：關(guān)鍵文字沒有突出，文字信息層級的價值較差，在復(fù)雜的視圖環(huán)境下閱讀體驗極差
• 圖標(biāo)應(yīng)用：圖標(biāo)統(tǒng)一性不是太理想，一級表的圖標(biāo)與二級視圖圖標(biāo)太接近，難以區(qū)分
• 字段樣式：較多字段樣式在外部顯示不理想，不僅不好看而且識別性弱
• 分組視圖：層級劃分樣式很難受，導(dǎo)致頁面過度復(fù)雜
• 甘特視圖：時間條的顯示約等于無，難以看清
• 畫冊視圖：實際使用場景下圖片有點太大，且下方字段信息間距過大
• 表單視圖：那個背景設(shè)計很違和，“表單感” 太弱
• 詳情頁面：背景透明度太低，內(nèi)部元素的分隔不足，親密性表現(xiàn)較差

六、方案制定

問題都有了，下一步不是直接就能把問題給解決了！因為解決問題要給設(shè)計產(chǎn)出，設(shè)計產(chǎn)出也要花挺長時間去做。所以，我們要先對準(zhǔn)備輸出的方案做前期的計劃。

首先，為了讓用戶更好的上手產(chǎn)品，構(gòu)建用戶的心智，我先搭建出一個理想的操作路徑。

優(yōu)先在用戶認(rèn)知中確定“數(shù)據(jù)表”的認(rèn)識，通過表格這種最直觀的形式，將自己想要的數(shù)據(jù)結(jié)構(gòu)搭建出來，再去創(chuàng)建更直觀的可視視圖。

因為“標(biāo)題”作為所有視圖索引的錨點，必須在前期搭建數(shù)據(jù)表的時候就建立清晰的認(rèn)識，而不是直接開始上手對應(yīng)的視圖內(nèi)容創(chuàng)建（很多視圖類型不凸顯標(biāo)題），在后續(xù)無法很好的在認(rèn)知里錨定標(biāo)題，從而在操作認(rèn)識上造成混亂。

所以，新建數(shù)據(jù)表的時候，父集表結(jié)構(gòu)會擁有個獨立的表格頁面，和下級的視圖內(nèi)容作出區(qū)分，并在該頁面有較強(qiáng)的引導(dǎo)進(jìn)行其它類型視圖的創(chuàng)建。

然后，重新梳理了一下頁面結(jié)構(gòu)圖，理解整體包含的頁面和結(jié)構(gòu)關(guān)系。

因為不可能做完所有細(xì)節(jié)，所以優(yōu)先明確主要交互改版的區(qū)域：

• 頂部操作工具欄的整體優(yōu)化，統(tǒng)一操作效果
• 優(yōu)化各個頁面的內(nèi)容區(qū)域和背景的呈現(xiàn)方式
• 優(yōu)化整體詳情頁面的展示和交互方法
• 減少頁面樣式的沖突性提升一致性體驗
• 強(qiáng)調(diào)頁面形成依據(jù)和分組依據(jù)，提升識別性

最后，再把要設(shè)計的具體內(nèi)容清單羅列出來，把一些暫時沒空、相關(guān)性不高的頁面排除掉，確定設(shè)計的工作量。

這也是我自己課程里會多次強(qiáng)調(diào)的一步工作，任何系統(tǒng)性的設(shè)計項目，都一定要把準(zhǔn)備設(shè)計的內(nèi)容清單整理一遍，不要只是心理有個“大概”，這樣絕對會做到后面翻車的。

七、交互的改版實例解析

下面，針對主要的框架和視圖頁面內(nèi)容改版后的內(nèi)容逐一進(jìn)行說明。更細(xì)致的交互細(xì)節(jié)還沒做完，以后有機(jī)會再分享。

1. 全局 – 基本框架優(yōu)化

優(yōu)化說明：

• 右側(cè)內(nèi)容區(qū)域統(tǒng)一使用灰色背景，突出具體展示的內(nèi)容和卡片。而不像當(dāng)前儀表盤使用灰底，而數(shù)據(jù)組用白底。
• 因為頂部課操作要素太多，所以增加分割線，強(qiáng)化頂部區(qū)域和內(nèi)容區(qū)域的分隔。

2. 全局 – 導(dǎo)航欄相關(guān)優(yōu)化

優(yōu)化說明：

• 優(yōu)化搜索框，原有搜索框和菜單關(guān)閉位置很占空間，而且在我自己使用體驗中搜索使用頻率太低。除所以新設(shè)計中降低視覺權(quán)重，做成通欄無邊框設(shè)計。
• 優(yōu)化關(guān)閉圖標(biāo)，側(cè)邊欄關(guān)閉的需求也沒有那么大，所以我改成鼠標(biāo)進(jìn)入導(dǎo)航區(qū)域后才顯示，默認(rèn)狀態(tài)隱藏
• 優(yōu)化一級和二級菜單圖標(biāo)類型，在設(shè)計上要有明確區(qū)分，一級選項不和二級選項混淆
• 一級選項處于懸浮和選中狀態(tài)（包含下級區(qū)域），顯示更多和添加，并且優(yōu)化更多選項位置，將添加視圖放到最右側(cè)

3. 全局 – 工具操作欄優(yōu)化

優(yōu)化說明：

• 工具欄分成兩個編組，左右對齊。左側(cè)和視圖有較強(qiáng)關(guān)聯(lián)，右側(cè)則是具體操作。
• 對于可以進(jìn)行分組和直接影響同類視圖最終顯示依據(jù)的功能放到左側(cè)，能強(qiáng)調(diào)通過該選項來設(shè)置該視圖的最基本展示方式。
• 對右側(cè)功能進(jìn)行二次分組，通過權(quán)重和邏輯性進(jìn)行排序和分隔
• 對不同視圖的工具內(nèi)容順序做出統(tǒng)一性的排列，降低學(xué)習(xí)成本

4. 視圖 – 基本數(shù)據(jù)組/一般表格

優(yōu)化說明：

• 優(yōu)化標(biāo)題列，提升標(biāo)題列的權(quán)重
• 底部操作欄上移（細(xì)節(jié)沒做完），只有表格內(nèi)容超出頁面高度時頁面底部懸浮吸附

5. 視圖 – 看板視圖

優(yōu)化說明：

• 凸出標(biāo)題元素，并使用分割線進(jìn)行內(nèi)容的區(qū)分
• 優(yōu)化字段內(nèi)容排列的方式，提升閱讀效率，默認(rèn)隱藏字段圖標(biāo)

6. 視圖 – 畫冊視圖

優(yōu)化說明：

• 凸出標(biāo)題元素，并和看板樣式保持統(tǒng)一
• 增加添加記錄卡片，默認(rèn)處于最后一條便于點擊

7. 視圖 – 甘特視圖

優(yōu)化說明：

• 優(yōu)化甘特區(qū)域頂部欄目的高度，將日期置于每列矩形內(nèi)，提升日期的識別性
• 為月份增加分割線，提升月份跨度的識別性

8. 視圖 – 表單視圖

優(yōu)化說明：

• 移除上方的背景圖，在后期會通過其它設(shè)計提升“表單質(zhì)感”
• 將內(nèi)容繼續(xù)移動到右側(cè)欄目中（不知道出于什么考慮他們把欄目改左側(cè)去）
• 合并可選字段和表單設(shè)置選項，提升操作的效率
• 填寫模式改到右上角去，不放在中間進(jìn)行切換，這種操作需要一定的阻隔（操作距離）

八、結(jié)尾

以上就是本次改版前半部分的分享了?？赡芎芏嗤瑢W(xué)會覺得好像分析花很長時間，最后改動看起來又很小。但必須強(qiáng)調(diào)這才是真實工作環(huán)境里可能會產(chǎn)出的成果，不是任何情況下做改版都是大開大合，改動特別劇烈的。

尤其是針對交互的調(diào)整上，往往一些細(xì)微的，視覺上很難體現(xiàn)的改動要消耗大量的精力去思考和研究，才能產(chǎn)出最終的方案。而整個項目交互的改版，就是建立在若干這些細(xì)節(jié)的調(diào)整，和整體交互使用的一致上去搭建的。

還有很多頁面流程上的調(diào)整和組件交互上的設(shè)計，用圖文的方法來講解實在是寫不完（目前只有理想情況下五分之一不到）……后續(xù)頁面的其它操作流程、組件交互，在之后有空再陸續(xù)分享改版的思路。

希望對大家有幫助，白了個白～