這個星期我就開始了我第一個正式的原型圖繪畫了。
我這次要畫的是基于wordpress博客的一個登錄界面。
我在原型圖的站點地圖里面設(shè)置了五個頁面：有登錄、注冊、找回密碼、后臺以及條件設(shè)置。
不過最后一個條件設(shè)置在這次的原型圖里面并不能起到什么作用，我只是用這個來練習(xí)條件設(shè)置罷了，這個頁面我放在最后說吧。
那先從登錄說起吧，首先，它在生成的html里面是這個樣子的：
靜態(tài)的這些頁面布局以及按鈕設(shè)置我就不詳說了，在這里我主要想說兩個點。
一是在登錄出現(xiàn)問題時登錄板塊上方所出現(xiàn)的提示框的設(shè)置，就像這樣：
這個的設(shè)置就需要用到axure的神器之一———動態(tài)面板了，所謂動態(tài)面板，說白了，就是一個巨大的容器，可以裝任何你想用到的原件，但同時又不會都出現(xiàn)在你當前所在的這個頁面上，除非是你想讓他們都全部顯現(xiàn)，同時它還有隱藏、移動等眾多功能，十分的好用。
好，回到我們的登錄頁面。想要做這個效果，首先，在你的登錄板塊的上方拉出一塊矩形，并且將它轉(zhuǎn)換為動態(tài)面板，就像這樣（黃色部分）：
動態(tài)面板里面是這樣的：
里面這個綠色的文字標簽，先清空它，等下有地方會寫它的提示內(nèi)容的，只不過不是這里，另外，還要給它起個名字，因為等下需要調(diào)用它，所以肯定是需要命名的，在這里，我就叫它msg（message的意思），btw,上面那個動態(tài)面板是黃色的是因為我們現(xiàn)在在這里把它隱藏了，因為它不一定每次都出現(xiàn)，你如果登錄沒有問題的話當然就不會出現(xiàn)提示了，所以要先隱藏，只有在需要它的時候再讓它出來。
說完了這個提示框，再來說說下面那個登錄板塊，如果登錄出現(xiàn)問題的話，不僅上面會出現(xiàn)提示框，而且下面的登錄板塊自己也會左右的抖動，同樣的，這個抖動效果也需要動態(tài)面板來進行的，那為什么這里也需要呢，是因為它下面的登錄模塊其實是由許多單個的原件組合而成的，但是我們需要的是整個登錄模塊能夠左右擺動，所以就需要把它裝到動態(tài)面板這個大容器里，由動態(tài)面板來集中管理。
知道了這兩個，接下來的交互就好說了。
那我們就來看看登錄按鈕的交互設(shè)置：
幾個case，帶我一個一個來解釋，首先，第一個case:賬號密碼都為空時，提示模塊隱藏。
case2:如果用戶名為空，出現(xiàn)提示：錯誤：用戶名一欄為空，并且登陸板塊左右晃動。此時，就要用到我們剛才提到的msg了，設(shè)置文本，轉(zhuǎn)入到msg，然后編輯文字：錯誤：用戶名一欄為空；
case3同理case2：密碼一欄為空；
case4:case4里面提到了有個up,還有個[[n]],up是我設(shè)置的一個全局變量
里面包含了幾組默認值，在這里，我把這些默認值用作這個登錄界面的賬號和密碼，因為沒有匹配數(shù)據(jù)庫嘛。。。就只有這樣做了，它的格式其實是這樣的：（[[n]]:[[p]]），[[n]]代表賬號name；[[p]]代表密碼password,這個case的意思就是你所輸入的name是否與up里面的可以匹配，如果不匹配，出現(xiàn)錯誤提示，如果匹配，跳轉(zhuǎn)到下一個case。
然后到第五個case了，case5是為了驗證密碼是否正確，道理與case4相同，不過這里要說明的一點是[[username]]表示的就是用戶輸入的賬號。
如果上面五個case都沒問題了，那就可以直接跳到后臺頁面了。。。因為我們現(xiàn)在并沒有后臺嘛，所以我就暫時先放了一張知乎的截圖裝裝樣子。。像這樣：
好吧，注冊差不多就是這些了，那還有一個重頭戲，就是注冊。
在注冊之前，我們先要搞清楚，注冊時提示框大概會出現(xiàn)多少種狀態(tài)，因為此時不同情況的種類實在太多，所以我們這個時候就要用xmind來理一理思路。
這就是所有可能出現(xiàn)的情況，然后一個會出現(xiàn)一個提示的情況大概是有六種（我用數(shù)字符號標注了一下，注冊成功的暫時不算，這個我們單獨討論），剩下的就都是兩個提示的。
然后這塊的提示框和注冊板塊也還是要用到動態(tài)面板，原因和登錄一樣。
動態(tài)面板這塊大概和登錄差不多，不過提示框的動態(tài)面板稍稍有點不同，因為就像xmind里所展示的一樣，注冊出錯有多種情況，所以提示情況也有所不同，有只出一個提示的，也有出兩個提示的，所以在提示框的動態(tài)面板里我們要設(shè)置兩個狀態(tài)。state1和state2.
state1里還是和登錄時時候是一樣的，文本標簽也還是叫msg：
state2里面是這樣的，因為要出兩個提示，所以有兩個文本標簽，這兩個文本標簽我分別給他們命名為msg2a和msg2b,而且矩形寬度也比state1要寬一些：
這里的注冊板塊同樣也要用動態(tài)面板，這個我就不詳說了，這里我著重說一下注冊按鈕的交互。如果說還是按照登錄時候的那種交互設(shè)置的話，那我們的工作量將會十分巨大，因為種類實在是太多了，那我今天就不那樣做，我用一種相對來說簡單一點的方法來做，不過可能有一點點不太好理解，那我先上交互說明，看著交互說明我再來具體說：
在說明之前我再多嘴兩句，還是因為沒有數(shù)據(jù)庫可以匹配嘛，所以如果輸入1（用戶名和郵件都是）表示該用戶名/郵件已被注冊，輸入2，則表示該用戶名/郵件是無效用戶名/郵件，什么都不輸入，則將會提醒你填寫用戶名/郵件。
好，開始說明。首先case4先不管它，先跳到前三個case1，可以看到，在判斷用戶注冊的用戶名是否有錯誤，這錯誤又包括三個方面：沒有填寫、用戶名已被注冊、以及無效用戶名，要注意的是，無論出現(xiàn)這三個錯誤中的哪一個，提示語都會先賦給msg，然后同時也賦給msg2a,下面三個case1同理：提示語都會先賦給msg，然后同時也賦給msg2b，然后，重點來了，看到那個case5了嗎，如果msg、msg2a、msg2b都等于空的話，就說明賬號和郵件都沒出現(xiàn)三個問題中的任何一個問題，就說明這個用戶名和郵件都是ok的，所以就注冊成功了（注冊成功后的頁面現(xiàn)在還沒做出來，所以就讓它先跳轉(zhuǎn)到登錄頁面），直接跳轉(zhuǎn)到登錄頁面；但如果不是，就跳到case2,（注意，這里是else if），case2就會判斷msg2a和msg2b是否都不為空，如果不為空，就跳轉(zhuǎn)到注冊模塊動態(tài)面板的state2里面，此時msg2a和msg2b所帶有的提示語就是剛才在前六個case1里面所得到的提示語，這樣就巧妙的解決了雙提示語多種情況的問題。如果既不是都空也不是msg2a和msg2b都帶有提示語，那么就只可能是msg帶有提示語了，這是就是指出現(xiàn)一個提示標語的情況，也就是case3的內(nèi)容了。好吧，最后就只剩一個case6了，case6就很好理解了，msg !=? ? or? msg2a? !=? or ?msg != ?;就是說只要出現(xiàn)任何一個提示語，那么就會有注冊模塊的抖動效果。對了，還有最上面那個case4：三個提示語都為空，這是干嘛的呢？這其實是起到清空三個提示標語的作用，因為我們每填寫一次信息就相當于賦值一次，那么第二次它就會帶著上一次的賦值，所以在每次交互的開頭，必須要重新清空一次。
好吧，注冊也終于說完了。
還有就是找回密碼、后臺、以及條件這三個頁面。
找回密碼我還沒做好（逃，只做了一些簡單的靜態(tài)布局，還沒什么交互，所以在這里就不敖述了；
后臺嘛。。。我剛才也說了，我就是放了一張知乎的截圖上去裝裝樣子（再逃，因為確實也沒做后臺。。
最后就是條件了。
這個頁面其實就是我最開始做條件判斷自己用來練手的，因為自己有一點編程基礎(chǔ)，所以這個還是很容易理解的，很多編程語言里都有這樣的條件判斷結(jié)構(gòu)。
這個我也就不多說了，應(yīng)該一看就能懂。
最后，我想說的是，剛才那個注冊頁面肯定是有bug的，別的bug我不知道，至少有一個，我還是很清楚的，就是注冊郵箱判斷那一塊，怎么樣才是有效郵箱呢？因為現(xiàn)在我只是用一個數(shù)字2來代替了這種情況，所以現(xiàn)在可能不用理會，但如果有數(shù)據(jù)庫匹配進來了，那時候就又要進行判斷了。
這個判斷就又有很多情況了：帶中文的？@位置不正確？特殊符號？
這個我還在研究中。。等我研究出來了在把坑補上。
今天就這么多吧。。實在寫不動了。
