編輯導語：Web后臺產(chǎn)品的詳情頁如果需要支持編輯，那么PM該怎么畫出原型呢？相信大部分PM可以分別畫出詳情頁和表單頁的原型，但是如果在同一個頁面中需要表示表單和詳情2種狀態(tài)，就需要較深的交互拆解思維和Axure使用水平。我們仔細查看上圖原型會發(fā)現(xiàn)包含這些交互，接下來作者會詳細講解每一步如何通過Axure RP 9畫出來。

查看對應原型交互地址：https://xdvu25.axshare.com

1. 默認顯示詳情頁效果，即查看狀態(tài)；
2. 點擊修改按鈕顯示表單頁效果，即進入編輯狀態(tài)；
3. 編輯狀態(tài)下可以修改字段值，同時修改按鈕變成保存和取消按鈕；
4. 點擊保存按鈕，保存并刷新頁面數(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è)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇“單擊時”，添加動作“設(shè)置面板狀態(tài)”；將剛剛的這些字段值設(shè)為第2個狀態(tài)，將修改按鈕也設(shè)為第2個狀態(tài)。

另外考慮到備注的多行文本框會擋住修改按鈕，所以需要移動該動態(tài)面板向下100px左右。

四、點擊保存或者取消恢復查看狀態(tài)

雙擊修改所在的動態(tài)面板進入第2個狀態(tài)，點擊“保存”按鈕；右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕；選擇“單擊時”，添加動作“打開鏈接”，選擇重新載入頁面。

點擊“取消”按鈕，右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇“單擊時”，添加動作“設(shè)置面板狀態(tài)”。將剛剛的這些字段值設(shè)為第1個狀態(tài)，將修改按鈕也設(shè)為第1個狀態(tài)。

另外考慮到備注的多行文本框會擋住修改按鈕，所以需要移動該動態(tài)面板向上恢復100px左右。

五、總結(jié)

對于Web后臺產(chǎn)品經(jīng)理來說，詳情頁的編輯是經(jīng)常需要用到的原型場景，還是需要掌握其原型畫法的。

#專欄作家#

浪子，個人微信langzipm，公眾號：浪子畫原型(langzisay)。專注于APP原型設(shè)計和產(chǎn)品規(guī)范。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議