Case 06 | Imitate Design: Amazon Shopping Website

Amazon首頁圖片

Amazon網站

導航欄信息雖然多,但層級分明

依次brand logo, 郵寄地址,帳號登錄,購物車

購物過程中需要的基本信息都放在了導航欄上

搜索圖標用橙色突出表示,讓用戶可以更快的找到

購物分類導航欄一字排開,用戶可以更快的找到需要的分類物品

下方橫向的大圖片欄給人視覺上很充實的商品的感覺同時也做分隔線

方塊狀的每個商品的展示讓整體排版對稱工整

Amazon網站商品圖

豎向的方框(horizontal length < vertical length)和橫向的方框(horizontal length > vertical length))交替,用戶視覺上會有一個調劑不至於太累

Amazon網站商品圖

開始來模仿設計

navbar的細節可以inspect得到

比較有意思的排版,豎向和橫向的交替排版,如商品貨架陳列

用Figma畫的Amazon網站排版圖(沒有填充文字和圖片)

填充文字和圖片後

用Figma畫的Amazon網站排版圖(填充文字和圖片)

🍺思考:

・導航欄裡包括用戶所需基礎的功能(在shopping website: 郵寄地區,帳號登錄,購物車)

・排版使用橫向和豎向的來分隔交替,視覺上不會疲勞