JarviX 介面改版 - 導入設計管理，提升介面整合度。

擔任角色：UI / UX Designer

負責內容：新 UI 設計、Design System 建置、資訊架構統整

UI SaaS WebAPP Design System

產品開發隨著時間推演，起初所訂立的發展方向與現在結果有很大的差別，功能數與複雜度也擴大到一個規模必須重新規劃的狀態，藉由這次新功能擴充的需求，以及為要因應未來 UI 樣式需要快速調整的需求，因此進行這次全盤 UI 的改版。

  • 產品快速迭代的過程，設計系統並沒有持續完全跟上，導致UI呈現的不一緻性。
  • 許多 2B 的企業都希望有淺色版本，但目前設計前端實作面都無法有效的快速調整。
  • 介面佈局的擴充性也因為新功能項目越來越多開始顯得不足或是採用方式不友善。

進行介面重新改版，透過重新盤點統整網站資訊架構，讓大、小功能之間的組合性變得更好。透過 Design System 提升 UI 的一致性，元件之間的組合性更多元化，並提升頁面佈局的擴充性、適切度。

設計流程

盤點問題 & 需求

盤點產品 UI 設計現況問題，以及規劃未來功能需求的項目。

本次設計要點

1
  • 提升元、組件的組合彈性以及管理性。
  • 提升元件樣式的泛用性。
  • 重新定義顏色用途＆延伸應用。
2
  • 重新定義間距數值，減少空間浪費。
  • 定義泛用性高的框架，乘載不同的內容。
  • 避免視覺負擔，減少過多巢狀色塊的堆疊。
3
  • 整併舊功能，以及不符合現況的資訊架構。
  • 規劃未來新功能可持續擴充的方式。
  • 重新定義新舊功能的互動方式。

1. 重構 Design System

// Before

Ａ元組件隨著產品規模越大，數量也變得越多，導致管理困難度很高。

  • 加入不同方式的檢視工具，因應不同時候的狀況可作資料表顯示上的彈性調整。
(舊版UI，按鈕樣式設定)
(舊版UI，文字樣式設定)
  • 許多元組件的狀態定義並不完善，導致未定義的狀態工程師實作結果都不同。(input, button, navigation item)
(舊版UI，狀態遺漏)
(舊版UI，相同按鈕不同 Hover 呈現)
(舊版UI，相同按鈕不同 Hover )
  • 使用目的一樣的組件，但 UI 呈現樣式卻不同。(ex. 應用程式filter選單)
(舊版UI，相同組件不同呈現)
(舊版UI，相同組件不同呈現)

Ｂ舊色彩計畫較為基礎，隨著產品越來越複雜，色彩定義的不足情況也開始凸顯。

  • 色彩定義不夠細節，因此相同顏色被使用在很多不同地方(ex. 底色、邊線)，導致無法輕易調整顏色。
(舊版UI，色彩定義)
  • 顏色搭配邏輯未被詳細設計，遇到就顏色衝突時，只能另外產生新色，最後導致非常多相似色。
  • 未來需要支援深淺色雙版本 UI，但目前色票與實際應用有差距，只能逐一調整校對所有頁面與功能呈現。
(舊版UI，太多極為近似的顏色)
// After

Ａ落實「原子設計」概念，儘可能完整定義元素、元件後再進行組件製作。

  • 定義基礎元素，例如：文字的字體大小、色彩計畫、符號、間距、Layout Grid...等。
(新版，基礎元素)
(新版，文字定義)
(新版，Icon 統一)
  • 完善基礎元件的狀態，例如：按鈕的 Hover, Focus, Active 的狀態呈現，或是 input 輸入元件的使用狀態，例如：有值與沒有值的 Ｄisabled 狀態呈現區別。
(新版，按鈕狀態)
(新版，下拉選單狀態)
(新版，Tab 狀態)
  • 同組件有更多變化類型可供使用，例如：下拉選單的選項呈現可以因應不同顯示或使用需要而切換。(多選/單選，次資訊，符號)
(新版，下拉選單組件)

B）重新定義色彩計畫，加強顏色擴充性以及色彩風格變更的邏輯一致性。

  • 顏色採用雙階層的設計，第一層為最原始的色彩層，作為顏色使用的範圍，第二層則為應用層，取用色彩層的顏色做組合，因此可以在進行色彩風格轉換時，可以更明確暸解有哪些顏色可用，以及色票的規則。
(新版，色彩計畫說明)
(新版，色彩計畫)
  • 將顏色的使用情境進行分類，在逐一設計各分類中的色票，進行 UI 設計時就可以依照使用意圖來選擇對應的色票顏色，避免相同顏色混雜使用後又產生配色衝突。
(新版，顏色應用分類)
(新版，顏色應用分類)

2. 優化 UI Layout

// Before

