【永豐銀行】永豐員工投資退休平台|打造退休堡壘 X成就幸福企業
持股信託
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/ca5de3ed7f92a6d220bc7e5c.png)
01
overview
案例背景:與員工共同努力,與老闆共同獲利
持股信託是由雇主為員工設立,每月由公司帳戶及員工薪資中提撥預算購入自家公司股票,以此激勵員工努力工作,為公司付出等於投資自身未來福利。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/d4bc21786feab42521a17a6f.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/671283fc1892823eaf38dfee.png)
案例背景:與員工共同努力,與老闆共同獲利
開發重點
持股信託的資金需要靠僱主與僱員共同儲蓄,因此網站以「共同」、「儲蓄」為關鍵字,整體頁面需傳達出勞雇雙贏的氛圍,同時結合畫面解釋持股信託的運作方式。
1. 故事性插畫風格
2. 使用者情境切換
3. 動畫影片吸引使用者
4. 小動畫增加畫面豐富度
02
FEATURES
主題規劃
以「合作」為連結故事的橋樑,每個月的固定投資就是砌起堅固堡壘、擴大公司營運的一磚一瓦,公司與員工的共同付出與儲蓄即是為了建築更好的未來添磚加瓦。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/87f3cd0b07847918e0579e33.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/223f3ebb8cb660c4a053a336.png)
資訊結合主題呈現
把產品資訊與屋瓦、堆砌、資金的意象結合,強調產品積少成多的特性,更加直覺、圖像化地將資訊與主題結合。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/5c7d604ab143e1dbe6a8eaea.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/6aae05c59e35f701973754f0.png)
條列卡片視覺引導
在網頁的每個區塊間以虛線作為連結,不僅暗示著網站動線,更暗示著旅途尚未結束,讓使用者閱讀不間斷。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/9f508a0868e8c16c3c96ce36.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2024/06/17/a6b210e208544ce6701c3e86.png)
卡片細節設計
我們針對網頁中重複出現的卡片元素做不一樣的細節調整,包含卡片角落的副標、主標與副標的關係等,讓整個網站更有一體感。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2024/06/17/c1c598f7f77fe307bd7b2425.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/ef40bef50d7b96cc53fd12e8.png)
03
DESIGN
設計規範 UI GUIDE
色彩計畫
持股信託的主視覺概念為「蓋城堡」,因此,設計團隊在網站色調上以大地色系為主,並以永豐銀行的標準色紅色作為點綴色。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/909f9f336e65c6824c0760ab.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/7533b0feb07276b429e7221a.png)
字體計畫
網站中的標題字體採用justfont明黑融合的金萱字型,明體的優雅與黑體的剛硬融合,恰好適合結合插畫與企業資訊的網站調性。 網站內文則是常見的思源黑體,保留資訊的易讀性。
本網站目標族群多以關鍵字著陸為主要來源,因此,開發上我們使用串接API的方式在網站上呈現特殊字體,讓特殊字體也可以被搜尋引擎快速爬取,把握SEO流量。
介面元素
結合網站主題的 Icon 設計
輔助資訊呈現的icon,我們選擇蓋城堡、施工相關元素,讓充滿心思的小細節也緊扣投資主題。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/00a6b3c9831ec550297ab28d.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/ee5bafcd64aec8b0feeacdd5.png)
04
Illustration
插畫設計結合小動畫
此專案中我們將插畫效果最大化運用,簡單動畫讓整體網頁更加活潑,為嚴肅的投資理財增加不一樣的氛圍。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/10/d3297f12e868a5ea38aaec69.gif)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/10/12536365b4d0317d0237fe20.gif)
動畫呈現亮點
網頁中的10秒小動畫是這個作品中的亮點,影片中以砌城堡為比喻,說明了持股信託的運作方式,在讓人快速理解持股信託功能的同時,加深觀眾對商品的印象。
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2023/03/13/4aa3d7956f1c8adfdb54370e.png)
05
REVIEW
更多頁面
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2024/06/17/c8a564ab045284b37522b028.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2024/06/17/238c3f2dfc021e5fe69fb932.png)
![Image](https://lyrasoft.s3.amazonaws.com/simular/images/2024/06/17/d2d67c0dc14f572c3a603343.png)