温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

【Axure原型图】—— 3. NAVIGATION MENU(导航菜单)

发布时间:2020-08-03 05:41:29 来源:网络 阅读:905 作者:LittleGump 栏目:开发技术

制作导航菜单

Step0: 下载练习文件

在这里下载AxureTraining.rp文件,并用Axure RP打开


Step1: GET STARTED

  1. 打开"Navigation menu" 页面
  2. 该页面包含了多个菜单组件HOME, MANAGE, PROFILE, HELP等,他们已经有了mouseOver和选中交互样式
  3. 选中所有的这些组件,右键,“Convert to Master”
  4. 将创建的master重命名为“KiKiHeader”,并且右键勾选“Lock to Master Location” 然后点击继续
  5. 在master的任意地方双击一下,打开编辑

【Axure原型图】—— 3. NAVIGATION MENU(导航菜单)


Step2: Configure navigation links

  1. 点击"HOME"组件, 在Properties中双击"OnClick", 添加一个新的Onclick case
  2. 左边栏,选择“Open Link” --> Current Window action,
  3. 最右边, 选择页面内连接,选择“Navigation menu”
  4. 点击“OK”
  5. 给“MANAGE”, "PROFILE", "HELP"也做同样的操作,不过需要连接到相对应的页面
  6. PS:点击"HOME"之后,可以直接点击Properties中的CreateLink来创建链接

【Axure原型图】—— 3. NAVIGATION MENU(导航菜单)


Step3: SET THE SELECTED MENU ITEM ON EACH PAGE

在每个页面上设置所选菜单项

  1. 打开Navigation menu页面
  2. 在页面查看器中双击“OnPageLoad”, 添加一个OnPageLoad case编辑器
  3. 选中"Set Selected/Checked" --> "Selected" action
  4. 在"Configure actions"列,点击Header中的"Home"部件
  5. 点击ok
  6. 将KiKiHeader master添加到"Manager", "Profile" 和"Help" 页面中去,然后为manage, profile, help页面重复上面1-5步骤
    【Axure原型图】—— 3. NAVIGATION MENU(导航菜单)

Step4: PIN MENU TO TOP OF PAGE

  1. 在master窗格中双击 "KiKiHeader"进行编辑
  2. 选取所有master中的元素, 右键选择“Convert to Dynamic Panel”
  3. 在属性标签中, 点击"Pin to Browser"
  4. 在"Pin to Browser"会话框中,选中"Pin to browser window", 勾选水平"Center", 垂直"Top"
  5. 点击ok

【Axure原型图】—— 3. NAVIGATION MENU(导航菜单)


注: 本人Axure系列的翻译blog仅供个人记录学习,侵删.
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI