很多企業(yè)辦公都會(huì)選擇飛書，這離不開它優(yōu)秀的產(chǎn)品功能和設(shè)計(jì)。本文作者對(duì)飛書的管理后臺(tái)設(shè)計(jì)提出了一些優(yōu)化建議，一起來看看吧。
距離上一次發(fā)內(nèi)容好像已經(jīng)一年多了，主要還是平時(shí)不怎么寫字。
這一年來我自己一直在走的是 b 端產(chǎn)品的交互設(shè)計(jì)方向，最近與組內(nèi)的小伙伴一起在學(xué)習(xí)飛書管理后臺(tái)的一些設(shè)計(jì)點(diǎn)，于是就想著趁這個(gè)機(jī)會(huì)，對(duì)飛書管理后臺(tái)中的一些頁面做一些簡(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ì)一些頁面進(jìn)行優(yōu)化分析。
一、首頁
【首頁】分為四個(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)容越來越多，模塊層級(jí)越來越深時(shí)，新增一個(gè)全局搜索功能可以幫助用戶更快的找到自己需要的功能，節(jié)省用戶去查找的時(shí)間。
搜索的范圍限制在當(dāng)前登錄用戶權(quán)限內(nèi)的功能模塊，搜索結(jié)果顯示模塊的一級(jí)分類名稱，點(diǎn)擊可跳轉(zhuǎn)該模塊的頁面。
二、成員與部門
【組織架構(gòu)-成員與部門】分為成員與部門兩個(gè)Tab。
在成員Tab中，用戶通過部門維度去管理成員信息。
在左側(cè)的部門導(dǎo)航模塊，我調(diào)整了展開/收起按鈕的位置，使其看上去不會(huì)顯得很擁擠；然后針對(duì)拖動(dòng)可以調(diào)整部門順序的交互添加了提示說明，讓用戶可以更好地理解操作方法。
原來這個(gè)模塊里搜索框在搜索時(shí)能夠搜索到成員，并且搜索成員的結(jié)果也是在導(dǎo)航模塊展示，點(diǎn)擊會(huì)打開一個(gè)抽屜彈窗顯示成員詳情，然后這個(gè)抽屜彈窗里又有一個(gè)查看詳情，再次點(diǎn)擊后才會(huì)進(jìn)入成員詳情頁，就會(huì)覺得很奇怪。此處放搜索框的話應(yīng)該是限制只能搜索部門。
而在右側(cè)表格內(nèi)容模塊，因?yàn)槭浅蓡T完整內(nèi)容的展示，所以加入搜索框的話搜索成員，搜索結(jié)果在下方表格中顯示就很符合頁面模塊的劃分，點(diǎn)擊可以直接進(jìn)入完整的成員詳情頁。
所以在右側(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)用戶在打開這個(gè)頁面之前就想去變更一個(gè)人的部門時(shí)，編輯按鈕放在相關(guān)的部門與職務(wù)列也能更好的幫助用戶快速找到此按鈕。
以及我將批量操作按鈕和分頁器放到表格底部懸浮展示，這樣用戶在選擇完數(shù)據(jù)后鼠標(biāo)可以最短路徑地移動(dòng)到批量操作按鈕上；并且在頁面位置上使得批量操作按鈕區(qū)域獨(dú)立出來，方便用戶查找。
最后我重新調(diào)整了不同狀態(tài)的顏色語義，使其在后臺(tái)所有模塊的表格中保持一致。
另外在體驗(yàn)整個(gè)飛書后臺(tái)的體驗(yàn)中，我遇到了一種需要在多個(gè)模塊頁面之間來回切換的情境，所以為了優(yōu)化切換模塊頁面的效率，我在頁面面包屑的右側(cè)設(shè)計(jì)了固定書簽的功能。
用戶可以將當(dāng)前模塊的頁面作為書簽固定在頁面面包屑右側(cè)，然后點(diǎn)擊書簽即可在多個(gè)模塊頁面中快速跳轉(zhuǎn)。這樣用戶就可以根據(jù)自己的日常使用需要來固定自己常用的幾個(gè)模塊頁面，提高工作效率。
最多只會(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)航欄中角色過多時(shí)，新增角色的按鈕固定在頁面底部顯示，這樣可以使鼠標(biāo)移動(dòng)最短路徑到按鈕上。
四、單位管理
這個(gè)頁面一開始進(jìn)入的是導(dǎo)航頁，會(huì)為用戶介紹單位是什么，單位能做什么，以及引導(dǎo)用戶去付費(fèi)升級(jí)版本。
在這里我將新建單位換成了聯(lián)系客服升級(jí)套餐的按鈕，因?yàn)槲矣X得與其讓未升級(jí)用戶在新建單位的流程中被打斷，不如直接告訴他只有升級(jí)才可以使用。
同時(shí)因?yàn)檫@個(gè)模塊是付費(fèi)使用，所以也需要打上增值版本的標(biāo)簽。
五、用戶組管理
這個(gè)頁面的結(jié)構(gòu)依然是左側(cè)導(dǎo)航 右側(cè)表格管理，與之前模塊的樣式保持一致就好。
六、小結(jié)
這次分析飛書管理后臺(tái)的內(nèi)容比較簡(jiǎn)單，在前期確定好頁面結(jié)構(gòu)和設(shè)計(jì)策略后，之后的很多頁面都可以復(fù)用結(jié)構(gòu)，剩下的就是保持一些細(xì)節(jié)的統(tǒng)一。
新增的一些小功能（全局搜索、模塊書簽）也僅提供一個(gè)初步的設(shè)計(jì)思路，歡迎大家一起討論～
本文由 @默月 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
