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

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

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

關于這次的飛書管理后臺設計優(yōu)化，我會從統(tǒng)一交互結構與樣式、以產品目標/用戶目標為終點，縮短用戶使用路徑，提升效率、以及調整一些組件的位置和樣式以便被用戶更好的理解這三個角度出發(fā)，對一些頁面進行優(yōu)化分析。

一、首頁

【首頁】分為四個卡片：企業(yè)信息簡介、功能使用情況、權益數(shù)據和應用管理。

當用戶在查看權益數(shù)據卡片時，用戶的目標是希望能夠快速了解當前云文檔存儲空間、短信/電話加急和郵箱存儲空間這些數(shù)據的使用情況。

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

于是在此我優(yōu)化了云文檔存儲空間、短信/電話加急和郵箱存儲空間已用數(shù)據和總量數(shù)據的展示方式，使其更能直觀看出已使用數(shù)據/總可用數(shù)據之間的對比關系。并且調整了提示文案，希望可以更好的引導用戶去升級版本。

并且我調整了側邊導航欄和頂部導航欄的樣式，設計了全局搜索的功能，情境是當管理后臺的內容越來越多，模塊層級越來越深時，新增一個全局搜索功能可以幫助用戶更快的找到自己需要的功能，節(jié)省用戶去查找的時間。

搜索的范圍限制在當前登錄用戶權限內的功能模塊，搜索結果顯示模塊的一級分類名稱，點擊可跳轉該模塊的頁面。

二、成員與部門

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

在成員Tab中，用戶通過部門維度去管理成員信息。

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

原來這個模塊里搜索框在搜索時能夠搜索到成員，并且搜索成員的結果也是在導航模塊展示，點擊會打開一個抽屜彈窗顯示成員詳情，然后這個抽屜彈窗里又有一個查看詳情，再次點擊后才會進入成員詳情頁，就會覺得很奇怪。此處放搜索框的話應該是限制只能搜索部門。

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

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

并且表格中的操作項只有在鼠標懸浮這一行時才會出現(xiàn)，其他模塊（角色管理）中表格中的操作列則是固定顯示在最后一列，所以我對這里的表格進行了優(yōu)化，新增了操作列，并對標題添加了底色強化其標題屬性，與其他模塊中表格的標題樣式保持一致。

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

以及我將批量操作按鈕和分頁器放到表格底部懸浮展示，這樣用戶在選擇完數(shù)據后鼠標可以最短路徑地移動到批量操作按鈕上；并且在頁面位置上使得批量操作按鈕區(qū)域獨立出來，方便用戶查找。

最后我重新調整了不同狀態(tài)的顏色語義，使其在后臺所有模塊的表格中保持一致。

另外在體驗整個飛書后臺的體驗中，我遇到了一種需要在多個模塊頁面之間來回切換的情境，所以為了優(yōu)化切換模塊頁面的效率，我在頁面面包屑的右側設計了固定書簽的功能。

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

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

三、角色管理

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

當首次進入角色管理模塊時，會有解釋什么是角色，以及查看幫助中心的入口。但在選擇角色之后就消失了，用戶想要再次查看解釋就需要點擊其他模塊之后再重新進入角色管理模塊。于是我將查看幫助中心的入口放到面包屑導航的右側顯示，方便用戶查找?guī)椭?/p>

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

四、單位管理

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

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

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

五、用戶組管理

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

六、小結

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

新增的一些小功能（全局搜索、模塊書簽）也僅提供一個初步的設計思路，歡迎大家一起討論～