Overview

客戶為 S&P500 上市公司以及全球第一大 EDA（Electronic Design Automation）領域的領導者，在電子設計自動化、半導體晶片設計、硬體驗證和IC封裝方面擁有豐富的經驗和技術。他們提供了一系列的解決方案，包括自動化除錯系統、電路模擬、物理設計等，被廣泛應用於半導體、數位電路、RF 及高速傳輸等領域。

由於 Verdi 是一個已使用超過十年的產品且準備升級系統，此次專案的目的是完善 Verdi 的驗證和設計流程服務的 UI / UX，並為未來Qt5的應用做好準備。

Process

我參與了從 presale 到開案的整個過程。在 presale 階段，我們根據客戶的 RFP 進行了行業趨勢和競品分析，並進行了訪談，以了解產品策略和迭代開發的限制。

在專案啟動後，我們進行了利益人訪談和工作坊，以更好地了解我們之前不熟悉的 EDA 行業和自動化除錯系統

User Story

透過利益相關人訪談，我們根據使用者需求，歸納出產品的痛點，進而轉化為使用者故事 (User Stories)

Original UI

Pain Point

由於 Verdi 擁有超過 1,000 種不同的畫面和 ICON ，且目前整體系統風格過於老舊，資訊呈現不清楚。
除了遵循商業轉化設計策略外，我們還考慮到作為平台方的永續經營，重新設計各種工具欄的結構和圖示，使圖示扁平化，並根據現有品牌進行圖形設計，以增強品牌的黏著度，並提供一種獨特的「工程師之美」體驗，區別於其他平台，並從不同需求情境切入使用者的旅程。

最後，我們歸納出了以下幾個痛點，用於後續的設計決策

• Verdi 介面與企業形象不相符   (使用者品牌共感度低)

• 功能與欄位使用體驗不佳  (新使用者較難上手)

• 產品發展策略不明確 (可擴充性及彈性有限）

Our Design Goal

經由上述需求訪談、痛點分析、與決定使用者角色後，我們意識到在如此高專業且複雜的產品中，使用者辨識度和系統一致性的重要性，還有整個介面還有許多需要優化的部分，所以我們的首要目標為：

優化 Verdi 驗證與設計流程的介面設計、功能體驗以及產品發展策略，並確保系統一致性與提高使用者辨識度和用戶體驗

Style Proposal

釐清目標後，我們遵從客戶需求，提供了一套品牌 mood board 及 Light Theme 與 Dark Theme 的視覺風格提案利用無障礙的配色與圖示來營造舒適、清晰的視覺體驗：

1. 首先是「專注輕盈」
   主要目標為強化辨識度與專注力。使用簡約的風格與留白空間來增加瀏覽舒適度，在版型設計上採用直角的元素來營造專業、穩重的視覺體驗。

2. 再來是「舒適清晰」，
   保護對強光敏感的用戶及降低疲勞度做為設計的依據，重視舒適度。

Solutions

1. 優化間距

2. 優化邊界

3. 新增 APP Launcher

新增搜尋欄位

新增 Find bar

Legibility

​為了確保辨識度與使用者需求，我們參照了無障礙網頁（WCAG）的規範並根據不同視覺目標進行對比度配色與色盲測試以確保任何使用者的體驗皆良好

視窗對比度

根據產品中不同視窗的重要性，我們調整對比度，以便為使用者提供準確清晰的閱讀體驗。我們遵從 WCAG 標準中的無障礙設計，將對比度設定在 4 : 1 至 7 : 1 之間

視覺障礙者的視覺視角（色盲模擬)

顏色配置通過所有類型色盲模擬測試，包含完全無法識別顏色者也可輕易辨識

在編碼區域使用的字型

DejaVu Sans Mono

DejaVu 字型是在 Bitstream Vera 字型的基礎上進行改進的。它能夠清晰地區分小寫字母 l、大寫字母 I 和數字 1 、數字 0、字母 o 和字母 O 之間的差異

• 更清晰的閱讀性

• 完整的字符集 -> 支援 Unicode

• 適當的間距 -> 保持固定寬度並具有適當的間距

• 減少混淆 -> l（小寫L）、I（大寫i）和1（數字1）、0（數字0）、o和O易於區分

• 英文引號 -> ` 和 ' 易於區分且對稱

• 清晰的標點符號 -> 例如程式中常見的符號 < > { } [ ]

Before & After

Icon

Light & Dark

根據主題，設計視覺舒適和清晰的顏色

• 優化對比度

• 加強主題顏色

Simplify & Stylize

減少不必要的陰影效果，保持圖標的銳利線條和角度形狀。統一系統圖標風格以符合使用者介面（UI）並展現 Synopsys 的品牌形象

• 統一角度

• 保持圖標的銳利線條和角度造型

UI Library

Colors

Texts

Components

Icons