網(wǎng)站建設(shè)中整體到細(xì)節(jié)的交互設(shè)計(jì)規(guī)劃

2012年初，我負(fù)責(zé)了對(duì)公司"深度匹配"產(chǎn)品進(jìn)行了一次全面的用戶體驗(yàn)規(guī)劃，對(duì)產(chǎn)品整體的設(shè)計(jì)開(kāi)展提供了用戶視角的依據(jù)。過(guò)程收到了PD同學(xué)和業(yè)務(wù)團(tuán)隊(duì)的一些不錯(cuò)的反饋。在這里和大家分享一下這個(gè)設(shè)計(jì)推導(dǎo)過(guò)程。

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

基于提煉的方法論

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

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

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

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

全局

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

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

讓我們Zoom in一下…

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

當(dāng)我們的用戶目標(biāo)和產(chǎn)品目標(biāo)清楚之后，怎么做？

讓我們繼續(xù)Zoom in…

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

 

繼續(xù) Zoom in…

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

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

我們還得繼續(xù)Zoom in…

我們把這些結(jié)構(gòu)化的信息基于用戶情景轉(zhuǎn)化為頁(yè)面架構(gòu)關(guān)系，如下圖。注：因?yàn)橐恍┰�因，我們隱去了圖片中的部分名稱。

上圖中，和前一張圖進(jìn)行對(duì)照，之前結(jié)構(gòu)化的行為和信息，被轉(zhuǎn)化成了不同的頁(yè)面來(lái)進(jìn)行承載，而本身的邏輯關(guān)系依然沒(méi)變化，和之前完全一致。（僅因?yàn)橛脩舻墓芾硇枨笤黾恿斯芾聿糠郑┪覀兛梢杂^察到不同的用戶有完全不同的情景和操作頁(yè)面，同時(shí)之間的信息又是互相關(guān)聯(lián)的，整個(gè)流程最終能到達(dá)目標(biāo)閉環(huán)。

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

繼續(xù)Zoom in…

接下來(lái)，我們要對(duì)所有的頁(yè)面進(jìn)行一下歸納如下。注：因?yàn)橐恍┰�因，我們隱去了具體頁(yè)面名稱。

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

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

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

總結(jié)

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

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