俞靜（網易云音樂交互設計師）：一份好的交互文檔都應包含哪些內容，注意哪些方面呢？今天這篇好文結合了作者的實戰(zhàn)經驗，同事的建議反饋和導師的經驗傳承，手把手教你打造一份美觀清晰易使用的交互文檔，強烈推薦收藏！

在檢查交互文檔的時候，我有句口頭禪是：“這交互稿畫得太丑了。”聽到這句話的小朋友，有些回了句“哦...”，有些則會問“交互稿也要考慮美么，交互稿不是邏輯OK就行了么”，臉上是不甚理解的。

哎...在當今這樣一個社會，作為一個設計師，不能靠臉吃飯已經很悲催了，有什么理由不讓自己的工作產出物更好看一點呢？說的是我自己。

為什么交互文檔也要考慮美，我覺得有以下幾點原因：

1. 交互原則里有一個“美觀即實用法則”，人會潛意識里認為好看的東西也是好用的。所以，不要因為你的方案看上去丑而影響了上級對你方案的判斷。

2. 我們同樣也會認為一個能產出美觀交互文檔的交互設計師是專業(yè)的、值得信賴的（這個好處就不用說了吧）。

3. 自己在其他方面的能力（比如邏輯思維、創(chuàng)意）并沒有出色到能蓋過自己在表現(xiàn)層上的缺點。

4. 更高的層面，交互文檔也是給人用的，也應該注重用戶體驗。

不過，對交互文檔“美”的定義，還和視覺不太一樣。

一份美的交互文檔，應該是美觀、清晰、易于使用的，它更偏向于一種邏輯美。

所以一份好的交互文檔都應包含哪些內容，注意哪些方面呢？

以下內容來自于導師的經驗傳承，來自于工作中同事的建議反饋，以及自己的經驗。

媒介

PPT、PDF、HTML...你用什么格式輸入你的交互文檔？

PPT和PDF的好處是看上去正式、漂亮，同時因為每一頁的畫布尺寸是固定的，不容易看漏東西。但缺點也是明顯的，一張PPT沒放幾個界面就滿了，感覺不自由。而且對于動輒幾十上百頁的交互文檔，缺乏索引。

所以我還是推薦帶側邊索引，畫布空間不受限的HTML格式。

標識說明

放在文檔第一頁。

對于初次接觸你的交互文檔的人來說，這樣一份說明有助于對方理解你的交互，尤其是一些非通用的標識。

修訂記錄

放在文檔第二頁。

寫明文檔的修訂者，方便開發(fā)找到對應的交互；列出文檔更新的具體日期（最近更新的排最前），給出被修改頁面的超鏈接，同時寫明具體修改的內容。

頁面標題

寫在每一頁的頂部。表明當前頁所述的功能是屬于哪個模塊的，這樣看的人不容易迷失。

對齊

對齊讓文檔可讀性更好。

單個界面之中元素的對齊、界面和界面之間的對齊，頁面上任何東西都是應該能找到對齊點的。

你的注釋的對齊了嗎？當年我的導師指出我交互稿里的注釋沒對齊這一點時，恍然大悟：這都是細節(jié)啊。右邊注釋對齊后，可讀性更好。

UI：顏色、線條、留白

1. 盡量做到黑白灰不帶彩色。

否則顏色和視覺稿不一致，測試會來問到底用哪種。

2. 灰色會讓交互稿看上去更精致。

避免使用黑色線條，盡量不要出現(xiàn)黑底白字。

看自己兩年前的交互文檔，雖然也是整齊的，但總有種說不出的復古

3. 用深淺不同的灰來表現(xiàn)層次和重點。

4. 合理留白，避免界面過擠或過空。

注意顏色、留白這些細節(jié)。

講到這里，有人會問，交互把時間浪費在這種視覺層面的事上有用么？

我倒覺得這是設計常識，或者你有沒有意愿提高自己在這方面的能力。若有，則隨手一畫就是如上圖右邊的界面，何談浪費時間。你永遠無法預測一種技能在未來會派上什么用場。

當然，如果你會用交互組件庫（如何打造一個方便高效的交互組件庫？），也會省很多時間。

熱區(qū)

標明熱區(qū)的范圍。

比如，為了圖省事，沒有標明右上角“關閉”的熱區(qū)范圍。然后開發(fā)就把熱區(qū)做成和X一樣的大小了。就有用戶來反饋這個X點不中。

正確的表現(xiàn)方法：

對于緊密相連的熱區(qū)，也有一些表現(xiàn)方法，能讓開發(fā)看得更清楚：

透明度疊加法

顏色區(qū)分法

重復羅列法

