很多企業辦公都會選擇飛書，這離不開它優秀的產品功能和設計。本文作者對飛書的管理後臺設計提出了一些最佳化建議，一起來看看吧。

距離上一次發內容好像已經一年多了，主要還是平時不怎麼寫字。

這一年來我自己一直在走的是 b 端產品的互動設計方向，最近與組內的小夥伴一起在學習飛書管理後臺的一些設計點，於是就想著趁這個機會，對飛書管理後臺中的一些頁面做一些簡單的設計分析，以及加入自己的一些新想法進行設計最佳化，會有一些不太成熟的地方，還是請大家多多指教～

關於這次的飛書管理後臺設計最佳化，我會從統一互動結構與樣式、以產品目標/使用者目標為終點，縮短使用者使用路徑，提升效率、以及調整一些元件的位置和樣式以便被使用者更好的理解這三個角度出發，對一些頁面進行最佳化分析。

一、首頁

【首頁】分為四個卡片：企業資訊簡介、功能使用情況、權益資料和應用管理。

當用戶在檢視權益資料卡片時，使用者的目標是希望能夠快速瞭解當前雲文件儲存空間、簡訊/電話加急和郵箱儲存空間這些資料的使用情況。

而我們的產品目標是如何引導使用者產生升級版本的意願，以及當用戶有升級版本的意願時能夠快速幫助使用者解答疑惑（怎麼升級？升級之後會怎麼樣？在哪裡可以獲得幫助？（最好是人工幫助））

於是在此我優化了雲文件儲存空間、簡訊/電話加急和郵箱儲存空間已用資料和總量資料的展示方式，使其更能直觀看出已使用資料/總可用資料之間的對比關係。並且調整了提示文案，希望可以更好的引導使用者去升級版本。

並且我調整了側邊導航欄和頂部導航欄的樣式，設計了全域性搜尋的功能，情境是當管理後臺的內容越來越多，模組層級越來越深時，新增一個全域性搜尋功能可以幫助使用者更快的找到自己需要的功能，節省使用者去查詢的時間。

搜尋的範圍限制在當前登入使用者許可權內的功能模組，搜尋結果顯示模組的一級分類名稱，點選可跳轉該模組的頁面。

二、成員與部門

【組織架構-成員與部門】分為成員與部門兩個Tab。

在成員Tab中，使用者透過部門維度去管理成員資訊。

在左側的部門導航模組，我調整了展開/收起按鈕的位置，使其看上去不會顯得很擁擠；然後針對拖動可以調整部門順序的互動添加了提示說明，讓使用者可以更好地理解操作方法。

原來這個模組裡搜尋框在搜尋時能夠搜尋到成員，並且搜尋成員的結果也是在導航模組展示，點選會開啟一個抽屜彈窗顯示成員詳情，然後這個抽屜彈窗裡又有一個檢視詳情，再次點選後才會進入成員詳情頁，就會覺得很奇怪。此處放搜尋框的話應該是限制只能搜尋部門。

而在右側表格內容模組，因為是成員完整內容的展示，所以加入搜尋框的話搜尋成員，搜尋結果在下方表格中顯示就很符合頁面模組的劃分，點選可以直接進入完整的成員詳情頁。

所以在右側的表格內容模組我也放了一個搜尋框， 搜尋條件是姓名、郵箱、手機號、使用者ID，搜尋範圍是所有部門（包含子部門）的成員。

並且表格中的操作項只有在滑鼠懸浮這一行時才會出現，其他模組（角色管理）中表格中的操作列則是固定顯示在最後一列，所以我對這裡的表格進行了最佳化，新增了操作列，並對標題添加了底色強化其標題屬性，與其他模組中表格的標題樣式保持一致。

我還嘗試將表格中變更部門的操作按鈕放到部門與職務列中去顯示，邏輯是當用戶在表格中看到一個人的部門與職務時，下一步操作就可能是去變更部門。或者當用戶在開啟這個頁面之前就想去變更一個人的部門時，編輯按鈕放在相關的部門與職務列也能更好的幫助使用者快速找到此按鈕。

以及我將批次操作按鈕和分頁器放到表格底部懸浮展示，這樣使用者在選擇完資料後滑鼠可以最短路徑地移動到批次操作按鈕上；並且在頁面位置上使得批次操作按鈕區域獨立出來，方便使用者查詢。

最後我重新調整了不同狀態的顏色語義，使其在後臺所有模組的表格中保持一致。

另外在體驗整個飛書後臺的體驗中，我遇到了一種需要在多個模組頁面之間來回切換的情境，所以為了最佳化切換模組頁面的效率，我在頁面麵包屑的右側設計了固定書籤的功能。

使用者可以將當前模組的頁面作為書籤固定在頁面麵包屑右側，然後點選書籤即可在多個模組頁面中快速跳轉。這樣使用者就可以根據自己的日常使用需要來固定自己常用的幾個模組頁面，提高工作效率。

最多隻會顯示最新固定的 6 個模組書籤，第 7 個模組書籤將會覆蓋第 1 個，以此類推。目的是為了防止使用者固定太多書籤導致這個功能變得臃腫。

三、角色管理

【組織架構-角色管理】使用的是同樣的左側導航+右側表格管理的結構，所以最佳化思路與【成員與部門】中保持一致。

當首次進入角色管理模組時，會有解釋什麼是角色，以及檢視幫助中心的入口。但在選擇角色之後就消失了，使用者想要再次檢視解釋就需要點選其他模組之後再重新進入角色管理模組。於是我將檢視幫助中心的入口放到麵包屑導航的右側顯示，方便使用者查詢幫助。

新增角色的按鈕始終顯示在最後一個角色下面；當左側角色導航欄中角色過多時，新增角色的按鈕固定在頁面底部顯示，這樣可以使滑鼠移動最短路徑到按鈕上。

四、單位管理

這個頁面一開始進入的是導航頁，會為使用者介紹單位是什麼，單位能做什麼，以及引導使用者去付費升級版本。

在這裡我將新建單位換成了聯絡客服升級套餐的按鈕，因為我覺得與其讓未升級使用者在新建單位的流程中被打斷，不如直接告訴他只有升級才可以使用。

同時因為這個模組是付費使用，所以也需要打上增值版本的標籤。

五、使用者組管理

這個頁面的結構依然是左側導航 + 右側表格管理，與之前模組的樣式保持一致就好。

六、小結

這次分析飛書管理後臺的內容比較簡單，在前期確定好頁面結構和設計策略後，之後的很多頁面都可以複用結構，剩下的就是保持一些細節的統一。

新增的一些小功能（全域性搜尋、模組書籤）也僅提供一個初步的設計思路，歡迎大家一起討論～

本文由 @默月 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。

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

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。