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的童鞋，請把本文倒序閱讀…）

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

網站建設中整體到細節的交互設計規劃由企業網站制作編輯 http://www.dalld.com/conghua/news/2563.html如需轉載請注明出處

做網站公司 網頁設計 企業網站建設 網站建設 建網站 濮陽網站建設 廈門網站建設 廉江網站建設 吉林網站設計 蕪湖網站設計 佛山網站設計 興寧網站制作 佛山網站制作 清遠網站制作 吳川網站制作

東莞外貿網站制作 東莞企業網站制作 企業網站建設 東莞做網站 東莞外貿網站設計 網站制作公司 網站建設公司 東莞網頁設計 東莞網站建設公司 網站設計公司 東莞網站制作 東莞網站建設 企業網站設計 東莞網站設計 東莞網站設計公司