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

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

因為該項目太複雜，所以這次隻分享前期整理和整體框架的部分，後面與機會再針對不同的細節做單獨的分享。

PS：因為大多數内容在年初整理，線上版本有一部分功能和細節改動。

一、改版的項目規劃

首先，因為多維表格的複雜性，已經沒辦法讓我像前面的改版一樣隻要簡單做下案例的分析，就可以動手完成後續的改動，這是起碼要投入一周工作量，超過 20 天（業餘時間做）時長的改版。

所以一開始，我就要做好前期的項目規劃，對整體的工作内容、流程、步驟做一遍梳理，才能确定我的工作量，和每個步驟的大緻順序。

下圖是我用思維導圖做的初步計劃：

裡面包含了 6 個步驟，前期的分析和準備占了絕大多數篇幅，最後的輸出反而隻有一小部分。

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

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

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

任何商業項目的設計、改版，都可以用一個簡單的鍊條來概括，新手要掌握的就是這個大的框架，并學會怎麼自己去填充細節，而不是背一套特别複雜的流程在自己的實踐中硬套，比如雙鑽模型。

二、項目的背景分析

分析的第一步肯定就是解決項目背景的問題，雖然我是為了做項目的改版練習，但是具體工作目标是什麼，解決什麼問題的大方向依舊是要确認下來的。

在這裡我制定下來的主要目标包含：

• 優化多維表格的整體交互細節
• 制定更統一的交互應用框架
• 為增加功能、字段提供更好拓展性
• 做出讓新人更容易理解上手的版本

然後，再更多的收集多維表格的資料，不管是從官方也好，還是從外部的一些資訊信息裡檢索，從更多的維度來理解該産品和服務性質。

官方介紹：飛書多維表格是一款以表格為基礎的新一代效率應用。它具備表格的輕盈和業務系統的強大，融合了在線協作、信息管理和可視化能力，能夠自适應團隊思維和業務發展需求，是具備個性化能力的業務管理工具。

個人總結：多維表格是一個面向企業業務管理的新型協作工具，類似 Notion 的 Database View。

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

所以，目前大量用戶無法認識表格中的數據視圖轉換邏輯，以及不知道這個圖表有什麼用。

同時，再收集了市面上用相似功能的其它産品：

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

優先搭建好這些宏觀的“認識”，再慢慢往後續的細節推進。

三、産品功能分析

雖然我自己課程的分析路徑是業務分析優先，但該産品不是由一般的業務問題衍生而來，而是通過功能去驅動業務流程，所以我們優先分析産品功能，再對功能和業務的結合點進行分析。

我優先繪制産品的功能地圖，整理了整個模塊中的主要功能和層級。

在我自己課程裡會重點提功能地圖、産品地圖、信息地圖、頁面地圖的區别，功能地圖的主要目的是幫助我們理解這個産品所包含的功能有哪些。

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

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

在這個分析階段，還注意到一個特殊的字段“标題”，即創建數據的時候用來進行數據行索引和展示的唯一字段，便于串聯後續的其它字段内容，是默認存在不可修改位置的。

然後，在此基礎上分析每個視圖的功能特征和展示特征。

1. 分組表格

• 通過一個字段做分組依據，每個分組理論上包含多條數據。篩選允許進行二次分組
• 每個分組欄會标識該分組的依據（标題），并可以選擇關聯顯示的數據内容

2. 甘特圖類型

• 需要一個用來分組的字段類型，這個字段類型不能是标題，基本得是人員或者标簽，會關聯多條數據
• 甘特場景需要數據包含時間字段，如果原本沒有，在時間線中創建了就會出現

3. 畫冊類型

• 主要顯示大圖模塊，大圖可以包含多個圖片。适合收集圖片類數據内容，并以封面圖檢索來查看詳情内容
• 封面區域點擊進入對應字段内容，圖片進圖片大圖，附件進附件頁
• 下方标題點擊進入數據詳情

4. 表單視圖

• 生成一個用來收集數據的問卷表單，通過選擇前面添加過的字段來組成一個便于錄入數據的表單内容

5. 看闆視圖

• 分組需要相關的依據，也是一個值可以關聯多個結果的屬性類型
• 可以通過拖動快速切換分組屬性值

所有視圖的頂部操作中，包含集全局和特有操作内容，尤其是在工具欄中的功能差異，為了防止我自己看起來都亂，就創建一個表格來便于後續的識别和查看。

