在項目開發中，交互文檔是其中的一個重要組成部分，在互聯網發展進程加速的過程中，統一規范的交互文檔能夠提高團隊的辦公效率。但很多交互文檔的寫法五花八門，普適性不強。作者結合實戰案例，分享了遵從基礎的規范細節且適合團隊人員閱讀的交互文檔。

交互文檔是項目開發中一個很重要的組成部分，在互聯網飛速發展迭代的產品開發過程中，統一且規范的交互文檔撰寫模式讓團隊運作效率更高。交互文檔寫的好與不好本身其實沒有絕對的統一標準，也不要認為大公司的文檔就是最好的。

以前也在網上學習了很多大公司交互文檔的寫法，都是五花八門的，而且每個公司的項目規模不一樣、人員對文檔的閱讀習慣不一樣，所以一昧地照搬模仿只會收效甚微，而遵從基礎的規范細節且適合團隊人員閱讀的交互文檔才是最有效率的！

1. 交互文檔的價值
2. 交互文檔的組成
3. 交互文檔的規范和撰寫

這篇文章關于交互文檔撰寫以“蘇寧智慧屏項目”為實戰案例進行講解，經優化迭代之后得到的項目總結和思考，僅供參考。

一、交互文檔的價值

交互文檔的主要使用人員是交互設計師和界面設計師、產品經理、開發工作人員（前后端工程師，測試專員）。

蘇寧智能終端智慧屏是復雜的系統級業務，項目人員配置都是一個籮卜一個坑，以保證開發的每個環節都能精益求精。不過在UED內部，視覺設計和交互設計的職責是比較重疊的，所以基本一個設計師會單獨負責整個模塊的交互和視覺工作。

這樣對產品的創新延展也會有很大幫助，基本交互文檔的存在不會影響設計的發揮。雙重身份的加持可以讓設計和交互并行。直接針對已立項的需求進行設計思考。

交互文檔是在ued內部進行制定評審后形成一個基礎的框架，這里的交互文檔規范必須要嚴謹，把控細節，考慮全面。組織各部門協同討論交互文檔初稿，提出改進意見后并整理同步給相關人員，并做一份交互文檔說明供以后新來的同事做參考和學習。

不同的公司對于文檔的要求都會有差異，小公司可能沒有專門的交互崗位，基本上產品經理會通過合并需求和交互文檔會作為項目的唯一一份文檔，但產品經理不是專業的交互設計師，他們可以講清楚業務的規則和邏輯，但很多細節還是需要設計師來優化設計。

交互文檔閱讀的舒適度，信息完整度等也會影響到技術人員的開發心情。經常在評審的過程中會遇到到技術人員提出的各種問題，有抱怨需求的，有抱怨文檔不規范的，有質疑專業度的。

所以交互文檔必須評審實時同步給技術人員以達成共識，在UED部門輸出的交互文檔的架構的基礎上去優化，采納各部門使用人員的意見，形成一份高效率且適合團隊的交互文檔格式。交互文檔的價值簡言之就是協調各部門之間溝通的工具。能提高大家工作效率的工具自然是最合適的。

二、交互文檔的組成

交互文檔的組成部分不一定要很全，但需要挑選重點內容，表達得當，就可以最大程度的發揮交互文檔的價值。

如果真的把組成部分都寫全，那閱讀的人看起來也非常吃力，蘇寧智慧屏項目交互文檔的基礎組成分為：需求描述和業務目標、設計目標、調研分析、流程圖（業務、任務、界面），設計方案、交互規則說明、版本說明、全局的設計規范（這部分在交互設計文檔1.0的時候就會完善，之后的版本寫相關功能的交互規范說明時，遇到類似描述不會做過多帶入，除特殊場景，或交互方式有重新定義，那么會補充到此版本和全局規范當中）。

注意：并不是每一個功能都要對應這些組成，通常優先級比較高的需求盡量會有全而多的組成部分。對應的小需求可簡略分析說明對應文案、跳轉即可。（以“詳情頁訂閱功能”為例，因為這個功能優先級比較高，業務關聯比較多，所以這個功能的交互組成會比較全）。

