甘特圖的圖有三樣畫法，你知道么？

03-31

00.萬惡之源

Boss：這回的主頁包含一個甘特圖，你看看要怎麼設計。

我（OS）：甘特圖啊，就是那幾種唄，簡單簡單。

圖1 幾種甘特圖設計（來源：Dribbble）

Boss：這是需求文檔中的甘特圖單個信息內容，記得都加進去。

圖2 航班安排信息需求（部分截圖）

我：一條信息里這麼多內容？

Boss：對啊。

我：……

簡單地鋪陳信息是最便捷的路徑，絕對不會損傷功能性（Boss你看，該加的我可都加進去了啊！）。但頁面最終實現的標準，不僅僅是完善的功能，還應擁有良好、合理的用戶體驗。

因此，我們把用戶、操作流程、目的和使用場景等要素合理地整合到一起，分析信息優先順序及呈現方式，試圖探索該場景下甘特圖的最佳設計。

01.工作流程重構

該甘特圖是民航排班系統的核心組件，具有任務派遣、實時查看等功能，對於工作流程中的不同角色來說，側重點也各有不同。需求中已經將用戶分為明確的三類：管理員、派遣員和普通員工。每天500-800個航班任務將由這三類角色層層下達處理。除了查看任務，管理員與派遣員還擁有添加和修改任務的許可權。整個工作流程如下圖。

圖3 工作流程圖

一天的航班任務約有500-800條，在經過管理員審核後下達分配至2-3名派遣員，派遣員再分配給負責的各個員工。在該工作流程中可以看到，三種角色因其所在位置導致的信息優先順序、信息流大小、操作方式各不相同，根據這一原則，我們對不同角色建模，深入探究使用場景及需求。

02.用戶角色建立

角色1.管理員

-處理信息數：500-800

-主要操作：更改任務（時間、人員等）/添加任務/批量發布至派遣員

-優先了解的信息：航班時間、人員、飛機信息

角色2.派遣員

-處理信息數：100-200

-主要操作：更改任務（時間、人員、登機口等）/添加任務/批量發布至普通員工

-優先了解的信息：航班時間、人員、登機口、機位

角色3.普通員工

-處理信息數：<10

-主要操作：查看任務

-優先了解的信息：航班時間、飛機信息、登機口、機位、人員

《三個步驟設計高效 Dashboard》中提到，

劃分用戶，一般會從業務線或崗位入手。不同業務線間，關注的核心指標自然不同，比如轉轉下面各種業務部門，即使大家都關注大盤數據，但每天更關心的，還是自己的業務細節指標。崗位也是同理，管理層重在把握全局，而執行層重在每個細節的執行效果，關注的數據層級和指標也會有所差異。

儘管用戶角色需求差異較大，但仍需整合在一個通用模板上，綜合考慮可以得到如下需求：

可以快速瀏覽大量信息條，每條信息內容集中、互不混淆。
所有信息沿時間線流動，方便實時查看操作。
每條信息內包含的數據要根據需求判定呈現優先順序，確保查看與操作的最小路徑。
異常信息提示性強、操作方式直觀易懂。

03.信息優先順序權衡

得到需求後，接下來可以對信息內容進行加工了。十幾條信息很難直接展示在單個信息條內，設想中，我們要對信息進行層級劃分，根據角色操作優先顯示重要信息，摺疊次級信息。

圖4.信息層級劃分

根據主要操作判定，添加/修改內容的主要操作對象為「時間、機位、員工及工作時間」，查看的主要操作對象為「飛機航班、始發地/目的地、員工及時間」，因此這六項作為第一層級優先呈現；在添加/修改內容時，可以調用固定端登機橋、登機口編號等橋位及登機口信息，這幾項作為第二層級；飛機型號等具體飛機信息不涉及到操作，也可以在庫中直接調用，因此編為第三層級。

04.視覺設計原則

