管理后臺(tái)自適應(yīng)框架一(頂部導(dǎo)航)

2 評(píng)論 6281 瀏覽 18 收藏 4 分鐘

編輯導(dǎo)讀:用戶進(jìn)入一個(gè)新產(chǎn)品之后,導(dǎo)航欄是最先看到的功能之一,也是最常用的功能之一。本文作者介紹了如何Axure構(gòu)建頂部導(dǎo)航,希望對(duì)你有幫助。

后臺(tái)管理自適應(yīng)原型框架搭建將分為頂部導(dǎo)航、側(cè)導(dǎo)航及頂部+側(cè)導(dǎo)航幾篇文章來(lái)介紹,原則上只提供實(shí)現(xiàn)思路及案例,不提供源文件。下面我們先來(lái)介紹頂部導(dǎo)航的自適應(yīng)原型框架Axure實(shí)現(xiàn)思路:

創(chuàng)建新頁(yè)面,命名“管理后臺(tái)自適應(yīng)框架一”,頁(yè)面尺寸設(shè)置“auto”,頁(yè)面排列“左側(cè)對(duì)齊”,如下圖:

添加動(dòng)態(tài)面板,命名“頂部導(dǎo)航”,背景色“#5999F9”,位置及尺寸如下圖:

在動(dòng)態(tài)面板頂部導(dǎo)航的state1中,添加圖片,命名“l(fā)ogo”;添加水平菜單,命名“導(dǎo)航”,尺寸和位置如下圖:

設(shè)置“導(dǎo)航”文字及交互樣式,如下圖:

關(guān)閉面板編輯狀態(tài),返回頁(yè)面,添加內(nèi)聯(lián)框架,命名為“content”,位置和尺寸如下圖:

接下來(lái)是最關(guān)鍵的一步,添加交互事件,選中頁(yè)面,添加“頁(yè)面載入時(shí)”設(shè)置導(dǎo)航與content的尺寸,如下圖:

頂部導(dǎo)航:寬=[[Window.width]],高=60;

content:寬=[[Window.width]],高=[[Window.height-LVAR1.height]];

LVAR1為元件“頂部導(dǎo)航”的局部變量名稱。

為保證窗口大小變化不影響預(yù)覽效果,將以上“頁(yè)面載入時(shí)”的交互事件復(fù)制粘貼給事件“窗口尺寸改變時(shí)”,如下圖:

預(yù)覽看效果!??!

在線預(yù)覽地址:https://s2d9ly.axshare.com/#id=15n4wr&p=%E7%AE%A1%E7%90%86%E5%90%8E%E5%8F%B0%E8%87%AA%E9%80%82%E5%BA%94%E6%A1%86%E6%9E%B6%E4%B8%80&c=1

 

本文由 @Soul Eater 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 是不是有些步驟沒(méi)有展示出來(lái)啊?怎么跟著做不出來(lái)預(yù)覽效果

    來(lái)自廣東 回復(fù)
    1. ok,會(huì)了,原來(lái)是給整個(gè)頁(yè)面設(shè)置交互

      來(lái)自廣東 回復(fù)