您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

設(shè)計中空白狀態(tài)也可以發(fā)揮作用

 

空白狀態(tài)(Blank Slate),是出現(xiàn)在動態(tài)資訊頁面中,當(dāng)還沒有建立任何資料時的空白畫面,通常會顯示如「你還沒有任何照片」「你還沒有追蹤的朋友」等,但這看似是個很直覺的頁面設(shè)計,其實(shí)是個能夠與使用者對話的重要機(jī)會,也是個能夠誘導(dǎo)使用者跨出第一步,并且開始著迷于你有趣服務(wù)或程式的關(guān)鍵。

在設(shè)計中空白狀態(tài)也可以發(fā)揮作用 設(shè)計方案 設(shè)計思路 用戶體驗(yàn)設(shè)計思慮  ruanjian jiaocheng

Blank notebook

想想看通常我們都會在這個空白頁面寫什么呢?最常見的就是「目前沒有訊息」或是「目前沒有上傳的照片」等,對于使用者來說可能不致于有反感的感覺,但跨出第一步總是門檻比較高,因此很多網(wǎng)路服務(wù)或應(yīng)用程式,都會有很多使用者呈現(xiàn)幽靈狀態(tài),在申請后就再也沒消沒息,或是保持潛水只看不產(chǎn)出內(nèi)容,這當(dāng)然可以有非常多的原因,但是我們所希望的,就是竭盡所能的誘導(dǎo)他們建立內(nèi)容,因而與服務(wù)產(chǎn)生鏈結(jié)。

所以我們更不應(yīng)該錯過這個良好的機(jī)會,因?yàn)榭瞻谞顟B(tài)的頁面有可能就是你的使用者最后所看到的畫面,之后他們很有可能再也不會打開這個服務(wù)或是應(yīng)用程式。 知名設(shè)計與工程師 Nathan Barry 在 Designing Web Application 中建議了三個空白狀態(tài)需要提供給使用者的資訊:

1.告訴使用者什么資料將會出現(xiàn)在這里(What)。
2.給使用者為什么他們想要在這里建立內(nèi)容的理由(Why)。
3.要怎么建立內(nèi)容(How)。

在設(shè)計中空白狀態(tài)也可以發(fā)揮作用 設(shè)計方案 設(shè)計思路 用戶體驗(yàn)設(shè)計思慮  ruanjian jiaocheng

首先我們必須要清楚地告訴使用者,這個頁面所會出現(xiàn)的內(nèi)容資訊是什么,常常可以看到只顯示個「空白(Empty)」或是「沒有資料(No data)」這種沒有注明內(nèi)容名稱的方式,那底是沒有什么資訊?什么東西是空的呢?可能是朋友、照片、或是旅游記錄,但使用者無法馬上了解到此頁面的資訊型態(tài),我們應(yīng)該要清楚的提示內(nèi)容的型態(tài),例如 Evernote 與 Instagram App 就透過清楚的型態(tài)名稱(tags / friends)再加上圖示讓我們可以很快速的就明白我們將要建立的內(nèi)容是什么。

除了文字與圖示的解說以外,還有另外一種快速讓使用者了解資訊內(nèi)容的方式,就是讓他們直接體驗(yàn)真實(shí)的資訊內(nèi)容,或是一些范例資訊,而不需要憑空想像,例如 Evernote Food 與 Lift :

在設(shè)計中空白狀態(tài)也可以發(fā)揮作用 設(shè)計方案 設(shè)計思路 用戶體驗(yàn)設(shè)計思慮  ruanjian jiaocheng

Blank Slate

在了解資訊內(nèi)容的形態(tài)以后,最好能提供使用者一個渴望建立內(nèi)容的沖動或誘因,告訴他們使用了你的服務(wù)以后可以得到些什么?例如你因此可以認(rèn)識更多的人、建立了標(biāo)簽以后你可以更輕松的找到你要的資訊、或是你可以與客戶之間的往來更方便而節(jié)省時間與成本等,讓使用者產(chǎn)生目的性以及愿景(下圖為 FreshBooks 網(wǎng)路服務(wù))。

在設(shè)計中空白狀態(tài)也可以發(fā)揮作用 設(shè)計方案 設(shè)計思路 用戶體驗(yàn)設(shè)計思慮  ruanjian jiaocheng

Freshbooks

情緒性的言語表達(dá)或是圖示,有時候也是可以發(fā)揮作用的,例如 Vine (下圖)里面不開心的表情符號,就會讓人想趕快分享些什么東西。

在設(shè)計中空白狀態(tài)也可以發(fā)揮作用 設(shè)計方案 設(shè)計思路 用戶體驗(yàn)設(shè)計思慮  ruanjian jiaocheng

當(dāng)初 Facebook 在刪除使用者帳號的介面中,就透過了「你的朋友會想念你的」的文字加上照片,成功的攔阻了許多想要刪除 Facebook 帳號的網(wǎng)友們,我們也許可以用類似的方式如「你的朋友正在等待你分享的訊息呢!」加上朋友的圖片,來提高使用的意愿,人類的促發(fā)行為往往是察覺不到卻又有大大影響行為與結(jié)果的能力!

在設(shè)計中空白狀態(tài)也可以發(fā)揮作用 設(shè)計方案 設(shè)計思路 用戶體驗(yàn)設(shè)計思慮  ruanjian jiaocheng

在最后,我們需要提供使用者一個簡單明了的建立方式(通常就是一個明顯的建立按鈕),我們?yōu)槭裁床焕贸湓5目瞻谞顟B(tài)的頁面,讓使用者可以直接在頁面中間輕松的點(diǎn)擊建立,而只顯示個「沒有資料」的文字訊息呢?

在 SoundCloud 中橘通通的錄音按鈕,就提供了一個很好的范例。而若是你的服務(wù)會有很多復(fù)雜的操作,尤其是有創(chuàng)新的使用方式時,Nathan 也建議可以將難以記住的教學(xué)步驟拆開來,與其一開始就把使用者搞的昏頭又記不著,不如分別顯示在空白狀態(tài)的頁面中,當(dāng)你點(diǎn)擊到此頁面時,才解釋并且教你怎么使用。

在設(shè)計中空白狀態(tài)也可以發(fā)揮作用 設(shè)計方案 設(shè)計思路 用戶體驗(yàn)設(shè)計思慮  ruanjian jiaocheng

空白狀態(tài)多半是在使用者剛開始使用的時候才會被看到,這時他們?nèi)匀粚δ愕男庐a(chǎn)品保有些微的耐心,我們應(yīng)該把握住這個能與使用者對話的珍貴機(jī)會,而不要讓使用者看完這個頁面后,腦中真的仍然保持「空白」的狀態(tài)。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/di1719.html
網(wǎng)頁設(shè)計中的 serif 和 sans-serif字體區(qū)別和應(yīng)用
專題頁設(shè)計中的構(gòu)圖
圖趣網(wǎng)微信
建議反饋
×