如何用Axure畫出Web后臺產品的頂部導航組件

0 評論 8913 瀏覽 18 收藏 7 分鐘

編輯導語:我們在日常工作或者娛樂中經常會用到產品后臺,產品后臺很多與功能相關的組件,并且不同產品的后臺功能也不一樣;本文作者分享了關于用Axure畫出Web后臺產品的頂部導航組件的方法,我們一起來看一下。

Web后臺產品的頂部導航組件用來展示產品名稱logo以及用戶名和登錄退出等關鍵信息,PM一定要了解并學會它的原型畫法。

當我們畫Web后臺產品原型頁面的時候,首先要考慮的是畫出頁面的導航組件(頂部導航、菜單欄、面包屑),然后再畫出頁面的內容區域;前者存在于大部分頁面并且是一樣的,后者每個頁面都不太一樣。

那我們如何用Axure畫出類似下圖的常見頂部導航組件效果,以及如何在后續的畫原型中使用它呢?接下來請查看詳細的步驟,也可以直接預覽頂部導航的原型地址https://rgewvb.axshare.com

一、如何畫出頂部導航

1)先畫導航背景

從默認元件庫拖動“矩形1”到畫布位置(0,0),修改尺寸為1200*80px。

2)畫產品圖標

從默認元件庫拖動“圖片”到畫布合適位置,修改尺寸為40*40px。

3)再畫產品名稱

從默認元件庫拖動“三級標題”到畫布合適位置,雙擊輸入產品名稱。

4)再畫用戶名

從默認元件庫拖動“文本標簽”到畫布合適位置,修改雙擊輸入用戶名。

5)再畫退出按鈕

從默認元件庫拖動“文本標簽”到畫布合適位置,雙擊輸入退出,修改字體顏色為#0000FF。

6)同時選擇產品圖標和產品名稱,右鍵點擊“組合”,然后點擊該組合,右側邊欄切換到“交互”,點擊“新建交互”按鈕,選擇觸發條件“單擊時”,添加動作“打開鏈接”,鏈接到“首頁”,點擊“確定”按鈕。

7)點擊“退出”,右側邊欄切換到“交互”,點擊“新建交互”按鈕,選擇觸發條件“單擊時”,添加動作“打開鏈接”,鏈接到“登錄”,點擊“確定”按鈕。

8)如需頂部導航相對于屏幕位置不變,則同時選擇相應的元件然后右鍵點擊“轉換為動態面板”,然后在右側邊欄“樣式”中勾選“固定到瀏覽器窗口”,水平固定選擇“居中”,點擊“確定”按鈕。

9)點擊“預覽”按鈕,然后在瀏覽器中查看原型效果。

二、如何使用頂部導航

頂部導航作為大部分頁面都需要用到的通用組件,那么我們是不是在對應頁面都需要畫一遍呢?答案是否定的,我們可以使用Axure的母版特性來實現只畫一次,批量應用到所需頁面。

10)同時選擇頂部導航的所有元件,右鍵點擊“轉換為母版”,然后在彈窗“創建母版”中輸入名稱“頂部導航”,然后點擊“繼續”按鈕。

11)點擊左側“母版”進入相應視圖,右鍵“頂部導航”,點擊“添加到頁面中…”,然后通過全選和選中子項,結合不選和取消選中子項來把所有需要頂部導航的頁面快速選中,最后點擊“確定”按鈕。

三、總結

大家可以根據我這篇文章制作適合自己的頂部導航組件,然后添加到自己的Axure元件庫中,后續畫Web后臺產品原型的時候就可以快速調用。

#相關閱讀#

如何用Axure畫出Web后臺產品的面包屑組件

如何用Axure畫出Web后臺產品的菜單欄組件

如何用Axure畫出Web后臺產品的編輯詳情頁

如何用Axure畫出Web后臺產品的列表組件:高級交互

#專欄作家#

浪子,個人微信langzipm,公眾號:浪子講原型(langzisay)。專注于Axure原型設計和產品規范。

本文由 @浪子 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!