一個完整的交互設計流程是怎樣的?

10 評論 51333 瀏覽 187 收藏 7 分鐘

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

 

看到這個圖,其實很清楚了,研發先行不是最好的路線。產品、UI設計師以及后續研發調整的工作量很大。那么,一個完整的交互設計流程是怎樣的呢?

首先,我們先來認識一下產品的五個用戶體驗的要素

QQ20150819-2@2x

 

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

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

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

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

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

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

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

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

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

  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 編輯整理,轉載請注明出處。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這不是用戶體驗要素里講的嗎..

    來自上海 回復
    1. 11

      來自上海 回復
  2. 可以,可以

    來自北京 回復
  3. ?? 不錯

    來自北京 回復
  4. 其實這個原理很多地方都有,這里也描述得清楚,但是如果每個點有多幾個列子就好了,特別是戰略層和范圍層的例子

    來自廣東 回復
  5. 此篇文章是小編身處在研發先行的快節奏企業中遇到的問題。創業公司,節奏快是沒錯的,快也不能省略對某一產品系統性的規劃。后續產品和UI在設計產品前端時,做減法及規劃邏輯是很頭痛的。謹以此為鑒吧。

    來自北京 回復
  6. 沒看太明白

    來自廣東 回復
    1. 等我下一篇出解說版 ??

      來自北京 回復