當前位置:編程學習大全網 - 源碼下載 - Axure怎麽畫出微信APP導航原型圖?

Axure怎麽畫出微信APP導航原型圖?

使用Axure也可以繪制出APP的導航原型圖,但是有很多的新手小夥伴還不會繪制!下面就來教壹教大家怎麽繪制操作!如果此時妳心裏眾多疑惑:Axure去哪學?怎麽學?學多久?那不妨學習體驗的Axure自學視頻課!資深講師授課,從基礎的Axure軟件功能到原型繪制到交互案例,綜合全面的帶妳入門Axure產品原型設計!~

Axure畫出微信APP導航原型圖方法:

畫出每個導航按鈕

每個導航按鈕都是由方框,名稱,圖標3個元素組成。

方框,使用矩形元件。寬度=375/4=94px。高度建議50px左右。

名稱,使用文本元件。輸入文字代表導航名稱。

圖標,則用圖片元件。縮放到合適的大小。

處理壹下三者的布局,最終得到導航按鈕。

(Axure功能理解比較深的童鞋,可以將前兩者合並成壹個矩形實現,新手不建議這樣使用。)

設置導航按鈕樣式

以第壹個導航按鈕為例,設置它每壹個元素的交互樣式-選中。選中代表的是元素的另外壹個狀態。

方框,改變矩形的背景色。

名稱,改變文字的顏色。

圖標,使用另外壹個圖片來替換。

以此類推,把其他三個導航按鈕也做壹下樣式。(矩形、文本元件可以使用格式刷快速復制交互樣式,圖片元件不行。)

設置導航按鈕鏈接

將每個導航按鈕的三個元素選擇,並生成組合。

然後給組合添加鏈接,跳轉到對應的頁面“微信、通訊錄、發現、我”。

為什麽要這樣做?點擊導航按鈕的區域內,都可以跳轉。所以使用組合來表示這個區域內都是可交互熱區範圍。

我們已經畫出了微信下導航的線框圖效果,接下來講解如何做出相似的交互效果。

生成固定位置母版

下導航是存在於所有的導航頁。所以需要把下導航原型放到不同的頁面。

選中這些元件,右鍵生成母版。

考慮到下導航在每個頁面中的位置是壹樣的,所以將母版設為固定位置。

添加母版到導航頁

打開微信頁面,將左下方的母版拖進去。

以此類推即可

設置導航頁的效果

當位於微信頁面的時候,導航按鈕微信是不可點擊,但是樣式是點擊後的樣式效果。

所以需要設置當載入微信頁面的時候,選中該按鈕組合,並且禁用該按鈕的交互。

以此類推

需要註意的是,同時只有壹個導航按鈕處於選中狀態,所以需要把所有的導航按鈕選中並新建成單選組。

固定導航相對於屏幕的位置

如果妳希望下導航原型和微信下導航壹樣,固定在頁面的底部。

那麽把這些導航按鈕選中並生成動態面板,然後右鍵固定到頁面指定位置即可。

以上即是關於“Axure怎麽畫出微信APP導航原型圖?”的全部精彩內容分享了,希望能夠幫助到妳!大家跟著步驟學習操作,也要獨立思考哦!最後,學習更多Axure原型技巧,不妨閱讀更多Axure相關文章學習?

  • 上一篇:ip地址跳轉後如何溯源
  • 下一篇:resultMap完美解析(含github實例)
  • copyright 2024編程學習大全網