藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：莫貝網(wǎng)

移動(dòng)應(yīng)用最易被忽略的設(shè)計(jì)細(xì)節(jié)就是空白情況（Empty State）的設(shè)計(jì)，在電商產(chǎn)品和社交產(chǎn)品里，空白頁(yè)的設(shè)計(jì)往往可以畫龍點(diǎn)睛地提升轉(zhuǎn)化率，購(gòu)買率及用戶活躍度。

移動(dòng)應(yīng)用的設(shè)計(jì)中，最容易被忽視的地方就是空白或者異常情況的設(shè)計(jì)。從傳統(tǒng)PC時(shí)代web的異常頁(yè)面如404，502等頁(yè)面的設(shè)計(jì)體驗(yàn)遷移過(guò)來(lái)，移動(dòng)應(yīng)用的空頁(yè)面，網(wǎng)絡(luò)故障頁(yè)面等展示也有相似的設(shè)計(jì)模式。從以前的純文本的排版設(shè)計(jì)，到后來(lái)404成為設(shè)計(jì)師們 展示圖形創(chuàng)意的舞臺(tái)，移動(dòng)應(yīng)用的空白情況頁(yè)面的設(shè)計(jì)也從純文本提示到后來(lái)精彩紛呈。然而在移動(dòng)應(yīng)用的設(shè)計(jì)中，空白頁(yè)面的的作用不僅僅在于給用戶以溫柔或者 精彩的提醒，安撫用戶焦急或是疑惑的情緒，更重要的是，空白情況頁(yè)面可以引導(dǎo)用戶去填補(bǔ)“空白”。人都是害怕空虛寂寞冷的，當(dāng)你面對(duì)一個(gè)空虛寂寞冷的頁(yè)面 的時(shí)候，善意的指點(diǎn)迷津的一些語(yǔ)言和畫面告訴你咱們還是可以有方法來(lái)填補(bǔ)你的寂寞空虛冷，這時(shí)候，用戶的操作行為就會(huì)被觸發(fā)，潛移默化中指引用戶完成填補(bǔ) 空白的工作，那么，無(wú)論從用戶個(gè)體的活躍度上還是整體的留存率，活躍度上，你設(shè)計(jì)的空白頁(yè)面做到了拉升的作用，對(duì)電商產(chǎn)品和社交產(chǎn)品等來(lái)說(shuō)，這些頁(yè)面可謂 是自己展示產(chǎn)品調(diào)性，曝光功能，加深引導(dǎo)的黃金地段。

那么言規(guī)正傳，空白頁(yè)面到底該怎么設(shè)計(jì)呢？先讓我們看看別人家的應(yīng)用都是怎么設(shè)計(jì)的，按照設(shè)計(jì)模式的不同，我們可以把空白情況頁(yè)面的設(shè)計(jì)紛呈以下三類：

1.GW模式。（G=graphic,W=words）即為圖案＋文字模式。圖案經(jīng)常為一些可以表示“空白”隱 喻的圖案或者是自家應(yīng)用的吉祥物相關(guān)的圖案，抑或是可以為跟頁(yè)面引導(dǎo)相關(guān)的圖案。文字一般包含：標(biāo)題，說(shuō)明。標(biāo)題通常是解釋此處空白的原因，如 “Oops,地理定位被關(guān)閉啦，無(wú)法使用該功能哦”，“網(wǎng)絡(luò)出問(wèn)題啦”等，說(shuō)明則解釋出現(xiàn)此狀況的原因和解決辦法等。文案的風(fēng)格經(jīng)常根據(jù)產(chǎn)品的調(diào)性去設(shè) 計(jì)，有些走賣萌路線，有些走高冷路線，有些甚至走狂暴路線等等。鑒于此類型是一種最常見的類型，單純的包涵文字或單純包涵圖案的設(shè)計(jì)手法也歸納到GW模式 中。如下圖：

