一、了解一下頁面流程圖

1、交互設(shè)計(jì)/原型設(shè)計(jì)的底子，基本依據(jù)

2、代表用戶的操作過程，先做頁面流程能快速發(fā)現(xiàn)體驗(yàn)問題

3、突出頁面重點(diǎn)元素與邏輯關(guān)系，提升原型設(shè)計(jì)的效率

頁面流程圖和信息架構(gòu)圖的區(qū)別

1、頁面流程圖，以用戶視角，主要看流程的合理性

2、信息架構(gòu)圖，以產(chǎn)品視角，主要看包含多少功能點(diǎn)

3、頁面流程圖適合于跳轉(zhuǎn)比較復(fù)雜的產(chǎn)品功能，如電商、社交產(chǎn)品

4、信息架構(gòu)圖適合于層級(jí)分明的，如音樂產(chǎn)品、新聞客戶端、閱讀類產(chǎn)品等

頁面流程圖包含什么？

1、四方形：業(yè)務(wù)流程中四方形部分，異常流程為tips或者彈層

2、流向：主干流向和輔助流向

3、重點(diǎn)元素：每個(gè)流程中，重點(diǎn)要體現(xiàn)和表達(dá)的內(nèi)容是什么？

畫頁面流程工具

1、Axure足夠了，因?yàn)楫嬃隧撁媪鞒叹o接著就是原型圖

2、PPT也可以，快而且容易傳輸講解

二、回歸業(yè)務(wù)流程，明確主線

1、頁面流程一定來自于業(yè)務(wù)流程

2、一般為業(yè)務(wù)流程中的方塊部分

3、異常 流程一般為彈層或彈窗

4、業(yè)務(wù)流程畫的好，頁面流程就很簡單

三、明確頁面中重點(diǎn)元素

1、功能在頁面中，有哪些是需要表現(xiàn)元素

2、增加異常流程的處理邏輯

3、增加輔助的幫助頁面

4、考慮下游觸發(fā)點(diǎn)

四、溝通與優(yōu)化

1、盡可能窮舉涉及的頁面，然后做減法

2、通過原型草圖，優(yōu)化條恒頁面關(guān)鍵元素

3、與UI、UE、前端研發(fā)等多溝通有更好的效果

總結(jié)

1、回到業(yè)務(wù)邏輯，明確主線

2、明確每個(gè)頁面中的核心元素

3、優(yōu)化與調(diào)整順序