One page site
此案為永豐銀行協助信託公會承制的「退休風險管理問卷」,可於手機上操作的 RWD 網頁,背後套用行銀提供之試算公式,一步步問答後,最後以雷達圖呈現出風險屬性。
此專案由三位同仁分工完成:一位負責視覺設計、一位套用計算公式、我則是負責以 vuetify 框架執行切版,並使用 Highcharts 繪製結果的雷達圖。
此問卷先由一連串個人資產與支出的金額輸入,評估使用者的退休財務缺口數字。再由單選/多選題,評估出使用者老年生活的各種風險。
下方 2 張圖,圖 1 示範拖曳式數字輸入設計。相較於傳統的數字輸入,本站運用 拉 bar 拖曳式設計增加與使用者的互動,亦可直接鍵入金額,拖曳軸會自動滑動到對應的比例。圖 2 則側錄單選/多選題問答情境。
使用者經過填表試算所得到的結果,依照風險等級繪製成淺顯易懂的雷達圖。也提供各風險等級的配套措施與對應產品說明。最後 Highcharts 雷達圖需要存成一張圖供長按下載,此段處理我註記在 codepen 裡面做為紀錄。
設計上以信託公會的亮橘色為主色調,整體簡約、清晰。風險屬性結果頁,則分紅、黃、綠 (燈號) 對應高、中、低風險特質。