如何用Axure畫出Web后臺產(chǎn)品的編輯詳情頁
編輯導語:Web后臺產(chǎn)品的詳情頁如果需要支持編輯,那么PM該怎么畫出原型呢?相信大部分PM可以分別畫出詳情頁和表單頁的原型,但是如果在同一個頁面中需要表示表單和詳情2種狀態(tài),就需要較深的交互拆解思維和Axure使用水平。我們仔細查看上圖原型會發(fā)現(xiàn)包含這些交互,接下來作者會詳細講解每一步如何通過Axure RP 9畫出來。
查看對應原型交互地址:https://xdvu25.axshare.com
- 默認顯示詳情頁效果,即查看狀態(tài);
- 點擊修改按鈕顯示表單頁效果,即進入編輯狀態(tài);
- 編輯狀態(tài)下可以修改字段值,同時修改按鈕變成保存和取消按鈕;
- 點擊保存按鈕,保存并刷新頁面數(shù)據(jù)。點擊取消按鈕,恢復成詳情頁效果。
一、畫出默認的查看狀態(tài)
需要注意必須使用文本元件來表示字段名和字段值,如果使用表格來展示則很難表示編輯狀態(tài),詳細的步驟可參考文章:Web后臺產(chǎn)品的詳情頁規(guī)范。
1. 先畫字段名
從默認元件庫中拖動文本標簽到畫布中合適位置,修改高度為30px并且中部對齊。
2. 再畫字段值
從默認元件庫中拖動文本標簽到字段名后面的合適位置,修改高度為30px并且中部對齊。
3. 再畫修改按鈕
從默認元件庫中拖動文本標簽到字段名后面的合適位置,根據(jù)需求畫出所有的字段名和字段值,并且保持字段名左側(cè)對齊和字段值左側(cè)對齊。
二、畫出對應的編輯狀態(tài)
需要將所有字段值轉(zhuǎn)換為動態(tài)面板,并把編輯狀態(tài)作為第2個狀態(tài)。
字段“合同編號”的類型是文本,選擇對應字段值右鍵轉(zhuǎn)換為動態(tài)面板,然后雙擊進入添加第2個狀態(tài),從默認元件庫拖動文本框到畫布中,修改成合適尺寸然后輔以提示文字。
字段“約定期限”的類型是日期,選擇對應字段值右鍵轉(zhuǎn)換為動態(tài)面板,然后雙擊進入添加第2個狀態(tài)。
從默認元件庫拖動2個文本框到畫布中,修改成合適尺寸然后修改類型為日期,然后中間用文本“~”進行連接。
字段“簽訂時間”的類型是日期,選擇對應字段值右鍵轉(zhuǎn)換為動態(tài)面板,然后雙擊進入添加第2個狀態(tài),從默認元件庫拖動文本框到畫布中,修改成合適尺寸然后修改類型為日期。
字段“合同狀態(tài)”的類型是單選項,選擇對應字段值右鍵轉(zhuǎn)換為動態(tài)面板,然后雙擊進入添加第2個狀態(tài),從默認元件庫拖動下拉列表框到畫布中,修改成合適尺寸然后雙擊添加相應的選項值。
字段“備注”的類型是文本,選擇對應字段值右鍵轉(zhuǎn)換為動態(tài)面板,然后雙擊進入添加第2個狀態(tài),從默認元件庫拖動多行文本框到畫布中,修改成合適尺寸然后輔以提示文字。
按鈕“修改”的類型是操作,右鍵轉(zhuǎn)換為動態(tài)面板,然后雙擊進入添加第2個狀態(tài),從默認元件庫拖動主要按鈕和按鈕到畫布中,分別作為保存和取消。
最后的效果如下圖,此時所有的字段值都存在2種狀態(tài):查看和編輯。
三、點擊修改進入編輯狀態(tài)
雙擊修改所在的動態(tài)面板進入第1個狀態(tài),點擊“修改”按鈕,右側(cè)邊欄切換到“交互”,點擊“新建交互”按鈕,選擇“單擊時”,添加動作“設置面板狀態(tài)”;將剛剛的這些字段值設為第2個狀態(tài),將修改按鈕也設為第2個狀態(tài)。
另外考慮到備注的多行文本框會擋住修改按鈕,所以需要移動該動態(tài)面板向下100px左右。
四、點擊保存或者取消恢復查看狀態(tài)
雙擊修改所在的動態(tài)面板進入第2個狀態(tài),點擊“保存”按鈕;右側(cè)邊欄切換到“交互”,點擊“新建交互”按鈕;選擇“單擊時”,添加動作“打開鏈接”,選擇重新載入頁面。
點擊“取消”按鈕,右側(cè)邊欄切換到“交互”,點擊“新建交互”按鈕,選擇“單擊時”,添加動作“設置面板狀態(tài)”。將剛剛的這些字段值設為第1個狀態(tài),將修改按鈕也設為第1個狀態(tài)。
另外考慮到備注的多行文本框會擋住修改按鈕,所以需要移動該動態(tài)面板向上恢復100px左右。
五、總結(jié)
對于Web后臺產(chǎn)品經(jīng)理來說,詳情頁的編輯是經(jīng)常需要用到的原型場景,還是需要掌握其原型畫法的。
#專欄作家#
浪子,個人微信langzipm,公眾號:浪子畫原型(langzisay)。專注于APP原型設計和產(chǎn)品規(guī)范。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Pexels,基于 CC0 協(xié)議
您這個做的點擊“保存”數(shù)據(jù)更改后能更新到“修改”那個狀態(tài)的嗎?