打造交互式評論功能頁面
模擬用戶評論操作流程Axure是一款強大的產(chǎn)品經(jīng)理工具,在版本7.0中,實現(xiàn)了模擬論壇的發(fā)表評論功能。用戶只需點擊評論,頁面即顯示評論輸入框,輸入評論后點擊提交,頁面將展示用戶輸入的評論內容。從部件
模擬用戶評論操作流程
Axure是一款強大的產(chǎn)品經(jīng)理工具,在版本7.0中,實現(xiàn)了模擬論壇的發(fā)表評論功能。用戶只需點擊評論,頁面即顯示評論輸入框,輸入評論后點擊提交,頁面將展示用戶輸入的評論內容。從部件庫中拖入矩形部件制作評論外邊框,并調整位置大小樣式。再加入圖片控件、發(fā)表內容者頭像和文字部件,制作完整的評論內容顯示。
制作評論框和發(fā)表按鈕
首先,拖入一個矩形部件作為評論框,并設置其文字為“發(fā)表”,調整大小和位置。接著再拖入另一個矩形部件和文本框部件,讓文本框與矩形層疊在一起,保持一致大小和位置。隱藏文本框的邊框并命名為txt_input,最后添加一個三角形矩形指向評論文字,完成評論框和發(fā)表按鈕的制作。
設置動態(tài)面板交互效果
選擇剛才制作的部件,右鍵選擇轉換為動態(tài)面板,并設為隱藏狀態(tài)。雙擊動態(tài)面板,添加評論前和評論后兩個狀態(tài),并命名為評論。此時,評論框和按鈕的動態(tài)效果制作完成。
制作發(fā)表評論頁面
通過部件管理中的評論動態(tài)面板,打開評論后狀態(tài)頁面,并按照之前的步驟制作發(fā)表評論的頁面。確保將顯示評論的標簽命名為display,以便后續(xù)交互功能的設定。
添加交互動作實現(xiàn)評論展示
為評論文字添加交互動作,當點擊評論文字時展示評論動態(tài)面板,并設置面板狀態(tài)為評論前。當再次點擊評論文字時收縮隱藏評論面板,借助部件交互設置實現(xiàn)此功能。
處理評論輸入和顯示
在評論前狀態(tài)頁面,點擊發(fā)表按鈕,在用例編輯器中設置變量OnLoadVariable為登錄輸入框txt_input的文字內容,并切換評論動態(tài)面板狀態(tài)為評論后狀態(tài),顯示內容display等于變量值OnLoadVariable。
效果演示及投票支持
最后,進行效果演示,用戶可點擊左下角的投票按鈕為文章投上寶貴的一票。通過以上步驟,您可以完美實現(xiàn)一個交互式評論功能頁面,提升用戶體驗。