
在需求產(chǎn)生之后,產(chǎn)品經(jīng)理為客戶整理需求文檔,包括背景描述、用戶畫像、項(xiàng)目時(shí)間規(guī)劃、信息結(jié)構(gòu)、任務(wù)流程、需求詳細(xì)說明等。需求文檔的質(zhì)量會直接影響交互設(shè)計(jì)和UI設(shè)計(jì)價(jià)值。而在需求階段最好是與產(chǎn)品人員進(jìn)行溝通需求文檔的細(xì)節(jié),能夠?qū)υO(shè)計(jì)有進(jìn)一步的促進(jìn)作用。
背景描述:在這個(gè)部分需要講清楚,項(xiàng)目開展的原因是什么?能夠解決用戶哪些問題?項(xiàng)目的價(jià)值有多大?
用戶畫像:主要是對用戶特征進(jìn)行詳細(xì)說明,完整敘述產(chǎn)品的目標(biāo)用戶的具體情況。
項(xiàng)目時(shí)間規(guī)劃:對于時(shí)間的規(guī)劃主要是針對具體的需求進(jìn)行評估,包括原型設(shè)計(jì)、真實(shí)設(shè)計(jì)稿、開發(fā)、測試、發(fā)布等不同的過程進(jìn)行制定時(shí)間節(jié)點(diǎn),才能使得整個(gè)工作流程更加順暢。
信息結(jié)構(gòu)圖:APP的內(nèi)容組織結(jié)構(gòu)。
如微信APP的組織架構(gòu)是:搜索、微信(對話)、添加(發(fā)起群聊、添加好友、掃一掃、收付款、幫助與反饋)、通訊錄(新的朋友、群聊、標(biāo)簽、公眾號、星標(biāo)朋友)、發(fā)現(xiàn)(朋友圈、掃一掃、搖一搖、附近的人、漂流瓶、購物、游戲)、我(頭像、相冊、收藏、錢包、表情、設(shè)置)
任務(wù)流程圖:主要是對平臺中的大功能從用戶開始使用到結(jié)束,整個(gè)過程都清晰梳理出來。同時(shí)將各種可能出現(xiàn)的問題考慮進(jìn)去,否則在開發(fā)中遇到問題,需要重新考慮,影響項(xiàng)目執(zhí)行效率。
需求說明:把每個(gè)操作的條件和結(jié)果都標(biāo)注清楚,主要采用圖文相結(jié)合的方式,因?yàn)榻换ピO(shè)計(jì)師再根據(jù)你的功能結(jié)構(gòu)和流程梳來設(shè)計(jì)線框圖和高保真的原型圖。
數(shù)據(jù)埋點(diǎn):把后期需要查看的數(shù)據(jù)列成清單,比如說這個(gè)按鈕的點(diǎn)擊率,這個(gè)頁面的打開率等,在這個(gè)環(huán)節(jié)最好是與運(yùn)營人員進(jìn)行詳細(xì)的溝通,需要做的埋點(diǎn)的地方理清楚,這對于產(chǎn)品上線后的數(shù)據(jù)分析能夠起到極大的輔助作用。
二、交互設(shè)計(jì)
需求整理完成之后,接下來大致要進(jìn)行的就是線框圖、頁面流程、高保真原型圖和交互說明的設(shè)計(jì)和產(chǎn)出。
線框圖:力求簡單清晰的表達(dá)出每個(gè)頁面的視覺效果,每個(gè)情形就是一個(gè)頁面,把各個(gè)情況用頁面分別表達(dá)出來。
頁面流程圖:比較類似之前的信息結(jié)構(gòu)圖,頁面流程圖這是用各個(gè)頁面來做連接,視覺上更加清晰各個(gè)環(huán)節(jié)的銜接和跳轉(zhuǎn)。
高保真原型圖:這個(gè)部分的工作需要比較完整的展現(xiàn)各個(gè)功能之間的交互動作,另外在視覺上盡量還原真實(shí)產(chǎn)品的樣子。
交互說明:交互說明和高保真原型有重合之處,如果做了高保真,需要對各種交互動作進(jìn)行展現(xiàn),但是有些交互動效是軟件無法搞定的內(nèi)容,為此清晰標(biāo)注說明內(nèi)容。
三、UI設(shè)計(jì)
一般情況下,交互設(shè)計(jì)師講線框圖交給設(shè)計(jì)師,設(shè)計(jì)師可以著手進(jìn)行設(shè)計(jì),而在這個(gè)過程,交互設(shè)計(jì)師需要與UI設(shè)計(jì)是保持順暢的溝通,才能保證能夠傳遞正確的設(shè)計(jì)理念。
四、項(xiàng)目執(zhí)行
設(shè)計(jì)產(chǎn)出了,交互的工作也做完了,該去交給項(xiàng)目經(jīng)理執(zhí)行了,而在執(zhí)行之前,一般需要各種相關(guān)的規(guī)范要先建立起來。包括apk、api文件的命名規(guī)范和不同類型安裝包的管理;APK、API文件管理。