如何構建一個有效的設計框架（包括一個免費的 Sketch UI 框架）

如果您在設計界工作了一段時間，您可能聽說過這些術語：設計框架、UI 框架、UI 工具包或模式庫。 它們都指的是同一個東西——一個由設計標準、模板、UI 模式和組件組成的系統，在整個產品中使用並為其設計語言提供服務。

如果您之前沒有創建過設計框架，開始一個設計框架可能會讓人感到不知所措並且看起來很耗時，但它會加快您的設計工作並使其整體效率更高。

讓我們概述一個設計框架解決的主要問題，為什麼需要一個，以及在構建一個時需要創建的組件。 您將在本文後面找到一個可免費下載的 Sketch UI 框架，它允許您創建自己的設計框架。

什麼是設計框架？

每個用戶界面設計都從一個空的畫板開始，每個設計師都有一個他們用來將空白畫布轉換為功能齊全的產品的過程。 這個過程包括創建的所有小型設計組件，以及設計師構建一個有凝聚力的整體所經歷的步驟，從顏色到按鈕以及介於兩者之間的所有內容。

通常，這項工作是重複性的，可以通過創建一個相互關聯的模式和組件系統來鞏固和提高效率。 換句話說，一個設計框架。

設計框架解決了幾個問題，包括：

• 消除產品設計中的不一致。
• 提高設計和產品團隊之間的協作、效率和溝通。
• 使設計過程後期的設計更新不那麼令人沮喪。

第一個問題：產品不一致

一致性將一個好的設計轉變為一個偉大的設計。 一致性提高了用戶體驗、一般可用性以及用戶使用數字產品的效率。 無論是小型網站、應用程序還是大型 SaaS 產品，設計的不一致都會影響產品的外觀、感覺、可信度和用戶體驗。

當團隊或設計師做事太快或即時進行更改時，通常會發生不一致。 有時，設計師會通過快速向他們展示這些變化的樣子來回應客戶或利益相關者要求不同的東西。 突然，設計團隊發現自己有四種不同深淺的綠色，沒有人確定哪一種是主要的按鈕顏色。

設計框架通過建立一致的標準來解決這個問題。

第二個問題：協作和溝通的差距

通常在開發過程中，當有多個團隊成員在流程的不同點參與設計工作時，如果沒有一套標準來指導團隊，就會變得混亂。

設計框架通過簡化溝通過程並提供明確的標準和方向來提高協作和效率。 沒有更多的時間來回奔波試圖找出哪種顏色或字體是正確的使用。

第三個問題：後期設計變更

在已經開發了 120 個畫板的設計文件中，設計師需要對單一顏色進行多少次更改？ 有多少次需要更改屬於 200 個組件的圖標？

變化在整個設計過程中是不可避免的，它是產品改進的方式，但它往往發生得比設計師想要的晚。 設計框架使這些後期更改變得不那麼痛苦，因為它建立在面向對象組件的系統上。 更改一次，它就會在整個設計中產生漣漪。

如何創建設計框架

現在我們知道了設計框架是什麼以及它解決的問題，讓我們談談創建一個（以及本文後面提供的 Sketch UI 工具包下載中的內容）。

本文使用的設計框架是一個單獨的 Sketch 文件，它使用特定的組件層次結構進行佈局，在 Sketch 中稱為“符號”。 這些符號可以通過單擊輕鬆實現文件範圍的更改。 “主”組件（即“符號”）的一個變化會立即反映在所有其他實例中。

設計框架層次

要創建一個運行良好的設計框架，首先要建立一個堅實的視覺層次。 首先設計最無所不在的組件，例如顏色和排版。 然後細化到更小的組件，例如按鈕和輸入組件。 把它想像成蓋房子——先打地基，然後隨著項目的進展添加其他部分。

顏色

顏色是 UI 設計框架層次結構中最重要的元素——設計中的每個組件都使用顏色。 顏色會引起人們強烈的反應和情緒，並決定產品的整體外觀、感覺和色調。

一個好的做法是將顏色分組：

1. 原色是主要的品牌顏色，通常用於創建項目的一般配色方案和按鈕等關鍵組件。
2. 二次色補充了主要調色板——通常它們是原色的不同色調、飽和度或色調。 灰度通常用於排版或背景。 五到八級灰度應該足夠了。
3. 系統反饋顏色是設計師經常忘記的一個重要組。 這些顏色顯示系統消息，包括警報、警告和通知。

網格：設計空間

選擇顏色後，下一步是設置網格。 網格將頁面上的所有其他組件保持在正確的位置和順序。 這是整體設計空間。

有兩種類型的網格：垂直和水平。

垂直網格是最常用的網格，它使所有內容保持水平對齊。 有許多流行的網格系統，例如 Bootstrap 或舊的 960px 網格。

水平網格並不常見。 水平網格用於排版。 它為段落創造垂直節奏，在報紙上很常見。

修飾符：風格規則

除了顏色和網格之外，設計框架層次結構中還有一個組件：修飾符。 它們不能用作自主組件——它們用於修改或設計其他組件。

該組為項目帶來風格，並包括負責美學的組件，例如形狀或陰影； 在項目的後期階段單獨更改它們可能很麻煩。

將修飾符視為所有後續構建塊的參數。 用三種不同的形狀創建草圖符號：矩形、圓角矩形和圓形。 使用這些形狀來創建 UI 的每個組件，包括按鈕、輸入組件、表單字段等和背景元素。

這種技術允許設計師更多地關注用戶體驗而不是 UI 組件的外觀。 它還可以輕鬆返回基本形狀，更改其樣式（例如角半徑），並且所有連接的內容都會自動更新。

