管理后臺(tái)自適應(yīng)框架一(頂部導(dǎo)航)
編輯導(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ù)覽看效果!??!
本文由 @Soul Eater 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
是不是有些步驟沒(méi)有展示出來(lái)啊?怎么跟著做不出來(lái)預(yù)覽效果
ok,會(huì)了,原來(lái)是給整個(gè)頁(yè)面設(shè)置交互