全栈工程师?
嗯.....目前并不是!

Axure教程:後台產品導航欄

本次設計以bilibili創作中心為例,主要給大家介紹二級和三級導航欄。

產品經理在做一個完整產品的原型設計時,都需要一個導航菜單欄。這種菜單欄看着簡單,但對於初級產品經理來說是個難點,自己琢磨起來也比較費勁。今天做個導航欄的原型設計教程給大家參考,學會這一招,輕鬆應對導航欄的設計,進一步地提高產品技能。

設計過程

(1)設計概述

本次設計以bilibili創作中心為例,主要給大家介紹二級和三級導航欄。為了展示三級菜單的設計過程,將bilibili原有的二級菜單粉絲管理、互動管理、收益管理整合成二級菜單商業數據。

(2)二級菜單設計

步驟如下:

1)打開Axure RP 8軟件,新建項目,命名為導航欄。

2)創建母版

點擊母版頁面的添加按鈕,新增母版,命名為左側導航欄導航。

後台產品導航欄原型設計小教程

編輯母版。

拖拽矩形3到窗口,作為導航欄面板。拖拽三級標題到窗口,命名為bilibili創作中心。

後台產品導航欄原型設計小教程

3)製作導航菜單

拖拽矩形3,修改成合適的大小放置到合適的菜單位,按照下圖依次命名。

後台產品導航欄原型設計小教程

4)添加二級菜單

複製數據中心,修改名稱為數據總覽。複製數據中心,修改名稱為觀眾分析,並列排放。

選中數據總覽和觀眾分析,點擊右鍵,選擇轉換為動態面板。點擊右鍵,選擇設為隱藏。

後台產品導航欄原型設計小教程

後台產品導航欄原型設計小教程

後台產品導航欄原型設計小教程

在動態面板編輯區,給該動態面板命名為二級-數據中心。

後台產品導航欄原型設計小教程

將動態面板二級-數據中心移動到數據中心下方。

5)二級菜單交互設計

選中數據中心,雙擊鼠標單擊時。

後台產品導航欄原型設計小教程

按照以下步驟操作,操作完成後點擊確定。

後台產品導航欄原型設計小教程

6)創建菜單模塊

按照下圖結構創作菜單模塊。

後台產品導航欄原型設計小教程

7)打開首頁管理,拖拽模板左側導航欄到首頁管理窗口,以同樣的方式將母版放到各個模塊中

後台產品導航欄原型設計小教程

8)預覽

點擊軟件右上角預覽,可預覽導航欄效果,二級菜單製作完成。

後台產品導航欄原型設計小教程

(3)三級菜單

1)按照2.2步驟製作二級菜單:二級-商業數據

後台產品導航欄原型設計小教程

後台產品導航欄原型設計小教程

2)雙擊打開動態面板二級-商業數據,複製互動管理三個,分別命名為評論管理、彈幕管理、字幕管理。

選中三個矩形,選擇設為動態面板,命名為三級-互動管理,並設為隱藏。

後台產品導航欄原型設計小教程

後台產品導航欄原型設計小教程

3)交互效果

選中互動管理,雙擊鼠標點擊時,按照如下步驟操作,操作完成後確定。

後台產品導航欄原型設計小教程

後台產品導航欄原型設計小教程

後台產品導航欄原型設計小教程

4)點擊預覽查看效果

後台產品導航欄原型設計小教程

總結

總結來說,導航欄是個難的不會,會了不難的功能。這次只是簡單的菜單欄設計,實際的菜單欄還有很多的交互設計和細節處理,以後碰到再和大家分享。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Axure教程:後台產品導航欄》
文章链接:https://www.pmbear.com/archives/9487
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们