如何在Axure中從無到有創(chuàng)建原型呢？一般你是怎么做的呢？這里結(jié)合一位學(xué)員的學(xué)習(xí)過程，一起來看看。

?

先說一下做的內(nèi)容是什么。這個產(chǎn)品是一個P2P網(wǎng)貸類的產(chǎn)品，有多種貸款模式，在選擇其中的一種模式之后，系統(tǒng)會進行“是否登錄/注冊”的判斷，是和否分別有不同的動作指向。

?

了解制作的背景之后，來看看這位同學(xué)是怎么做的。

1.理清邏輯，制作流程圖?

同學(xué)在動手繪制原型之前，將前面說的判斷過程先整體理清，清楚整個過程是如何的，每個步驟之間是如何連接在一起的，在什么地方需要做出判斷，不同的結(jié)果分別是什么。

?

清楚了之后，畫出了整個過程的流程圖，將思路進一步清晰化，并且展示出來。

?

2.根據(jù)流程圖，整理結(jié)構(gòu)框

將這個過程中需要用到的頁面整理出來，也就是它的結(jié)構(gòu)框架。需要多少個頁面，每個頁面之間的結(jié)構(gòu)是如何的。

3.確定頁面布局

結(jié)構(gòu)框架確定了之后，就需要對每一個頁面進行元素的排版，排版之前，一般都會先對頁面進行一個布局設(shè)計的考慮。

?

這里做的是一個APP，所以首先確定App的尺寸（尺寸規(guī)范可以參考往期的文章）。這里這位同學(xué)采用的是360X640這個尺寸規(guī)范。

?

由于同學(xué)在另外的頁面中制作了一個手機殼，然后用內(nèi)部框架制作了手機屏幕，內(nèi)部框架與APP內(nèi)容做了一個鏈接，所以這里頁面尺寸與屏幕的尺寸也就是內(nèi)部框架的尺寸應(yīng)保持一致，同樣是360X640。

?

接著以登錄頁面為例，需要哪些元素，我們先確定。手機的狀態(tài)欄、頁面名稱、登錄方式、對應(yīng)的輸入框、按鈕等。先把大概的布局確定下來。

這里做一下擴展。

如果是web產(chǎn)品應(yīng)該怎么做呢？通常會遵循一些已有產(chǎn)品總結(jié)出來的布局結(jié)構(gòu)，比如三行三列布局，三行兩列布局等，再如左導(dǎo)航右內(nèi)容的形式，左內(nèi)容右導(dǎo)航的形式等，這些都是大的布局結(jié)構(gòu)，是整體頁面的布局排版。

?

細分到具體頁面內(nèi)容的時候，就需要對每一個內(nèi)容塊的展示位置進行布局，如企業(yè)網(wǎng)站首頁的一般內(nèi)容有圖片新聞，通知通告，公司新聞，產(chǎn)品介紹，產(chǎn)品展示等等，我們需要對這些內(nèi)容塊進行一定的設(shè)計布局，這里的布局結(jié)構(gòu)取決于設(shè)計人員對內(nèi)容編排的把握，不同的布局會產(chǎn)生不同的效果。

?

這種情況下，即對某一類產(chǎn)品的布局把握不好的時候，可以參照已有成熟產(chǎn)品的內(nèi)容布局，因為它們已經(jīng)有運營數(shù)據(jù)在支持。

4.內(nèi)容完善

頁面布局布的就是內(nèi)容塊，當決定了某塊內(nèi)容的放置位置之后，就可以一塊一塊的完善設(shè)計內(nèi)容，使其接近于最終產(chǎn)品的展示樣式。

?

這時候我們就需要調(diào)整各個元素的樣式、結(jié)構(gòu)，最重要的是要進行交互的設(shè)置。還是以登錄的頁面來看。這位同學(xué)在做的時候確定了有兩種登錄方式：短信快捷登錄和賬號登錄。那么在登錄界面上我們需要設(shè)置兩種登錄方式互相切換的交互，用的是動態(tài)面板。

?

又如最初在選擇貸款模式的時候進行“是否登錄”的判斷，則是利用了變量的不同值去指代登錄的狀態(tài)，在設(shè)置的時候只需對變量的值進行判斷即可。

?

這里用到的是Axure RP的核心功能，如組件的組合使用，動態(tài)面板的靈活應(yīng)用等等，需要去發(fā)揮設(shè)計人員自己的想象力和創(chuàng)造力。世上本沒有路，走的人多了，也就有了路。這里可以開辟自己的道路，如果還沒有這個能力的話，也可以先走走先人開辟的道路。

?

如果你想做的跟這位同學(xué)不同，是一個完整的產(chǎn)品的話，就需要先確定產(chǎn)品的信息框架。好比建房子時先打好地基，畫好建筑結(jié)構(gòu)圖。確定好產(chǎn)品的整體信息框架之后，剩下的內(nèi)容就餓和我們同學(xué)做的一樣了，一步一步將產(chǎn)品完善。

?

文章中的截圖均采用自陪學(xué)網(wǎng)VIP學(xué)員學(xué)習(xí)成果，請勿任意轉(zhuǎn)載。