超肝交互改版長篇 | 飛書多維表格交互改版全流程分享
又到了很久也沒有分享，鴿了很久的 B 端案例改版的練習分享了。這次改版練習的對象是一個比較復雜的案例，字節(jié)飛書的 —— 多維表格。
選擇該項目的起源是之前 B 端課程有個學員是頭條的設計師，工作里有相關的設計任務，我們針對多維表格做過一定的溝通和交流。因為我比較熱衷這些新穎的 Saas 工具，所以索性直接拿它做練習，作為課程額外的實操演示分享。
本來應該4月初做完的，奈何做一半碰到疫情被隔離就耽擱了（血淚史），所以拖到最近才騰出手陸陸續(xù)續(xù)把后續(xù)的內容做完。
之前做過一個簡單的公開課分享，但是不肯定不如圖文版本完整，所以再把這次的改版練習過程記錄下來分享，方便大家參考。
因為該項目太復雜，所以這次只分享前期整理和整體框架的部分，后面與機會再針對不同的細節(jié)做單獨的分享。
PS：因為大多數(shù)內容在年初整理，線上版本有一部分功能和細節(jié)改動。
首先，因為多維表格的復雜性，已經沒辦法讓我像前面的改版一樣只要簡單做下案例的分析，就可以動手完成后續(xù)的改動，這是起碼要投入一周工作量，超過 20 天（業(yè)余時間做）時長的改版。
所以一開始，我就要做好前期的項目規(guī)劃，對整體的工作內容、流程、步驟做一遍梳理，才能確定我的工作量，和每個步驟的大致順序。
下圖是我用思維導圖做的初步計劃：
里面包含了 6 個步驟，前期的分析和準備占了絕大多數(shù)篇幅，最后的輸出反而只有一小部分。
這也要重點給大家提個醒，針對 B 端商業(yè)項目，尤其是已經上線了的項目，做改版、優(yōu)化、新需求，是要非常慎重的。絕對不是拿到一個項目就看著感覺改，無腦一頓猛做，單單做得快、好看，是難以符合專業(yè)團隊的要求的，因為你很難?站在業(yè)務的角度解釋改版的邏輯和價值。
而在項目的計劃中，前期具體要分析哪些東西，是得看人下菜的。不同項目和背景中，我們可以分析的內容、資源、材料是不同的。
比如我自己做練習，要拿真實項目的使用數(shù)據(jù) DAU 之類的做分析，顯然是不現(xiàn)實的（也沒必要），或者在有限的時間里還自己在社群招募真實用戶，做幾輪用研，也是沒可能的（我懶，肝不動）。所以要選出必要，且我能做到的分析內容內容出來。
任何商業(yè)項目的設計、改版，都可以用一個簡單的鏈條來概括，新手要掌握的就是這個大的框架，并學會怎么自己去填充細節(jié)，而不是背一套特別復雜的流程在自己的實踐中硬套，比如雙鉆模型。
分析的第一步肯定就是解決項目背景的問題，雖然我是為了做項目的改版練習，但是具體工作目標是什么，解決什么問題的大方向依舊是要確認下來的。
在這里我制定下來的主要目標包含：
優(yōu)化多維表格的整體交互細節(jié)
制定更統(tǒng)一的交互應用框架
為增加功能、字段提供更好拓展性
做出讓新人更容易理解上手的版本
然后，再更多的收集多維表格的資料，不管是從官方也好，還是從外部的一些資訊信息里檢索，從更多的維度來理解該產品和服務性質。
官方介紹：飛書多維表格是一款以表格為基礎的新一代效率應用。它具備表格的輕盈和業(yè)務系統(tǒng)的強大，融合了在線協(xié)作、信息管理和可視化能力，能夠自適應團隊思維和業(yè)務發(fā)展需求，是具備個性化能力的業(yè)務管理工具。
個人總結：多維表格是一個面向企業(yè)業(yè)務管理的新型協(xié)作工具，類似 Notion 的 Database View。
該類型工具并不是由一般業(yè)務需求和協(xié)作方式衍生而來，和傳統(tǒng)辦公方法、系統(tǒng)有較大的差異，意味著新用戶需要被 “教育” 才能正確使用，上手成本極高。
所以，目前大量用戶無法認識表格中的數(shù)據(jù)視圖轉換邏輯，以及不知道這個圖表有什么用。
同時，再收集了市面上用相似功能的其它產品：
Notion
Airtable
Clickup
Monday
黑帕云
維表格
優(yōu)先搭建好這些宏觀的 ”認識“，再慢慢往后續(xù)的細節(jié)推進。
雖然我自己課程的分析路徑是業(yè)務分析優(yōu)先，但該產品不是由一般的業(yè)務問題衍生而來，而是通過功能去驅動業(yè)務流程，所以我們優(yōu)先分析產品功能，再對功能和業(yè)務的結合點進行分析。
我優(yōu)先繪制產品的功能地圖，整理了整個模塊中的主要功能和層級。
在我自己課程里會重點提功能地圖、產品地圖、信息地圖、頁面地圖的區(qū)別，功能地圖的主要目的是幫助我們理解這個產品所包含的功能有哪些。
還有個重要的原因，就是視圖之間有非常強的聯(lián)系，但每個視圖又有自己的功能，所以要把通用的和視圖特有的一一梳理出來。
同時，前面說過視圖是由相同的數(shù)據(jù)轉化出來的，用戶可以創(chuàng)建不同的字段類型，并生成和填充不同的數(shù)據(jù)，來組成對應的視圖。所以，表格的類型同樣重要，我也簡單做了個整理。
在這個分析階段，還注意到一個特殊的字段 ”標題“，即創(chuàng)建數(shù)據(jù)的時候用來進行數(shù)據(jù)行索引和展示的唯一字段，便于串聯(lián)后續(xù)的其它字段內容，是默認存在不可修改位置的。
然后，在此基礎上分析每個視圖的功能特征和展示特征。
分組表格：
通過一個字段做分組依據(jù)，每個分組理論上包含多條數(shù)據(jù)。篩選允許進行二次分組
每個分組欄會標識該分組的依據(jù)（標題），并可以選擇關聯(lián)顯示的數(shù)據(jù)內容
甘特圖類型：
需要一個用來分組的字段類型，這個字段類型不能是標題，基本得是人員或者標簽，會關聯(lián)多條數(shù)據(jù)
甘特場景需要數(shù)據(jù)包含時間字段，如果原本沒有，在時間線中創(chuàng)建了就會出現(xiàn)
畫冊類型：
主要顯示大圖模塊，大圖可以包含多個圖片。適合收集圖片類數(shù)據(jù)內容，并以封面圖檢索來查看詳情內容
封面區(qū)域點擊進入對應字段內容，圖片進圖片大圖，附件進附件頁
下方標題點擊進入數(shù)據(jù)詳情
表單視圖：
生成一個用來收集數(shù)據(jù)的問卷表單，通過選擇前面添加過的字段來組成一個便于錄入數(shù)據(jù)的表單內容
看板視圖：
分組需要相關的依據(jù)，也是一個值可以關聯(lián)多個結果的屬性類型
可以通過拖動快速切換分組屬性值
所有視圖的頂部操作中，包含集全局和特有操作內容，尤其是在工具欄中的功能差異，為了防止我自己看起來都亂，就創(chuàng)建一個表格來便于后續(xù)的識別和查看。
把這些理完（更細節(jié)的我就不放了），基本上產品有什么功能，對應分布就非常清晰了，如果連產品功能內容都沒有搞明白，頂多可以優(yōu)化視覺的內容，但絕對無法對完成交互的設計。
先分析完產品，然后就是分析符合這個產品使用的場景，也就作為工具它能切入到哪些業(yè)務中去，并且在這些業(yè)務環(huán)境中會應用哪些功能，如何進行操作，操作的順序和痛點。
嚴格意義上來說，Saas 工具的業(yè)務場景分析，是需要參與到用戶實際操作流程里做用戶研究的，但是現(xiàn)在我們并不具備這個條件，很多同學的項目環(huán)境里也不具備這樣的時間和條件。
所以，我們需要依靠一些簡單的調查、資訊收集信息， ”腦補“ 出對應的業(yè)務環(huán)境和流程，即對業(yè)務流程和操作流程進行建模，搭建虛擬的操作環(huán)境來分析當前交互的缺陷。
這種做法并不是就不可以，而是追求效率的一些妥協(xié)，以及項目設計的第一版都還沒正式的用戶上哪找真實的使用流程，只能去做一些場景的模擬。
所以，根據(jù)官方說明文檔介紹的客戶應用案例，以及官方提供的模板的一些分類，我總結了幾個基礎的使用場景：
團隊OKR管理：利用一般表格、看板和雙向關聯(lián)功能進行 OKR 的整合
團隊任務管理：通過列表、分組、看板進行任務的分配和提醒
項目流程管理：通過看板、甘特、分組的方式制定項目任務內容和計劃
基礎問卷調查：通過表單創(chuàng)建問卷，并用列表、分組展示數(shù)據(jù)信息
……
至于后面為了更好的反應這些流程建模的圖例……肝不動，我就沒畫了。
簡單描述一下，比如針對團隊 OKR，我們自己模擬一下包含 3 個用戶角色，分別是，領導A、馬仔B，馬仔C。然后每個人在 OKR 雙月報里要填寫自己的內容，以及對齊別人的任務。
那我們就要分別將自己帶入到 3 個角色中，然后建立自己的目標，并進行操作……
這種模擬做得越多，就越能還原相關的場景，和發(fā)現(xiàn)產品的真實問題。用戶測試這件事，你只要自己帶入感夠強，有較好的多重人格、精神分裂能力，就可以直接模擬甲乙丙丁……
你自己就是一只軍隊（偷懶沒補圖湊字數(shù).jpg）……
通過前面若干的操作使用，我們已經可以形成大量的想法和思路了。為了防止這些想法流失，你需要每次測試完趁想法還新鮮，把它們通過文本的方式記錄下來。
記錄的內容我拆解成兩個維度，宏觀定性分析和結構化的五要素分析內容。
宏觀定性分析：
結合產品功能和業(yè)務場景的定性分析，可以將問題拆解成下面幾大類：
初期理解困難：無法理解多維表格有什么用，創(chuàng)建的邏輯就很不符合主流工具使用情況，無法理解它包含的可能性
創(chuàng)建流程復雜：每次創(chuàng)建一個獨立的表時，會優(yōu)先彈出普通數(shù)據(jù)表，要從中理解一般表格和其它表格的關聯(lián)
視圖操作復雜：不同視圖之間的操作有差異，導致使用上的功能識別非常的難受
詳情內容儀式感弱：編輯狀態(tài)和查看狀態(tài)沒有比較好的差異，使用感受不好，即使編輯完內容也像還待編輯的狀態(tài)
產品五要素分析：
戰(zhàn)略、范圍、結構沒太多能總結的略過了，就只放框架和視覺整理出來的問題。
框架層問題整理：
????1. 多維頁面左側導航
新建表都是在表下創(chuàng)建一個新的普通列表視圖，新人不知道普通列表有什么用，老用戶也不一定要直接用普通列表
表的折疊和下方視圖應用關系比較難受，所有圖表都應該由基礎圖表組成，一級目錄應該和下方有較大的差異
?2. 多維頁面右側區(qū)域????
????a. 上方全局操作欄目內容非常擁擠，而且隨視圖變化沒有明確的規(guī)律，需要進行合理的拆分????
????b. 字段配置頁面的交互不是很合理，新增一個字段要左右交叉彈出3層，而且非常長，不符合菲茨定律的要求
????c. 生成表單功能沒有確認提示，容易誤操作
????d. 相冊視圖中，縮略圖點擊進對應頁面完全是 “意料之外”，而詳情進入點擊困難
?3. 詳情頁內容：????
????a. 框架寬度較小，使用體驗 “擰巴”????
????b.新增字段按鈕難以察覺，和外部的操作方式差異過大????
????c.詳情頁展開下級彈窗比當前的還寬，瀏覽體驗極差
視覺層問題整理（時間關系就放原來的記錄，不做文案的優(yōu)化了，也不一個個問題配圖解釋，感興趣的可以自己對照下線上的頁面）：
面層次：導航列表和右側內容的區(qū)分度低，頂部操作欄和實際視圖內容沒有明確的分割識別性差
色彩應用：頁面整體過 “白”，導致關鍵因素無法凸顯，色彩帶來的功能性作用極差
文字應用：關鍵文字沒有突出，文字信息層級的價值較差，在復雜的視圖環(huán)境下閱讀體驗極差
圖標應用：圖標統(tǒng)一性不是太理想，一級表的圖標與二級視圖圖標太接近，難以區(qū)分
字段樣式：較多字段樣式在外部顯示不理想，不僅不好看而且識別性弱
分組視圖：層級劃分樣式很難受，導致頁面過度復雜
甘特視圖：時間條的顯示約等于無，難以看清
畫冊視圖：實際使用場景下圖片有點太大，且下方字段信息間距過大
表單視圖：那個背景設計很違和，”表單感“ 太弱
詳情頁面：背景透明度太低，內部元素的分隔不足，親密性表現(xiàn)較差
問題都有了，下一步不是直接就能把問題給解決了！因為解決問題要給設計產出，設計產出也要花挺長時間去做。所以，我們要先對準備輸出的方案做前期的計劃。
首先，為了讓用戶更好的上手產品，構建用戶的心智，我先搭建出一個理想的操作路徑。
優(yōu)先在用戶認知中確定 “數(shù)據(jù)表” 的認識，通過表格這種最直觀的形式，將自己想要的數(shù)據(jù)結構搭建出來，再去創(chuàng)建更直觀的可視視圖。
因為 “標題” 作為所有視圖索引的錨點，必須在前期搭建數(shù)據(jù)表的時候就建立清晰的認識，而不是直接開始上手對應的視圖內容創(chuàng)建（很多視圖類型不凸顯標題），在后續(xù)無法很好的在認知里錨定標題，從而在操作認識上造成混亂。
所以，新建數(shù)據(jù)表的時候，父集表結構會擁有個獨立的表格頁面，和下級的視圖內容作出區(qū)分，并在該頁面有較強的引導進行其它類型視圖的創(chuàng)建。
然后，重新梳理了一下頁面結構圖，理解整體包含的頁面和結構關系。
因為不可能做完所有細節(jié)，所以優(yōu)先明確主要交互改版的區(qū)域：
頂部操作工具欄的整體優(yōu)化，統(tǒng)一操作效果
優(yōu)化各個頁面的內容區(qū)域和背景的呈現(xiàn)方式
優(yōu)化整體詳情頁面的展示和交互方法
減少頁面樣式的沖突性提升一致性體驗
強調頁面形成依據(jù)和分組依據(jù)，提升識別性
最后，再把要設計的具體內容清單羅列出來，把一些暫時沒空、相關性不高的頁面排除掉，確定設計的工作量。
這也是我自己課程里會多次強調的一步工作，任何系統(tǒng)性的設計項目，都一定要把準備設計的內容清單整理一遍，不要只是心理有個 ”大概“，這樣絕對會做到后面翻車的。
下面，針對主要的框架和視圖頁面內容改版后的內容逐一進行說明。更細致的交互細節(jié)還沒做完，以后有機會再分享。
1. 全局 - 基本框架優(yōu)化
優(yōu)化說明：
右側內容區(qū)域統(tǒng)一使用灰色背景，突出具體展示的內容和卡片。而不像當前儀表盤使用灰底，而數(shù)據(jù)組用白底。
因為頂部課操作要素太多，所以增加分割線，強化頂部區(qū)域和內容區(qū)域的分隔。
2. 全局 - 導航欄相關優(yōu)化
優(yōu)化說明：
優(yōu)化搜???索框，原有搜索框和菜單關閉位置很占空間，而且在我自己使用體驗中搜索使用頻率太低。除所以新設計中降低視覺權重，做成通欄無邊框設計。
優(yōu)化關閉圖標，側邊欄關閉的需求也沒有那么大，所以我改成鼠標進入導航區(qū)域后才顯示，默認狀態(tài)隱藏
優(yōu)化一級和二級菜單圖標類型，在設計上要有明確區(qū)分，一級選項不和二級選項混淆
一級選項處于懸浮和選中狀態(tài)（包含下級區(qū)域），顯示更多和添加，并且優(yōu)化更多選項位置，將添加視圖放到最右側
3. 全局 - 工具操作欄優(yōu)化
優(yōu)化說明：
工具欄分成兩個編組，左右對齊。左側和視圖有較強關聯(lián)，右側則是具體操作。
對于可以進行分組和直接影響同類視圖最終顯示依據(jù)的功能放到左側，能強調通過該選項來設置該視圖的最基本展示方式。
對右側功能進行二次分組，通過權重和邏輯性進行排序和分隔
對不同視圖的工具內容順序做出統(tǒng)一性的排列，降低學習成本
4. 視圖 - 基本數(shù)據(jù)組/一般表格
優(yōu)化說明：
優(yōu)化標題列，提升標題列的權重
底部操作欄上移（細節(jié)沒做完），只有表格內容超出頁面高度時頁面底部懸浮吸附
5. 視圖 - 看板視圖
優(yōu)化說明：
凸出標題元素，并使用分割線進行內容的區(qū)分
優(yōu)化字段內容排列的方式，提升閱讀效率，默認隱藏字段圖標
6. 視圖 - 畫冊視圖
優(yōu)化說明：
凸出標題元素，并和看板樣式保持統(tǒng)一
增加添加記錄卡片，默認處于最后一條便于點擊
7. 視圖 - 甘特視圖
優(yōu)化說明：
優(yōu)化甘特區(qū)域頂部欄目的高度，將日期置于每列矩形內，提升日期的識別性
為月份增加分割線，提升月份跨度的識別性
8. 視圖 - 表單視圖
優(yōu)化說明：
移除上方的背景圖，在后期會通過其它設計提升 “表單質感”
將內容繼續(xù)移動到右側欄目中（不知道出于什么考慮他們把欄目改左側去）
合并可選字段和表單設置選項，提升操作的效率
填寫模式改到右上角去，不放在中間進行切換，這種操作需要一定的阻隔（操作距離）
以上就是本次改版前半部分的分享了?？赡芎芏嗤瑢W會覺得好像分析花很長時間，最后改動看起來又很小。但必須強調這才是真實工作環(huán)境里可能會產出的成果，不是任何情況下做改版都是大開大合，改動特別劇烈的。
尤其是針對交互的調整上，往往一些細微的，視覺上很難體現(xiàn)的改動要消耗大量的精力去思考和研究，才能產出最終的方案。而整個項目交互的改版，就是建立在若干這些細節(jié)的調整，和整體交互使用的一致上去搭建的。
還有很多頁面流程上的調整和組件交互上的設計，用圖文的方法來講解實在是寫不完（目前只有理想情況下五分之一不到）……后續(xù)頁面的其它操作流程、組件交互，在之后有空再陸續(xù)分享改版的思路。
希望對大家有幫助，白了個白～
之前B端改版文章：
B端產品設計全能班和C端UI設計實戰(zhàn)班同期招生中，有需要就來上正課
