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

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

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

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

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

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

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

在大部分的情況下，產(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)頁面的設(shè)計(jì)，極多狀態(tài)會(huì)在后面的文章中單獨(dú)說明。

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

1、告知：告訴用戶這個(gè)頁面還沒有數(shù)據(jù)，需要用戶來創(chuàng)建或者添加；
2、引導(dǎo)：通過明確的步驟性的操作引導(dǎo)用戶如何應(yīng)用系統(tǒng)；
3、模板：默認(rèn)給出數(shù)據(jù)模板，讓用戶理解已有情況，基于此快速入門；

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

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

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

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

國內(nèi)發(fā)展勢(shì)頭非常迅猛的另一個(gè)新生代企業(yè)級(jí)協(xié)同服務(wù)teambition，它的項(xiàng)目初始狀態(tài)頁非常有趣，可謂是另辟路徑。我們注意下圖中有浮動(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)頁面設(shè)計(jì)的例子，不管如何設(shè)計(jì)，問題的本源是要考慮用戶最開始的學(xué)習(xí)成本如何降低，只有讓用戶快速接受，產(chǎn)品才不會(huì)被容易拋棄——變得更有價(jià)值。

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

投稿者：@產(chǎn)品經(jīng)理朝陽陸

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量73萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：