最近在實習過程中接觸到了一些設計方面的工作，在這期間自己也讀了一些設計相關的書，這篇文章我把這段時間學到的關于交互設計的一些東西總結一下和大家分享。

在現實工作中，其實也很多交互的工作也是由產品經理完成的。在做交互的時候畫出的線框圖是最終的產物，但是在畫圖之前的思考和梳理規劃更加重要，線框圖不是目的，只是結果。一拿到需求就馬上動手畫圖，往往會考慮不全面，畫出的圖也漏洞百出。所以我們先從畫圖前的準備開始。

思考

任務流程

通常一個完整的需求需要引導用戶完成一系列的操作，然后得到他們想要的結果，比如在線購買電影票，就包括了選擇影片、選擇影院、選擇觀影時間、在線選座以及支付等一系列流程。當我們拿到需求后，首先要對需求進行解構，將需求轉化為一個完整的流程，分析這一流程中會有哪些操作，操作的先后順序是怎樣的，什么樣的操作應該放到同一頁面中。

在這一步中可以通過畫任務流程圖來獲得一個完整清晰的思路，我們以在線購物的支付環節作為例子，梳理一下支付的流程。畫流程圖的軟件很多，我這里就用Visio來畫，還不是太會畫流程圖 ，這里就簡單示意一下吧。

當把一個任務用流程圖表示后，用戶需要進行的每一步操作就很清晰了，需要設計哪些頁面也很明了了。當然有的小需求可能很簡單，就一兩步操作，沒有這么復雜。

信息組織

當我們將任務流程梳理完畢后，依然不要著急畫圖，下一步要做的是組織頁面信息。在上一步任務流程的基礎上，我們可以規劃出整個流程會有哪些頁面，每個頁面有哪些信息。我們還需要將這些信息合理地布局，如果不經思考地將各種信息隨意堆在頁面上，只會讓用戶找不到重點，使用困難。

我們的目的是為了讓用戶順利完成任務，那么就需要在頁面中突出一條主線，用戶沿著這條主線走，就可以很容易成功完成操作。在對信息進行布局的時候，需要劃分出不同信息的重要程度，那些幫助用戶完成主線操作的信息是最重要的，應該突出顯示，其他輔助信息不能喧賓奪主，盡量減小對用戶的干擾。

例如在一個購物結算的流程中，我們的目標就是讓用戶方便快速的完成支付，在設計的過程中，就應該突出支付流程這條主線。在頁面中任何一個跳轉到其他頁面的鏈接都可能干擾用戶的支付，所以其他與主線無關的流程應該弱化顯示，并且盡量減少跳轉到其他頁面的入口。

以微信支付在支付流程中就非常簡潔，時常讓我覺得這錢花出去也太容易了。比如話費充值，界面極簡，操作極簡，花錢極快。

原型圖

當經過前面的思考和準備之后，我們終于可以畫原型圖了?，F在比較流行的做法是先在紙上畫出紙面原型圖用于最初的溝通和交流，確定頁面的整體框架和布局，然后用軟件畫出整潔規范的線框圖。這里我就重點說說線框圖。

線框圖主要包含框架圖形部分和文字說明部分?？蚣軋D形部分就是用線條畫出來的直觀展示頁面的圖形，文字說明主要包含了信息顯示規范以及交互操作反饋。

舉一個非常簡單的例子，下面是一個充值購買的線框圖，左邊是框架圖形，右邊是文字說明。剛剛隨手畫的一個，比較簡陋。

在畫線框圖時應該注意一下一些問題。

• 線框圖不要有色彩。線框圖添加了色彩容易讓人從視覺設計層面上進行思考，這一步僅僅只需要思考頁面的結構和布局，通過加粗和調節字體大小突出重點，通過灰度明暗表達對比。
• 設計統一規范。設計線框圖應該有一個統一的風格和標注規范。如線框圖在左，交互說明文字在右，并用線條引出。
• 合理布局。雖然只是線框圖，但是也要做到布局合理美觀，不要將各種元素隨意堆放在頁面上。重點信息突出顯示，讓視覺設計師明白這個元素需要重點突出。
• 考慮到特殊情況下的顯示。例如無網絡、空白頁面、超量的內容顯示等情況下，頁面應當如何顯示。這些細節雖然都是非常小的點，但是都非常重要。

上文提到的線框圖只是最基本的界面展示，并不包含復雜的交互動效。當設計完一整套線框圖后，就可以打包給視覺設計師做視覺稿了。

通過以上的流程基本就可以完成一些比較簡單的設計任務了，如果頁面有動畫效果，可能還需要進行一些更加復雜的設計。一般來說產品經理基本上可以搞定比較簡單的交互設計，而且產品經理對需求的理解更加深刻，在做交互設計的時候也會更加有重點，關注需求的實現。

當這樣的交互設計再配合詳細的文字說明，基本上就可以當做PRD用，不用再花大量時間去寫單獨的文檔了。

以上就是我最近關于交互設計的一些思考和總結，期待大家多多提意見。

本文由 @飛云?原創投稿，并經人人都是產品經理編輯。未經許可，禁止轉載。