佛光山文化書城
佛光山文化書城以「傳遞知識、帶動閱讀」為宗旨,整合常住出版品,包括佛光文化、香海文化、學術研究、藝文出版、外文書等,結合讀墨Readmoo電子書平台,不論紙本書或電子書都可一站購足,隨身閱讀電子書,期許能實現網路世界無遠弗屆、智慧法寶隨手可得,為大眾在線上提供一處洗滌身心煩惱的清淨園地。
Task
以佛光山文化為核心,設計優質內容,重視閱讀體驗
佛光山 -《佛光山文化書城》新網站正式上線
https://www.fgsbooks.com.tw
「善法欲」就是能帶給人「法樂」,所以法樂就是精神上的快樂、眞理上的快樂。讀書明理、聽經聞法,都會帶來法樂。
~摘錄自星雲大師《迷悟之間》第三冊
接收到佛光山文化院委託我們設計製作全新版的《佛光山文化書城》除了整合常住出版品,包括佛光文化、香海文化、學術研究、藝文出版、外文書等,更要結合讀墨Readmoo電子書平台,不論紙本書或電子書都可一站購足,隨身閱讀電子書,期許能實現網路世界無遠弗屆、智慧法寶隨手可得,為大眾在線上提供一處洗滌身心煩惱的清淨園地。
製作一座電子商務書城不難,坊間亦大多同業都有類似或更先進的系統平台,然而要做好符合佛光山文化核心的書城網站,傳遞知識帶動閱讀法樂,閱讀精選書摘文章與多元活動,的確讓我一開始就感受到任務的強度壓力,亦產生身為佛光人三好五德的使命動力,不僅從設計美學、文化力、動線體驗、知識閱讀、紙電合一,量身客製後台管理等,我知道,我想要,我要好好為佛光山設計最適合的書城。
文化就是在化心,感化你的心,使你有所自覺,有覺醒的人,自然與佛同在!這才是文化真正的價值─將人心導入正道,就是人間佛教最重要的目標。
~星雲大師
1、大器視覺:
從一開始設計發想,我就要捨棄他網同業通用大Banner商業廣告設計風格,不應是被動接受各種混亂設計圖像資訊。我要降低進入點的濃厚商業促銷,提高知識策展體驗。因此,我花了一個多月,去遍台北各大實體書店,呆呆站在大門處往內觀看思考(還好沒被店員趕出去),人們進到書店第一眼看到甚麼,想甚麼,要甚麼? 這些應用在虛擬書城上,要怎麼虛實合一,結合實體書店的體驗?
於是多番嘗試提案,我希望能回歸書本,以書展書,每本精美設計的書封就是最好的策展,因此以佛光山文化特色的質感設計,以大氣且具文化底蘊的色彩和圖像來製作展台,並以大書封正面或直立陳列,我希望進入網站第一視覺就是感受各式美麗的書封與優雅知性展台陳列,簡約構建佈局,能在化心、感化讀者的心,並有自覺進入閱讀,自然與佛同在。
2、簡約設計:
整體書城設計風格仍秉持我們一貫簡潔、高質感美學設計的堅持,以大氣且具文化底蘊的色彩和圖像來引導視覺,使用輕淺色系來襯托LOGO的主色,低彩度的淺米色調渲染出詩意與安靜的氛圍,彰顯文化品味與深度。從LOGO以中軸導引視覺瀏覽,向下捲動、左右滑動,【傳遞知識、書-作者-主題】策展瀏覽規劃設計。
全站設計主標選用符合佛光山文化形象的字體,主標字型採襯線字體,主標中文以Noto Serif TC明體為主表現,內文以Roboto和Microsoft JhengHei表現簡潔現代感,並注意字體大小和行距,確保文字易於閱讀,適度使用空白間距和分段式排版,讓書籍知識內容閱讀舒適並突出重點。
3、紙書、電子書、有聲書閱讀體驗:
建立友善化主題式聚焦查詢,滿足不同型態讀者搜尋書籍需求,期望更能聚焦閱讀:易搜尋、易親近、易操作,為實現紙電合一,與國內最棒最優質的讀墨Readmoo電子書平台合作串接,讀者於佛光山網站購買電子書後,輕鬆無縫點選連至讀墨Readmoo電子書平台取書與線上閱讀。
我要感謝讀墨Readmoo電子書大力支援並實現轉換閱讀機制,佛光山讀者將不需在兩個平台登入輪迴中徘徊,直接就能點選已購買電子書前往閱讀,還能記錄上次閱讀的進度,接續閱讀,智慧法寶隨手可得。
4、永續經營:
由於書城背後是需要有良好的管理機制與熟稔事務的書籍管理人員才能經營管理創造價值,因此從需求規劃設計開始,經過實地人員操作流程分析、設計提案、討論確認,確保從庫存到上架銷售的機制能在整個專案中準確掌握有效率的營銷管理,期許透過靈活的後端API機制,能奠定未來系統擴展商業價值的基礎。
5、Vue 3 TypeScript、Nuxt3、RESTful API + AWS雲端部署:
前後台皆採用Vue 3 TypeScript+Nuxt3設計模式進行開發,將圖形化使用者介面的開發與業務邏輯或後端邏輯開發分開獨立,除了解決許多傳統開發的問題,最重要要加速整體網頁載入與讀取的效能。另外透過Nuxt的SSR模式架構,同時兼顧搜尋引擎最佳化SEO成效。
為了奠定後續永續經營基礎,應用系統於AWS建構自動化部署機制,運用在國家大型系統專案的應用系統環境經驗模式導入,透過Gitlab CICD持續整合開發與部署至AWS環境,實現快速、可靠的軟體部署,通過自動化測試和檢查,確保程式碼的品質和穩定性。於EC2與Amplify架構業務邏輯與後端邏輯獨立運行又彼此關聯,透過讀寫分離邏輯設計,並設定CloudWatch執行Auto Scaling以因應銷售期間大量湧入的訂單流量,AWS架構除了符合資安要求,更加速整體網頁載入與讀取的效能,後續亦保有高彈性擴增功能的開發彈性。
佛光山 -《佛光山文化書城》
感謝Connie/Bomba/Linda/Yuurin/Teen/Luke,因為有你們,我們帶給更多人法樂,與佛同在!
Project Management
— 郭光耀 Brad Kuo
專案總監
— Connie Lin
專案營運總監
Art Direction
— Zoe Wang
視覺藝術總監
Creative Design
— 郭光耀 Brad Kuo
視覺設計
Web Development
— Bomba Tsai
前端互動設計師
Vue Development
— Teen Yang
— Yuurin Lee
前端開發工程師
API Development
— Luke
後端技術整合工程師
我們珍惜認真看待每一次與客戶聯繫的機會,期待為不同客戶演譯夢想,
運用我們美感天賦與實戰經驗,為您服務設計。