曉
  • .
  • .
2021年5月 - 2022年3月  

創建 HamiVideo Design System & 主要UI檔案

專案期間
8個月
擔任角色
​UI 設計師
負責
使用Figma創建HamiVideo Design System及文件
公司
中華電信
項目概況
01 | 背景
隨著HamiVideo產品規模變大、參與的團隊愈來愈多,為了改善多人跨部門的協作效率,我們決定建立HamiVideo的Design System,使UI介面俱備共同設計語彙,專注於解決設計難題並維持產品一致性​。
​
02 | 目標
目前HamiVideo經手的團隊較多,使用的管理工具也不盡相同,我們希望將所有檔案與規格統整至Figma,並將跨平台裝置切分開來(Web/iOS/AndroidApple TV/..),針對不同平台建立Design System,確保後續管理與開發、設計運作。
03 | 角色與交付
在這個項目中,我負責統合與建置所有的設計檔案與元件、撰寫操作邏輯規則等,並與團隊內的設計師進行共編與建置需求討論。由於以往公司產品沒有設計規範,即使有部分的功能文件,但隨著產品上市後公司用戶持續增長,且在短時間開發許多功能,過去的設計規範大多已不適用,因此必須將設計師集合,將所有人拉至同一條線上。
04 | 成果
最終產出了4款分裝置平台的UI檔案,建置了3款Design System,規格化樣式資料庫、統整色碼、字體、框架、排序、狀態邏輯和模組、裝置大小等,並將目前hamivideo不一致的地方盤點,採用疊代的方式來更新,藉由新專案來帶動整體的元件對齊,雖無法一次到位,卻能在每一項專案開發後漸漸地將產品對齊。

執行過程
Picture
萬事起頭難
在這次的建置過程中分為6個階段:
​
  1. 種子期:構思設計系統的架構與概念
  2. 蒐集資料:蒐集現有產品及其他公司相關UI文件
  3. 分類:將現有UI elements分類與整理
  4. 構思:列出所有可能的框架與頁面,並梳理之間的關係與邏輯。
  5. 定義:收斂系統基本架構與層級
  6. 討論:與團隊內的設計師進行共編與建置需求討論
首先,我將產品一一截圖,找出用戶體驗不同的頁面,這些不一致的產生原因可能來自於不同設計師經手,或是在開發過程為了方便快速,使用現成的線上元件等,其中海報、按鈕、字體、色碼等,目前產品內就有各種不同的形式,需先將這些項目整理出來。

接著開始著手分類,尋找相同的介面元素將截圖依各元素分類,接著歸納元件,分為「可統整為現有規格」及「套用新規格」等清單,找尋相似元件。如果有些元件未考量到網頁及行動裝置呈現,在此階段就可重新定義「套用新規格」,讓整體可以依照螢幕適應性的方式自由調整,保持靈活性。「套用新規格」的部分雖無法立即套用在線上的版本,但在後續專案執行的時候即可以滾動式調整的方式來疊代。

將整體框架確定後便著手進行Design System的建置,將所有現有元素攤開,從樣式資料庫、統整色碼、字體、框架、排序、狀態邏輯和模組、裝置大小著手,並將不同的使用情境、頁面的所呈現的樣式分門別類的整理,完成基礎的元件建置。
Picture
Visual Design
Powered by Create your own unique website with customizable templates.
  • .