Ａ所有設定類型的內容皆採用 Dialog 形式作呈現，當遇到複雜的內容時，就會遇到顯示上的設計限制，並影響操作體驗。

  • 當遇到需要有次階層的設定內容或需要呈現再次確認的情況時，則必須想辦法採用其他方式來避免，兩個 Dialog 重複堆疊的情況。
(舊版，Dialog 過於濫用)
  • 步驟類型的設定內容差異高，導致 Dialog 區塊不是過大就是太小，區塊高度也不好定義。
(舊版，複雜的內容需要更多空間)
(舊版，簡單的內容留白空間過大)

Ｂ當遇到多階層的資訊或多設定項時，常常使用色塊來劃分群組範圍，導致色塊堆疊容易過多，，產生不必要的視覺負擔，以及過多內邊距產生的空間浪費。

  • 表格欄位為要區隔不同資料內容，而疊加多種顏色，導致表格呈現異常突兀。
(舊版，Table 過於突兀)
(舊版，Table 過於突兀)
  • 表單的設定，為了區分設定類型、以及劃分設定項的子項目，因此大量使用色塊堆疊。
(舊版，過多色塊層級)
(舊版，過多色塊層級)
// After

Ａ盤點目前所有的設定畫面內容，將設定內容改為以頁面形式做呈現，而 Dialog 則作為頁面的延伸顯示區塊，透過區分不同階層的內容顯示分工，讓可承載內容的彈性可以更好。

(新版，劃分完整獨立區塊更好乘載較複雜的內容)
(新版，步驟性內容)
(新版，步驟性內容應用範例)
  • 將設定內容頁面呈現區分為步驟類型和通用類型，步驟類型主要支援需要步驟性設定引導的功能使用。通用類型僅定義 Header 格式的呈現，保留最大最完整的區塊空間來乘載內容大小、形式不一的設定內容。
(新版，滿版空間可乘載更多元性內容)
(新版，通用類型應用內容)
(新版，通用類型應用範例)
  • 少數地方仍然會需要以 Dialog 方式呈現設定內容，因此將 Dialog 使用優先度排在頁面之後，乘載延伸內容為主，並以輕量內容為主。
(新版，Dialog 應用範例)

Ｂ重新設計和規劃多資訊階層內容的呈現方式，避免過多色塊堆疊，造成顯示邏輯混亂以及視覺負擔。

  • 頁面內容第一層資訊避免直接使用區域色塊作劃分，區塊顏色也謹慎選擇具有深淺差異，但又不過於突兀的配色。
(新版，Table 降低視覺突兀感)
  • 設定內容採用分隔線作設定項目的分類。子設定項目，則採用區域色塊配合表格做組合，讓色塊數量降到最低，盡力達到只有一層色塊堆疊的情況。
(新版，區塊與線條的搭配)
(新版，削減過多區塊堆疊)

3. 新舊需求整合

// Before

Ａ隨著產品的發展，舊資訊架構設計也與現行需求不符。

  • 舊 Navigation 資訊架構為雙階層，原第一階層用途為擴充更多的產品模組，但目前產品設計方向並沒有要往此發展，因此部會有新項目出現，並且由於權限控管導致多數使用者顯示的功能更少。
(舊版，Sitemap)
(舊版，Navigation)

Ｂ智能分析功能的問句結果，新功能需求大幅度的要擴增進來，但舊介面並沒有規劃擴充方式，導致部分功能不容易被人發覺。

(舊版，更多功能不容易發覺)

Ｃ「專案釘板、戰情室、應用程式」應用情境不太相同，但隨著不同階段的產品開發，導致需要的基礎功能越來越相似相似，許多用戶提出到想要在 A 功能也能夠支援 B 功能的某種功能，造成功能之間的定位越來越模糊及功能重複開發的問題產生。

(舊版，應用雷同)
// After

Ａ重新設計資訊架構，將多階層的 Navigation 整併。

  • 透過階層的減少，可以更好配合產品策略凸顯重點功能。
  • 由於功能位置大幅的調整，所以也盡量保留各功能原有操作方式，避免用戶需要適應過多的異動產生不適。
(新版，Sitemap)
(新版，Navigation)

Ｂ盤點所有目前以及未來功能需求，定義功能和顯示之間的互動關係，重新規劃 UI 的佈局呈現，並保有持續擴增的空間。

(新版，新功能 bar)

Ｃ盤點「專案釘板、戰情室、應用程式」的所有功能進行分類，列出相同與差異的項目，並將其項目集中整併到「應用程式」，成為可以滿足更多情境需求的產品核心功能。

(新版，功能盤點)
(新版，功能分類)
(新版，功能整併後)

設計總覽

Design System
(文字)
(顏色)
(Icon)
(輸入元件)
(按鈕)
(Dialog)
(Chart)
UI Overview
(UI overview)

Contact

聯絡方式