如何用Axure畫出Web后臺產品的頂部導航組件
編輯導語:我們在日常工作或者娛樂中經常會用到產品后臺,產品后臺很多與功能相關的組件,并且不同產品的后臺功能也不一樣;本文作者分享了關于用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后臺產品原型的時候就可以快速調用。
#相關閱讀#
#專欄作家#
浪子,個人微信langzipm,公眾號:浪子講原型(langzisay)。專注于Axure原型設計和產品規范。
本文由 @浪子 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
- 目前還沒評論,等你發揮!