原型圖的交互說明是針對原型圖內(nèi)容元素的解釋文字。清晰準確的交互說明能夠起到以下作用：減少交互設(shè)計師與產(chǎn)品上下游人員的溝通成本；提升協(xié)作效率；避免項目返工延期。

原型圖交互說明的輸出，可以從宏觀和微觀兩個層面展開分析。宏觀角度是指輸出交互說明應(yīng)該注意的事項，以及應(yīng)用組件化思維提升輸出交互說明的效率。微觀角度是指單張原型圖應(yīng)該包含的交互說明的具體內(nèi)容。本文結(jié)合圖例主要說明宏觀角度輸出交互說明應(yīng)該注意的地方。

宏觀層面

1. 交互說明的文字要簡短精煉

這里有個坑大家注意，估計很多交互設(shè)計師和我一樣在實際項目中有這樣的困惑：產(chǎn)品需求文檔里的功能點邏輯描述已經(jīng)相當全面，還有必要再次寫到原型圖的交互說明里嗎？這里我們需要明確：只要在交互說明里把有關(guān)交互的主場景和各種狀態(tài)作簡要描述即可，開發(fā)人員如果有困惑會仔細查看PRD的。

如上圖是PRD中關(guān)于Banner功能的描述，在交互說明中只需要提取出以下幾點：

用戶點擊Banner圖跳轉(zhuǎn)至對應(yīng)頁面；

Banner圖少于2張時，不進行自動輪播，也不展示翻頁點；

Banner圖大于等于2張時，進行自動輪播，且展示對應(yīng)圖片數(shù)量的翻頁點；

Banner圖最小張數(shù)為1，最大張數(shù)為5；

用戶可左右滑動切換Banner圖片，同時Banner每隔5秒自動輪播無限循環(huán)。

2. 頁面元素的交互說明主要由以下模塊構(gòu)成

元素基礎(chǔ)設(shè)置、交互動作、跳轉(zhuǎn)邏輯、限定極限值、狀態(tài)及狀態(tài)之間轉(zhuǎn)換的描述。如下圖，仍然以上面的Banner功能點舉例說明。

3. 頁面內(nèi)容盡量使用符合邏輯的真實數(shù)據(jù)

避免使用XX符號或者無關(guān)聯(lián)的數(shù)據(jù)替代，這樣寫出的交互說明貼近真實場景，容易產(chǎn)生代入感，使閱讀者清楚明確。如下圖，搜索默認詞、導航tab切、以及內(nèi)容文案都給的是上線后的真實數(shù)據(jù)。

4. 交互說明考慮內(nèi)容元素的特殊狀態(tài)

包括極限值/錯誤提示/判斷規(guī)則等，要在交互說明中明確指出。如下圖1，同一個頁面中標題出現(xiàn)普通狀態(tài)與極限狀態(tài)；如下圖2，上傳文件的不同狀態(tài)給出相應(yīng)的文案提示并解釋說明。

5. 交互說明的排版布局要有助于閱讀

交互說明有多種排版布局方式，比如原型圖內(nèi)容元素標上數(shù)字放置在上方，對應(yīng)的交互說明放置在原型圖下方。或者原型圖在左側(cè)，交互說明在右側(cè)，有的設(shè)計師也會把元素和對應(yīng)的交互說明用連接線連起來。

因為不同的排版布局方式各有利弊，所以具體采用哪種布局方式要根據(jù)所做項目的情況，以及開發(fā)人員的閱讀習慣而定。如下圖是我平時習慣的輸寫方式。

6. 頁面之間邏輯跳轉(zhuǎn)的關(guān)聯(lián)性需要交代清楚

比如點擊某個按鈕，跳轉(zhuǎn)到哪個頁面，可以在交互說明中寫清楚標號或頁面名稱。

7. 交互說明組件化

類似于設(shè)計的控件庫，我們在項目中寫交互說明寫多了就會發(fā)現(xiàn)，既然元素可以調(diào)用控件庫快捷使用，那么該元素的交互說明也可以歸類入庫，在需要的時候直接拿出來根據(jù)具體情況調(diào)整使用。

比如上面提到的“Banner圖交互說明”，就可以保存一份在交互說明庫中，等后續(xù)畫原型圖再需要時，直接調(diào)取出來根據(jù)情況微調(diào)即可。這樣做的目的：使用時快捷調(diào)用，修改時快捷修改。

8. 頁面交互說明建議平鋪直述，不建議使用動態(tài)效果

原型圖的動態(tài)效果適合頁面跳轉(zhuǎn)的演示，但不利于交互說明的呈現(xiàn)，會給視覺設(shè)計師和開發(fā)造成閱讀困擾。

9. 交互說明應(yīng)該依據(jù)具體情況不斷調(diào)整完善

如果業(yè)務(wù)和產(chǎn)品臨時調(diào)整需求，或者交互評審后需要對原型稿進行修改，則交互說明也要進行相應(yīng)的修改。另外項目在進展過程中如果發(fā)現(xiàn)交互說明有遺漏現(xiàn)象，則需要隨時補充完善。

微觀層面

單張原型圖交互說明的具體內(nèi)容，其實和交互自查表的內(nèi)容是相關(guān)聯(lián)的。可能包含：特殊場景、操作與反饋、頁面狀態(tài)、數(shù)值限制條件、功能、流程、文案、動效、控件、彈框等。這塊后續(xù)梳理了再給大家分享。

總結(jié)

以上是生活随笔為你收集整理的根据图片原型写一个html页面,原型图的交互说明该怎么写？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。