2.GWI模式。（G=graphic,W=words，I=instruction）即為圖案＋文字+指引線 索模式。前兩者同GW模式，現(xiàn)在來(lái)看看指引線索。指引線索理論上應(yīng)該作為新手指引的設(shè)計(jì)范疇，但是結(jié)合空白頁(yè)面，加入指引，引導(dǎo)用戶進(jìn)行某項(xiàng)行為或者感知 某些信息，對(duì)于功能的教學(xué)和使用頻率的提升有著重要作用，同時(shí)引導(dǎo)又肩負(fù)傳達(dá)品牌形象，產(chǎn)品調(diào)性，產(chǎn)品核心價(jià)值等使命。 指引線索經(jīng)常分為：1.指示性圖案，如箭頭，畫圈圖案等；2.指引性文字說(shuō)明。 如下圖：

3.GWF模式。（G=graphic,W=words，F(xiàn)=function port）即為圖案＋文字+功能入口模式。同理，GW同之前，功能入口則是一種新的設(shè)計(jì)方式，相比較指引線索，功能入口更加簡(jiǎn)單粗暴，直接將所要指引的功 能放一個(gè)快捷入口出來(lái)，擺在空白頁(yè)面上，讓用戶輕松地完成目標(biāo)。這種方式的雙刃劍特性非常明顯：說(shuō)優(yōu)點(diǎn)，簡(jiǎn)單明了，快速方便，告訴用戶這個(gè)頁(yè)面是空白的， 那么如何解決，給你一個(gè)按鈕或者鏈接，直接就可以解決問(wèn)題，bingo!在社交或者電商產(chǎn)品中可以快速誘導(dǎo)用戶觸發(fā)貢獻(xiàn)內(nèi)容或者購(gòu)買行為等;說(shuō)缺點(diǎn)，這無(wú) 異是對(duì)產(chǎn)品結(jié)構(gòu)的一種挑釁和破壞，相當(dāng)于給一個(gè)設(shè)計(jì)嚴(yán)正精美的城墻里挖了個(gè)地道，而且大多數(shù)應(yīng)用的做法是只會(huì)讓這個(gè)地道出現(xiàn)一次，painful。但是總 體上來(lái)說(shuō)，還是利大于弊的，為了數(shù)據(jù)，為了用戶的新手引導(dǎo)，有些時(shí)候不得不這么做。如下圖：

所以，總結(jié)了別人家的設(shè)計(jì)模式之后，我們可以來(lái)看看如何去設(shè)計(jì)自己家的空白頁(yè)面。這里我們以最牛逼的圖像社交產(chǎn)品instagram的DIRECT功能的空白頁(yè)為例，來(lái)解析下設(shè)計(jì)流程：

1. 明確目標(biāo)。 這是最重要的一步，你要弄清楚（請(qǐng)和老板，客戶，產(chǎn)品經(jīng)理等溝通清楚）這個(gè)頁(yè)面合適出現(xiàn)，在 哪里，給誰(shuí)看，想讓他們做什么。想清楚這之后，牢記在腦海里，因?yàn)橐粋€(gè)產(chǎn)品會(huì)有眾多空白頁(yè)面，每個(gè)頁(yè)面可能都不是通用設(shè)計(jì)能解決的，針對(duì)具體問(wèn)題，要去弄 明白具體的設(shè)計(jì)目標(biāo)。如DIRECT是insta中一個(gè)用于用戶可以直接發(fā)送照片和視頻給自己好友的功能，該頁(yè)面會(huì)收納你的所有發(fā)送歷史。那么問(wèn)題來(lái)了， 如果你一條都沒有發(fā)，或者第一次使用這個(gè)功能，你該怎么做？這個(gè)就是設(shè)計(jì)目標(biāo)，

1.我要讓用戶明白這個(gè)功能到底是做什么的，明確用戶目標(biāo)；

2.我要讓用戶明白，這個(gè)功能在哪；

