作為設計師首個前台電商項目，淘寶購便利（快消品「生活平台」，24 小時送達）的交互設計歷程，是一場關於「捨得」與「聚焦」的實戰演練。

一、準備階段：站在巨人肩膀上重組優勢

1. 競品拆解：取長補短

競品	亮點	短板
MySupermarket	底部懸浮區（便簽/購物車/物流），結構清晰	導航需懸停顯示，非直接可見
山姆會員店	首頁/List/活動頁均支持櫥窗直接選量，模擬真實購物	—
LeShop	清晰導航，標品列表展示高效	—
一號店	純文字導航，跨年齡層零認知門檻	視覺相對平淡
天貓超市	高端視覺調性	詳情頁缺關聯營銷，購物連續性弱

2. 差異化突破點：迷你購物車 + List 頁直購 + Detail 頁關聯

目標用戶：20-40 歲工薪層，愛潮流、高進口消費需求。核心優勢：進口商品多、價格低、滿 80 包郵 10kg。交互策略：

• 迷你購物車：複刻實體超市「推車逛、最後結算」心智模型，打造差異化核心體驗
• List 頁直購：最高頻頁面，極致優化「看見→決定→加車」路徑
• Detail 頁挽留：低到達頁，重點佈局關聯推薦、促單組合

3. 交互設計師的價值：做減法的勇氣

面對工期、技術棧（淘寶後台）、框架約束，最難的不是「想點子」，而是「捨棄 80% 創意，守住核心 20%」，確保項目按時交付且體驗不打折。

二、設計階段：橫向大圖購物車的誕生

1. 突破傳統：橫向大圖模式挑戰縱向列表

市面超市購物車多為縱向列表。但用戶群體熟悉淘寶櫥窗、iOS 桌面等區塊式交互。大圖模式優勢：商品識別度高、觸控目標大、視覺誘惑強。決定嘗試橫向滑動大圖購物車。

列表模式：信息密度高、對比快

大圖模式：視覺誘惑強、觸控友好

2. 承載核心利益點：重量聯動 + 郵費可見性

淘寶後台購物車不顯示重量，但「滿 80 包 10kg 郵費」是核心優勢。創新方案：價格後附重量（如「¥25.0 / 500g」），隨增減數量實時聯動；底部固定「郵費說明」入口，滿足精打細算用戶的試算樂趣。

這個項目教會我：交互創新不在「花哨」，而在「精準承載業務價值、契合用戶心智、經得起工程落地驗證」。迷你購物車後來成為購便利最標誌性的交互資產，證明了「捨得」的價值。