金融科技公司規劃官網時,常把需求寫成「科技感設計、多語系、產品介紹、聯絡表單」,但這些名詞不足以建立信任。企業採購、技術評估者、合作夥伴與一般使用者需要的證據不同:有人要理解產品適用情境,有人要找 API 或整合資料,有人要確認登入入口,也有人只想知道提交資料後會發生什麼事。

因此,科技公司官網的規格不應從首頁動畫開始,而要先畫出「認識產品、驗證能力、採取下一步」的決策路徑,並明確區分公開官網與實際交易或營運系統。若兩者邊界不清,行銷頁可能承載不必要的敏感操作;若全部只放一句「聯絡我們」,評估者又無法取得足夠資訊。

先依決策問題設計產品頁

每個產品或方案頁應回答六個問題:服務對象是誰、解決哪個流程、需要哪些前置條件、會與哪些系統交換資料、導入或試用的下一步是什麼、哪些內容需要進一步洽談。頁面若只堆疊「安全、快速、智慧」等形容詞,讀者無法比較,也不利於業務接手詢問。

功能可依情境分層。第一層用非技術語言說明業務流程;第二層提供功能模組、角色與資料流;第三層再連到開發者文件、常見問題或正式洽詢。方案比較表則只放能被公司實際確認與維護的差異,未知項目應引導詢問,不要為了版面完整自行補出限制、價格或成效數字。

「Novaflow 金流營運平台」(novaflow-fintech)案例是一個六十七頁的金融科技產品官網,透過多層 Mega Menu 收納產品內容,另有方案比較與開發者文件導覽。這個案例可用來理解不同讀者的路徑:企業採購需要方案範圍,技術人員需要文件入口,而尚在探索的訪客需要先從產品情境開始。案例中的頁數不是其他公司的目標;真正值得借鏡的是讓同一產品能從決策與技術兩種角度被找到。

把公開官網與登入系統的邊界畫清楚

資訊架構圖應標示哪些頁面公開、哪些動作會離開官網、哪些需要登入,以及每個入口的正式網域與擁有者。導覽中的「登入」「控制台」「開發者文件」「服務狀態」若分屬不同系統,應使用一致名稱並讓使用者看得出目的地,避免相似按鈕指向不同環境。

詢問或申請表單只收完成下一步真正需要的資料。規格要記錄欄位目的、收件角色、錯誤提示、送出後畫面、資料保存與刪除責任;若後續由業務人工確認,就明確告知,而不是讓使用者誤以為已開通服務。測試時也要包含連線失敗、重複送出與返回修改,不能只驗證成功畫面。

若官網包含會造成財務結果、法律承諾,或修改與刪除使用者資料的操作,防錯應直接列入互動規格。W3C 對 WCAG 2.2 成功準則 3.3.4 的說明指出,這類重要提交至少要能撤回、檢查輸入錯誤並提供修正機會,或在完成前讓使用者檢視、確認與更正。這不是要求每個普通表單都增加確認頁,而是要辨識後果重大的動作,並為它們建立相稱的防錯流程。

驗收可用具體情境進行:使用者輸入錯誤資料時能否理解哪裡有問題;重要操作完成前能否看見摘要並返回修改;刪除或變更資料後是否有規格中約定的復原方式。若實際交易全在另一個產品系統,官網則應驗證入口、環境標示與跳轉,不要在形象站假裝完成交易。

安全要求要包含部署與觀察方式

「網站要安全」不是一項可直接驗收的功能。需求書應先盤點第三方腳本、分析工具、聊天元件、影片、字型與表單服務,記錄用途、載入來源與移除方式。每增加一個外部元件,都應由指定角色確認必要性,並在更新後重新測試主要頁面與表單。

MDN 的 Content Security Policy 實作指南說明,CSP 可限制頁面允許載入與執行的程式來源,嚴格政策可採 nonce 或 hash;文件也建議正式強制前先用 Content-Security-Policy-Report-Only 觀察違規,找出會被擋下的資源。這表示 CSP 不應只是合約中的縮寫,而要有盤點、測試、報告接收與逐步啟用的交付流程。

驗收紀錄可包含主要頁面的回應標頭、允許來源清單、報告模式期間發現的問題、正式啟用範圍,以及第三方元件新增時的變更步驟。CSP 只是多層防護的一部分,文章不把它描述成完整資安保證;供應商仍應依實際架構說明更新、權限、弱點處理與事件聯絡責任。

多語系要以頁面對照與發布狀態管理

金融科技產品常同時面向本地營運、海外合作夥伴與技術社群。多語系規格應先建立頁面對照表:每個中文頁是否有英文版本、產品名稱與術語由誰核准、下載檔是否分語言、某語言尚未完成時顯示什麼,以及更新後如何通知翻譯與覆核角色。

Google Search Central 的本地化頁面文件說明,可透過 HTML、HTTP 標頭或 Sitemap 表示語言與地區版本;每個語言版本要列出自己與其他版本,雙向對應缺失時標註可能被忽略。文件也說三種方法從 Google 角度效果相同,沒有必要為了搜尋同時採用全部方法。專案應選一種團隊能持續維護的方式,並在新增、下架與改網址時同步更新對照。

驗收不要只點語言切換器。應抽查同一產品的各語言網址是否互相對應、主要內容是否真的翻譯、選單與表單是否維持同一任務,以及未翻譯頁面是否有清楚處理。開發者文件或 PDF 若另有語言版本,也要放進同一張對照表,不讓導覽顯示英文卻把人帶回中文內容。

用四條任務路徑完成官網驗收

第一條是企業採購從產業或需求情境找到方案範圍,再送出包含足夠背景的詢問。第二條是技術評估者從產品頁抵達正確版本的開發者文件。第三條是既有使用者辨識正式登入入口,且不會把測試環境或行銷表單誤認為控制台。第四條是海外訪客切換語言後,仍能走完同一項核心任務。

每條任務都要在桌機與手機測試成功、錯誤及返回修改,並記錄頁面、責任系統與驗收證據。交付時再確認網域、部署帳號、內容後台、第三方腳本、CSP 設定、語言對照與操作文件由誰持有。金融科技公司官網的信任感,不只來自視覺,而是訪客能取得足夠資訊、辨識正確入口,並在重要操作前獲得清楚的確認與防錯。