確定信息層級，才進入了視覺設計階段。航班系統數據多而繁雜，需要從排版、色彩和細節等方面著手，準確而高效地傳遞信息。

排版布局四大基本原則：
對比（Contrast）：如果兩個項不完全相同，就應當使之不同，而且應當是截然不同。
重複（Repetition）：設計的某些方面在整個作品中重複。
對齊（Alignment）：任何元素都不能在頁面上隨意安放。每一項都應當與頁面上的某個內容存在某種視覺聯繫。
親密性（Proximity）：將相關的項組織在一起，使它們的物理位置相互靠近相關的項將被看作凝聚為一體的一個組。

以下是可供選擇的三種架構：

圖5.架構設計1

架構1：嚴格按照層級關係排布，第一層級全部展開，第二層級和第三層級編組，作為滑鼠懸停在「航班信息」和「登機口」處時的彈出窗口。

圖6.架構設計2

架構2：考慮到對信息條的視覺精簡，將第一層級的位置由圖錶轉移到左側表格項，甘特條與時間軸統一縮小，為了增強無文字甘特條的可讀性，添加了一根時間線。第二層級同樣部分展開，第三層級仍作為懸停彈出窗口。

圖7.架構設計3

架構3：極端簡化的嘗試，只提取第一層級的最重要部分「航班信息、時間」展開，其他信息隱藏到甘特條的彈出窗口。視覺>功能，在實際應用中，這種方案往往不可取。

除了架構設計，我們還採用色彩來傳遞信息分類，避免了更多文字困擾，增強了信息可視化效果。在需求文檔中，信息條一共有6種狀態：

圖8.航班狀態需求（部分截圖）

已完成任務是不可編輯狀態，顏色灰度高；正在進行的航班任務往往占數最多，和頁面主體顏色相適應；預期延遲與不正常分別按提醒級別設定為黃色和紅色，起警示作用。

圖9.不同狀態下的甘特條

05.備選方案評估

圖10.備選方案1

方案1信息層級分明，能夠保證最快了解基本信息。但在視覺上單個甘特條顯得臃腫，信息量過大。

圖11.備選方案2

方案2將所有信息全部展開以縮減甘特條部分，在信息量不特別大的時候是可取的，本例中對相似信息進行了合併，但總體佔比過大，而且可拓展性不夠強。操作按鈕在甘特條懸停時出現。

圖12.備選方案3

方案3（私心還是把它做了出來）屬於純視覺優先，第一級展開的信息只有「航班信息、始發地/目的地」和較為模糊的「時間」（通過時間軸判斷）。在實際應用中，用戶想要看到詳細信息只能對單個甘特條懸停才可以，大大降低了易用性。

06.後記

最終方案選擇的是第一種。

與各種前端不同，後台系統用戶單一而固定，功能至上。形式往往要讓位於功能。一個好的設計來應該讓用戶獲得良好的體驗感受，從這方面講，功能易用性的比重確實是大於視覺美感的。我在做展示做界面時，最害怕的就是隱藏的界面沒有被發現，空有完整的邏輯框架，但是用戶只按照自己的需求流程一條線往前沖，然後一頭霧水地抱怨為什麼功能這麼隱蔽。

遇到這種情況，通過界面增強指示性其實是治標不治本的，每個需求都有不同的流程，總不能等著用戶撞得頭破血流再去發現吧？倒不如一開始就開陳布公，把用戶最迫切最想看到的遞到他眼前，然後按照使用思路一層層展開，就像這幅甘特圖。但是信息要展開多少，展現次序是什麼，就要好好琢磨了。

好看未必好用，我覺得這種畫法好，誰知道用戶心中還有多少別的畫法呢？

07.參考資料整理

《如何設計成功而有價值的數據可視化？》楊進玉

《三個步驟設計高效 Dashboard》陳新濤

《交互設計：從物理邏輯到行為邏輯》辛向陽

《發現最好的你-設計中如何打造最合適的組件》騰訊CDC