什麼是UI設計系統？
UI設計系統是一組用於設計、代碼和組件的規範，可以將其視為一份設計協作的說明書，也可以當作一個素材庫，用於收集資源並在你的設計中使用它們。
為什麼我們需要UI系統？
要在界面設計的每個部分使用一致的UI規範，可能會是一個大工程。UI系統幫助用戶直觀地導航和使用你的程序，並且可以使你程序中各個地方設計保持一致，讓用戶能夠更加快速熟悉你的設計風格。UI系統通過為團隊提供更加結構化和引導性的方式為你的產品設計界面，從而來幫助團隊更有效率的進行開發。
創建UI設計系統
創建UI設計系統最好的方法是建立一個列表清單，其中包括所有不同的模式、顏色、文本樣式和你將在設計中使用的其他東西。它應該是一個清晰的清單，裡面應該顯示來所創建產品（網站或APP）所需的所有組件和功能。如下所述，創建完整的列表需要時間。UI設計系統需要時間和精力的投入，可能會很累，但不要放棄！在完成它的時候你將會得到一個乾淨而統一的UI設計規範，所以請繼續加油！
情緒板和調色板
讓我們首先創建一個情緒板和調色板，這樣就可以設置你產品的主題顏色，並對你的設計有很好的瞭解。你的情緒板可以是流行UI的圖片，鼓舞人心的產品或圖片，你的靈感來源。你的情緒板還可以幫助你選擇顏色搭配方案，但是你的顏色選擇也是基於你的研究。因此你需要列出你這個應用所需要的主要顏色、次要顏色以及第三種顏色，不要忘記你的成功色和錯誤色！另外還需要給這些顏色設定一些灰度。灰度用於UI設計系統中的各種元素。大多數界面至少需要以下幾種灰色：
- 淺灰色的背景邊框、線條、筆劃或分隔線的稍暗的灰色。副標題和正文的中灰色。主要標題，正文和背景的深灰色理想情況下，保留原色的色調和色調，它們可能會有用。
最後，我們可能希望為每種顏色添加色調或色調變化。在設計用於添加淺色背景或深色筆劃的組件時，這些功能非常有用。
情緒板
調色板
邊界半徑和陰影
接下來，讓我們開始為UI設置邊框半徑和陰影。邊框半徑設置為UI卡、表的色調，並更改UI的整體外觀和感覺。現在你可能會問我怎麼知道我想要的邊緣有多圓？
這取決於你想讓用戶處於什麼樣的情緒狀態。如果你的半徑更圓，它可能會變得可愛或更友好一些，如果你決定保持它原本的方形，它可能看起來會顯得嚴肅一些。我的建議是圓角半徑始終保持在2-8像素之間。
邊界半徑
我們的陰影主要用於將深度和透視應用到我們的設計中。最近，陰影一直是大勢所趨，它們用於區分UI中的多個元素。這四個陰影應足以為我們系統中的每個組件進行樣式設計：
- 一個微妙的陰影，以提高組件的交互性以及增加可用性。懸停效果對組件的影響更明顯。一個範圍較大的陰影，可以為下拉/彈出窗口和其他類似組件提供類似透視的效果。用於模擬組件的遠程陰影。
陰影
類型比例
沒有任何一個界面是沒有層級結構的。類型遵循節奏。你需要設定的字體以及不同標籤的比例大小。這可能聽起來非常困難以及耗費時間，但感謝https://type-scale.com/等工具讓我們的設計能夠變得更加輕鬆。你需要做的就是選擇一個類型比例，它列出了可以使用的不同大小。
- 默認的文本大小，會出現在我們的各種網站、UI界面等許多地方。16px是許多瀏覽器默認的字體大小，所以我們可以選擇使用它。例如，博客中的大型正文副本稍大一些。標題和小標題可以選擇兩個較大一些的尺寸。例如，對於定價頁面上的價格字體，可能需要一個非常大的尺寸。我們還需要一些較小的尺寸，以較小的正文複製，輸入提示和其他輔助文本。
圖標
使你的圖標統一，確保他們使用相似的風格，並遵循一定的設計規範。對於初學者來說，你可以使用免費成套的Icon，這樣你就不會花太多時間自己製作圖標，但總有一點是要確保它是統一的。
按鈕，滑塊和進度條
按鈕是UI設計中非常重要的元素。按鈕允許用戶只需輕按一下即可採取行動並做出選擇。按鈕傳達動作信息，因此應根據其工作功能進行設計。它們應易於查找和識別，同時清楚地表明它們允許用戶完成哪些操作。現在有各種各樣的按鈕樣式。按鈕的顯示狀態也是界面設計的一個重要部分。
- 按鈕單選按鈕複選框導航按鈕
滑塊，進度圓可幫助你定義這些小元素，使你的UI看起來能夠更加統一。分解它們也會幫助你更好地設計其他元素。
下拉列表，標籤和彈出窗口（複雜元素）
現在我們已經設置了一個規範，你可以這些所有的元素來構建下拉列表，標籤和彈出窗口！你可以按照下面顯示的不同類型去設計下拉菜單和彈出窗口。
結論
我基本上涵蓋了大部分的元素內容。你始終可以使用此規範添加其他元素。總而言之，我想說保持界面簡潔，不要過分使用在你的界面裡。設置元素後，你可以開始將這些元素放入設計中。對於間距，你們可以使用8點網格系統。
堅果殼的儀表板設計
報告
作者：Rahul Goradia
