UI 設計
設計系統 / 元件庫
迭代設計
深色模式
BESTLA ─ 加密金融聚合管理平臺
專案期間
2 個月 (2022.11 - 2022.12)
開發方式
敏捷開發
服務公司
冠釩科技
擔任角色
UI/UX 設計師
負責任務
UI 設計、流程討論、原型製作、工程交付
使用工具
Figma、Jira、Slack
專案簡介
Background
BESTLA 是一個加密金融聚合管理平臺，使用者可以透過 BESTLA 交易、投資或規劃加密幣產。隨著 BESTLA 的功能越來越成熟，整體架構也愈趨複雜，導致部分元件沒有符合一致性的規範。
專案目標
Goal
希望透過這次專案，功能大致不變的情況下，加入多一點圖表呈現，並翻新設計系統和介面，將風格調整的更簡約、圓潤，未來若要拓展更多功能時，可以更順暢的進行開發。
角色與產出
Teamwork
我與另一位設計夥伴、產品經理及五位工程師彼此合作完成這個專案。和產品經理討論 UX 流程後，我和設計夥伴透過建置設計系統產出 UI 設計，並藉由原型製作、設計標註呈現產品細節，最終將設計成果交付給工程師。
優化重點介紹
Design Deliverables
首頁
交易頁面
行情頁面
定義元件細部規則
由於在這個專案裡，有非常多需要使用 Popup 的畫面，我們根據優先程度和使用情境，標示出各類型 Popup 的使用規則和出現位置，除了避免我們在設計時誤用，也能協助工程夥伴快速辨別各元件，加速後續開發效率。
深色模式
我們也為 BESTLA 新增了深色模式，使用者可以根據自身習慣或需求使用選擇喜歡的模式瀏覽 APP。我們也重新規劃了深色模式下的顏色系統，並定義抽換顏色的規則（如：卡片統一使用 Dark04 作為底色），使視覺上看起來更一致、舒適。
設計規範
Design Guideline
學習與反思
Takeaways
01｜細心留意區塊鏈產品的眉眉角角
由於虛擬貨幣的種類繁多，每一幣種又會根據性質及發行量而有不同價值，導致進行幣種交易時常會出現繁長的小數點。此外，各個使用情境也會有對應的數值呈現方式（如：有些情境需顯示小數點後八位，有些則是後六位）。除了需要再三確認數值是否輸入正確，更要多留意在小尺寸上會不會有破版的狀況，才不會做出體驗不佳的介面設計。
02｜在客戶需求和使用者體驗間平衡
有時需求方提出的一些修改考量，可能會影響到整體的使用者體驗，作為設計師需要考量兩方的平衡，不能因為是需求方提的意見就照單全收。我和設計夥伴通常會在製作過程中先設想哪些流程或畫面可能會被需求方提出來詢問，再針對這些部分收集有可性度的數據或文章，之後在 Brief 階段就可以利用較完整的資料來和需求方討論更完善的解決方案。