AI 與設計消息

把畫面留給靈感:圖鑑的設計筆記。

更安靜的搜尋入口、更清楚的風格脈絡。我們如何安排探索與閱讀的節奏。

第一眼,先讓圖片說話

風格圖鑑需要很多資訊,但不必在第一眼全部展開。首頁把搜尋、用途與篩選集中在圖片上方,讓使用者先找到方向,再決定要看多細。

進一步的視覺特徵放進可以展開的篩選區。已套用的條件保持可見,也能逐一移除,讓每次縮小範圍都有清楚的來由。

從縮圖走進完整的風格頁

縮圖適合快速比較,完整頁面則適合停下來觀察。我們將大圖、色票與風格資料放在閱讀起點,再往下接續參考 Prompt 和相關風格。

相近風格依標籤、視覺特徵與用途排列;相近配色則參考示例圖的取樣色彩。兩條探索路徑回答不同的問題:你喜歡的是表現方式,還是顏色的組合?

讓更新也有自己的閱讀空間

NEWS 把介紹文章與設計更新分開整理。桌面版左側保留分類與搜尋,右側留給文章;手機版將分類收成橫向列,閱讀內容回到單一欄位。

我們延續圖鑑的藍色、圓角與清楚的字級,讓探索圖片和閱讀文章有一致的感受。後續的調整與思考,也會在這裡留下紀錄。

srefly NEWS 初版桌面畫面:左側分類與搜尋,右側兩篇文章。
2026-09-07 的 NEWS 初版介面紀錄。 · srefly

探索 SREFLY Style →

需要安裝或使用協助?前往支援中心 →

SREFLY / 收藏靈感,留給下一次創作。所有文章 →

繼續閱讀

srefly for Chrome