APP的(de)空白頁面應該如何設計

我們在APP開發中，對(duì)主界面的(de)重視程度很高(gāo)，所有的(de)項目成員(yuán)都會要求設計師優先制做(zuò)所謂的(de)「典型頁面」，常見的(de)就是産品的(de)首頁和(hé)詳情頁。而空白頁面，或者說缺省數據頁面(例如沒有任何聯系人(rén)的(de)通(tōng)訊錄和(hé)沒有任何聊天記錄的(de)微信)，通(tōng)常都是在設計過程的(de)最後階段才作考慮。有些時(shí)候，甚至會被遺忘。直到某個(gè)開發同學提出來(lái)，“這(zhè)個(gè)頁面，如果沒有數據的(de)時(shí)候，該顯示什(shén)麽鬼東西啊?”

這(zhè)樣的(de)空白頁面應該如何設計呢(ne)？下(xià)面我們聊聊這(zhè)個(gè)話(huà)題。

用(yòng)戶首次使用(yòng)你的(de)産品時(shí)會遇到空白狀态的(de)頁面，這(zhè)也(yě)是用(yòng)戶由淺入深接觸你的(de)産品的(de)必經之路。在這(zhè)個(gè)過程中，一個(gè)優秀的(de)空白頁面應該達成三個(gè)目标：教育用(yòng)戶、取悅用(yòng)戶、引導用(yòng)戶。

 

教育用(yòng)戶。

一個(gè)優秀的(de)空白頁面應該解決如下(xià)問題：

何物(wù)(What)：解釋這(zhè)個(gè)頁面在說什(shén)麽

何地(Where)：告知用(yòng)戶當前的(de)位置，以及接下(xià)來(lái)可(kě)以幹什(shén)麽

何時(shí)(When)：解釋此處空白在什(shén)麽情況下(xià)将出現有效的(de)數據

 

 

取悅你的(de)用(yòng)戶

比如一個(gè)提交記錄頁面，當它爲空時(shí)，網站的(de)拟人(rén)化(huà)形象—一個(gè)小桶子用(yòng)幽怨的(de)口氣說道，“我這(zhè)裏沒有任何提交記錄，這(zhè)讓我顯得(de)毫無用(yòng)處。我感到很難過。”(解決這(zhè)個(gè)問題)優秀的(de)第一印象不僅僅與可(kě)用(yòng)性有關，它也(yě)與産品的(de)調性有關。

問你自己這(zhè)幾個(gè)問題：

你能讓用(yòng)戶感到新鮮或者出乎意料嗎?

你能讓用(yòng)戶從心底綻開笑(xiào)容嗎?

你能讓用(yòng)戶感受到你産品的(de)優秀調性嗎?

 

引導用(yòng)戶行動

接下(xià)來(lái)就是一個(gè)引導用(yòng)戶去探索的(de)行動按鈕。在空白頁面上引導用(yòng)戶的(de)下(xià)一步行動，需要包含這(zhè)三點：

動機(Motivate)：向目标用(yòng)戶展示激勵性的(de)語言，例如：『現在就開始!』

勸說(Persuade)：利益點不僅要在落地頁上展示。當用(yòng)戶與你的(de)産品交互時(shí)，也(yě)可(kě)以反複展示利益點。

直接(Direct)：在一開始就向用(yòng)戶展示唯一且最優的(de)路徑。提供行動按鈕或者給出引導。在用(yòng)戶初次接觸 app

時(shí)并不适合讓他(tā)們做(zuò)選擇題。你應該讓初次接觸的(de)體驗盡可(kě)能的(de)簡單。假如剛開始就需要用(yòng)戶創建一些内容，你應該提供一些模闆之類的(de)東西讓用(yòng)戶可(kě)以借鑒。

 

最棒的(de)設計通(tōng)常也(yě)是最具有挑戰性的(de)——它要求在信息呈現與操作上達成精巧的(de)平衡。但是，一個(gè)空白狀态的(de)頁面就可(kě)能阻斷你的(de)用(yòng)戶進一步探索你所設計的(de)精妙界面。這(zhè)些空白頁面難道不值得(de)你投入更多(duō)的(de)時(shí)間和(hé)關注嗎?