前言
如何了解一款產(chǎn)品是如何發(fā)展的？
我從 19 年到 23 年一直在關注飛書，4 年的變化，看到了我們作為設計師，在一款業(yè)務不斷發(fā)展的產(chǎn)品、日益龐大的產(chǎn)品線中，它是如何進行設計的優(yōu)化。
今天我們會結(jié)合 4 年產(chǎn)品的競品截圖，通過圖片的方式來講解飛書的交互更新。
并且我也是深度使用用戶，也嘗試揣測每一個改版背后設計師有哪些思考~ 「文末給大家準備了一點小福利，所以一定要看到最后」
小 Tips：今天我們主要說的是飛書管理后臺，和飛書的客戶端無關，這里為了方便描述，就以飛書代替。
初代丨第一版是如何設計的？
我記得第一次使用飛書是我司的產(chǎn)品想要尋找新的平臺上架，那時候正是飛書剛剛面市商業(yè)化，我們老板去參加了飛書內(nèi)部的無限大會，會議回來后就準備將我們產(chǎn)品上線到飛書，從那時開始我就對它有了個基礎的了解。所以我是被迫的~
設計特點
在初代版本當中，飛書的設計其實十分有個性，因為當時很少看到如此設計的管理后臺。
- 卡片內(nèi)容區(qū)域：將飛書的內(nèi)容區(qū)域變?yōu)橐粋€圓角的卡片，這種做法即覺得很時髦（當時確實沒見過），同時又感覺很不妥，看上去品牌調(diào)性不夠嚴謹，果然后面這個方案就被優(yōu)化了。證明剛開始一個產(chǎn)品問世，也不是做得非常的完美~
- 高飽和度的配色：整體顏色還是以高飽和度為主，無論是 圖標 或者是 整體設計，顏色都用的十分靚麗，充斥著大量的 紅、橙、黃、綠、紫，這也給人一種不夠嚴謹?shù)囊曈X形象。
- 全局導航：這是一個非常新穎的交互，當我們點擊右上角的全局導航過后，會展開對應所有的導航信息，按照設計師的結(jié)構(gòu)進行安排，這樣我們就能預覽所有的導航內(nèi)容。這種做法當時覺得十分奇特，我也反復使用，但整體的使用感受不佳，因為我的導航信息所有都在左側(cè)，而我要使用全局導航反而在右側(cè)，不太符合使用習慣，后面你會發(fā)現(xiàn)這個功能也被砍掉了。
- 頁面區(qū)分：頁面的區(qū)分是整體設計非常重要的一環(huán)， 第一版本的飛書主要是通過分割線+投影來解決，你就會發(fā)現(xiàn)整體的頁面分割不夠明確，感覺像分了又沒有完全分，也就導致頁面當中很難聚焦，用戶總是在漫無目的地不停尋找。
整體感受
通過初代的設計你會發(fā)現(xiàn)，即使是飛書在第一個版本的時候做得也不算特別好，并且還會有很多優(yōu)化的空間，因此我們自己在實際的項目當中，剛開始主要還是以快速產(chǎn)出為主，不要有太多顧慮，完美主義也會有很多不完美的情況，就留在后續(xù)進行調(diào)整。
過渡丨業(yè)務發(fā)展是如何設計的
這次管理后臺的迭代我記得是在2020年前后，那時候正是疫情的高峰期，也就導致了協(xié)同辦公類的軟件迎來了發(fā)展的黃金時期。而之前設計當中的很多問題，都在這一個時候勉強解決。
設計特點
- 前后臺風格統(tǒng)一：在之前的飛書當中，你會發(fā)現(xiàn) 管理后臺與桌面端 非常割裂，感覺像是兩個產(chǎn)品。而現(xiàn)在通過統(tǒng)一的品牌色，盡可能將它們倆拉到同一起，看上去才像是一個統(tǒng)一的管理后臺。
- 布局調(diào)整：在整體的交互結(jié)構(gòu)上，做了相應的優(yōu)化。比如之前的 tabs 與 標題 在整體導航的頂部，感覺其與內(nèi)容毫無關聯(lián)，現(xiàn)在的設計將標題下放，更適合大多數(shù)產(chǎn)品的使用場景。
- 面包屑的出現(xiàn)：從截圖上我們其實能看到，這個時期的導航菜單已經(jīng)非常多了，同時層級也會特別的深，因此在設計上通過面包屑來進行優(yōu)化，先解決目前的燃眉之急，等后續(xù)產(chǎn)品業(yè)務發(fā)展成熟后再統(tǒng)一進行優(yōu)化。
整體感受
這一時期很明顯的能夠感受到飛書就是在調(diào)整過渡，一方面業(yè)務發(fā)展十分迅速，需要響應；另一方面知道設計存在問題，但是沒有太多精力，無法進行大改。這時候就會將用戶反饋的所有問題記錄下來，站在設計的角度思考方案可能就是我們應該做的。所以有的時候我們目前的方案哪怕有些瑕疵并不要緊，更重要的是如何解決這些瑕疵，匯總記錄，等待時機。（畢竟研發(fā)資源很難爭取...）
確定丨明確的設計思路
這次改動應該是在 2021 年，明確了未來設計的方向，開始進行大刀闊斧的改動。首先這一時期的飛書產(chǎn)品線急劇增加，據(jù)我了解就會有 「考勤、OKR、招聘、績效、打卡」等多個產(chǎn)品線需要獨立的管理后臺，因此需要提供一個統(tǒng)一的設計方案，來將這些產(chǎn)品線的風格統(tǒng)一。
設計特點
- 純白風格：內(nèi)容部分主要是以純白風格為主，同時 導航、功能 等輔助信息使用灰色進行呈現(xiàn)，這樣我們可以更為聚焦。對比前兩個版本發(fā)現(xiàn)確實要清晰很多。
- 降低飽和度：對比之前的設計方案，你會發(fā)現(xiàn)目前的設計整體降低了頁面的飽和度，同時也明確的品牌的主題色 藍色，其他顏色進行輔助，這樣設計上更為明確，哪些內(nèi)容為重點一目了然。其實這種風格是值得很多設計師借鑒的，因為現(xiàn)在有太多設計師產(chǎn)出的內(nèi)容過于視覺，導致和整個品牌調(diào)性不相符，就會發(fā)現(xiàn)你的設計稿其實挺好，但就是不適合我們產(chǎn)品。
- 框架設計更清晰：這時候的內(nèi)容與結(jié)構(gòu)就會更為清晰，整體的白色突出的是內(nèi)容部分，我們可以將內(nèi)容完整的凸顯出來。
整體感受
這一階段其實已經(jīng)非常完整，設計風格上沒什么可挑剔的，同時交互結(jié)構(gòu)上沒有進行大的調(diào)整，更多是將 常用/新加 的功能進行呈現(xiàn)，比如 幫助中心、配置任務 等，都是為了滿足特定的業(yè)務場景設計的。同時由于產(chǎn)品業(yè)務功能較多，你會發(fā)現(xiàn)他們提供了一個查看全部的按鈕，用于一些 低頻 隱藏功能的展示，在導航上盡可能的優(yōu)化用戶的使用體驗。
整體來說這次改版比較成功，后面也會有很多產(chǎn)品前仆后繼的采取這種風格形式，流行了一段時間。
優(yōu)化丨基于業(yè)務再優(yōu)化
就在前幾天，飛書又進行了設計調(diào)整，從這一次改版發(fā)現(xiàn) 業(yè)務層面 還是有一些問題亟待解決，產(chǎn)品導航過多需要優(yōu)化，看看飛書它的做法。
設計特點
- 導航優(yōu)化：在之前的版本當中，一級導航菜單有 20+ 個，同時還有會很多其他產(chǎn)品線的管理后臺，也就導致飛書管理后臺非常的散亂，經(jīng)常會出現(xiàn)來回不停的跳轉(zhuǎn)。
面對這種情況，之前是采取隱藏+全部導航的思路，但是現(xiàn)如今已經(jīng)不太能夠解決這樣的問題，同時飛書的很多產(chǎn)品都需要單獨獨立的配置項，因此采取頁面的拆分，將導航分為 企業(yè)管理 與 產(chǎn)品設置。企業(yè)管理為產(chǎn)品的基礎配置；產(chǎn)品設置則為對于附屬產(chǎn)品的設置配置，這樣就能讓用戶更為清晰的理解導航。
最后說說，面對導航如此之多，即使再自身的設計師來了也只能增加層級進行優(yōu)化。木有太多靈丹妙藥~
- 視覺調(diào)整：因為導航層級的增加，也就導致現(xiàn)在需要凸顯頂部導航部分，所以將之前的灰色調(diào)整為白色。但感覺目前這個方案理解的難度依然較大，在座的同學們也可以思考一下能否有其他的解決方案。
整體感受
這次飛書將多條產(chǎn)品線打通，滿足我能夠在一個管理后臺里，去配置多個產(chǎn)品的業(yè)務。其實這個問題我在之前體驗飛書招聘時就發(fā)現(xiàn)，這樣就能避免產(chǎn)品之前的割裂感，同時統(tǒng)一的交互在后續(xù)的 功能業(yè)務面市時，也能夠快速的產(chǎn)出和響應。
這次的迭代由于有動畫的效果，以及新穎的新手引導，整體還是感受還是十分不錯。你會發(fā)現(xiàn)設計是沒有一個終點，我們會根據(jù)業(yè)務的情況進行設計上的調(diào)整。而我們能做的，就是根據(jù)一次次的業(yè)務要求，去做出合適的設計。
作者：CE青年
鏈接：https://www.zcool.com.cn/article/ZMTUyMzk4MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