1. 版本說明

2. 需求描述和業務目標

3. 設計目標與策略

1. 主推TV登錄訂閱，移動端關注公眾號訂閱；
2. 優化登錄關注流程，云鉆激勵連續兩次掃碼；
3. 再次使用時無需重復關注。

4. 調研分析

競品分析方式用“詳情頁改版設計”為例作簡要說明。

1）改版背景

小窗播放詳情頁承載很多視頻的重要信息內容（視頻名稱，視頻基礎信息、基礎功能、運營活動，會員購買，選集等），在蘇寧智慧屏低端機上需要精細化設計布局，剔除冗余的設計信息，提升視覺效果和信息層次，高端機需要使用沉浸式設計方式提升用戶體驗和視覺觀感。（下圖為Biu os4.3版本詳情頁）

2）改版立項

在蘇寧的實際項目工作中，設計師可以參與需求和設計改版的討論，并由設計部門發起需求立項，因為UED設計部們的小伙伴會在版本上線以后，會去做很多次的設計體驗測試，去發現一些設計、功能、體驗等問題。

總結歸納之后，會針對具體的問題思考后續的設計優化，設計與產品相沖突的部分會提前和產品溝通協調后決定是否可以由UED設計部發起改版立項并跟進。

3）改版原因

改版原因可分為以下幾點：實際上線數據以及用戶調研、產品測試反饋；

1. 存在問題：詳情頁頁面對于用戶讀取信息的體驗不好，線上數據反饋用戶頁面停留時間短，會員購買及續費轉化率比較低。
2. 改版重要性：好的詳情頁設計不光只是為了提升用戶體驗，同時也能夠讓設計賦能產品的商業價值，增加產品收入。
3. 改版結論：需要通過對詳情頁的設計改版，提升用戶體驗和會員購買效率。

4）改版調研

用戶調研通過內部和外部用戶的用戶調研，我們歸納了用戶主要的痛點如下：

• 關于導演演員的信息介紹的內容權重過高；
• 需要增加視頻關鍵詞標簽和熱劇排行，引導用戶資源內容選擇 ；
• 主要功能點層次分散，設計整體太普通，功能區視覺沒有識別性。

競品分析：

通過競品分析，去觀察競品是如何優化詳情頁設計，參考競品：騰訊、優酷、愛奇藝、小米進行調研。（下圖為詳情頁頁面競品分析比較）

5）改版推進

這個改版需求是智慧屏系統設計的冰山一角，但僅僅這個需求就有很多的問題點需要設計師去反復思考，分析，出方案，評審到最終跟進落地，同時改版需要結合項目資源判斷是否適合做優化迭代，設計改版時，如果改動使功能和交互有沖突，導致了前后端數據架構的調整，也會增加開發成本。

所以在立項之前需要結合數據、用戶反饋和競品分析、優化方案等，準備充分，這樣評審的時候才能夠有機會說服技術人員對改版意見保持一致，然后再去具體細化。（下圖為Biu os5.2版本詳情頁）

5. 流程圖（業務、任務、界面）

業務流程是由產品經理或高級交互設計師通過泳道圖繪制，交互文檔的主要流程圖就是任務流程圖，頁面流程圖主要是為了去呈現頁面跳轉，此部分通過頁面交互說明來描述。

6. 設計方案

• 主推登錄TV訂閱提醒，關注公眾號微信提醒，掃碼登錄的彈框與關注的彈框頁面結構保持一致，讓用戶連貫的完成任務；
• 為了激勵用戶掃碼登錄和關注，提醒送云鉆的獎勵；
• 關注成功TV端需要toast提示，按鈕有明確的文案提示；
• 移動端提醒消息要有明確的影片名稱提示；
• 對一些誤操作沒有進行微信關注的用戶提供統一的關注入口。

7. 交互規則說明

業務規則、數據規則、適配規則、文案說明、交互說明等。

8. 全局的規范

智慧屏的全局規范包括用戶權限、交互流程、登錄方式、系統模式選擇、內容（圖片比例、文字選擇），運營位使用規范、交互的組件、交互狀態的反饋和提示（無網絡、物理斷網）、加載，蘇寧智慧屏規范制定時單獨將這些內容從交互文檔里面剝離出來，整理出另外兩份文檔：交互設計規范和運營使用規范文件。

