💬 前言

前一篇《勿忘 UX 的初衷》提到 UX (User Experience) 和 UI (User Interface) 在香港經常被混為一談，UI 像外表而 UX 就像大腦，前者肉眼可見，即 How it looks，後者則主宰運作邏輯，即 How it works 及 Why it works this way。今篇將講講 UI 的進化簡史。

🌿 草創時期

由寄人籬下到離家出走

早在第一代 iPhone 於 2007 年發怖之前，我們已經對上網習而為常。雖然上網早就變成生活一部份，但當時市場上根本無針對 UI 的成熟設計工具，所以設計師們大多為勢所逼地以修圖軟件 Adobe Photoshop 設計介面（主要是網站)，同時對 UI 的理解也與今天的有著天淵之別，單純將 UI 視之為介面上的平面設計，最大的分別就只是戰場從印刷品移到數碼世界。

後來科技日新月異，繼續以平面設計的眼光去看待 UI，不止會引起很多不必要問題，也無法做到對症下藥。於是，UI 漸漸發展出一套獨立於平面設計的邏輯，開始和數碼世界真正接軌。另一邊廂，Photoshop 亦漸漸被 UI 設計軟件 Sketch 所取代，無需再越俎代庖之餘，還吃力不討好。

數碼產品的其中一個特點是能夠和 User 互動，簡單如一個按鍵也會隨著不同互動而有所變化，情況就像我大力打了你一拳然後你會痛一樣。痛覺令我們能夠辨別危險，從而保護自己，是一種有助生存的強大能力。介面上的互動物件都一樣，藉著可意會的反應，比如視覺上的變化又或者手機的震動，令 User 可以輕易區分甚麼可以互動，甚麼不，繼而跟進。這些變化業界一律稱之為 「狀態 」(Status)，如果以按鍵為例的話，其中最常見的 Status 有：

• Default：預設樣式
• Hover：滑鼠鼠標指住按鍵時的樣式
• Disabled：暫時無法互動等等

當然 Status 有很多種，表達方式不一，就像都市人的感情 Status 一樣多姿多彩。在設計介面時，UI Designer 會考慮所有可能的實際情況，為不同組件 (Component) 設計不同的對應狀態。上面提到的按鍵就是其中一種很基本的必備組件，其他例子還有 Text Field、Checkbox 之類。

隨著數碼產品日趨複雜，組件自然也愈來愈多，組合千變萬化。一個組件獨立看起來即使合理，不等於可以和其他組件「和諧共處」，大家毫無衝突。例如表達兩個不一樣的反應，如果表達方式太類同自然會引起誤會。UI 設計軟件 Sketch 當中的 Symbol 功能，就是為了就同一個組件設計不同狀態，方便統一應用而生。

👀 現況

Sketch 的沒落

由 Component Library（一大堆五花八門的 Component 組建而成的「圖書館」）進化到有所謂一個整全的 Design System，其實只是最近幾年的事。不同於 Component Library，Design System 簡而言之就是完整的產品說明書，有點像品牌的 Branding Guideline，囊括的內容大大超出 Component Library，由最基本的字體、顏色、如何兼顧不同屏幕尺寸，到稍為複雜的 Design Components 以至 Combinations，甚至 UX Writing Style 又或者各種 Coding Demo 都會一一羅列，方便 Designer 和 Programmer 跟據不同情況，按這個具體而詳盡的規範處理種種問題，確保產品質素始終如一。當然，經梳理的 Design System 也方便內部定期檢討和更新，配合產品的最新發展。

如今數碼產品的複雜程度早已遠超過往，功能單一的產品並不常見。一個產品的持續開發由多人分工合作，共同完成已成常態。只有 Mac 版本的 UI 設計軟件 Sketch，本身就有先天缺陷，除了 Mac 機獨有，拒他人於千里之外，將設計檔案儲存於電腦硬碟當中，也令架構龐大的產品難以管理，亦有礙多方協作。後期推出的 Sketch Cloud 協作功能，經已是亡羊補牢，推出得太遲，大部份設計師早已移師到另一個 Web-based 的 UI 設計軟件 Figma 了。

Figma 沒有門戶之別，無論你是使用 Mac 機還是 Window 機。另一方面，借助發展成熟的網絡，Figma 將設計儲存於雲端，只要能夠上網就可以存取，亦容許多人線上同時作業，任何改動都自動同步更新。所以自 Figma 推出以來，大家都像動物大遷徙一樣，開始將設計從 Sketch 逐步轉移到 Figma。以現時戰況判斷，Figma 完全取締 Sketch 只是時間問題。

原文刊於：
Blog by ChakmanDesign