香港田徑總會｜渣打香港馬拉松網站 UX&UI 設計及手機應用程式開發

項目概覽 

渣打香港馬拉松是香港最具代表性、規模最大的年度體育盛事之一，每年吸引數以萬計跑手及市民參與。除了比賽當日，整個賽事亦涉及大量前期及後期的籌備與管理工作，包括參賽者報名、賽事資訊發佈、跑手支援、選手包派發，以及賽後資訊整理與互動。這些關鍵流程均高度依賴一個穩定、高效且易於管理的網站平台及用戶管理系統。

DigiSalad 受委託為渣打香港馬拉松進行一項全面的數碼升級項目，涵蓋官方網站的整體翻新，以及為跑手專門設計與開發的手機應用程式，以支援賽事的舉行。官方網站與手機應用程式相互配合，為跑手提供即時而清晰的賽事資訊、報名支援及賽後互動體驗，同時協助主辦單位更有效地管理大量內容及參賽者數據。

透過整合官方網站與手機應用程式，整體方案構建成一個統一的數碼生態系統，確保資訊發佈的一致性、使用流程的流暢度，以及在賽事不同階段的營運彈性，全面支援渣打香港馬拉松作為大型年度體育盛事的規模與複雜性。

挑戰

原有的渣打香港馬拉松官方網站在設計及功能層面均未能配合現今用戶的瀏覽習慣。用戶進入首頁後，會即時面對大量文字內容，但缺乏清晰的視覺層次與導向設計，字體偏小、頁首區域分隔不明，CTA 按鈕未能有效突顯，令用戶難以判斷應從哪一個位置開始瀏覽。

在視覺呈現方面，網站圖片的擺放方式受限於固定尺寸與方格化設計，未能因應不同內容靈活調整，令整體版面顯得沉悶且缺乏時代感。部分重要頁面如參賽者手冊及重要通告，設計過於簡潔，只提供基本按鈕圖示作為行動引導，顏色與尺寸不足以吸引用戶點擊和繼續瀏覽。活動相片頁面則以年份分類，雖然結構清晰，但用戶需要逐年點擊並進入多層頁面才能瀏覽照片，圖片被限制於細小方格中，操作步驟繁複，未能符合現今以效率與直觀操作為主的使用體驗要求。

此外，原有平台並未配備完整的內容管理系統（CMS），內容更新及資訊整理高度依賴人手操作，導致大量活動資訊、公告及用戶相關內容分散於不同頁面，難以有效管理與即時更新，亦限制了後續數據整合與用戶體驗優化的可能性。

同時，渣打香港馬拉松過往僅依賴官方網站作為主要數碼接觸點，缺乏專屬的流動應用程式。在現今用戶普遍以智能手機作為主要上網工具的情況下，用戶難以隨時隨地快速查閱賽事資訊、接收即時通知或解鎖互動功能，限制了整體參與度與活動期間的即時互動體驗。

項目自 2021 年起展開，我們為渣打香港馬拉松設計及開發專屬手機應用程式，全面建立以流動體驗為核心的數碼平台。因應當時疫情帶來的不確定性，應用程式特別加入多項即時且具應變性的功能，讓用戶能即時線上參與賽事、進行實時追蹤，並接收最新賽事安排及相關公告。

網站特色

以全新UX & UI 設計深化內容架構

翻新後的網站以清晰、易讀及高效瀏覽為核心，透過使用者體驗設計、介面設計、導航結構及內容呈現方式的整合，為用戶帶來一致而直觀的瀏覽體驗。整體介面結構清楚，能有效協助用戶快速掌握內容重點，並輕鬆找到賽事資訊、跑手相關內容、重要通告及活動亮點等關鍵資料，即使在資訊量龐大的情況下，仍能保持清晰易讀，不會造成混亂。

網站透過清晰的字體層級、適當的留白運用，以及模組化的內容編排方式，建立明確的視覺與資訊層次。不同類型的內容會按其性質，以分段形式或表格方式呈現，使整體資訊結構更為清楚。尤其在資訊較為集中的頁面，例如「賽事詳情」或「賽道路線圖」等，重要資料會被有系統地整理與排列，清楚列明時間、地點、注意事項及相關安排，方便用戶快速閱讀、理解及比較。相較於單一的長篇文字說明，這種結構化的呈現方式能有效降低閱讀負擔，並提升整體資訊吸收效率。

