對於電商產品，壹般采用內容加工具的模式:內容頁面部分利用豐富的信息吸引/引導用戶瀏覽並產生購買欲望/決策，然後用戶在內容簡潔的工具頁面部分進行操作，直至購買成功。下圖大致展示了用戶來到壹個電商網站時的購買流程，其中黃色部分代表內容類型(如首頁)，藍色部分代表工具類型(如支付頁面)，灰色部分代表過渡頁面(如商品詳情、收藏夾、購物車頁面等)。).
在秋雅的《理性交互設計vs .各種感性用戶》中提到了壹個很好的例子(由於理解略有不同，本文略有修改):
淘寶首頁是壹個基於內容的頁面，同時滿足了不同用戶的需求:紅色和綠色兩個區域都是為有潛在購買目標的用戶設計的(妳知道妳想買的品類或者名稱，但是妳要看了才會知道有沒有)；藍色區域推薦給漫無目的閑逛的用戶。
如果用戶體驗好，那麽有潛在目標的用戶很可能會尋找購買入口(見下圖)並下單購買；沒有目標的用戶也可能轉化成有目標的用戶。反之，用戶就會流失。
對於目標明確的用戶，很可能會跳過基於內容的頁面，直接尋找任務入口:比如進入購物車頁面結算(之前加了購物車但沒有付款)，或者直接在“買了寶貝”頁面付款，等等。
至於收藏夾，比較特殊，它介於有潛在目標和有明確目標之間，因為用戶對某個產品感興趣，但最終可能不會購買。
以上三張圖依次是淘寶收藏夾、購物車和“買的寶貝”頁面。縮小三張圖片後，我們可以看到收藏夾中顯示的圖片最大，因為此時用戶的購買目的還沒有那麽明確，需要靠內容吸引用戶；購物車和“已買寶貝”頁面相對簡單，因為此時用戶的目的非常明確。
像這樣有購買入口的頁面，很難說是基於內容的還是基於工具的。我覺得兩者都有，但要看哪壹方更重要。個人認為:產品詳情頁更註重內容；購物車更加工具化；收藏夾相對中性。劃分的原則還是看網站目標(引導用戶運營還是吸引用戶運營)和用戶目標(有無明確目的)。
找到購買入口後，就可以開始下單和支付的操作了。在這個過程中，用戶在基於工具的頁面中完成。
綜上所述，我們結合網站目標和用戶目標，對電商產品的頁面類型做壹個總結。
這些頁面之間的關系:
換句話說，用戶的購買過程很可能是壹個從內容型頁面逐漸過渡到工具型頁面的過程。隨著操作的壹步步深入，頁面上吸引用戶的視覺元素越來越少，體現頁面操作邏輯的“剛性”控制元素越來越多。所以在設計頁面的時候，要充分考慮這個頁面的用途和位置，並以此為基礎確定頁面風格。以下是壹些例子:
基於內容的頁面:
有針對性的部分視覺簡潔，無針對性的部分圖文並茂(這部分的詳細介紹可以參考《家居設計的可用性和寵物》這篇文章，寫的非常好)，沒有操作按鈕。
基於內容的頁面:
帶操作按鈕的插圖。
基於內容的頁面:
帶操作按鈕的插圖。
基於工具的頁面:
視覺元素更復雜，有操作按鈕。
另外，上面提到的購物車也可以認為是壹個工具型頁面。
工具頁面:
帶有操作按鈕的簡單視覺。