? ? ? ? 之前我在博文里提到過工具型產(chǎn)品與內(nèi)容型產(chǎn)品的區(qū)別。從網(wǎng)站目標(biāo)及用戶需求的角度來講：工具型產(chǎn)品專注于讓用戶完成一系列任務(wù)（如注冊、支付），用戶有明確的目標(biāo)；而內(nèi)容型產(chǎn)品注重提供信息給用戶（如新聞?lì)l道、分類導(dǎo)航等），用戶無目標(biāo)或者僅有潛在的目標(biāo)。
? ? ? ?對于電子商務(wù)產(chǎn)品來說，一般是采用內(nèi)容型加工具型的模式：內(nèi)容型頁面部分利用豐富的信息吸引/引導(dǎo)用戶瀏覽并產(chǎn)生購買欲望/決定，之后用戶在內(nèi)容簡潔的工具型頁面部分操作，直至購買成功。下圖大致表現(xiàn)了用戶來到一個(gè)電子商務(wù)網(wǎng)站的購買過程，其中黃色部分代表內(nèi)容型（比如首頁），藍(lán)色部分代表工具型（比如支付頁面），灰色代表過渡頁面（比如商品詳情、收藏夾、購物車頁面等）。
? ? ? ? 在雅秋的《交互設(shè)計(jì)的理性Vs.多樣的感性用戶》中提到了一個(gè)很好的例子（由于理解略有不同，在本文中稍有修改）：
? ? ? ? 淘寶首頁是一個(gè)內(nèi)容型頁面，它同時(shí)滿足了不同用戶的需求：紅色和綠色區(qū)域都是為具有潛在購買目標(biāo)的用戶設(shè)計(jì)的（知道自己想買的類別或名稱，但是要看了才知道有沒有）；藍(lán)色區(qū)域是為沒有目的、隨便逛逛的用戶推薦的。
? ? ? ? 如果用戶體驗(yàn)良好，那么有潛在目標(biāo)的用戶很可能會尋找購買入口（見下圖），下單購買；沒有目標(biāo)的用戶可能也會轉(zhuǎn)化成有目標(biāo)的用戶。反之用戶則會流失掉。
? ? ? ?對于有明確目標(biāo)的用戶，很可能會略過內(nèi)容型頁面，直接尋找任務(wù)入口：比如進(jìn)入購物車頁面結(jié)算（之前加入購物車但沒付款），或者在“已買到的寶貝”頁面直接付款等等。
? ? ? ?至于收藏夾則比較特殊，它介于有潛在目標(biāo)和有明確目標(biāo)之間，因?yàn)橛脩羰詹卣f明對某樣商品很感興趣，但未必會最終購買。
? ? ? ? 上面三個(gè)圖依次為淘寶的收藏夾、購物車和“已買到的寶貝”頁面。把三個(gè)圖縮小后我們可以看到收藏夾中顯示的圖片是最大的，因?yàn)檫@個(gè)時(shí)候用戶的購買目的還不那么明確，需要靠內(nèi)容來吸引用戶；而購物車和“已買到的寶貝”頁面就相對簡潔了很多，因?yàn)檫@個(gè)時(shí)候用戶的目的已經(jīng)很明確了。
? ? ? ? 很難說像這種含購買入口的頁面是屬于內(nèi)容型還是工具型，我認(rèn)為二者兼有，但要看更偏重哪邊。我個(gè)人認(rèn)為：商品詳情頁面偏內(nèi)容型一些；購物車偏工具型一些；收藏夾比較中立。劃分的原則仍然是看網(wǎng)站目標(biāo)（引導(dǎo)用戶操作還是吸引用戶操作）以及用戶目標(biāo)（有明確目的還是沒有）。
? ? ? ?找到購買入口后，就可以開始下單、支付的操作了。在這個(gè)過程中，用戶是在工具型頁面中完成的。
綜上，我們結(jié)合網(wǎng)站目標(biāo)及用戶目標(biāo)，把電子商務(wù)產(chǎn)品的頁面類型做一個(gè)總結(jié)。
這些頁面間的關(guān)系：
也就是說，用戶的購買過程，大概是一個(gè)從內(nèi)容型頁面逐漸過渡到工具型頁面的過程。隨著操作的逐層深入，頁面上吸引用戶的視覺元素越來越少，“死板”的，體現(xiàn)頁面操作邏輯的控件元素越來越多。所以做頁面設(shè)計(jì)時(shí)，要充分考慮這個(gè)頁面存在的目的以及它所處的位置，以此為依據(jù)確定頁面風(fēng)格。下面是一些例子：
內(nèi)容型頁面：
有目標(biāo)的部分視覺簡潔，無目標(biāo)的部分圖文并茂（這部分內(nèi)容的詳細(xì)介紹可參考《首頁設(shè)計(jì)的可用性和PET》這篇文章，寫的非常到位），無操作按鈕。
內(nèi)容型為主的頁面：
圖文并茂，有操作按鈕
內(nèi)容型為主的頁面：
圖文并茂，有操作按鈕
工具型為主的頁面：
視覺元素較復(fù)雜，有操作按鈕
另外前面提到過的購物車等，也可認(rèn)為是工具型為主的頁面。
工具型頁面：
視覺簡潔，有操作按鈕
