TechRoomage

Axure原型設計之吸附菜單

0 1

原標題:Axure原型設計之吸附菜單

本文作者將與大家分享:如何使用axure原型工具製作APP中的吸附菜單?

Axure原型設計之吸附菜單

菜單是指引使用者瀏覽網頁或者使用APP的導向,吸附菜單在PC端和移動端的設計都有存在,它突出了菜單的重要性,它讓菜單時時刻刻都在使用者「夠得著」的地方,以讓使用者沒那容易「迷路」。這一章就教大家如何使用axure原型工具製作APP中的吸附菜單。當然,網頁中的吸附菜單原理一樣。

第一步:拖拉擺放好相關的控制項

所有控制項包括三部分:「手機殼」圖片、「螢幕」動態面板和「菜單」組合

Axure原型設計之吸附菜單

1、「手機殼」圖片:就一張圖片,這沒啥好說的;

2、「螢幕」動態面板:271X483,放在「手機殼」的中間,在state1面板狀態中放置3條水平線以及一個動態面板,分別命名為「界限」,「下限」,「上限」和「內容」。

(1)「界限」水平線:寬度為271,放在(0,-150)的位置上;

(2)「下限」水平線:寬度為271,放在(0,482)的位置上;

(3)「上限」水平線:寬度為271,放在(0,0)的位置上;

(4)「內容」動態面板:271X796,放在(0,0)的位置上,在該動態面板的state1面板狀態中,頂部放置一張圖片表示banner圖,中間放置三個矩形表示菜單按鈕,分別為產品,技術和運營,下方放置一些白底矩形表示該頁面主題內容。

Axure原型設計之吸附菜單

3、「菜單」組合:於「內容」動態面板的state1面板狀態中的3個菜單按鈕一樣,直接複製出來放在「螢幕」頂部即可,初始狀態記得設置為隱藏。

第二步:為「內容」添加一個拖動時用例

該用例的條件是:「內容」接觸到「界限」的時候。

該用例的動作是:一是顯示「菜單」組合,二是垂直拖動「內容」動態面板,其中頂部邊界小於等於「上限」的y軸位置,底部邊界大於等於「下限」的y軸位置。

Axure原型設計之吸附菜單

第三步:為「內容」添加另一個拖動時用例

該用例的條件是:「內容」未接觸到「界限」的時候。

該用例的動作是:一是隱藏「菜單」組合,二是垂直拖動「內容」動態面板,其中頂部邊界小於等於「上限」的y軸位置,底部邊界大於等於「下限」的y軸位置。

Axure原型設計之吸附菜單

可以了,點擊預覽並上下拖動螢幕即可以看到效果。同時也可以隨時關注我的個人博客:http://weidublog.com,因為工作過程中有很多這些axure原型設計小技巧的例子,所以我會堅持分享下去,希望對大家有幫助,你們對我的關注就是我的動力。

效果圖:axure原型設計之吸附菜單

附件下載:吸附菜單rp文件

作者:維度。個人博客:http://weidublog.com/

本文由 @維度 原創發佈於人人都是產品經理。未經許可,禁止轉載

題圖來自 Pexels,基於 CC0 協議

如果你發現文中有任何錯誤內容,請不吝發送通知讓我們知道並修改。『選取錯誤的文字片段後使按下Ctrl+Enter即可發送。』

Leave A Reply

Your email address will not be published.

Spelling error report

The following text will be sent to our editors: