在我們提交的文檔中，如果細節(jié)做得好，能提高工作效率，讓團隊配合更默契。本文就分享了交互說明文檔中可以注意的一些細節(jié)，供大家參考。

互聯(lián)網(wǎng)講究快速迭代，通常設計改動的地方也不是特別多，我也能得心應手的處理好。

之前經(jīng)歷了一次不能拆分的復雜功能改版，從產(chǎn)品設計到開發(fā)上線全面翻車，蘋果市場卡了 1 個月才通過審核。項目結(jié)束之后團隊坐在一起復盤，除了協(xié)作流程的問題，也有交互說明文檔在復雜項目中寫得不夠清晰的原因。

基于此，我重新制定了新的交互說明文檔格式，目前在團隊內(nèi)使用正常，在此分享給各位讀者。

一、界面和交互說明左右布局

以前我們界面和說明擺放位置是參考的大廠的文檔，上方為界面，下方為對應的說明。

開發(fā)測試同事和我們反饋，因為每個頁面的界面都是左右擺放，所以他們習慣用橫向滾動條查看同頁面屏幕外的內(nèi)容，根本不會注意豎向滾動條，放在界面下方的說明如果超出屏幕高度根本注意不到。

由于前端/客戶端開發(fā)同事習慣了 zeplin 等切圖標注軟件左界面右邊對應參數(shù)的布局，希望我將界面和交互說明左右布局。

UI 切圖標注軟件界面

另外，要在交互說明找到界面對應標記的文字很累。

基于以上反饋，我將界面和交互說明改為左右布局，并將交互說明按元素拆分，界面標記和交互說明左右一一對應。

二、更清晰的交互說明

1. 交互說明專有名詞標點符號規(guī)范

交互說明里經(jīng)常提到某個頁面、某個按鈕等元素，一旦提到的元素很多，混在說明文字里看起來就特別累。因此我參考了 @叫我vitamin 的《產(chǎn)品文檔中，特殊標點符號的使用建議》，對說明中提到的各種術(shù)語進行規(guī)范：

• 當描述的內(nèi)容包含某個菜單頁面的時候，建議使用「」（Mac默認輸入法中文情況下shitf+{}可以打出這個符號，第三方輸入法設置下也可以打出來）或者“”，后面增加名詞修飾。
• 當描述的內(nèi)容包含了某個頁面下的 Tab 信息或狀態(tài)的時候，建議使用「」或者“”，后面增加名詞修飾。
• 當描述的內(nèi)容包含某個新增的字段的時候，建議使用 反引號（‘code’）來表示。
• 當描述的內(nèi)容中需要點擊某個按鈕或者使用某個功能的時候，建議使用【】來表示，不建議使用「」是怕直角引號太多，代表的含義太雜引起閱讀負擔。

舉例：先打開用藥助手的「會員購買頁」，然后點擊“專業(yè)版購買”tab，選擇對應的價格，點擊【支付并購買】。需要新增‘次月30月’字段。

2. 交互說明分類

光用對標點符號還不夠，同事將交互說明進行分類，不同的內(nèi)容寫到不同的分類下，這樣更清晰。

3. 交互說明可視化

即使長段文字寫得再清晰，也沒有人樂意去看。圖像和視頻是更吸引人、更容易理解的方式，因此我將一些涉及到邏輯判斷的交互說明由文字改成流程圖。

對于表單這種形式，每次都必須寫輸入框占位符、軟鍵盤類型這些，提交按鈕也肯定涉及到字段不對的判斷，其實這些很重復，也會導致說明文字寫得特別長。因此我將此規(guī)范成 2 個表格，寫的人和看的人都輕松了不少。

推薦大家多看看說明文字里格式重復部分，合理運用圖示和表格效果非常顯著。

三、頁面拆分規(guī)則

為了需求拆分評估工期和調(diào)整需求（開發(fā)砍需求）方便，盡可能地把頁面拆細一些。這樣突然要調(diào)整需求，直接隱藏部分頁面就可以了，都不用改。

基于以往經(jīng)驗，為了讓交互稿看著更清晰，原則上每個頁面盡量不超過 6 個界面，界面只能一個橫排展示，禁止多行。

拆分規(guī)則可參考如下：

將不同的界面拆成不同的頁面：適用于界面本身有很多狀態(tài)，說明非常多的情況。

將不同的流程拆成不同的頁面：適用于流程很長，或有多個分支的情況。

將一個界面的不同模塊拆成不同的頁面：適用于單界面非常大或者復雜，或者說明界面之前需要有個總體說明的情況。

四、高對比度的界面灰度顏色

原諒我視覺和顏色能力很差，畫出來的線框圖不好看，也顯得不清晰。在灰度線框圖中，色塊的明暗對比度是傳達信息層級最重要的方式。

比如下圖：綠色按鈕的狀態(tài)是非常明確的，然而去色之后，灰色按鈕看起來就不像“最高層級”的元素了，甚至有種被“置灰禁用”的感覺。

為此，我找到一位視覺和交互都很厲害的美女設計師（已婚，你們不要想了）。她通過研究 Web 內(nèi)容無障礙設計指南，計算最佳對比度，得出一套交互說明文檔配色規(guī)范。

該規(guī)范能：

1. 滿足字體、按鈕、標簽、分區(qū)這四項最常見內(nèi)容的配色需求，并能擴展到其他常用組件；
2. 對比度足夠明晰易讀，但又不至于強烈到刺眼；
3. 取色呈現(xiàn)梯度，能夠支持多個信息層級；
4. 選取的色值不要太多，便于后期維護。

規(guī)范如下：

經(jīng)過這套規(guī)范，線框圖的配色層級清晰多了！

五、更新記錄帶鏈接

評審之后，在修改和新增的地方打上「新」「改」和日期的標記，如果修改的地方很重要，可把顏色變色或加粗提醒大家注意。

Axure 小技巧：按住頁面名稱并拖動到頁面里，能生成一個帶鏈接的方塊，方便開發(fā)和測試點擊方塊直接跳轉(zhuǎn)到對應的頁面。

六、后記

這套規(guī)范后來得到了開發(fā)老大的表揚。我們設計師致力于為用戶提供更好的體驗，其實對于交互說明文檔而言，用戶就是開發(fā)和測試同事??！當然這套規(guī)范也要學習互聯(lián)網(wǎng)產(chǎn)品，后續(xù)根據(jù)反饋持續(xù)進行迭代優(yōu)化。