把這些理完（更細節的我就不放了），基本上産品有什麼功能，對應分布就非常清晰了，如果連産品功能内容都沒有搞明白，頂多可以優化視覺的内容，但絕對無法對完成交互的設計。

四、使用場景分析

先分析完産品，然後就是分析符合這個産品使用的場景，也就作為工具它能切入到哪些業務中去，并且在這些業務環境中會應用哪些功能，如何進行操作，操作的順序和痛點。

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

所以，我們需要依靠一些簡單的調查、資訊收集信息，“腦補”出對應的業務環境和流程，即對業務流程和操作流程進行建模，搭建虛拟的操作環境來分析當前交互的缺陷。

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

所以，根據官方說明文檔介紹的客戶應用案例，以及官方提供的模闆的一些分類，我總結了幾個基礎的使用場景：

• 團隊OKR管理：利用一般表格、看闆和雙向關聯功能進行 OKR 的整合
• 團隊任務管理：通過列表、分組、看闆進行任務的分配和提醒
• 項目流程管理：通過看闆、甘特、分組的方式制定項目任務内容和計劃
• 基礎問卷調查：通過表單創建問卷，并用列表、分組展示數據信息
• ……

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

簡單描述一下，比如針對團隊 OKR，我們自己模拟一下包含 3 個用戶角色，分别是，領導A、馬仔B，馬仔C。然後每個人在 OKR 雙月報裡要填寫自己的内容，以及對齊别人的任務。

那我們就要分别将自己帶入到 3 個角色中，然後建立自己的目标，并進行操作……

這種模拟做得越多，就越能還原相關的場景，和發現産品的真實問題。用戶測試這件事，你隻要自己帶入感夠強，有較好的多重人格、精神分裂能力，就可以直接模拟甲乙丙丁……

你自己就是一隻軍隊……

五、相關問題整理

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

記錄的内容我拆解成兩個維度，宏觀定性分析和結構化的五要素分析内容。

1. 宏觀定性分析

結合産品功能和業務場景的定性分析，可以将問題拆解成下面幾大類：

• 初期理解困難：無法理解多維表格有什麼用，創建的邏輯就很不符合主流工具使用情況，無法理解它包含的可能性
• 創建流程複雜：每次創建一個獨立的表時，會優先彈出普通數據表，要從中理解一般表格和其它表格的關聯
• 視圖操作複雜：不同視圖之間的操作有差異，導緻使用上的功能識别非常的難受
• 詳情内容儀式感弱：編輯狀态和查看狀态沒有比較好的差異，使用感受不好，即使編輯完内容也像還待編輯的狀态

2. 産品五要素分析

戰略、範圍、結構沒太多能總結的略過了，就隻放框架和視覺整理出來的問題。

（1）框架層問題整理

a. 多維頁面左側導航

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

b. 多維頁面右側區域

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

c. 詳情頁内容

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

（2）視覺層問題整理

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

• 面層次：導航列表和右側内容的區分度低，頂部操作欄和實際視圖内容沒有明确的分割識别性差
• 色彩應用：頁面整體過“白”，導緻關鍵因素無法凸顯，色彩帶來的功能性作用極差
• 文字應用：關鍵文字沒有突出，文字信息層級的價值較差，在複雜的視圖環境下閱讀體驗極差
• 圖标應用：圖标統一性不是太理想，一級表的圖标與二級視圖圖标太接近，難以區分
• 字段樣式：較多字段樣式在外部顯示不理想，不僅不好看而且識别性弱
• 分組視圖：層級劃分樣式很難受，導緻頁面過度複雜
• 甘特視圖：時間條的顯示約等于無，難以看清
• 畫冊視圖：實際使用場景下圖片有點太大，且下方字段信息間距過大
• 表單視圖：那個背景設計很違和，“表單感” 太弱
• 詳情頁面：背景透明度太低，内部元素的分隔不足，親密性表現較差

六、方案制定

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

首先，為了讓用戶更好的上手産品，構建用戶的心智，我先搭建出一個理想的操作路徑。

優先在用戶認知中确定“數據表”的認識，通過表格這種最直觀的形式，将自己想要的數據結構搭建出來，再去創建更直觀的可視視圖。

因為“标題”作為所有視圖索引的錨點，必須在前期搭建數據表的時候就建立清晰的認識，而不是直接開始上手對應的視圖内容創建（很多視圖類型不凸顯标題），在後續無法很好的在認知裡錨定标題，從而在操作認識上造成混亂。

