原型設計篇 Axure8 0版

2022-02-28 17:36:12 字數 1541 閱讀 8752

在進入公司之前,都是做的前端開發相關的工作,到這來還要利用axure做一些產品經理的事情,近期公司要做乙個管理後台的**,讓先設計乙個原型出來給老闆和客戶看下,著實有點那啥了。

好了,沒有**,直接進入正題吧。

效果圖如下:

1.大概的乙個主頁面就是這樣的,因為圖設計方便所以沒有做到鋪滿屏,後期寫**的時候可以再設定width:100%

2.上面導航部分是一些button/連線按鈕,點選切換左側導航和內容面需設定動態面板,左則動態面板

內容頁動態面板

因為是演示用,先使用拼音來命名

3.事先編輯好各頁面,上圖中的左側內容面板和主頁內容面板,接著就是設定行為了:選中要設定的物件,找到右側【屬性】

設定物件的行為,我這裡以【滑鼠單擊時】為例:雙擊【滑鼠單擊時】會彈出乙個

行為列表,例如我點選智慧型裝置配置的動作是

【設定面板狀態】,選擇要顯示的左側導航為shebei,內容頁面為zhinengshebei,我這裡已經設定好了,就直接上圖

是左側裝置導航,show if hidden是如果就隱藏的就顯示,同理內容頁面也是如此。

4.二級選單製作

頁面製作,再將紅色框兩個矩形物件滑鼠右鍵轉為動態面板再設為隱藏

再設定【獨立煙感】的行為,類似上面的操作

智慧型裝置的總體顯示效果如下:

以上就是用axure設計的乙個小縮寫,設計的不好請大家見諒,畢竟是第一次用這個軟體製作頁面。

個人感覺用axure製作一些簡單的設計做展示還是挺方便的,互動行為有點類似於js,但這裡面的都配置好了,只要自己把邏輯理清楚就可以順著那個步驟一步步就出來了,因為要涉及到和後台互動,那麼axure就沒有自己用**寫的方便了,畢竟ajax這個弄不了;

最後,第一次自己寫個東西,有什麼不對和不足的地方請大家指正

Axure8 0基礎操作

摘自 基礎1.新增元件到畫布 基礎2.新增元件名稱 基礎3.設定元件位置 尺寸 基礎4.設定元件預設角度 基礎5.設定元件顏色與透明 基礎6.設定形狀或圓角 基礎7.設定矩形僅顯示部分邊框 基礎8.設定線段 箭頭 邊框樣式 基礎9.設定元件文字邊距 行距 基礎10.設定元件預設隱藏 基礎11.設定文...

axure 8 0 動態特效庫分享

認準品牌 六脈神掌 盡量給每乙個互動加上效果,盡量模擬真實的互動 無圖無真相,我們先看效果圖 1 這是還原android material design風格的乙個底部選單效果 2 這個是模擬歡迎頁面 3 模擬自動輪播的廣告頁面 4 這裡是傳送簡訊驗證碼 5 模擬選擇附件上傳 6 開關按鈕 7 購物車...

Axure8 0 中繼器學習

中繼器可用於顯示重複列表項。雙擊中繼器,進入中繼器的內部編輯區。新拖入的中繼器預設有乙個矩形。在中繼器的內部編輯區中,要先建立列表項的模板內容。這個模板內容決定每乙個列表項中的元件組成結構。資料集中資料行的數量與中繼器顯示的列表項的數量相一致。中繼器列表項顯示的文字內容與資料集對應。可通過設定 屬性...