飛書這個(gè)頁面的設(shè)計(jì),超越整個(gè)行業(yè)!

0 評論 1128 瀏覽 1 收藏 12 分鐘

空狀態(tài)頁面是設(shè)計(jì)中一個(gè)非常常見的頁面設(shè)計(jì),但不少產(chǎn)品的空狀態(tài)設(shè)計(jì)做得非常差。這篇文章,作者分享了飛書的頁面設(shè)計(jì),從設(shè)計(jì)和情感方面來說,都比其他產(chǎn)品強(qiáng)很多。

空狀態(tài)的頁面是一個(gè)非常常見的東西。在任何產(chǎn)品中,當(dāng)用戶剛開始使用時(shí)都非常有可能遇到頁面中沒有內(nèi)容、沒有數(shù)據(jù)的場景。

如果頁面顯示為一片空白的話,那用戶用戶有可能認(rèn)為是網(wǎng)絡(luò)出現(xiàn)了問題,或者是產(chǎn)品本身存在bug,就很有可能給用戶造成誤解。

所以在UI設(shè)計(jì)相對成熟之后,各個(gè)產(chǎn)品中都會對頁面的空狀態(tài)做出一些美化處理。比如像下面這樣。

這樣的頁面在視覺上更加美觀。并且也給予了對于異常狀態(tài)的處理入口。相對于一片空白的頁面,當(dāng)然是有一些優(yōu)化的。

我們似乎也習(xí)慣了這種放一個(gè)插畫和一個(gè)按鈕的空頁面形式。但是作者今天在看到飛書的設(shè)計(jì)之后,才意識到即使是一個(gè)非常簡單的靜態(tài)空頁面,也可以有更多的體驗(yàn)提升,而不僅僅局限在美觀這一方面。

首先我們來還原一下當(dāng)時(shí)的場景,今天作者在上班的時(shí)候,本來因?yàn)橐粋€(gè)設(shè)計(jì)問題討論的比較煩躁。和同事的溝通也有一些激烈。

然后再打開飛書查看消息時(shí),偶然遇到了一個(gè)這樣的空頁面,如下圖。

直接說主題:這個(gè)頁面就是作者覺得飛書的設(shè)計(jì)領(lǐng)先了全部產(chǎn)品。

我們可以想象一下。如果這個(gè)頁面按照常規(guī)做法放一個(gè)沒有新消息的插畫。那么結(jié)果就是一個(gè)中性的設(shè)計(jì)。沒有給用戶帶來新的體驗(yàn)增量。也沒有給用戶造成困擾。只是一個(gè)中性的設(shè)計(jì)。

但是如果像上圖中這樣做,就達(dá)到了讓空頁面的作用不局限在空頁面的效果。

詳細(xì)解釋一下這句話的意思:我們這些打工人在使用溝通工具時(shí),最主要的使用場景當(dāng)然是和同事進(jìn)行溝通。所以最主要的體驗(yàn)來源自然也是溝通過程中的體驗(yàn)。

那么即使在這個(gè)頁面里放一個(gè)精美度max的插畫,會對我的溝通體驗(yàn)會產(chǎn)生一丁點(diǎn)兒影響嗎?當(dāng)然不會。因?yàn)檫@是兩個(gè)完全沒有關(guān)系的事情。

那么如果像飛書這樣放一個(gè)對點(diǎn)贊的行為的引導(dǎo)呢?就有可能引導(dǎo)出一些用戶的使用習(xí)慣。

比如說在進(jìn)行飛書會議時(shí),當(dāng)我們正在發(fā)言或會議即將結(jié)束、當(dāng)我們講完了設(shè)計(jì)方案時(shí),可能會有一些同事因?yàn)檫@個(gè)點(diǎn)贊的行為引導(dǎo),就在那個(gè)場景下給我們點(diǎn)了一個(gè)贊。