所以，新建數據表的時候，父集表結構會擁有個獨立的表格頁面，和下級的視圖内容作出區分，并在該頁面有較強的引導進行其它類型視圖的創建。

然後，重新梳理了一下頁面結構圖，理解整體包含的頁面和結構關系。

因為不可能做完所有細節，所以優先明确主要交互改版的區域：

• 頂部操作工具欄的整體優化，統一操作效果
• 優化各個頁面的内容區域和背景的呈現方式
• 優化整體詳情頁面的展示和交互方法
• 減少頁面樣式的沖突性提升一緻性體驗
• 強調頁面形成依據和分組依據，提升識别性

最後，再把要設計的具體内容清單羅列出來，把一些暫時沒空、相關性不高的頁面排除掉，确定設計的工作量。

這也是我自己課程裡會多次強調的一步工作，任何系統性的設計項目，都一定要把準備設計的内容清單整理一遍，不要隻是心理有個“大概”，這樣絕對會做到後面翻車的。

七、交互的改版實例解析

下面，針對主要的框架和視圖頁面内容改版後的内容逐一進行說明。更細緻的交互細節還沒做完，以後有機會再分享。

1. 全局 – 基本框架優化

優化說明：

• 右側内容區域統一使用灰色背景，突出具體展示的内容和卡片。而不像當前儀表盤使用灰底，而數據組用白底。
• 因為頂部課操作要素太多，所以增加分割線，強化頂部區域和内容區域的分隔。

2. 全局 – 導航欄相關優化

優化說明：

• 優化搜索框，原有搜索框和菜單關閉位置很占空間，而且在我自己使用體驗中搜索使用頻率太低。除所以新設計中降低視覺權重，做成通欄無邊框設計。
• 優化關閉圖标，側邊欄關閉的需求也沒有那麼大，所以我改成鼠标進入導航區域後才顯示，默認狀态隐藏
• 優化一級和二級菜單圖标類型，在設計上要有明确區分，一級選項不和二級選項混淆
• 一級選項處于懸浮和選中狀态（包含下級區域），顯示更多和添加，并且優化更多選項位置，将添加視圖放到最右側

3. 全局 – 工具操作欄優化

優化說明：

• 工具欄分成兩個編組，左右對齊。左側和視圖有較強關聯，右側則是具體操作。
• 對于可以進行分組和直接影響同類視圖最終顯示依據的功能放到左側，能強調通過該選項來設置該視圖的最基本展示方式。
• 對右側功能進行二次分組，通過權重和邏輯性進行排序和分隔
• 對不同視圖的工具内容順序做出統一性的排列，降低學習成本

4. 視圖 – 基本數據組/一般表格

優化說明：

• 優化标題列，提升标題列的權重
• 底部操作欄上移（細節沒做完），隻有表格内容超出頁面高度時頁面底部懸浮吸附

5. 視圖 – 看闆視圖

優化說明：

• 凸出标題元素，并使用分割線進行内容的區分
• 優化字段内容排列的方式，提升閱讀效率，默認隐藏字段圖标

6. 視圖 – 畫冊視圖

優化說明：

• 凸出标題元素，并和看闆樣式保持統一
• 增加添加記錄卡片，默認處于最後一條便于點擊

7. 視圖 – 甘特視圖

優化說明：

• 優化甘特區域頂部欄目的高度，将日期置于每列矩形内，提升日期的識别性
• 為月份增加分割線，提升月份跨度的識别性

8. 視圖 – 表單視圖

優化說明：

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

八、結尾

以上就是本次改版前半部分的分享了。可能很多同學會覺得好像分析花很長時間，最後改動看起來又很小。但必須強調這才是真實工作環境裡可能會産出的成果，不是任何情況下做改版都是大開大合，改動特别劇烈的。

尤其是針對交互的調整上，往往一些細微的，視覺上很難體現的改動要消耗大量的精力去思考和研究，才能産出最終的方案。而整個項目交互的改版，就是建立在若幹這些細節的調整，和整體交互使用的一緻上去搭建的。

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

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

作者：酸梅幹超人；公衆号：超人的電話亭（ID：Superman_Call）

本文由 @超人的電話亭 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自Unsplash ，基于 CC0 協議。

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

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

查看全部