在瀏覽流程方面，網站於頁首位置設有整合式選單，用戶只需一次點擊，即可瀏覽所有主要內容分類，並迅速掌握整體網站架構。對於包含多層內容的頁面，系統會透過清晰的圖示標示可展開層級，協助用戶理解內容的深度與層次，並可按實際需要逐步深入瀏覽相關資訊。

在視覺呈現上，網站加入細緻而克制的動態介面元素，配合輕量的動畫效果，使頁面之間的內容轉換更為自然，為瀏覽體驗增添節奏感，同時保持閱讀的流暢度。設置於頁面中間及底部位置的流動式橫額，主要用作展示活動口號及相關訊息，進一步強化用戶對活動的參與感與記憶點，同時不會干擾主要內容的瀏覽體驗。首頁中央位置設有倒數計時器，作為網站的重要視覺特色之一，清楚提示馬拉松賽事的舉行時間，並在吸引注意力與整體版面平衡之間取得良好分寸。

整體而言，網站透過一致的版面結構、清楚的內容組織方式，以及具現代感而不過分張揚的視覺呈現，在承載大量資訊的同時，仍能保持高度可讀性與操作便利性，為不同年齡層及使用習慣的用戶提供流暢且具信心的瀏覽體驗。

手機應用程式體驗全面升級 2026 

手機應用程式作為渣打香港馬拉松的重要電子延伸平台，其設計不僅以跑手體驗為出發點，同時亦兼顧主辦單位在實際營運上的需要。DigiSalad 在開發過程中，深入考慮跑手於不同賽事階段的使用情境，以及如何透過手機平台協助減省流程、提升整體運作效率。

應用程式支援跑手管理個人資料、查閱賽事資訊，並於賽前、比賽期間及賽後保持與賽事的連結。其中一項核心功能為選手包領取安排，跑手可於應用程式內預先選擇心儀的領取日期及時段。此功能讓跑手能更有計劃地安排行程，同時亦協助主辦單位有效分流人流，優化選手包派發流程。

為提升參賽體驗及互動性，應用程式亦支援比賽成績分享，讓跑手可即時與親友分享成果。此外，DigiSalad 將商戶獎賞計劃整合至應用程式內，跑手可直接使用電子優惠券於指定商戶消費，延伸賽事體驗，增加整體參與價值。

在互動層面，應用程式加入打氣 Banner 功能，讓親友可即時建立加油訊息，並以橫向滾動方式展示於手機畫面上，猶如應援燈牌。此設計不但提升現場氣氛，亦讓支持者能以更具參與感的方式為跑手打氣。

整體而言，手機應用程式結合實用功能與互動設計，體現 DigiSalad 在考慮用戶體驗與實際營運需求之間取得平衡的能力，為跑手及主辦單位提供一個清晰、易用且具支援性的電子工具。

手機應用程式特點 2023- 2026 

隨時、隨地都可以跑

不論是身在任何城市，或是任何時區，都可以透過虛擬跑手機 APP 參加馬拉松。每位跑者都可以根據自身狀況選擇習慣的時間、路線進行記錄，甚至在起跑的 24 小時內，隨時可以暫停休息、補足體力、拍照分享參賽時刻，完全不受限制。這款虛擬跑手機 APP 的彈性，正是鼓勵各界跑友一起參與「渣打香港馬拉松」的重要元素！

排行榜

APP中加入即時排行榜，顯示當前前十名參賽者的時間和距離，希望能鼓勵其他參加者利用剩餘的次數再挑戰，打破紀錄。

國際認證

我們明白每一場馬拉松對於跑者的意義，即使在嚴峻的疫情下，這樣的榮耀與肯定也不可或缺。DigiSalad 為此打造電子證明書的功能，系統會將跑者所登錄的記錄擷取最佳成績，再透過虛擬跑手機 APP 及電郵發送最終認證，為每一位跑者留下最獨特的紀念。

實體馬拉松

在疫情後，實體馬拉松終於能順利舉行。App再度改進，並結合其會員系統，讓所有合資格參加者都可以通過簡單的驗證流程登錄。他們可以通過展示自己的QR碼來收集運動員包。比賽前，參賽者甚至可以在App中上傳他們的RAT測試結果和疫苗接種記錄，以加快比賽當日的登記流程。更重要的是，他們可以在活動當天使用應用程式中的優惠券來兌換獨家獎勵，減少不必要的程序。

DigiSalad 的解決方案

