2024 誠品年度閱讀報告
專案時程
2024/9-12
專案角色
UI/UX 設計
團隊人數
1PM、2 Designer
負責項目
UI/UX、工程交付
「誠品年度閱讀報告」 是誠品書店每年製作的重要閱讀趨勢報告網站，透過數據分析與視覺化呈現，整理過去一年的閱讀市場變化。網站主要為年度暢銷書籍、不同年齡層的閱讀偏好、熱門主題等多個面向，為讀者統整一年中所有暢銷書單。
作為誠品書店每年的重要活動網站之一，「誠品年度閱讀報告」 希望透過互動設計，讓大家可以更直覺地探索各種閱讀數據，看看過去一年哪些書最受歡迎、不同年齡層的閱讀喜好有哪些變化，甚至發現自己可能錯過的好書。無論是出版社、愛書人，或只是好奇今年趨勢的讀者，都能透過這個網站快速掌握最新動態。
釐清客戶需求，制定方向
因爲與客戶已經第三年共同合作的經驗，在前期與客戶開會討論時，客戶針對去年的反應及回饋中，提及需要吸引讀者眼球及製作一些動態效果，讓人願意長時間停留，並且在手機版時不會因為內容過長而關閉視窗。
1
2
3
透過動態設計與流暢的使用體驗，引導訪客主動點擊與探索，提高網站的參與度與互動性。
競品分析：年度回顧網站優缺點比較
我們針對市面上三個年度回顧網站進行分析，
分析在視覺表現、資訊架構與使用體驗上的優缺點。
優點
缺點
網站一
網站二
網站三
exclamation
設計策略
question
如何將靜態主視覺海報延伸成吸睛的網頁開場？
將平面素材轉化為動態體驗的設計思考
誠品年度報告的主視覺由客戶提供，但在網頁上如僅以靜態形式呈現，容易缺乏吸引力。我們需要思考如何在數位介面中讓這份靜態設計產生動態張力，引導使用者進入閱讀情境，並提升整體互動感。
question
如何讓頁面內容不會感到單調、無趣？
貫穿插畫風格，強化活動主視覺的連貫體驗
年度報告的頁面內容資訊龐雜，若僅以文字和基本排版呈現，容易顯得單調，降低閱讀意願。我們思考如何藉由視覺設計，讓使用者在閱讀過程中保持專注與興趣，同時維持活動主題的一致性。
question
內容多、閱讀易疲勞？
降低長篇資訊的閱讀負擔
年度閱讀報告包含大量統計資料與排名資訊，如果以一般排版呈現，使用者容易在長篇內容中迷失方向或感到疲勞。我們需要思考如何透過設計，讓使用者在瀏覽大量資訊時仍能快速掌握重點，保持閱讀動力。
設計挑戰與解法
首頁第一版設計以故事性視差滾動為主，但在客戶再次思考使用情境後，發現過長的滾動流程可能增加使用者認知負擔，並延遲關鍵入口的出現時機，影響導覽效率。
我們重新檢視使用者在頁面中的行為節點，將「快速進入各分頁」視為主要任務，並與客戶討論刪減裝飾性內容的可行性。
透過縮短視差動畫的出現時間、提前呈現七分頁入口，並統一其視覺排列，讓使用者在滑動初期即可清楚掌握網站結構，在故事性與操作效率之間取得平衡。
設計成果
首頁製作 Lottie 滾動動畫，留住使用者目光
客戶提供了完整的主視覺設計，我們在分析整體風格與元素後，認為可以搭配 Lottie 動畫強化進場體驗，也更吸睛。使用者一進來就能感受到今年閱讀報告的主題，搭配滾動觸發的動畫效果，不只讓畫面更有層次感，也提高了停留時間，讓人更願意往下看。
貫穿插畫風格，強化活動主視覺的連貫體驗
我們依據客戶提供的插畫素材，將不同插畫適度應用於各分頁與區塊，並搭配幾何線條，讓整體視覺更具層次感與趣味性。不僅可以營造了溫暖的閱讀氛圍，也讓不同頁面之間保持一致的視覺銜接，確保使用者在多元內容中，能感受到連貫且統一的體驗。
分段區塊與錨點導覽提升資訊可讀性
我們在全站大量運用 sticky 區塊切換設計，將內容視覺上「分段」，幫助使用者更清晰掌握重點；同時在資訊量大的分頁中設計錨點導覽，方便使用者快速跳轉段落或返回主題位置。透過這些設計，使用者在閱讀長篇資訊時能保持方向感，降低迷失與疲勞，提高掌握感與閱讀效率。
學習與反思
在這次專案中，我們希望透過 Lottie 動畫與多種 sticky 效果，營造更吸睛的互動體驗。但由於在設計階段沒有充分評估時程與開發資源，部分動畫效果的呈現不如預期，同時也造成工程師額外加班的狀況。
這讓我意識到，在追求視覺與互動亮點的同時，更需要兼顧時程規劃與跨部門溝通。未來若有類似專案，需要更早與工程師討論可行性，釐清實作難度與時程分配，並在設計初期就預留替代方案，以確保專案能兼顧體驗品質與團隊協作的效率。
