導讀：小編在一家創業公司，披著產品運營的外衣做著產品經理的勾當。耗時1個半月的時間，將產品原型處理完畢。耗時這么久，主要原因是研發團隊先行，產品和設計后行的逆行邏輯，真真的是累夠嗆。

用體驗的五個層面分為：戰略層、范圍層、結構層、框架層、表現層。五個層面自上而下地建設，具備基本的雙重性、用戶體驗的要素和應用這些要素。

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

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

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

框架層，即界面設計、導航設計、信息設計層。

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

導航設計：呈現信息的一種界面形式，提供給用戶區某個地方的能力。

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

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

1. 通過安排和選擇界面元素來整合界面設計；
2. 通過識別和定義核心導航系統來整合導航設計；
3. 通過放置和排列信息組成部分的優先級來整合信息設計。

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

表現層，即為視覺設計。界面設計考慮可交互元素的不足，導航設計考慮在產品中引導用戶移動的元素安排，信息設計考慮傳達給用戶的信息要素的排布，解決并彌補“產品框架層的邏輯排布”的感知呈現問題。

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

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

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

讀懂原型圖

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

草圖快速溝通

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

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

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

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

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

視覺設計

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

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

視覺素材輸出、設計文件標注

每個項目最終給到開發人員的都要有效果圖、標注圖、切圖三個文件夾。Pxcook、Markman是不錯的標注工具，Cutteran、Assistor PS是很方便的切圖工具。

開發后期，細節跟進

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

原文作者Havery，由@理理V 編輯整理，轉載請注明出處。