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