2012年初，我負責了對公司"深度匹配"產(chǎn)品進(jìn)行了一次全面的用戶(hù)體驗規劃，對產(chǎn)品整體的設計開(kāi)展提供了用戶(hù)視角的依據。

過(guò)程收到了PD同學(xué)和業(yè)務(wù)團隊的一些不錯的反饋。在這里和大家分享一下這個(gè)設計推導過(guò)程。

新設計師在進(jìn)行交互設計時(shí)，很容易直接進(jìn)入具體的界面層的設計思考，而整個(gè)過(guò)程中的前期推導過(guò)程卻很容易被忽略，在這個(gè)案例中會(huì )著(zhù)重前期推導的部分。

基于提煉的方法論

先放出一張我在設計過(guò)程中提煉的設計思維完整的流程圖，案例中的整個(gè)設計規劃過(guò)程也基于該圖的階段過(guò)程展開(kāi)，本文范圍主要針對概念到定義頁(yè)面的這部分。

上圖可以看出我們的整個(gè)轉化過(guò)程涉及產(chǎn)品從概念到元素的始終，不同階段的側重點(diǎn)和目的各不相同，且每個(gè)階段的轉化節點(diǎn)都基于客觀(guān)實(shí)際的實(shí)線(xiàn)關(guān)聯(lián)，以保證由始至終的需求轉化不失真。

以此來(lái)看，整個(gè)設計過(guò)程就是一個(gè)不斷Zoom in（放大聚焦）的過(guò)程，基于用戶(hù)本源需求不斷具體化。在驗證我們的設計是否符合目標的時(shí)候，我們也需要不斷的Zoom out（縮?。?，從更整體視角去俯視。

接下來(lái)我們開(kāi)始看這個(gè)設計過(guò)程。

全局

OK，我們首先來(lái)看一下用戶(hù)在外貿中的主要行為，用戶(hù)需求的基本概念是什么？

下圖可以看到，買(mǎi)家和賣(mài)家首先要達成訂單意向，然后買(mǎi)家得到貨物，賣(mài)家得到貨款，這樣就完成了外貿的整個(gè)過(guò)程，我們的網(wǎng)站服務(wù)也是基于這個(gè)模式展開(kāi)。

讓我們Zoom in一下…

"深度匹配"是什么？我們定義它的目標是：促成買(mǎi)家賣(mài)家達成訂單意向，簡(jiǎn)單說(shuō)就是撮合服務(wù)。這是買(mǎi)賣(mài)家在外貿行為中的首要的一環(huán)。

當我們的用戶(hù)目標和產(chǎn)品目標清楚之后，怎么做？

讓我們繼續Zoom in…

基于外貿專(zhuān)家提供的一些依據，我們以外貿過(guò)程中的用戶(hù)行為建立起對應的產(chǎn)品用戶(hù)行為概念模型，這樣以來(lái)用戶(hù)在整個(gè)過(guò)程中，主路徑、任務(wù)目標就非常清晰了，交互設計后續展開(kāi)有了基本骨架。

繼續 Zoom in…

對應上圖的純用戶(hù)行為視角，再稍微細化一下，把他轉化為產(chǎn)品的用戶(hù)行為流程圖，把抽象的信息結構化。比如，上圖中報價(jià)只是一個(gè)箭頭表示信息流買(mǎi)家，而實(shí)際的網(wǎng)站行為中，報價(jià)需要買(mǎi)家主動(dòng)去查看。所以該行為被結構化成一個(gè)標準網(wǎng)站行為術(shù)語(yǔ)"查看"。整體著(zhù)眼，我們可以觀(guān)察到不同用戶(hù)的目標，行為，產(chǎn)生的信息，以及之間的關(guān)聯(lián)和流向。

上圖已經(jīng)很清楚的描述了該產(chǎn)品中的用戶(hù)行為邏輯，但是作為設計的需求還是不夠具體。

我們還得繼續Zoom in…

我們把這些結構化的信息基于用戶(hù)情景轉化為頁(yè)面架構關(guān)系，如下圖。注：因為一些原因，我們隱去了圖片中的部分名稱(chēng)。

上圖中，和前一張圖進(jìn)行對照，之前結構化的行為和信息，被轉化成了不同的頁(yè)面來(lái)進(jìn)行承載，而本身的邏輯關(guān)系依然沒(méi)變化，和之前完全一致。（僅因為用戶(hù)的管理需求增加了管理部分）我們可以觀(guān)察到不同的用戶(hù)有完全不同的情景和操作頁(yè)面，同時(shí)之間的信息又是互相關(guān)聯(lián)的，整個(gè)流程最終能到達目標閉環(huán)。

PS：基于這個(gè)圖，我們可以觀(guān)察出用戶(hù)的頁(yè)面環(huán)境應分為不同的角色獨立展開(kāi)..

繼續Zoom in…

接下來(lái)，我們要對所有的頁(yè)面進(jìn)行一下歸納如下。注：因為一些原因，我們隱去了具體頁(yè)面名稱(chēng)。

去掉了那些箭頭聯(lián)系后，我們單獨來(lái)看這些頁(yè)面，是不是發(fā)現很有規律，非常的有結構？整理下來(lái)，頁(yè)面需求非常清晰了（可以評估工作量啦.. 哈哈），如下

主頁(yè)表單操作提示詳細頁(yè)面收件箱列表編輯頁(yè)

在這個(gè)基礎上，我們根據每個(gè)頁(yè)面本身的形態(tài)來(lái)定制統一框架， 再基于頁(yè)面承載的信息和功能進(jìn)行布局，整個(gè)交互設計就已經(jīng)基本OK了。當然在具體的頁(yè)面中還會(huì )有更加細化的設計，我們可以依據我們的設計組件和設計規則來(lái)完成，在這里就不展開(kāi)贅述了

總結

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

以上是基于個(gè)人設計思路方法的一個(gè)由粗到細的推導過(guò)程案例，可以應用在新產(chǎn)品的設計、老產(chǎn)品的優(yōu)化、設計評估等過(guò)程中，希望能給大家帶來(lái)一些幫助。

網(wǎng)站建設中整體到細節的交互設計規劃由東莞網(wǎng)站設計編輯 http://www.futanlvdanban.cn/conghua/news/2563.html如需轉載請注明出處

東莞微信小程序商城 東莞網(wǎng)站優(yōu)化 東莞小程序開(kāi)發(fā) 東莞網(wǎng)站設計 東莞網(wǎng)站改版 東莞建網(wǎng)站 東莞做網(wǎng)站 東莞網(wǎng)頁(yè)制作 英文網(wǎng)站建設 中山網(wǎng)站建設 陽(yáng)江網(wǎng)站建設 廣州網(wǎng)站建設 河源網(wǎng)站建設 商城網(wǎng)站建設 肇慶網(wǎng)站建設 韶關(guān)網(wǎng)站建設 惠州網(wǎng)站建設 營(yíng)銷(xiāo)型網(wǎng)站建設 關(guān)鍵詞優(yōu)化 網(wǎng)站托管 SEO外包