中央化內容管理系統

為解決原有網站後台管理功能不足的問題，DigiSalad 為渣打香港馬拉松建立了一套以模組化設計為核心的中央化內容管理系統。此系統讓管理人員可於同一後台平台中，同時管理官方網站及手機應用程式的內容，確保不同數碼渠道之間的資訊一致性。管理人員可透過簡單直觀的操作介面，靈活管理各類內容，包括文字、圖片、版面結構及功能模組，而無需依賴技術人員進行日常更新。

在實際操作層面，管理人員可自由新增、刪除或重新排序不同內容模組，並按賽事的不同階段靈活調整網站及應用程式的顯示內容。例如，在報名及賽前階段，可重點展示跑手相關資訊；而於賽事結束後，則可即時隱藏或調整相關模組，確保內容能配合賽事進程及實際營運需要。

此具高度彈性的模組化中央化系統，不但有效提升後台管理效率及跨平台內容管理能力，亦有助降低日常維護成本，同時為未來功能擴展及長遠營運提供穩定而可持續的技術基礎，支援大型年度賽事的持續發展。

社交平台整合｜二維碼新功能體驗

DigiSalad 為渣打香港馬拉松的官方網站整合官方社交平台內容，於主頁設計專屬展示區域，將官方 Facebook 的最新動態及重點賽事資訊同步呈現在網站介面之中。透過此設計，參與者在瀏覽官網時，亦能即時接收官方發佈的最新資訊，或直接連結至官方 Facebook，提升資訊傳遞的即時性及一致性。

此整合方式亦有助主辦單位簡化內容管理流程，只需於官方 Facebook 發佈資訊，相關內容便可同步顯示於網站上，減少重複更新不同平台的工作負擔，讓資訊發佈更集中、更高效。

此外，DigiSalad 亦因應用戶以手機為主要使用裝置的習慣，為官方網站新增手機應用程式下載的二維碼掃描功能。當用戶於電腦或平板電腦上瀏覽網站時，只需使用手機鏡頭掃描畫面上的二維碼，即可直接前往應用程式下載頁面，無需切換裝置或額外搜尋，進一步簡化下載流程，提升整體使用體驗。

跨平台數據整合與系統遷移方案

考慮到渣打香港馬拉松涉及大量參賽者資料及實際賽事營運需求，DigiSalad 在內容管理系統中整合完善的數據管理與報表功能，並同時負責舊有網站內容及數據的安全遷移，確保整個系統升級過程能順利銜接。系統可整合來自官方網站及手機應用程式的相關數據，包括參賽者身份證號碼、選手包領取時段、T-shirt 尺碼，以及其他報名與使用資料，並統一整理為清晰且結構化的完整報表，方便管理人員集中檢閱與管理。

透過這套整合式報表機制，渣打香港馬拉松的管理者無需分散查閱不同平台或後台系統，便可全面掌握參賽者狀況，以及與賽事及人流安排相關的資訊。此功能在選手包派發流程中尤為重要，管理人員可根據報表內容作出更準確的部署，有效減少人手處理時間及出錯風險。同時，集中化的數據管理亦有助主辦單位分析整體參賽者分佈，避免個別時段或地點出現過多選手聚集，從而降低現場混亂或難以控制的情況，進一步提升決策效率及整體賽事營運表現。

此外，為配合全新網站架構，DigiSalad 亦負責將舊有系統中的資料遷移至新平台。整個資料遷移過程經過周密規劃，確保歷史資料得以完整保留，並在不影響前台瀏覽及用戶使用體驗的情況下，順利完成系統過渡，為後續的數據整合與長遠管理奠定穩定而可靠的基礎。

總結

透過整合官方網站翻新、手機應用程式開發、具彈性的內容管理系統，以及完善的數據管理方案，DigiSalad 為渣打香港馬拉松打造了一個完整而具前瞻性的數碼生態系統。

整體方案不僅透過官方網站及手機應用程式提升跑手及一般用戶在資訊獲取與互動上的體驗，同時亦有效支援主辦單位在大型賽事規劃與執行過程中的營運需要。

此項目充分展現 DigiSalad 在內容管理系統與使用者介面設計、系統架構規劃，以及大型活動數碼解決方案方面的專業實力，並為渣打香港馬拉松建立一個穩定、具可持續發展能力及長遠擴展潛力的數碼平台，為未來賽事發展奠定堅實基礎。