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

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

這一年來(lái)我自己一直在走的是 b 端產(chǎn)品的交互設(shè)計(jì)方向，最近與組內(nèi)的小伙伴一起在學(xué)習(xí)飛書管理后臺(tái)的一些設(shè)計(jì)點(diǎn)，于是就想著趁這個(gè)機(jī)會(huì)，對(duì)飛書管理后臺(tái)中的一些頁(yè)面做一些簡(jiǎn)單的設(shè)計(jì)分析，以及加入自己的一些新想法進(jìn)行設(shè)計(jì)優(yōu)化，會(huì)有一些不太成熟的地方，還是請(qǐng)大家多多指教～

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

一、首頁(yè)

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

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

而我們的產(chǎn)品目標(biāo)是如何引導(dǎo)用戶產(chǎn)生升級(jí)版本的意愿，以及當(dāng)用戶有升級(jí)版本的意愿時(shí)能夠快速幫助用戶解答疑惑（怎么升級(jí)？升級(jí)之后會(huì)怎么樣？在哪里可以獲得幫助？（最好是人工幫助））

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

并且我調(diào)整了側(cè)邊導(dǎo)航欄和頂部導(dǎo)航欄的樣式，設(shè)計(jì)了全局搜索的功能，情境是當(dāng)管理后臺(tái)的內(nèi)容越來(lái)越多，模塊層級(jí)越來(lái)越深時(shí)，新增一個(gè)全局搜索功能可以幫助用戶更快的找到自己需要的功能，節(jié)省用戶去查找的時(shí)間。

搜索的范圍限制在當(dāng)前登錄用戶權(quán)限內(nèi)的功能模塊，搜索結(jié)果顯示模塊的一級(jí)分類名稱，點(diǎn)擊可跳轉(zhuǎn)該模塊的頁(yè)面。

二、成員與部門

【組織架構(gòu)-成員與部門】分為成員與部門兩個(gè)Tab。

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

在左側(cè)的部門導(dǎo)航模塊，我調(diào)整了展開(kāi)/收起按鈕的位置，使其看上去不會(huì)顯得很擁擠；然后針對(duì)拖動(dòng)可以調(diào)整部門順序的交互添加了提示說(shuō)明，讓用戶可以更好地理解操作方法。

原來(lái)這個(gè)模塊里搜索框在搜索時(shí)能夠搜索到成員，并且搜索成員的結(jié)果也是在導(dǎo)航模塊展示，點(diǎn)擊會(huì)打開(kāi)一個(gè)抽屜彈窗顯示成員詳情，然后這個(gè)抽屜彈窗里又有一個(gè)查看詳情，再次點(diǎn)擊后才會(huì)進(jìn)入成員詳情頁(yè)，就會(huì)覺(jué)得很奇怪。此處放搜索框的話應(yīng)該是限制只能搜索部門。

而在右側(cè)表格內(nèi)容模塊，因?yàn)槭浅蓡T完整內(nèi)容的展示，所以加入搜索框的話搜索成員，搜索結(jié)果在下方表格中顯示就很符合頁(yè)面模塊的劃分，點(diǎn)擊可以直接進(jìn)入完整的成員詳情頁(yè)。

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

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

我還嘗試將表格中變更部門的操作按鈕放到部門與職務(wù)列中去顯示，邏輯是當(dāng)用戶在表格中看到一個(gè)人的部門與職務(wù)時(shí)，下一步操作就可能是去變更部門?；蛘弋?dāng)用戶在打開(kāi)這個(gè)頁(yè)面之前就想去變更一個(gè)人的部門時(shí)，編輯按鈕放在相關(guān)的部門與職務(wù)列也能更好的幫助用戶快速找到此按鈕。

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

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

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

用戶可以將當(dāng)前模塊的頁(yè)面作為書簽固定在頁(yè)面面包屑右側(cè)，然后點(diǎn)擊書簽即可在多個(gè)模塊頁(yè)面中快速跳轉(zhuǎn)。這樣用戶就可以根據(jù)自己的日常使用需要來(lái)固定自己常用的幾個(gè)模塊頁(yè)面，提高工作效率。

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

三、角色管理

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

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

新增角色的按鈕始終顯示在最后一個(gè)角色下面；當(dāng)左側(cè)角色導(dǎo)航欄中角色過(guò)多時(shí)，新增角色的按鈕固定在頁(yè)面底部顯示，這樣可以使鼠標(biāo)移動(dòng)最短路徑到按鈕上。

四、單位管理

這個(gè)頁(yè)面一開(kāi)始進(jìn)入的是導(dǎo)航頁(yè)，會(huì)為用戶介紹單位是什么，單位能做什么，以及引導(dǎo)用戶去付費(fèi)升級(jí)版本。

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

同時(shí)因?yàn)檫@個(gè)模塊是付費(fèi)使用，所以也需要打上增值版本的標(biāo)簽。

五、用戶組管理

這個(gè)頁(yè)面的結(jié)構(gòu)依然是左側(cè)導(dǎo)航 + 右側(cè)表格管理，與之前模塊的樣式保持一致就好。

六、小結(jié)

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

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