小物所|生活選物商店桌機首頁

電商設計

小物所|生活選物商店

用物件索引串起材質、價格與使用筆記

  • 生活選物
  • 商品呈現
瀏覽實際網站討論類似的專案

區域

台中

品牌

小物所 SELECTS

分類

電商設計

DESIGN APPROACH

從品牌需求,到閱讀體驗。

把選物整理成可閱讀的索引

小物所從日常使用出發,將濾杯、香氛蠟燭、抱枕套、橡木托盤與咖啡豆整理成五筆物件索引。首頁直接展示商品,讓訪客先看用途、材質與價格,再進入單品介紹或提出詢問。

一列物件,一組完整資訊

版面以橫列取代密集的商品方格。照片、品名與短說明放在一起,價格和詢問入口留在同一列,讀者能順著視線逐件比較。自然光照片保留陶器紋理、木紋與織品細節,畫面也為物件留出完整的輪廓。

物件索引之後接上使用筆記,把沖煮、保養與生活情境延伸成可閱讀的內容。品牌介紹與詢問表單放在後段,讓選物、理解與提問彼此相連。

手機也保留物件與文字的關係

桌機將照片與說明放在左側,價格與詢問入口靠右,方便逐列掃讀。手機保留照片搭配品名的排列,再把價格與操作移到說明下方;資訊跟著同一件商品收在一起,不必來回對照不同區塊。

可以細看的地方

細分隔線讓不同物件有清楚的邊界,留白則維持生活選物的安定感。商品詳情與詢問各有明確入口,使用筆記提供另一種認識物件的方式;網站的重點是把少量選品介紹完整。

專案工作範圍

設計範圍
內容架構/網站視覺/響應式頁面
主要任務
用物件索引串起材質、價格與使用筆記

RESPONSIVE VIEWS

把每個尺度,都設計完整。

共 2 張・點圖可放大滑看

同一個品牌,兩種閱讀尺度。

桌機保留資訊全貌;手機讓內容依序展開。點選畫面可放大查看。

桌機|以圖片比例、標題與留白安排第一眼的閱讀順序。
手機|保留內容層級,讓圖片、說明和下一步入口一起閱讀。

NEXT PROJECT

讓你的品牌,也有清楚的網站。

告訴方格你喜歡的設計細節,以及希望網站解決的問題。

討論類似的專案