很多產(chǎn)品經(jīng)常會(huì)糾結(jié)怎么把原型畫得好看，哪個(gè)原型工具要徹底學(xué)會(huì)并熟練使用等等。但是團(tuán)隊(duì)的其他成員并不會(huì)關(guān)心你的原型畫得多好看，也不關(guān)心用什么工具畫，如果你能準(zhǔn)備清晰表達(dá)出產(chǎn)品框架內(nèi)容，也許在紙上畫他們也會(huì)接受吧。當(dāng)然，為了提高工作效率，我們還是會(huì)用到一些工具，比如axure、墨刀、摩客等等。工具很多也很好用，但是如何利用工具清晰準(zhǔn)確地向團(tuán)隊(duì)成員描述我們的產(chǎn)品又是另一回事了，今天就以axure為設(shè)計(jì)工具來討論一下這個(gè)問題。

交互稿主要有兩種做法，高保真交互稿和線框圖交互稿。到底哪一種交互稿更能清晰準(zhǔn)確地向我們的設(shè)計(jì)師和開發(fā)展示產(chǎn)品框架和內(nèi)容呢，通過下面兩個(gè)案例的對比希望給到大家一些幫助，同時(shí)歡迎交流指正。

案例一：高保真交互稿

這是一個(gè)只在平板端使用的電話軟件原型交互稿，也是我工作上的第一個(gè)原型稿。因?yàn)橐蚩蛻粽故舅晕疫x擇了高保真交互稿，每個(gè)功能按鈕都做了跳轉(zhuǎn)，找了最相似的按鈕圖標(biāo)，做了非常多的動(dòng)態(tài)面板，鍵盤按鈕甚至是可以輸入數(shù)字進(jìn)行操作的…當(dāng)然給客戶看是沒什么問題的，然而交到開發(fā)和設(shè)計(jì)手中的時(shí)候卻被噴了一臉翔。

為什么高保真交互稿不適合給開發(fā)和設(shè)計(jì)呢？

1. 對于設(shè)計(jì)和開發(fā)來說，他們并不會(huì)按著你預(yù)期所做的按鈕跳轉(zhuǎn)和動(dòng)態(tài)面板去點(diǎn)擊。這樣重復(fù)的點(diǎn)擊根本不能描述清楚產(chǎn)品的各個(gè)功能點(diǎn)和內(nèi)容，只會(huì)加大理解難度。
2. 對設(shè)計(jì)師來說，頁面上的按鈕、圖標(biāo)、配色等等嚴(yán)重影響了他們的設(shè)計(jì)。交互稿上的按鈕、圖標(biāo)都是東拼西湊來的，但是設(shè)計(jì)必須保持按鈕圖標(biāo)風(fēng)格的統(tǒng)一，這樣做反而妨礙了他們進(jìn)行設(shè)計(jì)。
3. 這樣復(fù)雜的動(dòng)作設(shè)計(jì)會(huì)讓我們遺漏產(chǎn)品本身的一些功能細(xì)節(jié)和異常邏輯，而且復(fù)雜的動(dòng)作和交互效果會(huì)浪費(fèi)很多時(shí)間，造成項(xiàng)目拖延。

由此可見高保真交互稿并不利于團(tuán)隊(duì)成員理解產(chǎn)品功能內(nèi)容，可以說連一次評審會(huì)都過不了的。那么只剩下線框圖供我們選擇了，案例二中我將主要講述如何規(guī)范和有效地利用線框圖準(zhǔn)確清晰地向團(tuán)隊(duì)成員展示交互稿。

案例二：線框圖交互稿

這是以wap端的新浪微博為原形的一個(gè)線框圖交互稿，為了讓閱讀者更好地理解原型內(nèi)容，我將版本變更信息和整個(gè)產(chǎn)品的功能架構(gòu)和信息架構(gòu)等貼在了最前面，如果是比較復(fù)雜的app，還可以詳細(xì)列出各動(dòng)作手勢、目錄說明、特殊交互動(dòng)作等你想要表達(dá)給團(tuán)隊(duì)的信息。

1. 記錄說明每次對原型修改后的版本變更信息。交互稿多少都會(huì)有一些改動(dòng)，無論大改變還是小改動(dòng)，都可以在修改記錄里面告知團(tuán)隊(duì)成員哪里做了改動(dòng)，這樣做不僅方便團(tuán)隊(duì)成員閱讀還可以提醒他們產(chǎn)品要做改變了。
2. 詳細(xì)的功能架構(gòu)和信息架構(gòu)等。在出原型稿之前，我們必然會(huì)先對產(chǎn)品功能、內(nèi)容、頁面跳轉(zhuǎn)關(guān)系和業(yè)務(wù)邏輯等進(jìn)行確認(rèn)，把這些內(nèi)容貼在原型稿上，主要方便團(tuán)隊(duì)成員更準(zhǔn)確快速理解和把握產(chǎn)品的方向目標(biāo)。
3. 清晰的原型目錄原型目錄。當(dāng)你所做的產(chǎn)品頁面、功能很多，邏輯很復(fù)雜的時(shí)候，合理分類的目錄和準(zhǔn)確的命名可以減少團(tuán)隊(duì)成員的理解障礙。

接下來就是功能頁面的交互設(shè)計(jì)了，每一個(gè)page描述一個(gè)界面，詳細(xì)描述清楚界面內(nèi)的功能點(diǎn)，跳轉(zhuǎn)流程和界面的內(nèi)容說明（包括不同內(nèi)容的樣式）。我喜歡盡可能在一個(gè)page頁描述同一界面更多的相關(guān)內(nèi)容，所以把page頁分割成多個(gè)模塊，不同的模塊描述不同的內(nèi)容。

①頂部概述。這模塊相當(dāng)是該page頁的目錄，只是為了方便閱讀人員理解而已。這里你可以概述該界面的定義、目的、功能說明、頁面結(jié)構(gòu)、和狀態(tài)說明等等。

②狀態(tài)一（有微博的狀態(tài)）。在微博首頁，主要展示的是用戶所關(guān)注的其他用戶和自己所發(fā)的微博內(nèi)容，在這里就可以進(jìn)行詳細(xì)的設(shè)計(jì)描述說明了；在左側(cè)簡單說明了一下點(diǎn)擊頁面按鈕和微博內(nèi)容的跳轉(zhuǎn)關(guān)系，右側(cè)則是各種不同微博類型不同格式內(nèi)容的詳細(xì)說明。

③④⑤…“首頁”其他狀態(tài)的描述

如何讓團(tuán)隊(duì)成員更好地理解你的交互稿，其實(shí)沒有說哪一種方法是絕對正確的。如果你的團(tuán)隊(duì)成員不喜歡這種表達(dá)，你可以直接忽略不看；只要他們覺得怎樣好，你就怎么做就可以了。如果實(shí)在沒有要求心里也沒底，也可以參考一下這種做法。

只是希望這些細(xì)節(jié)處理和表達(dá)方式能幫到大家更好地向團(tuán)隊(duì)展示原型稿的內(nèi)容，避免遺漏功能、各種異常狀態(tài)和各種細(xì)節(jié)問題等等。同時(shí)也歡迎大家指點(diǎn)交流。

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