新北漂書網站改版上線|十年維運 × 手機優化 × Wireframe 重構

新專案如期上線,這次改版過程還算順利。

我們從 2013–14 年間接手這個專案,有點像是在陪一個孩子成長。
進步的速度不如商業專案那麼快速有效率,卻也踏實穩健地經過將近十年維運。

這次的新改版,我們考量到手機使用率已遠高於桌機,
再加上館方的主視覺以方塊插畫為主,正好對應我們先前在粉專分享過的日本設計案例。

常有客戶問我們:「你們最擅長的風格是什麼?」

我們的回答總是:
簡化繁複內容,用乾淨直覺的方式,讓使用者不用看說明就能上手。

這次的設計不只是視覺排版,更重要的是:
發現核心問題,重新組合解決方式。
這也是我們近年來特別強調 Wireframe 結構規劃 的原因。

目前操作順暢,希望這個專案能持續進化,再戰下一個十年。

新北漂書網:https://activity3.library.ntpc.net.tw/


專案資訊
客戶:新北市立圖書館
插畫視覺:館方提供
WF 規劃:Genie Chen
視覺設計:Genie Chen
前端程式:Hiking Chen
後端程式:Jason Hu


主視覺延伸畫面

由館方提供的主視覺重新組合,讓網站畫面和平面製作物調性一致。

桌機與手機頁面一致性設計

考量到手機使用比例與預算配置,桌機版實際可切換頁面與手機相同。

桌機版與手機版細節對照

桌機保留右側分享區與單位資訊、隱藏 Footer;
手機版則補上這些資訊,解決視覺與資訊空間落差。

新舊版本比較

新舊兩版皆由我們製作,也能看見館方與團隊這些年在設計上的持續進化。

漂書地點管理與資料分類

漂書地點新增五大情境分類,搭配 Google Sheet API 管理,日後更新會更輕鬆。


如果你也在規劃內容繁多但希望操作簡潔的網站,
或是想強化 wireframe 結構與行動裝置體驗,我們很樂意一起討論。

當手機使用早已遠超桌機,我們不該只停留在 RWD,
而是一起找出真正適合手機操作的最佳解法。
如果你最近也在為手機版網頁煩惱,歡迎聊聊、一起研究。

查看更多作品案例:超能力設計戰隊官網
Email:[email protected]

延伸閱讀:
一些針對手機版優化的網頁設計

Published by Genie Chen

Genie Chen 陳小吉 1981/8/1 A型 獅子座 Innovation Plus Creative Lab 超能力設計戰隊隊長兼網頁視覺設計師