網站建設中整體到(dào)細節的(de)交互設計規劃

2012年初，我負責了(le／liǎo)對公司"深度匹配"産品進行了(le／liǎo)一(yī / yì ／yí)次全面的(de)用戶體驗規劃，對産品整體的(de)設計開展提供了(le／liǎo)用戶視角的(de)依據。

過程收到(dào)了(le／liǎo)PD同學和(hé / huò)業務團隊的(de)一(yī / yì ／yí)些不(bù)錯的(de)反饋。在(zài)這(zhè)裏和(hé / huò)大(dà)家分享一(yī / yì ／yí)下這(zhè)個(gè)設計推導過程。

新設計師在(zài)進行交互設計時(shí)，很容易直接進入具體的(de)界面層的(de)設計思考，而(ér)整個(gè)過程中的(de)前期推導過程卻很容易被忽略，在(zài)這(zhè)個(gè)案例中會着重前期推導的(de)部分。

基于(yú)提煉的(de)方法論

先放出(chū)一(yī / yì ／yí)張我在(zài)設計過程中提煉的(de)設計思維完整的(de)流程圖，案例中的(de)整個(gè)設計規劃過程也(yě)基于(yú)該圖的(de)階段過程展開，本文範圍主要(yào / yāo)針對概念到(dào)定義頁面的(de)這(zhè)部分。

上(shàng)圖可以(yǐ)看出(chū)我們的(de)整個(gè)轉化過程涉及産品從概念到(dào)元素的(de)始終，不(bù)同階段的(de)側重點和(hé / huò)目的(de)各不(bù)相同，且每個(gè)階段的(de)轉化節點都基于(yú)客觀實際的(de)實線關聯，以(yǐ)保證由始至終的(de)需求轉化不(bù)失真。

以(yǐ)此來(lái)看，整個(gè)設計過程就(jiù)是(shì)一(yī / yì ／yí)個(gè)不(bù)斷Zoom in（放大(dà)聚焦）的(de)過程，基于(yú)用戶本源需求不(bù)斷具體化。在(zài)驗證我們的(de)設計是(shì)否符合目标的(de)時(shí)候，我們也(yě)需要(yào / yāo)不(bù)斷的(de)Zoom out（縮小），從更整體視角去俯視。

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

全局

OK，我們首先來(lái)看一(yī / yì ／yí)下用戶在(zài)外貿中的(de)主要(yào / yāo)行爲(wéi / wèi)，用戶需求的(de)基本概念是(shì)什麽？

下圖可以(yǐ)看到(dào)，買家和(hé / huò)賣家首先要(yào / yāo)達成訂單意向，然後買家得到(dào)貨物，賣家得到(dào)貨款，這(zhè)樣就(jiù)完成了(le／liǎo)外貿的(de)整個(gè)過程，我們的(de)網站服務也(yě)是(shì)基于(yú)這(zhè)個(gè)模式展開。

讓我們Zoom in一(yī / yì ／yí)下…

"深度匹配"是(shì)什麽？我們定義它的(de)目标是(shì)：促成買家賣家達成訂單意向，簡單說(shuō)就(jiù)是(shì)撮合服務。這(zhè)是(shì)買賣家在(zài)外貿行爲(wéi / wèi)中的(de)首要(yào / yāo)的(de)一(yī / yì ／yí)環。

當我們的(de)用戶目标和(hé / huò)産品目标清楚之(zhī)後，怎麽做？

讓我們繼續Zoom in…

基于(yú)外貿專家提供的(de)一(yī / yì ／yí)些依據，我們以(yǐ)外貿過程中的(de)用戶行爲(wéi / wèi)建立起對應的(de)産品用戶行爲(wéi / wèi)概念模型，這(zhè)樣以(yǐ)來(lái)用戶在(zài)整個(gè)過程中，主路徑、任務目标就(jiù)非常清晰了(le／liǎo)，交互設計後續展開有了(le／liǎo)基本骨架。

繼續 Zoom in…

對應上(shàng)圖的(de)純用戶行爲(wéi / wèi)視角，再稍微細化一(yī / yì ／yí)下，把他(tā)轉化爲(wéi / wèi)産品的(de)用戶行爲(wéi / wèi)流程圖，把抽象的(de)信息結構化。比如，上(shàng)圖中報價隻是(shì)一(yī / yì ／yí)個(gè)箭頭表示信息流買家，而(ér)實際的(de)網站行爲(wéi / wèi)中，報價需要(yào / yāo)買家主動去查看。所以(yǐ)該行爲(wéi / wèi)被結構化成一(yī / yì ／yí)個(gè)标準網站行爲(wéi / wèi)術語"查看"。整體着眼，我們可以(yǐ)觀察到(dào)不(bù)同用戶的(de)目标，行爲(wéi / wèi)，産生的(de)信息，以(yǐ)及之(zhī)間的(de)關聯和(hé / huò)流向。

