在本文的開頭，一如既往的舉幾個(gè)例子，不過(guò)這次是反例，第一個(gè)例子是國(guó)內(nèi)某個(gè)網(wǎng)絡(luò)監(jiān)控軟件的儀表盤界面設(shè)計(jì)：

再來(lái)一個(gè)該產(chǎn)品詳細(xì)數(shù)據(jù)的展示界面：

接下來(lái)看另外一個(gè)OA系統(tǒng)的產(chǎn)品類別頁(yè)面：

?

以上的反例已經(jīng)足夠說(shuō)明一個(gè)問(wèn)題——初始狀態(tài)頁(yè)面需要設(shè)計(jì)。

實(shí)際上本文的編寫有個(gè)來(lái)源，前些日子在“產(chǎn)品經(jīng)理實(shí)戰(zhàn)訓(xùn)練營(yíng)”的一個(gè)微信分享里有篇文章叫《用戶界面設(shè)計(jì)原則》（原文作者不詳，應(yīng)該是一篇翻譯的文章），其中第16條原則提到關(guān)于初始狀態(tài)頁(yè)面的設(shè)計(jì)問(wèn)題，以下是原文描述：“?第一次使用界面的體驗(yàn)是非常重要的，而這卻常常被設(shè)計(jì)師忽略。為了讓用戶更快的上手，最好在設(shè)計(jì)的時(shí)候保持初始狀態(tài)，也就是還沒開始使用過(guò)的狀態(tài)。這個(gè)狀態(tài)不是一張空白的畫布……它應(yīng)該要提供一個(gè)方向和指引，令用戶迅速進(jìn)入狀況。在初始狀態(tài)下的互動(dòng)過(guò)程中可能會(huì)存在一些摩擦，一旦用戶了解了規(guī)則，那將會(huì)有很高的機(jī)會(huì)獲得成功?！?/p>

個(gè)人認(rèn)為，所謂初始狀態(tài)頁(yè)，實(shí)際上是極限狀態(tài)頁(yè)面設(shè)計(jì)中的一種，極限狀態(tài)頁(yè)面包括了初始頁(yè)面與極多狀態(tài)頁(yè)面，如下圖所示：

初始狀態(tài)就是剛剛開始使用的界面，極多頁(yè)面我們可以理解為當(dāng)數(shù)據(jù)量非常大的時(shí)候，整個(gè)界面的效果，兩者都非常重要。

不禁想到一個(gè)不太禮貌的故事，我們小時(shí)候?qū)W習(xí)《半夜雞叫》中的周扒皮鉆進(jìn)了雞窩顧頭不顧DING……，有那么大致相同的意思。在大部分的情況下，產(chǎn)品經(jīng)理和交互設(shè)計(jì)師都關(guān)心理想狀態(tài)設(shè)計(jì)，即正常情況下產(chǎn)品界面是什么樣子，所以在設(shè)計(jì)軟件的交互原型時(shí)，我們喜歡用比較合理的數(shù)據(jù)條數(shù)把界面設(shè)計(jì)的精美與看似可用，但是往往會(huì)忽略沒有數(shù)據(jù)或者數(shù)據(jù)非常多的情況，界面是否能夠承載原有的設(shè)計(jì)方式，而恰恰實(shí)際的軟件必須要考慮這些狀態(tài)。今天主要討論初始狀態(tài)頁(yè)面的設(shè)計(jì)，極多狀態(tài)會(huì)在后面的文章中單獨(dú)說(shuō)明。

回到問(wèn)題的出發(fā)點(diǎn)，初始狀態(tài)頁(yè)面要解決什么問(wèn)題？個(gè)人列出了幾點(diǎn)：

1、告知：告訴用戶這個(gè)頁(yè)面還沒有數(shù)據(jù)，需要用戶來(lái)創(chuàng)建或者添加；

2、引導(dǎo)：通過(guò)明確的步驟性的操作引導(dǎo)用戶如何應(yīng)用系統(tǒng)；

3、模板：默認(rèn)給出數(shù)據(jù)模板，讓用戶理解已有情況，基于此快速入門；

優(yōu)雅的初始狀態(tài)頁(yè)面設(shè)計(jì)應(yīng)該能涵蓋這三個(gè)點(diǎn)中的兩個(gè)以上（不好的設(shè)計(jì)只做到了告知甚至沒有），下面我們一起來(lái)看看比較優(yōu)秀的界面設(shè)計(jì)：

如下是國(guó)內(nèi)有名的企業(yè)級(jí)在線協(xié)同工作軟件tita的“計(jì)劃”初始頁(yè)面，如果傳統(tǒng)的設(shè)計(jì)，可能只會(huì)給出一個(gè)提示叫“當(dāng)前沒有計(jì)劃，請(qǐng)創(chuàng)建”。而tita的設(shè)計(jì)師比較巧妙的進(jìn)行了告知與引導(dǎo)——把相關(guān)的功能用類似講故事的方式進(jìn)行了說(shuō)明，讓剛剛進(jìn)來(lái)的用戶能對(duì)“如何做計(jì)劃”有個(gè)大致的理解，另外設(shè)計(jì)師講故事的方式也比較活潑，讓人能夠很好的入門。

項(xiàng)目的頁(yè)面設(shè)計(jì)也是如此，如下界面中給用戶解釋了什么是項(xiàng)目、項(xiàng)目能幫助用戶做什么進(jìn)而引導(dǎo)用戶新建一個(gè)項(xiàng)目。

126郵箱的待辦郵件界面，在沒有設(shè)置待辦郵件時(shí)，給用戶提示以及相關(guān)的幫助引導(dǎo)，如下界面設(shè)計(jì)。

國(guó)內(nèi)發(fā)展勢(shì)頭非常迅猛的另一個(gè)新生代企業(yè)級(jí)協(xié)同服務(wù)teambition，它的項(xiàng)目初始狀態(tài)頁(yè)非常有趣，可謂是另辟路徑。我們注意下圖中有浮動(dòng)層的設(shè)計(jì)，比如“今日動(dòng)態(tài)”這里，浮動(dòng)層上用圖標(biāo)和文字提示項(xiàng)目動(dòng)態(tài)的幫助及使用引導(dǎo)，而半透明的浮動(dòng)層下顯示了如果已經(jīng)添加了任務(wù)的效果，預(yù)先給用戶可期待結(jié)果。

以上是個(gè)人發(fā)現(xiàn)的比較好的一些初始狀態(tài)頁(yè)面設(shè)計(jì)的例子，不管如何設(shè)計(jì)，問(wèn)題的本源是要考慮用戶最開始的學(xué)習(xí)成本如何降低，只有讓用戶快速接受，產(chǎn)品才不會(huì)被容易拋棄——變得更有價(jià)值。

最后強(qiáng)調(diào)一個(gè)概念，初始狀態(tài)頁(yè)絕不等于空白頁(yè)面，相信看了這篇文章，這點(diǎn)大家在后面的設(shè)計(jì)中能有所體會(huì)。

本文為作者朝陽(yáng)陸（微信：yak1982）獨(dú)家投稿發(fā)布，轉(zhuǎn)載請(qǐng)注明來(lái)自人人都是產(chǎn)品經(jīng)理并附帶本文鏈接