推薦：淘寶網(wǎng)店中的細節(jié)設計
細節(jié)就是一些瑣碎的事情，但是細節(jié)就是魔鬼，向我們展示了很多的問題，比如沃爾瑪、比如迪斯尼，網(wǎng)上購物的特性決定了一個不爭的事實，那就是店主很多時候從來沒有見過他們的顧客。很多店家認為你付錢，我發(fā)貨，我們之間的交易就完成了。其實一些小小的細節(jié)就可以讓我們

 

2012年初，我負責了對公司“深度匹配”產(chǎn)品進行了一次全面的用戶體驗規(guī)劃，對產(chǎn)品整體的設計開展提供了用戶視角的依據(jù)。過程收到了PD同學和業(yè)務團隊的一些不錯的反饋。在這里和大家分享一下這個設計推導過程。

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

基于提煉的方法論

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

 

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

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

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

全局

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

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

 

讓我們Zoom in一下..

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

 

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

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

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

 

繼續(xù) Zoom in..

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

 

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

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

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

 

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

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

繼續(xù)Zoom in  …

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

 

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

主頁

表單

操作提示

詳細頁面

收件箱

列表

編輯頁

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

總結(jié)

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

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

分享：三個細節(jié)優(yōu)化讓你粘住用戶!
三個細節(jié)優(yōu)化讓你粘住用戶!在21世紀的網(wǎng)站優(yōu)化中，搜索引摯更加看重網(wǎng)站內(nèi)部的優(yōu)化設置，因為無論你的外鏈多么的強大，無論你的收錄多么的高量，如果站內(nèi)無法滿足用戶的需求，不能讓用戶滿意的話，那么站點的排名自然就無法得到穩(wěn)定的攀升。對于現(xiàn)在的草根站長來說，很