在 Sketch，不同團隊的設計師會定期聚在一起分享和討論新的想法。在我們的一次會議中，Sketch 前產品設計師 André Gonçalves 和我開始討論原型設計和語意設計。我們的討論很快就變成了一個完整的概念，現在我們用它來設計 Sketch 的新功能。我們稱之為語意設計。
在這篇文章中，我將討論我們最初的語意設計方法，以及它如何影響我們的一些新功能。
什麼是語意設計？
語意設計是一種側重於為我們用來製作使用者介面的工具和功能添加意義層面的方法。對我們來說，這意味著在構建我們的設計平台時，要全面理解設計師的需求。
例如，如果我們賦予畫布上的內容意義會如何？如果 Sketch 可以理解矩形實際上是一個按鈕，或者群組中的圖像實際上是一張個人資料照片，會怎麼樣？
提出這個問題的目的是透過改善平台和設計師之間的雙向溝通，讓 Sketch 更易於使用。雖然工具使用起來直覺很重要，但我們也希望開始設計更能預測使用者需求的功能。
我們的討論很快就變成了一個完整的概念，現在我們用它來設計 Sketch 的新功能。我們稱之為語意設計。
語意設計的影響
為了幫助說明，讓我們談談靈感。我們最初的語意設計理念來自於語意在語言和技術中的應用。
例如，HTML 和 Markdown 非常擅長將程式碼中的抽象概念轉換為標題、段落和輸入，然後瀏覽器可以將其轉換為文件或網站。
透過將語意應用於程式碼，螢幕閱讀器可以解讀頁面上的內容，並使其無障礙，讓身心障礙人士也能使用。
語意設計層級
雖然回報值得，但理解和應用語意設計可能很複雜。你必須克服現有的邏輯，並在做與過度之間取得平衡。
例如，雖然我們都知道紅色六邊形標誌意味著我們需要停車，但事故仍然會發生。但是，將停車標誌換成更醒目的視覺提示會更有效嗎？或者會導致混淆？
我們理解和傳達意義的方式也有多個層級。當我們將語意引入設計時，這個過程本身就變成了一個系統。因為我是一名產品設計師，我喜歡稱這個三層系統為**設計堆疊**。
你也可以將堆疊視為語意建構的基石。
為了讓你在我們繼續之前有更好的理解，讓我們從底部開始分解這些設計堆疊的每一層。
你必須打破既有的邏輯，在行動和過度行動之間取得平衡。
數據
數據是由每個書面或可變內容組成，這些內容是 畫板 的一部分。這包括像頭像和標題這樣的 圖像，以及像標題、段落和標籤這樣的 文字。
視覺
視覺為您的數據添加了上下文、節奏和結構。它們是設計堆疊中最基本的元素。視覺可以是 組件、形狀、顏色 和 圖標——基本上是各種單獨的圖層或複雜的圖層組，例如 符號。
原型設計
原型 層通過交互連接視覺和畫板以創建敘述。它通過鏈接組件、文本和畫板來與用戶進行交流。
接下來，讓我們看看語義設計的一些應用。
Sketch 中的語義設計示例
語義設計在 Sketch 中仍處於早期階段，但已經有一些功能正在使用它。讓我們看兩個例子。
覆蓋
在語義設計中，畫板上的元素應該意識到它們的用途。Sketch 內部應用語義設計的一個很好的例子是能夠將畫板轉換為 覆蓋。
從屏幕切換到覆蓋時，Sketch 會向您顯示一組新的選項，以幫助您設計更逼真的原型。這種動態性也有利於交付，因為開發人員可以在編碼之前完全可視化和理解交互。
您可以輕鬆地在屏幕和覆蓋之間切換，以根據您選擇的畫板類型自定義不同的行為。
顏色標記
顏色標記 將您的文檔的 顏色變量 轉換為 JSON 或 CSS 格式，以便您可以直接在代碼庫中使用它們。通過實現設計和代碼之間的通信，已經涉及了一層語義。
我們更進一步，允許您為顏色標記提供描述性標題。例如，假設您在設計中使用黑色。您可以從 #000000 十六進制或 0, 0, 0, 1 RGBA 代碼更改為類似“foreground.primary.1”的內容。
當您將此顏色標記添加到您的代碼中時，開發人員、瀏覽器和屏幕閱讀器將清楚地知道您頁面的前景應該是黑色的。在設計方面，一旦您正確識別了顏色，也很容易進行更改。
使用顏色標記，您可以使用任何描述性文本（例如顏色（綠色）或用途（品牌））來傳達其含義。
語義設計規則
雖然將語義引入您的設計中可能是一項巨大的資產，但很容易變得過於投入並開始改變一切。因此，在實施任何新的語義功能之前，請確保它
- 不會剝奪設計師的創作自由
- 得到研究的支持，證明新模型符合人們已經使用該工具的方式
- 真正屬於您平台的生態系統，因為它增加了有形的、可衡量的價值。
因為語義設計通常會影響多個功能，所以一旦推出功能，就更難禁用或調整該功能。這就是為什麼重要的是要記住語義設計的最終目標是更好地溝通。
在我們的案例中，由於我們正在使用設計工具，因此我們的目標是改進以下之間的溝通
- 設計師 ↔ 設計師
- 設計師 ↔ 利益相關者和開發者
- 設計師 ↔ 工具
請記住，語意化設計的最終目標是提升溝通效率。
超越 UI 的語意化設計
在 Sketch 等工具中加入語意化設計功能，可以幫助設計師創造更貼近真實的體驗，並更好地與其他利益相關者溝通。
但這不僅於此。有人可能會認為，語意化設計延伸到我們生活的其他領域：在路上、在機場、在購物中心，甚至在家裡。
