巨集觀角度：原型圖的互動說明該怎麼寫
原型圖的互動說明是針對原型圖內容元素的解釋文字，可以從巨集觀和微觀兩個層面展開分析，本文結合圖例主要說明巨集觀角度輸出互動說明應該注意的地方。
原型圖的互動說明是針對原型圖內容元素的解釋文字。
清晰準確的互動說明能夠起到以下作用：
- 減少互動設計師與產品上下游人員的溝通成本
- 提升協作效率
- 避免專案返工延期
原型圖互動說明的輸出，可以從巨集觀和微觀兩個層面展開分析。
巨集觀角度是指輸出互動說明應該注意的事項，以及應用元件化思維提升輸出互動說明的效率。微觀角度是指單張原型圖應該包含的互動說明的具體內容。
本文結合圖例主要說明巨集觀角度輸出互動說明應該注意的地方。
巨集觀層面
1. 互動說明的文字要簡短精煉
這裡有個坑大家注意。
估計很多互動設計師和我一樣在實際專案中有這樣的困惑：產品需求文件裡的功能點邏輯描述已經相當全面，還有必要再次寫到原型圖的互動說明裡嗎？
這裡我們需要明確：只要在互動說明裡把有關互動的主場景和各種狀態作簡要描述即可，開發人員如果有困惑會仔細檢視PRD的。
如上圖是PRD中關於Banner功能的描述，那麼在互動說明中只需要提取出以下幾點：
- 使用者點選Banner圖跳轉至對應頁面；
- Banner圖少於2張時，不進行自動輪播，也不展示翻頁點；
- Banner圖大於等於2張時，進行自動輪播，且展示對應圖片數量的翻頁點；
- Banner圖最小張數為1，最大張數為5；
- 使用者可左右滑動切換Banner圖片，同時Banner每隔5秒自動輪播無限迴圈。
2. 頁面元素的互動說明
頁面元素的互動說明主要由以下模組構成：元素基礎設定、互動動作、跳轉邏輯、限定極限值、狀態及狀態之間轉換的描述。
如下圖，仍然以上面的Banner功能點舉例說明：
3. 頁面內容儘量使用符合邏輯的真實資料
避免使用XX符號或者無關聯的資料替代，這樣寫出的互動說明貼近真實場景，容易產生代入感，使閱讀者清楚明確。
如下圖，搜尋預設詞、導航tab切、以及內容文案都給的是上線後的真實資料。
4. 互動說明考慮內容元素的特殊狀態
包括極限值/錯誤提示/判斷規則等，要在互動說明中明確指出。
如下圖1，同一個頁面中標題出現普通狀態與極限狀態；如下圖2，上傳檔案的不同狀態給出相應的文案提示並解釋說明。
5. 互動說明的排版佈局要有助於閱讀
互動說明有多種排版佈局方式。
比如：原型圖內容元素標上數字放置在上方，對應的互動說明放置在原型圖下方；或者原型圖在左側，互動說明在右側，有的設計師也會把元素和對應的互動說明用連線線連起來。
因為不同的排版佈局方式各有利弊，所以具體採用哪種佈局方式要根據所做專案的情況，以及開發人員的閱讀習慣而定。
如下圖是我平時習慣的輸寫方式：
6. 頁面之間邏輯跳轉的關聯性需要交代清楚
比如點選某個按鈕，跳轉到哪個頁面，可以在互動說明中寫清楚標號或頁面名稱。
7. 互動說明元件化
類似於設計的控制元件庫，我們在專案中寫互動說明寫多了就會發現，既然元素可以呼叫控制元件庫快捷使用，那麼該元素的互動說明也可以歸類入庫，在需要的時候直接拿出來根據具體情況調整使用。
比如上面提到的“Banner圖互動說明”，就可以儲存一份在互動說明庫中，等後續畫原型圖再需要時，直接調取出來根據情況微調即可。
這樣做的目的：使用時快捷呼叫，修改時快捷修改。
8. 頁面互動說明建議平鋪直述，不建議使用動態效果
原型圖的動態效果適合頁面跳轉的演示，但不利於互動說明的呈現，會給視覺設計師和開發造成閱讀困擾。
9. 互動說明應該依據具體情況不斷調整完善
如果業務和產品臨時調整需求，或者互動評審後需要對原型稿進行修改，則互動說明也要進行相應的修改。
另外，專案在進展過程中如果發現互動說明有遺漏現象，則需要隨時補充完善。
微觀層面
單張原型圖互動說明的具體內容，其實和互動自查表的內容是相關聯的。
可能包含：特殊場景、操作與反饋、頁面狀態、數值限制條件、功能、流程、文案、動效、控制元件、彈框等。這塊後續梳理了再給大家分享。
作者：Viksea，微信公眾號：Viksea（ID：viksea-ux）