這個(gè)行為才是我們在使用工作溝通產(chǎn)品的過程中能夠影響到最主要體驗(yàn)來源的行為,而這個(gè)行為是受一個(gè)空頁面的內(nèi)容的引導(dǎo)產(chǎn)生的。

所以作者上面才說這個(gè)空頁面內(nèi)容的作用,不僅僅體現(xiàn)在空頁面而是影響到了產(chǎn)品中其他場景的體驗(yàn)。

如果再進(jìn)一步分析的話,其實(shí)還可以從人類記憶的特點(diǎn)展開一下。例如現(xiàn)在某個(gè)用戶已經(jīng)使用了飛書這款產(chǎn)品一段時(shí)間。在他使用的過程中,與他協(xié)作的一些用戶偶爾會有為他點(diǎn)贊的行為,包括他自己也會給其他的用戶點(diǎn)贊。

那么在這一批用戶的體驗(yàn)感知中,會形成兩方面的感知。一方面是會對給他點(diǎn)贊的其他同事有一定好感。

另一方面是這種正面的情緒會產(chǎn)生一定的泛化遷移。當(dāng)時(shí)間略微變長之后,由于人的記憶并不會記錄所有細(xì)節(jié),而是像一個(gè)壓縮文件那樣只記憶最牢固的信息,再根據(jù)明顯信息去聯(lián)想到細(xì)節(jié)信息。

這個(gè)結(jié)果就是在用戶的潛意識中會認(rèn)為使用飛書的體驗(yàn)也是正面的。也就是說用戶會把對其他同事的好感有一部分遷移到飛書這個(gè)產(chǎn)品中。好處不言而喻。

除了上面的圖片外,還有幾張其他的也可以用同樣的思維理解一下:

作者測試了十幾次,一共遇到了這四種內(nèi)容,如果說一種內(nèi)容只是巧合的話,那么這四種情況全部都是對產(chǎn)品整體體驗(yàn)的增強(qiáng),而不僅僅局限在對空頁面狀態(tài)的處理。這也能進(jìn)一步佐證我們的分析過程。

我們再來看一些負(fù)面的案例(為了避免得罪人,就不提具體的產(chǎn)品名稱了。)

在這個(gè)空狀態(tài)的頁面中有一行文字叫做信號可能跑到外星球了。我實(shí)在是不理解,就算他跑到火星了又和用戶有什么關(guān)系??雌饋碛悬c(diǎn)幽默可愛的文案真的有意義嗎?充其量也只是一個(gè)中性的設(shè)計(jì)。

還有一些更過分的案例我們來看一下。

這張圖中是某個(gè)產(chǎn)品里六個(gè)空狀態(tài)頁面的。使用的不同插畫。如果作者不解釋每個(gè)插畫代表什么含義的話,有多少人能完全看懂?至少其中有三個(gè)作者是看不懂的。

這種設(shè)計(jì)。就是為了追求視覺上的差異性。和不同場景下的視覺區(qū)分。而影響到了更重要的易辨識的體驗(yàn)指標(biāo)??赡芤彩?。由于在某個(gè)內(nèi)卷的環(huán)境里自己為自己找了一些可做的事情。但作者只能說這種產(chǎn)品對用戶體驗(yàn)的理解還僅僅停留在很表層的階段。

在以前作者也曾經(jīng)寫過空狀態(tài)頁面的設(shè)計(jì)應(yīng)該遵循哪些原則,大致如下:

1. 傳達(dá)清晰:確保頁面上的文案簡潔明了,直接告訴用戶當(dāng)前頁面為什么是空的,比如“您還沒有添加任何收藏”或“搜索未找到結(jié)果”。文案應(yīng)具有指導(dǎo)性和友好性。

2. 行動召喚:給用戶提供一個(gè)明確的下一步操作提示,如“立即添加第一個(gè)收藏”、“嘗試其他關(guān)鍵詞搜索”或“創(chuàng)建您的第一條筆記”。這有助于用戶了解如何開始填充內(nèi)容或解決問題。

