Axure視頻教程2:製作第一個原型

 

 

 


一、認識Axure

圖 2-1

如果暫時看不懂沒有關係,只要有個大概的印象即可,以後的教程中我們會頻繁操作這些區域,到時候自然就會了。

1、站點地圖

        可以看作整個項目的導航區域,你項目中的所有頁面都可以在這找到,雙擊某個頁面,就可以對其進行編輯。並且“站點地圖”使用樹樁結構顯示,可以很清楚的看到每個頁面之間的上下級關係,如圖2-2:

圖 2-2

 2、元件庫

         按鈕、圖片、單選(多選)按鈕、矩形等等,所有頁面上的元素在Axure中都稱作“元件”。Axure的最大特點之一,就是你可以自己選擇想要的元件庫,默認安裝時自帶兩個庫“線框圖、流程圖”,可以自己嘗試着切換一下 。其中我們最常用的就是“線框圖”,基本滿足了我們製作軟件、web頁面時的需求。

        當然Axure也允許你載入別人製作好的元件庫,甚至可以自己製作一個元件庫(比如“IPHONE元件庫”),然後分享給別人。這方面的教程我們以後會講。

3、母板庫

        我們平時上網的時候會發現,網站通常有幾塊區域在所有頁面都是一樣的,比如頭部或底部,如圖2-3。

        像這種在多個頁面都需要重複使用的區域,就叫做母板。當某個頁面需要使用時,直接調用即可,而不用每個頁面再分別做一套。另外當母板需要做修改時,只需直接修改該母板,而所有調用這個母板的頁面,都會跟着修改。

圖 2-3  京東網底部

4、元件屬性

        “元件屬性”區域,可以操作一個元件的“交互、標註(註釋)、格式化”。分別點擊圖2-4上邊的按鈕,就可以切換。

        “標註”即給元件添加一些註釋,如“這個按鈕用open.jpg顯示”,讓看你原型的人,能夠快的理解你的設計思路。“格式化”就是定義這個元件的顯示格式,比如字體加粗、背景紅色等。“交互”指給本元件添加交互事件,是最常用的一個,如:給按鈕添加一個點擊事件,點擊該按鈕後跳轉到一個新的頁面。

圖 2-4

5、動態面板編輯區:動態面板以後的課程會詳細介紹。

6、主編輯區

        即設計頁面的區域,如想給一個頁面添加一個矩形,則從“元件庫”中,將一個矩形元件,拖拽到“主編輯區”。

7、頁面交互區

        我們剛纔學習瞭如何給一個元件定義交互事件(在“元件屬性”中學習)。而“頁面交互區”是當頁面載入的時候,定義交互事件,因此它只有一個交互事件“onPageLoad(頁面載入時)”。“頁面載入時”指當瀏覽器讀正在取頁面信息,但還沒有打開頁面的時候。因此這個事件可以在頁面打開前,進行一系列操作,以後教程中會有具體例子。

8、菜單欄、工具欄:與office比較類似,在這裏不再贅述,以後用到的時候會告訴大家。

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章