感謝邀請，互動介面設計的核心是使用者的體驗，無非就是效率，美感，簡捷和清晰，如果做到這些，對產品功能分析和使用者的心理研究就是流程的第一步。在此基礎上，透過不斷的設計迭代(草繪，低模和高畫質介面)和原型設計就可以完成互動介面的設計。因此，該流程是一個涉及使用者研究，畫像分析，產品分析(競品研究，市場研究)，頭腦風暴，手繪導航，資訊流程最佳化，圖示設計，介面控制元件設計，高畫質圖示設計，Axure原型設計和互動測試的流程。

一個完整的互動設計流程是怎樣的呢？

首先，我們先來認識一下產品的五個使用者體驗的要素

用體驗的五個層面分為：戰略層、範圍層、結構層、框架層、表現層。

五個層面自上而下地建設，具備基本的雙重性、使用者體驗的要素和應用這些要素。

所謂戰略層，即為產品目標、使用者需求，通俗來講，經營者想從網站上得到什麼，使用者想從網站上得到什麼？

所謂範圍層，即功能規格和內容需求，其意義在於這是一個有價值的過程，同時能夠產生有價值的產品。比如，提供使用者可以儲存之前的郵寄地址功能。

結構層，即互動設計、資訊架構層，其目的是為了確定各個將要呈現給使用者的元素的“模式”和“順序”。互動設計關注於將影響使用者執行和完成任務的元素。資訊架構則關注如何將資訊表達給使用者的元素。重點：理解使用者的工作方式、行為和思考模式。

框架層，即介面設計、導航設計、資訊設計層。

介面設計是用來確定介面空間元素以及位置，提供使用者完成任務的能力，透過它，使用者能真正的接觸到那些“在結構層的互動設計中”確定的具體功能。

導航設計：呈現資訊的一種介面形式，提供給使用者區某個地方的能力。

資訊設計：呈現有效地資訊溝通，表達想法，它是這個層面中範圍最廣的一個要素。

實現方法建議以線框圖將設計資訊、介面設計和導航設計放置到一起，形成一個統一的、有內在凝聚力的架構的地方。

1，透過安排和選擇介面元素來整合介面設計；透過識別和定義核心導航系統來整合導航設計；透過放置和排列資訊組成部分的優先順序來整合資訊設計。

線框圖的好處是可以確定一個建立在基本概念結構上的架構，同時指出了視覺設計應該前進的方向。

表現層，即為視覺設計。

介面設計考慮可互動元素的不足，導航設計考慮在產品中引導使用者移動的元素安排，資訊設計考慮傳達給使用者的資訊要素的排布，解決並彌補“產品框架層的邏輯排布”的感知呈現問題。

評估一個頁面的視覺設計的簡單方法：終於眼睛。一個成功的設計有2個重要的特點：

遵循的是一條流暢的路徑；在不需要太多細節來嚇到使用者的前提下，它為使用者提供有效選擇的、某種可能的“引導”。

所以，我們的設計師應該怎麼做呢？

讀懂原型圖

讀懂PRD。確保在需求理解上，與PM保持一致；查詢漏洞。人無完人，在成熟的PM，也難免有疏漏。找出遺漏，與PM反饋、溝通；提出產品新想法。讀PRD時，總會有一些產品的好想法冒出來，及時與PM和團隊溝通；開始構思互動。

草圖快速溝通

透過草圖，快速將“產品關鍵流程”、“關鍵互動介面佈局”呈現紙面，以此與PM、技術溝通至達成共識；目的是為了：

再次掃遺漏；收攏想法。這個階段，產品設計基本定型；達成共識。確保讓產品、設計、技術隊要做的事情有一致的理解，PM需更新PRD、技術開始做開發準備。

Axure線框圖表現產品流程、介面

包含：產品流程圖、全部的頁面原型。

Axure讓團隊對產品的理解無異議，對最終的產品有直觀的瞭解。這個階段，產品需求凍結。開發人員可以依據原型對UI關聯較小的部分進行技術開發。

視覺設計

有前面兩個“掃清障礙”的過程，這個階段，視覺設計時非常舒服的事情。在相對完整的設計規範、控制元件規範的前提下，視覺包括：

風格探索；關鍵頁面的視覺設計；關鍵互動動畫表現（如果無法口頭項技術表達動畫效果時，給出一個“活的”效果，是非常直觀的。

視覺素材輸出、設計檔案標註

每個專案最終給到開發人員的都要有效果圖、標註圖、切圖三個資料夾。Pxcook、Markman是不錯的標註工具，Cutteran、Assistor PS是很方便的切圖工具。

開發後期，細節跟進

與開發跟進細節，是設計過程的一部分。在我們團隊，完全依靠規範作業、設計檔案標註（不和開發人員說一句話）,能夠確保80%的互動、視覺細節能夠被還原。剩下的20%，就要設計師與開發人員肩並肩坐在一起打磨了。開發過程中，一定要預留這個時間。主要包括：邊距、字型、介面動畫的數值微調。