整體到細節的互動設計規劃

類別: 互聯網

2012年初,我負責了對公司“深度匹配”產品進行了一次全面的使用者體驗規劃,對產品整體的設計開展提供了使用者視角的依據。過程收到了PD同學和業務團隊的一些不錯的反饋。在這裡和大家分享一下這個設計推導過程。

新設計師在進行互動設計時,很容易直接進入具體的介面層的設計思考,而整個過程中的前期推導過程卻很容易被忽略,在這個案例中會著重前期推導的部分。

基於提煉的方法論

先放出一張我在設計過程中提煉的設計思維完整的流程圖,案例中的整個設計規劃過程也基於該圖的階段過程展開,本文範圍主要針對概念到定義頁面的這部分。

上圖可以看出我們的整個轉化過程涉及產品從概念到元素的始終,不同階段的側重點和目的各不相同,且每個階段的轉化節點都基於客觀實際的實線關聯,以保證由始至終的需求轉化不失真。

以此來看,整個設計過程就是一個不斷Zoom in(放大聚焦)的過程,基於使用者本源需求不斷具體化。在驗證我們的設計是否符合目標的時候,我們也需要不斷的Zoom out(縮小),從更整體視角去俯視。

接下來我們開始看這個設計過程。

全域性

OK,我們首先來看一下使用者在外貿中的主要行為,使用者需求的基本概念是什麼?
下圖可以看到,買家和賣家首先要達成訂單意向,然後買家得到貨物,賣家得到貨款,這樣就完成了外貿的整個過程,我們的網站服務也是基於這個模式展開。

讓我們Zoom in一下..

“深度匹配”是什麼?我們定義它的目標是:促成買家賣家達成訂單意向,簡單說就是撮合服務。這是買賣家在外貿行為中的首要的一環。

當我們的使用者目標和產品目標清楚之後,怎麼做?

讓我們繼續Zoom in..

基於外貿專家提供的一些依據,我們以外貿過程中的使用者行為建立起對應的產品使用者行為概念模型,這樣以來使用者在整個過程中,主路徑、任務目標就非常清晰了,互動設計後續展開有了基本骨架。

繼續 Zoom in..

對應上圖的純使用者行為視角,再稍微細化一下,把他轉化為產品的使用者行為流程圖,把抽象的資訊結構化。比如,上圖中報價只是一個箭頭表示資訊流買家,而實際的網站行為中,報價需要買家主動去檢視。所以該行為被結構化成一個標準網站行為術語“檢視”。整體著眼,我們可以觀察到不同使用者的目標,行為,產生的資訊,以及之間的關聯和流向。

上圖已經很清楚的描述了該產品中的使用者行為邏輯,但是作為設計的需求還是不夠具體。

我們還得繼續Zoom in ..

我們把這些結構化的資訊基於使用者情景轉化為頁面架構關係,如下圖。注:因為一些原因,我們隱去了圖片中的部分名稱。

上圖中,和前一張圖進行對照,之前結構化的行為和資訊,被轉化成了不同的頁面來進行承載,而本身的邏輯關係依然沒變化,和之前完全一致。(僅因為使用者的管理需求增加了管理部分)我們可以觀察到不同的使用者有完全不同的情景和操作頁面,同時之間的資訊又是互相關聯的,整個流程最終能到達目標閉環。

PS:基於這個圖,我們可以觀察出使用者的頁面環境應分為不同的角色獨立展開..

繼續Zoom in  …

接下來,我們要對所有的頁面進行一下歸納如下。注:因為一些原因,我們隱去了具體頁面名稱。

去掉了那些箭頭聯絡後,我們單獨來看這些頁面,是不是發現很有規律,非常的有結構?整理下來,頁面需求非常清晰了(可以評估工作量啦.. 哈哈),如下

  • 主頁
  • 表單
  • 操作提示
  • 詳細頁面
  • 收件箱
  • 列表
  • 編輯頁

在這個基礎上,我們根據每個頁面本身的形態來定製統一框架, 再基於頁面承載的資訊和功能進行佈局,整個互動設計就已經基本OK了。當然在具體的頁面中還會有更加細化的設計,我們可以依據我們的設計元件和設計規則來完成,在這裡就不展開贅述了

總結

回顧剛才的這個過程,會發現,我們的互動設計就是一個不斷基於需求的本源Zoom in的一個推導過程,在這個過程中,每個細化過程都基於上一步的清晰目標開展,環環相扣。這樣的方法可以讓我們設計的每個步驟都有系統化的支撐,不會偏離主要的目標。在設計工作結束後,我們再通過Zoom out的方式來反向驗證,來檢驗最終的設計是否符合了最初的設計目標。(想讓我演示一下Zoom out的童鞋,請把本文倒序閱讀…)

以上是基於個人設計思路方法的一個由粗到細的推導過程案例,可以應用在新產品的設計、老產品的優化、設計評估等過程中,希望能給大家帶來一些幫助。

歡迎大家和我探討:
電子郵箱: [email protected]
新浪微博: http://weibo.com/tianruihang 歡迎關注

特別感謝 Eric 小販熊 對本文的大力指導和支援:)

來源:http://www.aliued.com/2012/07/24/916/



整體到細節的互動設計規劃原文請看這裡