針對(duì)產(chǎn)品原型的制作工具，當(dāng)前我們有了更多的選擇，每個(gè)不同的原型工具有其各自的優(yōu)勢(shì)，當(dāng)然其各自也都有相對(duì)于其他工具的不足。因此我們?cè)谶x擇原型工具的時(shí)候可以根據(jù)對(duì)產(chǎn)品原型的最終呈現(xiàn)要求來(lái)選擇相應(yīng)的原型工具，有些注重操作便捷，有些注重動(dòng)效表現(xiàn)，有些注重行為判斷等細(xì)節(jié)表現(xiàn)。盡管其各自有這些不同，但是其各自制作原型的整體思路卻有著一定程度的相似，下面將以Axure制作簡(jiǎn)單登錄/歡迎頁(yè)面原型為例簡(jiǎn)單講述制作原型的整體思路。
一：思路分析
產(chǎn)品原型雖然在視覺(jué)呈現(xiàn)、真實(shí)性能等方面無(wú)法與最終產(chǎn)品相比較，但是基本組成元素卻相同，都是由靜態(tài)元素（視覺(jué)界面）和動(dòng)態(tài)元素（行為和數(shù)據(jù)）兩部分組成，如圖1-1所示：
其相互間的關(guān)系如圖1-2所示：
產(chǎn)品原型中，這三個(gè)部分各有其相應(yīng)的角色和任務(wù)，視覺(jué)界面負(fù)責(zé)搭建框架，行為負(fù)責(zé)連接框架，而數(shù)據(jù)決定如何連接。
二：登錄/歡迎頁(yè)面原型思路分析
2.1 最終效果如圖2-1,2-2所示：
2.2 原型中的思路分析
①視覺(jué)界面：如圖2-1，2-2所示（登錄頁(yè)面和歡迎頁(yè)面）；
②行為跳轉(zhuǎn)：點(diǎn)擊登錄進(jìn)入歡迎頁(yè)面，點(diǎn)擊退出返回到登錄頁(yè)面；
③數(shù)據(jù)邏輯：登錄頁(yè)面的輸入框不能為空，若為空給出相應(yīng)提示，如圖2-3,2-4,2-5所示；同時(shí)歡迎頁(yè)面要顯示用戶(hù)輸入的用戶(hù)名。
三：Axure制作登錄/歡迎頁(yè)面的主要過(guò)程?
3.1視覺(jué)界面制作：
在演示案例中頁(yè)面的跳轉(zhuǎn)采用的是動(dòng)態(tài)面板切換方式實(shí)現(xiàn)，當(dāng)然也可采用頁(yè)面的形式，在此不做多的說(shuō)明，可各自根據(jù)習(xí)慣操作。
3.1.1 創(chuàng)建登錄/歡迎動(dòng)態(tài)面板，并給該面板設(shè)置兩個(gè)狀態(tài)（登錄頁(yè)面和歡迎頁(yè)面），如圖3-1所示：
3.1.2 進(jìn)入登錄頁(yè)面面板，繪制視覺(jué)界面，并對(duì)相應(yīng)部件進(jìn)行相應(yīng)的命名以在后期制作過(guò)程中方便查找，并對(duì)tips-name和tips-password設(shè)置成隱藏，如圖3-2所示：
同時(shí)為了實(shí)現(xiàn)上圖2-3,圖2-4,圖2-5中效果，同樣在名稱(chēng)和密碼兩個(gè)文本框處采用了動(dòng)態(tài)面板的切換方式，如圖3-3，3-4所示：
名稱(chēng)和密碼兩個(gè)文本框動(dòng)態(tài)面板的state2都是紅色邊框顯示效果（用添加紅色矩形框的方式實(shí)現(xiàn)視覺(jué)效果，如圖3-5所示）
Tips：所以整個(gè)案例中的動(dòng)態(tài)面板結(jié)構(gòu)如圖3-6所示
3.1.3 ?進(jìn)入歡迎頁(yè)面面板，繪制視覺(jué)界面，如圖3-7所示
3.2 行為跳轉(zhuǎn)+數(shù)據(jù)邏輯
3.2.1由登錄頁(yè)面到歡迎頁(yè)面
根據(jù)行為跳轉(zhuǎn)條件（兩個(gè)文本框不可為空）可知存在4種跳轉(zhuǎn)情況，如圖3-8所示
有圖3-8可知，存在4種跳轉(zhuǎn)情況：
情況1：都為空時(shí)，顯示兩個(gè)提示；
情況2和3：一個(gè)為空時(shí)，顯示相應(yīng)為空的提示；
情況4：實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，且設(shè)置username-input的值為name的值。
情況1,2,3的設(shè)置相似，拿情況1做演示，其他兩種依次做出相應(yīng)的調(diào)整：
①情況1：當(dāng)兩者都為空時(shí)，顯示兩者的提示。
兩者為空指數(shù)據(jù)邏輯判斷（設(shè)置如圖3-9所示），顯示提示為行為跳轉(zhuǎn)結(jié)果（設(shè)置如圖3-10所示），這樣單方向（動(dòng)態(tài)面板name和passwords由state1到state2）的設(shè)置就已經(jīng)完成。
接下來(lái)進(jìn)行反方向設(shè)置（動(dòng)態(tài)面板name和passwords由state2到state1），當(dāng)輸入值之后要恢復(fù)狀態(tài)1，所以設(shè)置如圖3-11,3-12所示（分別在兩個(gè)動(dòng)態(tài)面板name和passwords下的state2面板部件上設(shè)置失去焦點(diǎn)時(shí)事件）
②情況4，當(dāng)都是非空時(shí)，實(shí)現(xiàn)頁(yè)面的調(diào)整，同時(shí)對(duì)歡迎頁(yè)面中的文本部件進(jìn)行賦值，以實(shí)現(xiàn)上圖2-2 歡迎頁(yè)面效果
此步驟的設(shè)置如下圖3-13所示
3.2.2 由歡迎頁(yè)面到登錄頁(yè)面
點(diǎn)擊退出，返回登錄頁(yè)面，清空登錄頁(yè)面所有數(shù)據(jù)，且恢復(fù)兩個(gè)輸入框的狀態(tài)為state 1。設(shè)置如下圖3-14所示
這樣一個(gè)簡(jiǎn)單地登錄/歡迎的簡(jiǎn)單原型就已經(jīng)制作完成。
對(duì)于產(chǎn)品原型的制作，不論簡(jiǎn)單復(fù)雜與否，其背后的制作思路都是一樣，無(wú)非對(duì)于復(fù)雜的原型需要進(jìn)行更多的設(shè)置，所以只要對(duì)原型制作思路有了一定的認(rèn)識(shí)，再加上對(duì)于工具的熟練掌握，就能夠制作出相應(yīng)的產(chǎn)品原型。
這篇文章希望能夠與你一起分享一點(diǎn)自己的心得，謝謝。