三、交互文檔的撰寫和規范

界面和設計說明的布局、交互說明規范化、頁面目錄拆分規則、交互原型稿設計、交互說明的優化。

1. 界面和設計說明的布局

說明布局遵循左邊為頁面，右邊為文字描述的方式。而且每一橫行只展示一個頁面，新頁面另起一行。撰寫交互文檔的軟件為axure，最終是需要將文件導成網頁htnl格式，方便技術人員使用瀏覽器查看。網頁瀏覽是通過鼠標縱向滾動來查看內容，上下滾動瀏覽符合操作習慣。

2. 交互文檔元素對應規則

首先進入一個界面，可以講頁面進行模塊化一個個拆分，利用英文字母或者數字和內容進行對應，蘇寧智慧平項目中采用和字母和熟悉相結合的方案去標記頁面和元素，比如（字母A對應一張頁面，A-1對應頁面中的某一個模塊，模塊可以由自己去定義，可以是信息或者功能。

3. 交互文檔名詞標點符號規則

此處參考了《產品文檔中，特殊標點符號的使用建議》。

頁面當描述的內容包含某個菜單頁面的時候，建議使用「」或者“”，后面增加名詞修飾。

Tab欄或狀態：當描述的內容包含了某個頁面下的Tab信息或狀態的時候，建議使用「」或者“”，后面增加名詞修飾。

字段或者行內代碼：當描述的內容包含某個新增的字段的時候，建議使用 反引號（`code`）來表示。

按鈕或者功能：當描述的內容中需要點擊某個按鈕或者使用某個功能的時候，建議使用【】來表示，不建議使用「」是怕直角引號太多，代表的含義太雜引起閱讀負擔。

智能終端舉例：我的會員權益模塊

先打開「會員權益頁」，然后落焦“Biu教育”會員tab，選擇對應的會員類型，落焦按【確認】鍵。由于確認購買完成之后，返回此頁面，按鈕狀態會變為續約。需要新增‘續約’字段。

4. 交互說明分類

交互文檔內容分類主要為：規則說明（業務規則、數據規則、適配規則、文案說明）、操作反饋、評審備注作為后續功能交互文檔的細節補充。

分類說明除了文字表述之外，還可以建立表格式的展示方式，針對不同的功能說明可以合理使用，如下圖詳情頁的功能文案規則和操作說明使用表格的方式替代文字表述，清晰明了。

5. 頁面目錄拆分規則

每個模塊頁面最多不要超多6個。

• 如果一個界面中有多個功能，可另起一行作為子頁面說明每一個功能；子頁面下有如果很多狀態頁面，可再另起一行放置；
• 如果一個界面有多個內容類型，可在同一級頁面下增加一個頁面；
• 如果一個功能，有多個業務流程，可拆解成多個頁面。

6. 交互原型稿設計

移動端習慣使用黑白灰的填充色塊去做交互設計原型稿，顏色取值深度、中度、淺度三種來保持原型頁面的色彩平衡，智慧屏選取的是線框加色塊的處理樣式，因為智能屏尺寸相對較大，信息承載更多，選用線框樣式更為簡單，所以不管什么樣的形式，適合團隊的才是最好的。

7. 交互說明的優化

交互評審時，需要高度保持注意力去記錄技術人員關于功能的一些細節的問題，作為后續交互文檔的補充，對于業務和交互的一些規則在評審時需要幾下更改的點，所以我們在評審后會進行完善修改，更改后用“紅色文字”做標記。（見交互說明分類配圖）

總結

以上就是我想和大家分享的關于交互文檔撰寫的相關內容，項目的本質除了考慮商業價值和用戶體驗之外，還要去節省人力和時間成本，提升開發效率。能讓項目有效率的推進的東西肯定是有價值的。所以多思考，多理解，多認真的去傾聽項目組人員的反饋，精雕細琢去做一份契合自己團隊的交互文檔吧！

注釋：項目版權歸屬蘇寧智能終端有限公司