網站 · 設計概念
網上商店
以音響產品為題的網店設計，展示產品瀏覽、詳情和購物袋摘要，並附建議的選取及存貨狀態。
以下為設計概念，並非客戶項目。畫面屬靜態示意，名稱及數據均為虛構。
設計起點
讓產品照片成為視覺主角，同時交代選購後可以在哪裏核對商品。示例是一間虛構音響店，並非可下單的商店。
- 適用對象
- 比較揚聲器、查看產品選項，準備購買的用戶。
- 需要考慮的限制
- 款式和供貨狀態必須與所選商品一致。這組畫面到購物袋為止，不包括結帳、送貨及付款。
建議的操作流程
- 01
瀏覽產品
產品列表以照片配合簡短名稱及價格，並提供篩選條件縮窄選擇。
- 02
查看產品詳情
詳情畫面放大所選揚聲器，將款式選項放在加入購物袋的按鈕附近。
- 03
核對購物袋
購物袋摘要在瀏覽介面旁顯示已選商品，方便用戶核對。
結帳前核對商品
為何這樣設計？
用一致方式展示產品
中性色背景和相同圖片比例方便比較外觀。產品本身配合少量紅色重點，形成商店的視覺風格。
交代選取後的結果
購物袋摘要讓用戶看見所選商品。正式版本亦應列出確實款式和數量，不能只靠縮圖辨認。
細看視覺設計
以下是建議的設計樣式，屬靜態示例，並非可操作的功能或正式開發規格。
配色用途
產品背景
#F6F5F2
選購操作
#C8442E
文字及結構
#242424
字體與間距
資料清楚，下一步自然明確。
採用簡潔的無襯線字體，產品名稱和價格較突出。規格資料保持易讀，但不搶去主資訊的比重。
產品卡片對齊，照片四周保留空間。款式選項靠近選購按鈕，購物袋摘要則與產品介紹分開。
正常流程以外的狀態
購物袋未有商品
購物袋內未有商品。可以先瀏覽產品。
已加入購物袋
已加入購物袋。繼續前請核對款式及數量。
款式未能供應
這款暫時未能供應，請選擇其他款式。
為甚麼結帳前要顯示購物袋摘要？
購物袋讓用戶在瀏覽期間核對已選產品及款式。它不等於結帳頁；送貨資料、最後費用及付款仍需要獨立的核對步驟。
