筆者首次主導前台項目——淘寶購便利（快消品「生活平台」，24 小時送達），分享設計心得。

一、充分準備：競品調研與差異化定位

1. 競品優劣勢分析

• mysupermarket：底部懸浮區亮點（便簽、購物車、物流），結構清晰，但導航需懸停顯示，操作不直接。
• 山姆會員商店：首頁/List/活動頁均支援櫥窗直接選數量，模擬真實場景。
• leshop：導航清晰，List 展示優（標品用列表佳）。
• 一號店：純文字通俗易懂，全齡層接受度高。
• 天貓超市：視覺高端，但 Detail 頁右側僅購物車，缺關聯營銷，可能降低購買連續性。

2. 購便利差異化突破點

目標用戶：20-40 歲工薪階層，喜好潮流、進口商品需求大。核心優勢：最後一公里配送、進口商品多且價優、滿 80 包郵 10kg。如何在頁面體現？除專題頁外，交互層面難體現。決定取眾家之長融合創新。

3. 交互設計師的價值：捨得與取捨

受項目時間、技術實現、淘寶框架約束，最難非設計產出，而是不斷捨棄創意，保留核心，確保項目順利上線。

二、核心設計產出

1. 迷你購物車：橫向大圖模式創新

購物車是亮點區域，功能點不可缺，且要承載「滿 80 包 10kg 郵費」利益點。創意：市面購物車多為縱向列表，嘗試橫向大圖模式（類淘寶櫥窗、iOS 主界面），目標用戶對區塊模式不陌生：

價格後附重量，隨操作聯動；下方加郵費說明鏈接，滿足精打細算用戶。交互：點擊展開（非懸停），防誤操作；右下角懸浮，不干擾頁面。

2. List 與 Detail 頁：針對超市場景微優化

• 為適配 768px 寬度顯示完整一行「櫥窗+購物車展開+操作條」，將操作條從三行壓縮為一行。
• 為突出進口商品吸引力，將 Detail 圖放大至 460×460px。
• 補齊報錯頁等基礎頁面，凸顯交互師懂後端、前端、測試知識的重要性。

三、棘手問題與決策

1. 「樣/件/種」單位爭論

一號店等非淘系用「件」表數量；淘系用「件」表種類（同種買二為一件），為優惠邏輯統一（如 5 件優惠實為 5 種）。後台邏輯統一，只能標種類。方案對比：

• 「件」：易誤解
• 「種」：官方感強，不親切
• 「樣」：親切但地域理解差異大

最終採隱性策略：省去單位（一號店麵包屑有此做法）。

2. List 頁：大圖 vs 列表模式

淘寶集市非標品（需進詳情）宜大圖；標品（規格明確）宜列表。我們與 PD 激烈討論，引入用研數據，擬 A/B Test：

A 列表模式優勢：超市多標品、模擬逛超市習慣（沖動型/冷靜型）、前期商品少。
B 大圖模式優勢：單頁見更多商品、用戶養成進 Detail 習慣、後期商品多主推少。

因時間緊未做 A/B Test，採保險的大圖模式。

四、深度反思

交互設計師非為「與眾不同」而存在，而是為「方便用戶、產生好感」。項目受上線時間壓縮、淘寶框架限制、技術難度、缺用研數據等制約，許多想法落空。作品屬於團隊，溝通協作、讓團隊認可才是基礎。用戶測試不便時，讓團隊成員化身用戶共同評判。交互師了解前後端基礎知識，有助於方案可行性判斷。