排版：內容

排版是最後一個重要的設計框架組件。 它可以分為兩組：靜態頁面副本，如標題和段落； 和交互式組件副本，例如按鈕、導航或輸入字段。

設計所有標題（H1、H2、H3 等）和段落的樣式和大小。 靜態頁面副本通常沒有很多風格（顏色或重量）變化。 與靜態頁面複製樣式相關的唯一變化是它是在淺色還是深色背景上。 因此，最好創建兩組顏色以確保靜態頁面副本適用於兩者。

出現在交互式組件（如按鈕或系統反饋消息）上的副本可以有多種變體。 例如，系統反饋消息可以根據消息類型（警告、錯誤、成功等）顯示在四種不同的背景顏色上——按鈕標籤也可以在不同的背景上。

在全局考慮排版時，將這個組包含在設計框架中很有幫助。 首先，創建常規按鈕標籤文本，其次，創建其變體； 這將有助於避免最終使用太多的字體大小。 在框架中創建新的 UI 組件時，請始終檢查是否存在適合的現有排版樣式。

圖標

設計系統中有兩組圖標：信息圖標和用戶界面圖標。 第一組通常是插圖系統的一部分，不用於任何 UI 交互組件（例如按鈕）。 第二組——UI 圖標——為更複雜的組件添加了意義：按鈕、標籤或表格，同時佔用的空間非常小。 UI 中的圖標也可以用作“編輯”、“複製”、“下載”和“刪除”等功能觸發器。

從用於 UI 交互的簡單圖標開始，例如箭頭、“添加”(+) 或“關閉”(x)。 一個好的做法是將它們設計成不同的尺寸（12px、16px、24px 32px）。

成分

鈕扣

按鈕無疑是 UI 設計中最重要的組件之一，多年來，隨著設計趨勢的來來去去，它們經歷了許多變化。

在設計按鈕時，請確保設計它們各自的“狀態”。 通常，一個按鈕具有多種狀態，並向用戶提供視覺反饋以指示當前狀態（空閒、懸停、按下、禁用、活動等）。

有兩種方法可以做到這一點：第一種是為每種狀態（常規、活動、懸停和按下）分別設計按鈕的外觀。 此解決方案可能很耗時，但隨後提供了很大的靈活性。 （此方法在下麵包含的免費 Sketch UI 框架中使用。）

第二種方法是在初始狀態的基礎上設計所有狀態。 例如，創建一個將更改每個狀態的顏色、飽和度或亮度的 Sketch 符號。

為此，請將符號放置為具有草圖混合模式之一的按鈕的疊加層：色調、飽和度或疊加層。 在常規按鈕上使用具有色調混合模式的黑色矩形來更改其飽和度。 稍後更改覆蓋不透明度使其成為或多或少飽和的按鈕。

輸入組件

輸入允許用戶與應用程序通信並上傳數據。 使用諸如輸入字段和按鈕之類的組件可以創建一個簡單的 Web 應用程序。 與按鈕一樣，最好創建具有不同狀態的輸入組件。 這取決於設計框架，但至少要考慮創建空、填充和錯誤狀態。

複雜組件

在這個階段，設計框架可以被認為是完整的，因為它具有創建功能產品所需的一切。 但是，通常值得花更多時間為 UI 框架創建更複雜的 UI 組件，例如卡片、表格、日期選擇器、圖表和表單。

部分

在這個階段，可以通過創建應用程序或網站的最常見部分來進一步開發設計框架。 通過設計導航、標題、“關於我們”部分和畫廊等內容，設計師可以在項目的後期階段節省時間。 創建產品不同部分的多個變體將更容易適應不同的項目。

設計框架最佳實踐

不斷測試設計框架

測試應包含在任何設計或開發過程中。 通過創建小型設計件並對其進行“壓力測試”來避免錯誤和缺失組件。 例如，檢查更改一開始創建的組件是否也會更改最近添加的組件。

創建簡單的 UI 組件

保持組件簡單，同時盡可能多地考慮設計用例，以便將來可以涵蓋任何樣式。 最好創建具有簡單形狀的 UI 組件，使其足夠靈活，以便輕鬆適應任何項目。

不要專注於單一風格

設計框架應該是通用的，因此不要專注於特定的風格，而是專注於可用於創建風格的組件。

創建自己的設計框架

在您的下一個項目中，從一開始就花時間仔細地構建一個設計框架。 您會發現它改進了整體設計過程，提高了效率，並增強了產品的設計一致性，從而提高了可用性。 當這些想法在 120 個 Sketch 畫板上在幾秒鐘內變為現實時，您將節省時間、更有效地傳達設計想法並讓客戶和利益相關者感到高興。

您準備好開始自己的設計框架了嗎？

在此處下載草圖文件。 包含有關如何使用它的說明。

啟發設計系統和 UI 框架

了解更多關於設計框架的最佳方法之一是檢查大型、成熟的公司使用它們的程度。 關注這些類型的公司並了解他們的方法。

Google 的 Material Design——目前是世界上最流行的設計框架之一。 了解 Google 如何將整個設計過程分層並構建有用的組件層次結構。

IBM 的設計語言——IBM 分享他們的整個設計過程，包括對每個細節的深入解釋。 他們還分享了大量來自設計語言的資源，從簡單的圖標到 UI 動畫庫。

Atlassian – 另一個很棒的學習資源。 他們的產品風格指南是一個很好的學習設計系統。 他們共享他們的 Web GUI 包，這是一個包含大量組件和概念的 Sketch 文件。

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