|
專案期間
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不一致的地方盤點，採用疊代的方式來更新，藉由新專案來帶動整體的元件對齊，雖無法一次到位，卻能在每一項專案開發後漸漸地將產品對齊。 |
|
萬事起頭難
在這次的建置過程中分為6個階段：
首先，我將產品一一截圖，找出用戶體驗不同的頁面，這些不一致的產生原因可能來自於不同設計師經手，或是在開發過程為了方便快速，使用現成的線上元件等，其中海報、按鈕、字體、色碼等，目前產品內就有各種不同的形式，需先將這些項目整理出來。
接著開始著手分類，尋找相同的介面元素將截圖依各元素分類，接著歸納元件，分為「可統整為現有規格」及「套用新規格」等清單，找尋相似元件。如果有些元件未考量到網頁及行動裝置呈現，在此階段就可重新定義「套用新規格」，讓整體可以依照螢幕適應性的方式自由調整，保持靈活性。「套用新規格」的部分雖無法立即套用在線上的版本，但在後續專案執行的時候即可以滾動式調整的方式來疊代。 將整體框架確定後便著手進行Design System的建置，將所有現有元素攤開，從樣式資料庫、統整色碼、字體、框架、排序、狀態邏輯和模組、裝置大小著手，並將不同的使用情境、頁面的所呈現的樣式分門別類的整理，完成基礎的元件建置。 |
|
