在檢查交互文檔的時(shí)候，我有句口頭禪是：“這交互稿畫得太丑了?！甭牭竭@句話的小朋友，有些回了句“哦…”，有些則會(huì)問“交互稿也要考慮美么，交互稿不是邏輯ok就行了么”，臉上是不甚理解的。

交互文檔也要考慮美

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

1. 交互原則里有一個(gè)“美觀即實(shí)用法則”，人會(huì)潛意識(shí)里認(rèn)為好看的東西也是好用的。所以，不要因?yàn)槟愕姆桨缚瓷先コ蠖绊懥松霞?jí)對(duì)你方案的判斷；
2. 我們同樣也會(huì)認(rèn)為一個(gè)能產(chǎn)出美觀交互文檔的交互設(shè)計(jì)師是專業(yè)的、值得信賴的（這個(gè)好處就不用說了吧）；
3. 自己在其他方面的能力（比如邏輯思維、創(chuàng)意）并沒有出色到能蓋過自己在表現(xiàn)層上的缺點(diǎn)；
4. 更高的層面，交互文檔也是給人用的，也應(yīng)該注重用戶體驗(yàn)。

不過，對(duì)交互文檔“美”的定義，還和視覺不太一樣。一份美的交互文檔，應(yīng)該是美觀、清晰、易于使用的，它更偏向于一種邏輯美。

交互文檔的內(nèi)容

所以，一份好的交互文檔都應(yīng)包含哪些內(nèi)容，注意哪些方面呢？以下內(nèi)容來自于導(dǎo)師的經(jīng)驗(yàn)傳承，來自于工作中同事的建議反饋，以及自己的經(jīng)驗(yàn)。

1、媒介

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

PPT和PDF的好處是看上去正式、漂亮，同時(shí)因?yàn)槊恳豁?yè)的畫布尺寸是固定的，不容易看漏東西。但缺點(diǎn)也是明顯的，一張PPT沒放幾個(gè)界面就滿了，感覺不自由。而且對(duì)于動(dòng)輒幾十上百頁(yè)的交互文檔，缺乏索引。所以，我還是推薦帶側(cè)邊索引，畫布空間不受限的HTML格式。

2、標(biāo)識(shí)說明

放在文檔第一頁(yè)。

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

3、修訂記錄

放在文檔第二頁(yè)。

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

4、頁(yè)面標(biāo)題

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

5、對(duì)齊

對(duì)齊讓文檔可讀性更好。

單個(gè)界面之中元素的對(duì)齊、界面和界面之間的對(duì)齊，頁(yè)面上任何東西都是應(yīng)該能找到對(duì)齊點(diǎn)的。

你的注釋的對(duì)齊了嗎？當(dāng)年我的導(dǎo)師指出我交互稿里的注釋沒對(duì)齊這一點(diǎn)時(shí)，恍然大悟：這都是細(xì)節(jié)啊！

右邊注釋對(duì)齊后，可讀性更好

6、UI：顏色、線條、留白

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

否則顏色和視覺稿不一致，測(cè)試會(huì)來問到底用哪種。

（2）灰色會(huì)讓交互稿看上去更精致。

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

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

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

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

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

講到這里，有人會(huì)問，交互把時(shí)間浪費(fèi)在這種視覺層面的事上有用么？

我倒覺得這是設(shè)計(jì)常識(shí)，或者你有沒有意愿提高自己在這方面的能力。若有，則隨手一畫就是如上圖右邊的界面，何談浪費(fèi)時(shí)間。你永遠(yuǎn)無法預(yù)測(cè)一種技能在未來會(huì)派上什么用場(chǎng)。

當(dāng)然，如果你會(huì)用交互組件庫(kù)（回復(fù)交互組件庫(kù)可查看文章），也會(huì)省很多時(shí)間。

7、熱區(qū)

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

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

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

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

透明度疊加法

顏色區(qū)分法

重復(fù)羅列法

8、圖片

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

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

說到占位符，視覺有話說：“每次交互隨手拉一個(gè)圖片占位符，我都要冥想好久?！?/p>

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

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

9、流程圖

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

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

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

界面流程也同樣應(yīng)該做到主線和分支清晰。

流程之間不要隔太多空白，不然開發(fā)會(huì)誤以為這個(gè)頁(yè)面的交互到此為止。

可以在頁(yè)面邊緣拉一條輔助線，線沒到頭就說明后面還有內(nèi)容。單個(gè)界面尺寸不要設(shè)太大，建議等比例縮放。否則一屏之內(nèi)顯示不了幾個(gè)界面，瀏覽效率太低。

10、注釋

注釋要簡(jiǎn)潔、明確。

從表現(xiàn)形式上分兩種。一種是注釋和UI離得較遠(yuǎn)，自成一體，用數(shù)字標(biāo)一一對(duì)應(yīng)。

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

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

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

11、側(cè)邊索引

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

（1）合理表現(xiàn)層級(jí)關(guān)系

正確的表現(xiàn)功能從屬關(guān)系，增強(qiáng)側(cè)邊導(dǎo)航可讀性。

（2）合理命名每個(gè)頁(yè)面

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

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

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

（3）合理拆分頁(yè)面

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

記得自己剛工作的時(shí)候做注冊(cè)登錄的交互。點(diǎn)擊手機(jī)號(hào)注冊(cè)會(huì)分好幾種情況，我全都畫在了一個(gè)頁(yè)面上。等到交互評(píng)審時(shí)，當(dāng)我拿著這張巨型流程圖”斗轉(zhuǎn)星移”地講解時(shí)，臺(tái)下人直接看暈了。后來，我就學(xué)會(huì)了拆分頁(yè)面。

（4）合理共用頁(yè)面

做積分商城時(shí)，一開始，我在所有類型的商品頁(yè)都加了支付的交互。然后發(fā)現(xiàn)支付流程是個(gè)坑，里面的不確定因素太多，一改就是所有相關(guān)頁(yè)面都要改一遍，容易出錯(cuò)。最后，我就將所有商品頁(yè)的支付流程都刪掉，改成統(tǒng)一鏈接到另外一個(gè)專門講支付流程的頁(yè)面。這樣遇到改動(dòng)只要改這一個(gè)頁(yè)面即可。

（5）避免側(cè)邊索引過長(zhǎng)

做windows phone的時(shí)候，因?yàn)橐淮涡砸鰟e的平臺(tái)迭代了近兩年的全部功能，交互文檔的側(cè)邊索引就像萬里長(zhǎng)城一樣，找一個(gè)功能要找好久。

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

結(jié)語

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

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

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

#專欄作家#

作者：俞靜，微信公眾號(hào)【聽音樂做設(shè)計(jì)】。人人都是產(chǎn)品經(jīng)理專欄作家，網(wǎng)易云音樂交互負(fù)責(zé)人。關(guān)注社交、工具類產(chǎn)品，交互設(shè)計(jì)和用戶體驗(yàn)踐行者。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。