【永豐銀行】退休行銷網頁｜用插畫與小動畫讓畫面更豐富
打造我的理想退休樹
01
OVERVIEW
案例背景：理想的退休生活藍圖
每個人心中都有一個理想的退休生活藍圖，或許是在海邊每天曬太陽，或許是開文青咖啡廳，也可能是學一門新語言。
ibrAin為永豐銀行的金融商品，主打方便的自動計算系統，小額定存也能輕鬆投資全球，可設定退休、旅遊、購屋、子女教育金等，為不同目的規劃投資計畫。
本次網站主題「打造我的理想退休樹」，為ibrAin的退休規劃行銷網頁，以樹為主軸，表達資本的累積就像種樹一樣，從年輕就開始準備，為自己打造專屬退休樹。
客戶的需求與網站規劃
TA瞄準45到55歲，有退休計畫的族群。
以Slogan的「打造我的理想退休樹」出發，以清新的顏色、種樹的意向，打造親民、安穩、循序漸進的正面形象。
1. 繪畫風格設計
2. Popup選單與行動呼籲（CTA）設計
3. 小動畫增加畫面豐富度
02
FEATURES
風格制定
本次專案是為已經存在的金融商品制定，金融商品因牽涉個人資產與法律，許多用詞、表達方式都須經過法遵人員或上級機關核可，因此，比文字的變化，設計師更能在視覺上有所發揮，於是此次專案的視覺風格前後共出現了5個版本。
與永豐進一步討論後，我們最後風格選擇用接近真人比例的插畫，以此增加使用者帶入感。以辛苦種樹的人，代表著正在為了未來耕耘的你和我，陽光和煦、綠草如茵，為完美的退休計畫拉開序幕。
Popup選單設計
在製作Popup的選單上，以井然有序卻輕鬆的方式，誘使造訪者想把popup點開來滑滑看。男生與女的icon，在各個階段的穿著打扮與表情、動作都有經過審慎地構圖與調整，讓人感受到設計的巧思與用心。
互動拉霸
比起單純的輸入數字，以拉霸的方式能讓使用者更輕鬆操作，在增添趣味的同時默默提升使用者的填答意願。
圓弧形區塊分界
在網頁每個區塊的分界線上，特別以圓弧造型做設計，讓整個網站的視覺效果更溫潤柔和，呼應整個網站想帶給使用者的溫暖、清新感受。
03
DESIGN
設計規範 UI GUIDE
色彩計畫
設計團隊在退休行銷網頁整體視覺設計上設定的色調，為強調栽種樹木的主題，因此以藍色與綠色作為網站的主色。
而為搭配插畫所營造的愜意形象，採用飽和度較低的顏色，使整體視覺效果更加柔和。
介面元素
符合中老年人的元素設計
採用比一般網頁大1.5倍的文字設計，並加大按鈕及卡片的點擊範圍，讓此網站的TA，也就是45到55歲、有退休計畫的族群，也能不費力的閱讀和操作。
卡片
設計團隊將卡片結合插畫，對總共32張卡片進行系刻畫。依據性別、年齡、投入資金、表情、肢體、背景甚至手中植物皆有不同的描繪方式，讓每張卡片更豐富、更有識別度。
按鈕與標籤
將網頁中最重要的按鈕結合插畫，一眼就區分主要的按鈕與次要的按鈕、除了吸引使用者點擊外，也讓整體視覺更為活潑、不呆板。
04
Illustration
插畫設計結合小動畫
增加畫面豐富度的基本技巧有許多，例如處理細節、使用跳躍色彩或圖案塞滿版等，但如果，想要畫面同時保持乾淨又豐富該怎麼做呢？
答案就是畫面精緻、細節滿分的小動畫。
面對動畫越多網站檔案越大的問題，我們的設計師選擇用Lottie Player，將AE動畫匯出成json檔，檔案更小，效果更好！
05
REVIEW
更多頁面
