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

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

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

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

一、首頁

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

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

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

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

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

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

二、成員與部門

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

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

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

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

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

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

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

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

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

最後我重新調整了不同狀态的顔色語義，使其在後台所有模塊的表格中保持一緻。

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

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

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

三、角色管理

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

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

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

四、單位管理

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

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

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

五、用戶組管理

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

六、小結

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

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

本文由 @默月 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

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

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

,

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

查看全部