3. 情感化設(shè)計(jì):使用插圖、動畫或色彩來提升頁面的情感吸引力,使空狀態(tài)頁面看起來不那么冰冷。設(shè)計(jì)應(yīng)與品牌的整體視覺風(fēng)格保持一致,增加用戶的親切感。

4. 教育與引導(dǎo):利用空狀態(tài)頁面作為教育用戶的機(jī)會,展示產(chǎn)品功能或提供使用小貼士,幫助用戶更好地了解產(chǎn)品并鼓勵他們采取行動。

5. 反饋與錯誤處理:如果空狀態(tài)是由于錯誤或加載失敗造成的,提供具體的錯誤信息,并給予解決建議,比如檢查網(wǎng)絡(luò)連接或刷新頁面。

6. 適應(yīng)不同場景:根據(jù)不同的空狀態(tài)場景(如初次使用、內(nèi)容被清空、搜索無結(jié)果等)設(shè)計(jì)相應(yīng)的頁面,每個(gè)場景都應(yīng)有其特定的引導(dǎo)策略。

但是現(xiàn)在看來以前的這些設(shè)計(jì)原則在當(dāng)下來衡量,也僅僅是及格的做法了。

因?yàn)橛脩魧Ξa(chǎn)品的性能要求會越來越高,對于產(chǎn)品體驗(yàn)的期待也會越來越高。

在過去看起來非常好的設(shè)計(jì),當(dāng)用戶習(xí)慣了之后,會逐漸變?yōu)橐粋€(gè)比較普通的設(shè)計(jì)方案。

這種現(xiàn)象就像卡諾模型中的魅力需求會逐漸降級一樣。

簡單解釋一下:比方說十年前我們?nèi)ヒ患绎埖?,如果能提供免費(fèi)的WiFi,那用戶會覺得非常驚喜。

因?yàn)檫@種免費(fèi)WiFi服務(wù)是很少有飯店能夠提供的。能幫用戶節(jié)省很多流量的費(fèi)用。

但是如果是今天我們到一家飯店發(fā)現(xiàn)他們能提供免費(fèi)WiFi。這就變成了一個(gè)很普通的事情,很多飯店都會提供這種服務(wù),有什么好驚訝的。

有當(dāng)然好沒有也無所謂,自己每個(gè)月的套餐流量都不一定用得完。我們并不會為此感到驚喜。這就是一個(gè)魅力需求轉(zhuǎn)變?yōu)闊o差異需求的例子。

當(dāng)用戶習(xí)慣了我們曾經(jīng)做出的優(yōu)秀方案。就要求設(shè)計(jì)師們?nèi)プ龈嗟膭?chuàng)新。

只有再次將設(shè)計(jì)方案帶來的體驗(yàn)做的超出用戶的預(yù)期。才能讓用戶產(chǎn)生整個(gè)產(chǎn)品體驗(yàn)都偏正面的強(qiáng)烈感知。

飛書這個(gè)設(shè)計(jì)案例其實(shí)就是一個(gè)非常簡單的靜態(tài)頁面,但是作者想到的這些設(shè)計(jì)思路如果真的是設(shè)計(jì)者的思路,那真的很讓人佩服。

大家可以嘗試把這篇文章轉(zhuǎn)發(fā)到一些群里,看看我們能不能收到。飛書官方設(shè)計(jì)師的回應(yīng)??匆豢吹降资沁^度解讀了,還是事實(shí)如此。

專欄作家

杜昭,微信公眾號:AI與用戶體驗(yàn),人人都是產(chǎn)品經(jīng)理專欄作者,實(shí)戰(zhàn)派設(shè)計(jì)師,目前在某手機(jī)公司負(fù)責(zé)手機(jī)OS交互設(shè)計(jì),所負(fù)責(zé)產(chǎn)品覆蓋用戶數(shù)億,主要研究AI與人機(jī)交互設(shè)計(jì)的融合及人因?qū)W對用戶體驗(yàn)的影響。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!