做好這個交互文檔細節(jié)，讓你和工程師的合作效率提高50%

怎樣的交互設(shè)計才算清晰完整，下面是從實際項目中總結(jié)出來的一些經(jīng)驗，分享給大家，共同學習進步。

產(chǎn)品交互設(shè)計稿和研發(fā)結(jié)果不一致

從畢業(yè)到工作，作為一名交互設(shè)計師，經(jīng)手的項目也不算少數(shù)了，時間久了，會發(fā)現(xiàn)一個問題：無論設(shè)計書中的內(nèi)容架構(gòu)多么清晰，理論多么詳細，我們在實際的項目中還是無法做出完美的產(chǎn)品設(shè)計，還是會容易忽略一些問題。這讓我想到了我們念書時，雖然教科書上的知識我們都學習了，老師也給劃重點了，但是考試的時候，也不會全是滿分。在學校的時候，我們會整理錯題集，把錯題的原因和需要注意的知識點記錄下來便于后期復(fù)習。同樣，今天我也把自己在實際工作中遇到的一些問題整理出來，和大家一起學習進步。

讓研發(fā)工程師苦惱的交互設(shè)計文檔

產(chǎn)品需求：用戶可以將文件重命名。

交互設(shè)計第一版：

iOS研發(fā)工程師看了設(shè)計稿后，QQ發(fā)來信息：

• 研發(fā)工程師A：從一個文件點擊重命名進來，是否保留原來的文件名字還是自動清空？
• 研發(fā)工程師B：支持的字符數(shù)有限制嗎？

Android研發(fā)工程師看了設(shè)計稿后，微信發(fā)來信息：

• 研發(fā)工程師A：文件名稱可以是空的嗎？
• 研發(fā)工程師B：是否支持特殊符號？
• 研發(fā)工程師C：特殊符號有哪些啊？

為什么會遇到這樣的問題？

分析原因：交互設(shè)計文檔只給出了一種情況，就是重命名文件的過程中。但是沒有給出重命名文件的初始前，空值、極值、默認值和異常狀態(tài)是什么樣子。

研發(fā)人員在編寫程序的時候會遇到以上問題的，但是交互設(shè)計文檔上沒有說明，所以他們當然要追問了。追問的研發(fā)工程師其實還算好的工程師，有些研發(fā)人員遇到交互設(shè)計文檔中沒有標注的情況會按照自己的想法做，這樣就會導(dǎo)致同一份設(shè)計文檔，iOS和Android會研發(fā)出兩種不同的交互方式。

有時候交互設(shè)計師在做設(shè)計的時候，腦子里會想到這個動作的開始，過程和結(jié)束，但是沒有落實到紙上。以為研發(fā)工程師也會和你有同樣的解決方案，但是萬萬沒想到，研發(fā)做出來的效果是截然不同的。

不同的職業(yè)，背景不同，思考問題的思維也不同，所以如果想讓對方和你有同樣的想法，最好的方式就是把你的想法說清楚，說詳細，越詳細越好。

解決問題

分析了原因之后，我們就要想辦法解決問題。細化交互設(shè)計，把異常情況和動作的開始及結(jié)束會遇到的各種狀態(tài)都詳細的說明出來，保證產(chǎn)品設(shè)計的一致性。這樣無論是哪位研發(fā)工程師，拿到交互設(shè)計文檔之后，都會做出同樣的產(chǎn)品，這樣用戶的體驗就有保證了。

補充后的設(shè)計文檔如下：

怎樣才能考慮周全

那么問題來了，有一些剛接觸交互設(shè)計的朋友會問：我也知道交互設(shè)計文檔需要細化，但是有時候不清楚需要細化哪些地方。產(chǎn)品經(jīng)理在給需求的時候也沒有給的那么詳細，有時候一個需求僅僅就是一句話。說到這里，可以分享給大家一個方法，我在做設(shè)計的時候是這樣用的，而且效果還不錯。

拿到需求后，我們通常會想到最常見的情況，那就先把這個常見的情況畫出來，然后心里暗示自己，「應(yīng)該還有其他情況」，「總感覺好像少點什么」，然后就轉(zhuǎn)變自己身份為「測試」，給自己的設(shè)計提問題：

• 是否有空值情況，如果有怎樣處理？
• 是否有默認值，默認值是什么？
• 功能是否有范圍？如果有，最大值和最小值是什么？如果超過了此范圍應(yīng)該怎樣處理？
• 這個操作的上一步是什么？它是怎么過來的？
• 這個操作的下一步是什么？還有其他情況嗎？
• ......

我們再來看一個類似的功能設(shè)計，需求是用戶可以自定義房間名稱，用上面的方法設(shè)計后，文檔內(nèi)容如下：

按照以上的方法訓(xùn)練自己，不出很長時間就會設(shè)計出很標準的交互設(shè)計文檔。。當UI設(shè)計師、研發(fā)工程師、測試拿到你做的交互設(shè)計文檔后，也會被你的專業(yè)震撼到的。平時工作中就注重細節(jié)，規(guī)范設(shè)計文檔，這樣到了你想跳槽的時候也不會花太多時間和精力準備作品集，機會總是留給有準備的人。

「新人要知道的交互文檔」

• 《超全面！教你打造美觀清晰易使用的交互文檔》
• 《專業(yè)的交互輸出文檔應(yīng)該怎么寫？高級設(shè)計師來教你！》
• 《專業(yè)干貨！如何寫一份全面易讀的交互說明文檔？》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備： http://hao.uisdc.com