圖片

使用圖片時，要注意和背景融合，避免出現(xiàn)“剪貼畫”。

若暫沒有找到合適的圖標，寧可統(tǒng)一用占位符替代，輔以文字注釋。

說到占位符，視覺有話說：“每次交互隨手拉一個圖片占位符，我都要冥想好久。”

配圖，到底配什么圖好呢...

所以，若對圖片內容或風格有想法，不要吝嗇用各種形式在交互文檔中表現(xiàn)出來。

流程圖

主線和分支的走向要始終保持一致。

如下圖中紅框框出的，“是”和“否”在兩次判斷中的走向不一致，對看的人來說就不是很好的體驗。

正確的流程圖表現(xiàn)：

界面流程也同樣應該做到主線和分支清晰：

流程之間不要隔太多空白，不然開發(fā)會誤以為這個頁面的交互到此為止。可以在頁面邊緣拉一條輔助線，線沒到頭就說明后面還有內容。

單個界面尺寸不要設太大，建議等比例縮放。否則一屏之內顯示不了幾個界面，瀏覽效率太低。

注釋

注釋要簡潔、明確。

從表現(xiàn)形式上分兩種。一種是注釋和UI離得較遠，自成一體，用數(shù)字標一一對應。

國外有很多交互稿都是這么表現(xiàn)的。優(yōu)點是看上去非常規(guī)范，適合注釋密集的界面；缺點是開發(fā)的視線需要在界面上游走，找對應關系。

另外一種形式是注釋和UI用直接用一條引線相連。

如果注釋不是那么多，這種表現(xiàn)更為直觀。

側邊索引

側邊索引是交互文檔里的重中之重。它讓一個上百頁的交互文檔變得易于瀏覽和查找。

1. 合理表現(xiàn)層級關系

正確的表現(xiàn)功能從屬關系，增強側邊導航可讀性。

2. 合理命名每個頁面

頁面名稱也是有學問的，命名要做到邏輯清晰、表意全面。

舉個例子，看下面這組頁面命名，能一下子看出會員頁都有哪些狀態(tài)么？

如果這樣命名，是不是感覺更清楚一些？

3. 合理拆分頁面

理論上說，一個功能的所有流程都可以放在一個頁面上講。但是一個頁面上如果分支太多，就容易變成“蜘蛛網”。

記得自己剛工作的時候做注冊登錄的交互。點擊手機號注冊會分好幾種情況，我全都畫在了一個頁面上。等到交互評審時，當我拿著這張巨型流程圖"斗轉星移"地講解時，臺下人直接看暈了。

后來，我就學會了拆分頁面。

4. 合理共用頁面

做積分商城時，一開始，我在所有類型的商品頁都加了支付的交互。

然后發(fā)現(xiàn)支付流程是個坑，里面的不確定因素太多，一改就是所有相關頁面都要改一遍，容易出錯。

最后，我就將所有商品頁的支付流程都刪掉，改成統(tǒng)一鏈接到另外一個專門講支付流程的頁面。這樣遇到改動只要改這一個頁面即可。

5. 避免側邊索引過長

做Windows phone的時候，因為一次性要做別的平臺迭代了近兩年的全部功能，交互文檔的側邊索引就像萬里長城一樣，找一個功能要找好久。

后來做Windows 10的時候，就把交互文檔按大的功能模塊拆分了，這樣每一份文檔的頁面數(shù)量就適中了。

結語

做到以上這些點，其實并不難，難的是始終如一，變成習慣。有時候一忙、一偷懶，在細節(jié)上馬虎了，就徒增很多溝通成本。最后麻煩的還是自己。

交互文檔，形式上夠用就好，不必過于追求。畢竟頻繁的時候一天要更新好幾次，在文檔體驗和工作效率之間取得平衡吧。

如何才能讓看交互文檔的人有更好的體驗？如何更加正確清楚地傳達自己的設計？把交互文檔當做自己的一個產品看待，每次感到不方便的時候，想想怎么改進，聽取用戶反饋，迭代優(yōu)化。這也是提升自己的設計能力。

歡迎關注作者（網易云音樂交互設計組微信公眾號：聽音樂做設計）

「專門給視覺設計師的干貨」

騰訊設計師的進階建議，超實用！
《17條經驗之談！視覺設計師如何進階提升自己能力》

如何讓視覺效果實現(xiàn)99.9%的還原度？
《實用干貨！視覺設計師如何讓設計效果高還原度落地？》

提高效率才有時間進步呀！
《秒變設計快刀手！10個幫設計師提高效率的經驗分享》

【優(yōu)設網 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網================
"優(yōu)設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com