管理後臺自適應框架一

編輯導讀:使用者進入一個新產品之後,導航欄是最先看到的功能之一,也是最常用的功能之一。本文作者介紹瞭如何Axure構建頂部導航,希望對你有幫助。

管理後臺自適應框架一

後臺管理自適應原型框架搭建將分為頂部導航、側導航及頂部+側導航幾篇文章來介紹,原則上只提供實現思路及案例,不提供原始檔。下面我們先來介紹頂部導航的自適應原型框架Axure實現思路:

建立新頁面,命名“管理後臺自適應框架一”,頁面尺寸設定“auto”,頁面排列“左側對齊”,如下圖:

管理後臺自適應框架一

新增動態面板,命名“頂部導航”,背景色“#5999F9”,位置及尺寸如下圖:

管理後臺自適應框架一

在動態面板頂部導航的state1中,新增圖片,命名“logo”;新增水平選單,命名“導航”,尺寸和位置如下圖:

管理後臺自適應框架一

設定“導航”文字及互動樣式,如下圖:

管理後臺自適應框架一

關閉面板編輯狀態,返回頁面,新增內聯框架,命名為“content”,位置和尺寸如下圖:

管理後臺自適應框架一

接下來是最關鍵的一步,新增互動事件,選中頁面,新增“頁面載入時”設定導航與content的尺寸,如下圖:

管理後臺自適應框架一

頂部導航:寬=[[Window。width]],高=60;

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

LVAR1為元件“頂部導航”的區域性變數名稱。

為保證視窗大小變化不影響預覽效果,將以上“頁面載入時”的互動事件複製貼上給事件“視窗尺寸改變時”,如下圖:

管理後臺自適應框架一

預覽看效果!!!

線上預覽地址: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 原創釋出於人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基於 CC0 協議

頂部