Agu 2021
⭢
UI 設計
曾就職于果思設計，負責華城 EVALUE app 的主視覺、介面以及交互設計。
主要負責範圍
• 競品分析：
垂直與橫向競品分析、優秀國內外設計作品拆解
• 用戶訪談：
與目標用戶線上線下訪談、測試 wireframe 原型
• wireframe：
與專項UX協作，一同研製測試版原型
• prototype：
製作可操作的互動式原型
• 介面設計＋交互：
排版、製圖、切版，設計互動體驗，製作交互動效或提示動畫
• 品牌規範：
根據調研成果，以及客戶提的需求做設計規範
RESEARCH
專案需求定義
甲方計劃推出一款自家品牌的充電樁搜索及使用應用程式，讓消費者透過該App便捷地充電並完成支付，同時累積忠實用戶。於是我們在討論協商後列舉出了下面需求功能。
• 搜索站點
推薦站點、查詢站點資訊、預約站點、導航
• 充電流程
選擇槍頭、插槍順序引導、充電介面、付款介面、結算介面、歷史紀錄
• 會員系統
會員中心、電能值(經驗值)等級晉升、車主優惠
• App通用功能區
付款＋儲值設定、帳號設定、通知、隱私權以及其他
RESEARCH
預期使用場景
針對不同的使用場景，我們深入分析用戶需求，並將主要場景劃分為三大場域：車上、充電時，以及其他隨時使用的情境。
車上模式：專注於簡化操作與快速回應，確保行車安全與便利性。
充電時：提供沉浸式體驗與實用功能，讓等待時間更有效率。
其他隨時：滿足用戶碎片化時間的需求，提供直覺且流暢的操作體驗。
行車期間
推薦、預約、導航充電站點
充電期間
充電指引、顯示目前狀態、結算
SOLUTION
品牌/App icon
華城現有的品牌已經有橫向的長版logo 
存在，但在手機桌面中，圖像icon的識別度會比文字logo高。
於是我根據華城的logo的現有對角線，以及他們想的展現的三個要素：穩定(三角)、能源（閃電）、華城元素（橘色能量寶石）組成了以下的品牌延伸識別，作為app icon。
SOLUTION
品牌/App icon
這款App以深色模式為核心設計，主色調採用深灰色，並融入華成品牌的橘色與藍色作為視覺亮點。考量到品牌藍的原色調過於深沉，在UI設計上，我們調整為較淺的藍色，以提升對比度與可讀性，同時維持整體視覺的和諧性。
在互動設計上，我們為特定按鈕加入了光暈動效（Glow Effect），不僅強化用戶操作時的引導性，幫助快速定位關鍵功能，同時也透過動態效果加深用戶對品牌的記憶點，提升整體使用體驗與品牌識別度。
中文字體
英文/數字字體
色彩計畫
按鈕設定
Icon 和徽章
站點種類/狀態
站點資訊頁下方狀態欄
費率資訊卡片狀態
SOLUTION
主要功能介面
由於專案的定位是工具App，重點不在單次時長，而是期望用戶高頻使用且黏性高，根據這個特性以及之前提過的三個場域分野，我作出了以下的設計。目前列舉三個主要功能區塊，並展示縮略流程。
搜索充電樁
首頁下方深色界面處有一鍵搜索通道，可提示附近的華城站點。在選擇特定站點後，可以上滑瀏覽站點細節決定是否預約充電。
充電流程
在充電樁前停靠下車後，用戶可以根據以下大致流程指示完成充電需求，在真正的app中會做更細緻的引導。
其他功能
其他功能基本可以通過側邊欄展開前往，比較重要的就是付款、儲值、以及會員中心，這三個區塊由於篇幅有限只能放一張，如有興趣可以前往下載查看。
DESIGN DETAILS
等級晉升
等級上甲方希望用台灣的六種原生動物取代常見的數字等階，在造型上也要與app整體風格配適。
我使用汽車的金屬質感為主，以幻光帶出科技能源的味道，最後以徽章的呈現讓人聯想到遊戲的搜集性，鼓勵用戶充電解鎖。
PS : 金屬分別是黑鐵、青銅、赤銅、密銀、精金、科幻金屬。
DESIGN DETAILS
動效案例
App 採用了許多動效以及圖片代替了純文字的說明，整體的app基調要再工具的基礎上添加一種遊戲可玩感。
充電動畫（未使用＋現行版）
左側三個為充電動畫測試版本，最終甲方選定最左側方案。2.0 版後，車體更新為白模設計，整體視覺更顯精煉。
Vr.1 電線（正取）
Vr.1 能量環
Vr.1 能量環
Vr.2 呼吸燈（正取）
其他頁面動畫
從左至右分別是，充電提升經驗值後的會員升級動畫、充電前的流程提示、停車提示、首頁呼吸燈。
升級燈
充電提示動畫
提示倒車動畫
首頁呼吸燈
Thanks for watching
如果有任何商業合作邀請，歡迎聯繫