3.我要讓用戶明白這個(gè)功能怎么使用。

2.選擇設(shè)計(jì)模式。根據(jù)我們的設(shè)計(jì)目標(biāo)，我們會(huì)發(fā)現(xiàn)這里并沒有要表達(dá)品牌形象或者產(chǎn)品調(diào)性方面的要求，目標(biāo)都是圍繞著功能的指引和說(shuō)明，而且該頁(yè)面中已經(jīng)包涵了功能的使用入口，因此考慮選擇GWI模式，即做好圖形和功能說(shuō)明之后，加入引導(dǎo)線索。

3.設(shè)計(jì)文案。文案先行還是圖形先行是一個(gè)永恒的問(wèn)題，這個(gè)不同設(shè)計(jì)師可能處理問(wèn)題的方式不同，從圖產(chǎn)生文和從 文去配圖都沒有錯(cuò)，但是從工作效率來(lái)說(shuō)，先通過(guò)產(chǎn)品經(jīng)理或者設(shè)計(jì)師等相關(guān)干系人給出的頁(yè)面文案后，我們的設(shè)計(jì)工作會(huì)更加得心應(yīng)手，將文字轉(zhuǎn)義成圖案。這里 我們看Direct的文案設(shè)計(jì)，分為標(biāo)題＋說(shuō)明。標(biāo)題給出該功能的名稱“Instagram Direct”,說(shuō)明里用了兩句，一句是解釋該功能解決什么問(wèn)題，第二句的補(bǔ)充則說(shuō)明了該功能的一些補(bǔ)充屬性，比如這里解釋了該功能的私密屬性，只有你發(fā) 送給的朋友才能看到這些內(nèi)容。

4.設(shè)計(jì)圖案。根據(jù)文案的含義和設(shè)計(jì)目標(biāo)，用圖案來(lái)敘事。有些需要表達(dá)產(chǎn)品品牌內(nèi)涵或者品牌形象，產(chǎn)品調(diào)性的目標(biāo)會(huì)引導(dǎo)我們?nèi)ピO(shè)計(jì)一些可愛的吉祥物形象等來(lái)對(duì)產(chǎn)品進(jìn)行擬人擬物化表達(dá)，讓產(chǎn)品富有靈魂和生命，而非冰冷的代碼堆砌物。有些功能性的表達(dá)則需要我們傳達(dá)功能本身的含義，所以經(jīng)常有設(shè)計(jì)師喜歡將功能的表達(dá)Icon化，一些簡(jiǎn)單線框或者填充化Icon便可以表達(dá)功能。如Direct的設(shè)計(jì)中，就是采用了Direct的功能Icon去表達(dá)功能說(shuō)明，傳達(dá)功能的形象，如：

5.設(shè)計(jì)引導(dǎo)線索。前面四步解決目標(biāo)1和3，而這一步解決目標(biāo)2，告訴用戶該功能在哪里，也包涵了該功能該如何使用，比如點(diǎn)擊某個(gè)按鈕，向右滑動(dòng)等等。有些可以采用箭頭的引導(dǎo)，有些可以采用懸浮氣泡，有些可以采用放大鏡等隱喻來(lái)設(shè)計(jì)。這里采用了比較常用的懸浮氣泡的設(shè)計(jì)模式。如圖：

這樣，我們就完成了一個(gè)空白頁(yè)面的設(shè)計(jì)?？偨Y(jié)起來(lái)，對(duì)于空白頁(yè)面的設(shè)計(jì)就是一句話： 明確目標(biāo)，選取模式，逐個(gè)擊破。

相信通過(guò)不斷地揣摩他人的設(shè)計(jì)意圖和模式，總結(jié)自身的工作結(jié)果，思考產(chǎn)品目標(biāo)，我們一定可以設(shè)計(jì)出最牛逼的空白頁(yè)面。對(duì)于其他頁(yè)面的設(shè)計(jì)，方法也大抵如此。