品牌識別強化設計
品牌識別強化設計
品牌識別強化設計
打造一致且具識別性的跨地區首頁體驗
打造一致且具識別性的跨地區首頁體驗
專案一：首頁八小格 Icon 風格定義
專案一：首頁八小格 Icon 風格定義
專案一：首頁八小格 Icon 風格定義
首頁的八小格功能區為用戶使用頻率較高的服務入口。但原本的 icon 設計缺乏系統性與品牌感，不僅辨識度不足，也無法傳遞金融產品應有的專業、沈穩形象，進而影響首頁整體的視覺質感與信任感。
首頁的八小格功能區為用戶使用頻率較高的服務入口。但原本的 icon 設計缺乏系統性與品牌感，不僅辨識度不足，也無法傳遞金融產品應有的專業、沈穩形象，進而影響首頁整體的視覺質感與信任感。
定義問題
定義問題
品牌調性不明確
品牌調性不明確
現有 icon 風格無法有效傳達專業沈穩的品牌核心價值主張
現有 icon 風格無法有效傳達專業沈穩的品牌核心價值主張
功能圖像辨識度低，使用者難以從 icon 聯想到對應的操作功能，降低使用效率與點擊動機
功能圖像辨識度低，使用者難以從 icon 聯想到對應的操作功能，降低使用效率與點擊動機
限制＆挑戰
限制＆挑戰
品牌風格限制
品牌風格限制
Icon 設計需呼應品牌主張（專業金融、生活省心），避免過於活潑
Icon 設計需呼應品牌主張（專業金融、生活省心），避免過於活潑
技術與顯示條件
技術與顯示條件
必須確保 icon 在小尺寸或不同裝置顯示下，仍具良好可讀性與辨識度
必須確保 icon 在小尺寸或不同裝置顯示下，仍具良好可讀性與辨識度
顏色過於繽紛
顏色過於繽紛
風格雜亂
定義設計目標
定義設計目標
用戶需求
用戶需求
How might we
How might we
建立 icon 與功能之間的直覺聯想，讓操作更順暢且減少認知成本？
建立 icon 與功能之間的直覺聯想，讓操作更順暢且減少認知成本？
商業目標
商業目標
How might we
How might we
在維持品牌一致性的同時，設計出兼具美感與實用性的 icon 視覺語言？
在維持品牌一致性的同時，設計出兼具美感與實用性的 icon 視覺語言？
設計過程
設計過程
設計過程
桌面研究
桌面研究
為確保分析結果具參考價值，我從以下兩個面向挑選競品：
為確保分析結果具參考價值，我從以下兩個面向挑選競品：
功能對應
功能對應
具備支付、轉帳、餘額查詢等相似核心功能的 App → 了解 icon 呈現策略
具備支付、轉帳、餘額查詢等相似核心功能的 App → 了解 icon 呈現策略
品牌定位
品牌定位
視覺風格偏向「專業金融」、「生活省心」定位的品牌 → 風格參考依據
視覺風格偏向「專業金融」、「生活省心」定位的品牌 → 風格參考依據
風格嘗試
風格嘗試
為強化首頁功能區的識別度與整體視覺調性，我針對 icon 設計進行多元風格探索，並考量品牌調性、辨識性與實作可行性提出以下幾種提案風格：
為強化首頁功能區的識別度與整體視覺調性，我針對 icon 設計進行多元風格探索，並考量品牌調性、辨識性與實作可行性提出以下幾種提案風格：
單色線條＋局部填色
單色線條＋局部填色
提升基礎辨識度與結構清晰度，提升整體風格一致性
提升基礎辨識度與結構清晰度，提升整體風格一致性
雙色線條版（主色填色強調)
雙色線條版（主色填色強調)
透過主色強調功能重點，強化視覺引導與層次感
透過主色強調功能重點，強化視覺引導與層次感
雙色實色版
雙色實色版
增加圖像視覺重量與品牌親和力，建立更鮮明的品牌情緒氛圍
增加圖像視覺重量與品牌親和力，建立更鮮明的品牌情緒氛圍
單色實色漸層版本
單色實色漸層版本
兼具現代感與專業度，提供清晰又沈穩的品牌識別
兼具現代感與專業度，提供清晰又沈穩的品牌識別
提案挑戰
提案挑戰
提案過程中遇到各部門主管對視覺主觀偏好不同
提案過程中遇到各部門主管對視覺主觀偏好不同
→ 使用「易讀性」和「視覺權重」作為討論依據引導團隊評估
→ 使用「易讀性」和「視覺權重」作為討論依據引導團隊評估
最終版本
最終版本
最終設計
最終設計
最終設計
Before
設計效益
強化品牌感與專業形象
提升視覺一致性與辨識度
利於後續維護與延展
After
After
After
設計效益
設計效益
設計效益
強化品牌感與專業形象
提升視覺一致性與辨識度
利於後續維護與延展
專案二：多地區首頁視覺辨識優化
專案二：多地區首頁視覺辨識優化
專案二：多地區首頁視覺辨識優化
App 支援不同地區版本（如台灣、日本、香港），但原本的地區切換提示僅透過首頁背景圖樣區隔，不夠明顯且容易被忽略。加上新版首頁正進行視覺風格重整，原本的背景樣式也不再適用，需重新設計一套更清晰、風格一致的地區識別方案。
App 支援不同地區版本（如台灣、日本、香港），但原本的地區切換提示僅透過首頁背景圖樣區隔，不夠明顯且容易被忽略。加上新版首頁正進行視覺風格重整，原本的背景樣式也不再適用，需重新設計一套更清晰、風格一致的地區識別方案。
定義問題
定義問題
識別性不足、視覺風格不一致
識別性不足、視覺風格不一致
使用者無法明確感知目前所處地區，可能導致誤解或錯誤操作
使用者無法明確感知目前所處地區，可能導致誤解或錯誤操作
若以背景強化識別性，需兼顧首頁整體的和諧與風格一致性
若以背景強化識別性，需兼顧首頁整體的和諧與風格一致性
限制＆挑戰
限制＆挑戰
設計一致性與系統性
設計一致性與系統性
需維持首頁整體風格的統一與清爽感，避免引入破壞性的視覺元素
需維持首頁整體風格的統一與清爽感，避免引入破壞性的視覺元素
視覺干擾控制
視覺干擾控制
視覺設計不可干擾用戶瀏覽首頁核心功能操作與內容閱讀
視覺設計不可干擾用戶瀏覽首頁核心功能操作與內容閱讀
分辨不出境內和境外版的區別，不知道自己目前是哪個版本？
分辨不出境內和境外版的區別，不知道自己目前是哪個版本？
香港
日本
定義設計目標
定義設計目標
用戶需求
用戶需求
How might we
How might we
提升用戶對當前地區的辨識度？
提升用戶對當前地區的辨識度？
商業目標
商業目標
How might we
How might we
建立具有地區識別度的首頁體驗，進而鼓勵用戶在海外使用街口付款？
建立具有地區識別度的首頁體驗，進而鼓勵用戶在海外使用街口付款？
視覺探索提案
視覺探索提案
視覺探索提案
地區識別優化
地區識別優化
點擊 badge 可快速跳轉至地區設定頁，提供更順暢的切換體驗
點擊 badge 可快速跳轉至地區設定頁，提供更順暢的切換體驗
快捷地區切換體驗
快捷地區切換體驗
地區特色背景
地區特色背景
設計不同地區代表性的圖騰背景 → 增加情境感
設計不同地區代表性的圖騰背景 → 增加情境感
新增地區徽章
新增地區徽章
於 logo 旁顯示當前地區名稱，強化當前地區辨識度
於 logo 旁顯示當前地區名稱，強化當前地區辨識度
最終設計
最終設計
最終設計
Before
設計效益
強化地區識別度
提升視覺一致性
更便利的地區切換
After
After
After
After
設計效益
設計效益
設計效益
強化地區識別度
提升視覺一致性
更便利的地區切換
學習＆反思
學習＆反思
學習＆反思
從視覺偏好到用戶導向的設計決策
從視覺偏好到用戶導向的設計決策
學會如何引導產品團隊從「我覺得好不好看」的主觀討論，逐步轉化為「依據品牌定位、使用場景與資訊目標」的設計標準，提升溝通效率與團隊共識。
學會如何引導產品團隊從「我覺得好不好看」的主觀討論，逐步轉化為「依據品牌定位、使用場景與資訊目標」的設計標準，提升溝通效率與團隊共識。
「一致性 vs 差異性」的設計
「一致性 vs 差異性」的設計
在多地區 UI 識別設計中，我學會在維持品牌一致性的前提下，策略性地設計差異化元素，強化辨識度而不破壞整體平衡。
在多地區 UI 識別設計中，我學會在維持品牌一致性的前提下，策略性地設計差異化元素，強化辨識度而不破壞整體平衡。
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！
LET’S
( WORK )
TOGETHER
如果你對我的作品有興趣，
歡迎隨時聯繫我！