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