VIVOTEK 設計系統

首頁 > VIVOTEK 設計系統

專案概覽

VIVOTEK 是網路影像監控產業的知名製造商，經歷了 20 多年的快速增長。為了建構更具凝聚力的產品，VIVOTEK 設計系統需要一致的設計語言。

1. 定義可重複使用、跨平台的基礎和介面元件
以便提高產品開發團隊的效率，實現產品的一致性與協調性。

2. 設計系統應該由基礎和 UI 元素組成
基礎：色彩、字型、圖示
UI 元素：可重複使用的組件和模式

此專案成員共有 UI 設計師 4 人、GUI 設計師 2 人。如何在產品團隊中同時進行有效和一致的協作，是此專案的一大挑戰。

這是一個團隊項目。我與其他設計師合作，負責圖形使用者介面設計（GUI Design）。我的產出如下列：

1. 建立設計系統
（定義檔案命名規則、UI 組件與模式設計、圖示繪製規範）
2. 繪製超過 140 個圖示
3. 提供完稿文件與設計交付

專案期間：2 年（2020-2021）
功能總數：56 個
產品規模：超過 450 頁
分類標籤：介面設計、設計系統、網頁應用

我們設計系統的框架，參考了許多知名設計系統所採用的常見結構。共分為三個單元，即「基礎」、「組件」和「模式」。此外，並於每一單元的第一小節提供「概覽」便於搜尋和使用。

我通常會在視覺圖稿上，測試各視覺元素之間的差異，並將最終準確的產品視覺效果提供給產品開發團隊。這有助於利害關係人直接地了解最終產品。

作為一名內部設計師，建立設計系統對我來說是一個的千載難逢的機會。打造 VIVOTEK 設計系統非常具有挑戰性；兩年來，我很高興也很榮幸成為該項目的主要先驅貢獻者之一。透過這個項目，我意識到：

當涉及到不斷發展的設計系統時，協作工作至關重要。

與公司一樣，設計系統也在不斷發展。因此，產品團隊中的各個專家和貢獻者之間需要進行有效和一致的協作，以減少重工和錯誤。

感謝我們團隊的每一位成員，透過討論、想法分享和任務授權，讓大家達成共識，並作為一個整體一起工作。能夠成為這個項目團隊的成員之一，我感到非常自豪。