作為一名交互設計師，在輸出交互稿件之時，要考慮的不僅是如何將需求轉為具體頁面，而且還要清晰的將其中的思想傳達給對方。

“你是什么樣的人，就會說什么樣的話，做什么樣的稿子”，作為一名交互設計師，在輸出交互稿件之時，要考慮的不僅是如何將需求轉為具體頁面，而且還要清晰的將其中的思想傳達給對方，這看似是一份交互稿，其實更像是一篇表達你思想的文章。

如何才能讓對方清晰的感受到你想表達些什么呢？一般我都是通過從以下幾點去向別人說明我想表達的內容：

1. 我是誰？
2. 我想干什么？
3. 我想達到什么目的？
4. 我會通過什么方式去做達到這個目的？
5. 為了達到目的，我做了哪些準備

自然而然，我在做設計稿的時候也是通過這種方式去思考和表達的，如下圖：

項目說明

其實項目說明在這里就是一個交代和總結，交代這個項目的基本信息、進行程序以及相關人員，告訴別人這個產品是什么，也就是我剛說的第一個問題“我是誰”。這對后續使用該交互稿的人都存在一定的幫助，可以加速別人對產品的了解，高效上手。

總結指的則是告訴別人，“我想要干什么”，這是自己對需求的看法，同時也是產品與交互討論達成的共同意識。這樣一來也避免從開始就產生理解偏差的這種錯誤，是為了后續能朝著一個正確方向而做了鋪墊。

設計思路

當向別人介紹了我的用意和想法的時候，就是時候該告訴別人，“我想達到什么目的”，“我又會通過什么方式去達到這個目的”？設計思路就是為了解釋這個而存在的，我將設計思路分成了兩塊，分別是產品定位和競品分析，產品定位告訴著我們你的產品將給我們呈現怎樣的感受，輕松？愉悅？還是沉穩，這都是需要思考的，而競品分析的作用就是為了產品定位去做的鋪墊，你只要對比競爭，才能明白怎樣算會讓人覺得輕松、愉悅或者是沉穩。

有時候往往我們會因為一些原因，沒辦法做到這一塊的呈現，但你絕不能因此而忽略甚至跳過此環節，原因是什么呢？

一個完整的設計思路就像是一個交互的靈魂。如果沒有這個思路的說明，上來就給別人看頁面，給人的感覺就像是一副畢加索的畫，你不懂他好在哪里，你也不能很清晰的明白這幅畫的意義所在。因為在一個非專業人士來說，看到的都只能是表象。

就像很多人不能理解為什么微信撤回消息之后，還得給對方一個消息提示，提示“對方撤回了一條消息”。

假設你在設計思路那里就體現了你的想法，其實你之所以這么做的原因，一是技術難以實現撤回無痕，二是想告訴廣大群眾要對自己說的話負責，不要輕易亂說話（這是我看到的一些觀點，不完全正確）。這樣一來，拿到這份稿子的人就能理解為什么你當初是這樣設計的。

凡存在，即有其道理。除了在這里說明自己的思路，還會在設計思路里面有相應的競品分析，為的是告訴大家，我的頁面布局甚至是機制并不是空穴來風，是有事實依據的，這樣的說服力明顯會翻倍，才不至于被他惹前者鼻子走。這也是告訴大家，你在做這份設計的時候是花了心思和時間的，我的努力并不但只是頁面上的呈現，思維才是我的靈魂。這大概也是為什么很多人拿到交互稿之后，總會說交互設計也不過如此，并沒有想象中那么難。

你將項目說明及設計思路都跑完后，建議能跟產品或者是BA再次探討一下，看這樣的方法和思路是否存在問題，在確認沒問題的時候，就可以進入到實際的交互設計環節了，這樣能減少后續的爭執及返工情況。

例如如對方覺得你的布局存在不合理，覺得太繁雜，此時你可以很明確的告訴他：這是因為我們當初討論的時候，是說了必須要在頁面突出這幾個功能點。如此一來很容易能避免那些帶有感觀上的問題，就是莫名覺得不好看的那種提問。

不知道大家有沒有發現，有時候跟產品評審交互稿時，總容易聽到“我覺得這樣不看”、“我覺得這樣很奇怪”，但是你進一步問是哪里不好看，哪里奇怪的時候，總是得不到結果。如果為了這些問題而過于糾結，這可以說是個失敗的評審會。

交互設計

交互設計這塊則是將需求具象到頁面中的設計，也是最終的交互輸出物，是時候該告訴別人，你為了達到這個目的，都做了些什么實際的準備和工作。

不過說到交互頁面，是我的一個弱項，因為我無數次的發現，想把許多細節都在交互稿清晰明了的體現，實在是堪比登天（所以看到那些交互稿畫的如同視覺稿一般，連規格大小都按照規范走的大神們，只能說你們是我所努力的對象）。我在畫稿的過程中，通常都是邏輯流程圖和頁面流程圖相結合使用，邏輯流程圖在前，頁面流程圖在后；但是在碰到邏輯復雜的大流程時，我一般只會畫出主流程線，細節則會在具體頁面流程圖上體現，如下圖：

兩者結合一起使用的好處在于：在還未看到具體頁面時，就可以先對整個交互有個大致的了解，知道下方的頁面流程主要分幾大塊，會怎么跑。就跟看電視劇一樣：先看個簡介，知道個主線，接著再具體看每一個鏡頭，都拍了些什么，都說了些什么話。

頁面流程圖就是在交代細節部分。細節是個很不好把控的東西，它很復雜，但卻能看得出一個交互設計師的基本功。其中頁面流程圖的展現方式其實是先變萬化的，我們沒法給出個模版或者是套路，但是它有其可遵循的原則，如果能遵循這幾點，應該不會差到哪里去。

那么在具體頁面流程圖中，應該要遵循那幾點呢？

1. 邏輯清晰，狀態完整
2. 有相應的文字注釋，遵守就近注釋原則
3. 盡量還原真實場景（文字上）
4. 少用截圖，要表現出層次（盡量用灰白）

以上四點并不是最完整的，只是目前我在做設計過程中的一個小總結，如果有更好的，都可以一起探討。

在遵守原則的前提下，具體表現形式上則可以依據實際場景來定，但也需要考慮這份交互稿主要是給誰看的。

舉個例子，我以前在做某個app的整體框架優化的時候，做了一份對比稿；就是我拿著舊版和新版的對比著擺放在頁面中，為的是能讓別人清晰的感受到我究竟改了哪些地方，改動前后的效果是什么。這份交互稿給產品評審的時候，獲得了很大的認可，但是給部門內的其它交互同仁們看，就被小小的“批判”了一下，原因是他們不懂這其中的業務和流程，用對比稿很容易讓他們混亂。而產品組的人因為對這款app非常了解，他們不需要任何講解，只需要給出對比圖，就能達到他們想要的結果。

所以為了避免這種事情，不管是給誰看，都應該在畫交互稿之前，交代清楚業務及設計思路，以體現自己的專業度。

但是在實際工作中會發現，我們往往會因為各類原因，無法在限定時間內給出一份如此完整的交互設計稿。這種事情無法避免，你能做到的就是即使不能當下給出完整的稿子，但必須有這個思考過程；你可以事后再繼續完善稿子，爭取做到完整的跑一遍設計流程，丟三落四切記不可取～

本文由 @陳小妹紙 原創發布于人人都是產品經理。未經許可，禁止轉載