上(shàng)圖已經很清楚的(de)描述了(le／liǎo)該産品中的(de)用戶行爲(wéi / wèi)邏輯，但是(shì)作爲(wéi / wèi)設計的(de)需求還是(shì)不(bù)夠具體。

我們還得繼續Zoom in…

我們把這(zhè)些結構化的(de)信息基于(yú)用戶情景轉化爲(wéi / wèi)頁面架構關系，如下圖。注：因爲(wéi / wèi)一(yī / yì ／yí)些原因，我們隐去了(le／liǎo)圖片中的(de)部分名稱。

上(shàng)圖中，和(hé / huò)前一(yī / yì ／yí)張圖進行對照，之(zhī)前結構化的(de)行爲(wéi / wèi)和(hé / huò)信息，被轉化成了(le／liǎo)不(bù)同的(de)頁面來(lái)進行承載，而(ér)本身的(de)邏輯關系依然沒變化，和(hé / huò)之(zhī)前完全一(yī / yì ／yí)緻。（僅因爲(wéi / wèi)用戶的(de)管理需求增加了(le／liǎo)管理部分）我們可以(yǐ)觀察到(dào)不(bù)同的(de)用戶有完全不(bù)同的(de)情景和(hé / huò)操作頁面，同時(shí)之(zhī)間的(de)信息又是(shì)互相關聯的(de)，整個(gè)流程最終能到(dào)達目标閉環。

PS：基于(yú)這(zhè)個(gè)圖，我們可以(yǐ)觀察出(chū)用戶的(de)頁面環境應分爲(wéi / wèi)不(bù)同的(de)角色獨立展開..

繼續Zoom in…

接下來(lái)，我們要(yào / yāo)對所有的(de)頁面進行一(yī / yì ／yí)下歸納如下。注：因爲(wéi / wèi)一(yī / yì ／yí)些原因，我們隐去了(le／liǎo)具體頁面名稱。

去掉了(le／liǎo)那些箭頭聯系後，我們單獨來(lái)看這(zhè)些頁面，是(shì)不(bù)是(shì)發現很有規律，非常的(de)有結構？整理下來(lái)，頁面需求非常清晰了(le／liǎo)（可以(yǐ)評估工作量啦.. 哈哈），如下

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

在(zài)這(zhè)個(gè)基礎上(shàng)，我們根據每個(gè)頁面本身的(de)形态來(lái)定制統一(yī / yì ／yí)框架， 再基于(yú)頁面承載的(de)信息和(hé / huò)功能進行布局，整個(gè)交互設計就(jiù)已經基本OK了(le／liǎo)。當然在(zài)具體的(de)頁面中還會有更加細化的(de)設計，我們可以(yǐ)依據我們的(de)設計組件和(hé / huò)設計規則來(lái)完成，在(zài)這(zhè)裏就(jiù)不(bù)展開贅述了(le／liǎo)

總結

回顧剛才的(de)這(zhè)個(gè)過程，會發現，我們的(de)交互設計就(jiù)是(shì)一(yī / yì ／yí)個(gè)不(bù)斷基于(yú)需求的(de)本源Zoom in的(de)一(yī / yì ／yí)個(gè)推導過程，在(zài)這(zhè)個(gè)過程中，每個(gè)細化過程都基于(yú)上(shàng)一(yī / yì ／yí)步的(de)清晰目标開展，環環相扣。這(zhè)樣的(de)方法可以(yǐ)讓我們設計的(de)每個(gè)步驟都有系統化的(de)支撐，不(bù)會偏離主要(yào / yāo)的(de)目标。在(zài)設計工作結束後，我們再通過Zoom out的(de)方式來(lái)反向驗證，來(lái)檢驗最終的(de)設計是(shì)否符合了(le／liǎo)最初的(de)設計目标。（想讓我演示一(yī / yì ／yí)下Zoom out的(de)童鞋，請把本文倒序閱讀…）

以(yǐ)上(shàng)是(shì)基于(yú)個(gè)人(rén)設計思路方法的(de)一(yī / yì ／yí)個(gè)由粗到(dào)細的(de)推導過程案例，可以(yǐ)應用在(zài)新産品的(de)設計、老産品的(de)優化、設計評估等過程中，希望能給大(dà)家帶來(lái)一(yī / yì ／yí)些幫助。

網站建設中整體到(dào)細節的(de)交互設計規劃由東莞網站設計編輯 /conghua/news/2563.html如需轉載請注明出(chū)處

東莞微信小程序開發 東莞響應式網站 東莞建站費用 東莞網站制作 東莞網站開發 東莞網頁制作 東莞網站優化 東莞小程序商城開發 江門網站建設 湛江網站建設 珠海網站建設 英文網站建設 個(gè)人(rén)網站建設 中山網站建設 肇慶網站建設 企業網站建設 營銷型網站建設 揭陽網站建設 關鍵詞優化 網站托管 SEO外包