ui設計規範包括幾個類別:
1、徽標
品牌印象的直接感受根據頁面背景的不同而不同。對產品使用的logo進行了統壹分類，並引用了莫比的Petshop UI風格指南的logo資源作為例子。
莫比的Petshop UI的Logo由圖形和文字組成，品牌顏色為藍色。Logo的使用也要考慮到頁腳黑色背景上的Logo。所以用Logo的橫縱排版和單壹Logo圖形來分類比較好。
在分類中，顯示帶有品牌顏色的徽標、帶有品牌顏色背景的徽標和頁腳帶有黑色背景的徽標。
2、標準色
色彩是設計最重要的部分，什麽都不是。細節決定品質，所以色彩的運用特別細致，色彩的搭配直接決定了產品的品質。顏色大致可以分為品牌色、文字色、背景色、線框色等等。為顏色添加關鍵字，並指定要使用的界面。
以下是真實像素用戶界面風格指南的顏色規範。可以了解到，每種顏色不僅標註了壹個顏色值，右邊還給出使用該顏色的場景。值得學習的是將按鈕正常狀態和懸停狀態的顏色值放在壹起，讓不同狀態下顯示的顏色感受更加直觀。
標準化顏色值的命名變量，提高開發效率，更好地維護設計規範。
在前端開發中，對顏色值進行編號，大大優化了代碼。通過定義壹個帶有設計規範的CSS樣式庫，在開發過程中不需要反復修改CSS參數值，可以直接引用定義好的變量名，大大降低了修改設計規範的成本。
3.字體
字體是設計中壹個重要的考慮因素。不同的字體在不同的場景下有不同的氣質和不同的感受。所以設計時需要考慮字體的設計效果，然後在設計規範中註明。
以下是《零售銀行服務用戶界面風格指南》中字體規範的參考。在定義字體名稱的同時，也定義了字體樣式，增加了不同字體樣式的預覽效果。常見的字體樣式有:淺色、常規、斜體、半粗體和粗體。
4.段落設置
在實際的產品設計中，段落的樣式很多，不同場景對段落的要求也不壹樣。比如閱讀內容的段落，要求文字的可讀性很強，所以要求字體、字號、顏色、行距簡單易讀。裝飾性的段落文字不需要那麽嚴謹，但可以是裝飾性的。
需要註意的是，在定義段落默認字體時，還需要定義壹個備份字體，即默認字體無法正常顯示時顯示的字體。設計的橫向層次在於細節的打磨，這就是段落規範在設計中的意義。
5.核標準情報中心
圖標是壹個重要的軟件標誌，也是設計資源中最重要的模塊之壹。在軟件產品中，甚至可能每個頁面上都有圖標。圖標除了美化，還有意義明確的電腦圖形。
具體分為以下三個功能:
圖標是鏈接到其他網站，讓其他網站鏈接的標誌和門戶。圖標是網站形象的重要體現。圖標可以方便觀眾選擇。根據圖標大小和使用目的對設計規範進行分類整理，更加清晰明了。
6.圖片
圖片也是設計規範中最重要的部分之壹。圖片資源按用途分類，設計風格系統化。
7.措施
在設計過程中，我們經常使用壹套標準化的度量標準來保持產品的壹致性，即圓角值、間距和尺寸。
解釋測量的最好方式是網格系統，它經常被用在設計中。布局采用固定網格設計，風格整潔簡潔。這也是我們在網頁和APP設計的過程中經常使用網格系統的原因。
8.陰影
陰影樣式和參數也是設計規範的壹部分。在整理設計規範時，需要註意的是，陰影的參數值是網頁中控制陰影的參數值，而不是設計軟件中的參數值。
例如，網頁中陰影對應的參數值為:box-shadow:type:outcome offsetx:0px offsety:4px blur:8px spread:0px color:# 000000，不透明度:10%。這是程序員需要的陰影的參數值，否則最終開發出來的陰影會不壹致，達不到規範。
9.成分
常見UI組件):按鈕控件、下拉框、選擇框(單選\復選框)、時間選擇器、輸入框、搜索框、進度條、分頁器、提示框、警告框、表格、彈出面板、數字步進器、tab等。
按鈕控制
按鈕是最常見的組件之壹，它有五種狀態:正常、懸停、活動、禁用和加載。
這五種狀態需要在規範中單獨列出，並標註對應的按鈕填充顏色、邊框顏色、圓角值、按鈕寬度和高度、按鈕文本大小和顏色值。如果是圖標按鈕，除了上述參數值外，還需要標註圖標和按鈕文字的間距以及圖標icon的大小。
10，下拉框
下拉框是壹個單選組件，為用戶提供多種選擇。優點是在最簡單的界面布局中包含了許多選項。需要定義下拉選擇框彈出時鼠標移動時的正常、懸停和活動狀態。
11，選擇框(單選\復選框)
顧名思義，單選框是眾多選擇中的壹種，而復選框是眾多選擇中的壹種，可以無限制選擇。單選框和復選框需要三種狀態，即未選中狀態、選中狀態和不可點擊狀態。
時間選擇器:
時間選擇器是選擇年、月、日、周的組件，分別對應年、月、日、周的信息。設計時要考慮四種狀態，即select、Not_Select、Hover和Disable，並寫入設計規範。
輸入框:
輸入文本框是我們軟件產品設計的重要組成部分。文本輸入框有四種狀態:正常、活動、禁用和錯誤。
搜索框:
和輸入框壹樣的地方是需要聚焦，然後輸入內容才能完成操作。應該有正常、活動、搜索下拉狀態和錯誤狀態。
進度條:
這就需要在規範中註明上傳進度條的整個交互操作過程，並梳理出正常狀態、點擊上傳/拖拽上傳狀態、上傳進行中、上傳成功、上傳失敗以及整個過程狀態。在上傳的過程中，用戶的任何操作都應該有壹個及時的響應動作，這樣用戶在使用過程中才不會感到困惑。
尋呼機:
Pager是壹個用於切換內容頁面的復合組件。傳統的分頁裝置具有上下頁面操作按鈕、分頁頁碼按鈕、用於輸入頁碼的搜索框以及分頁裝置的四種狀態:正常、懸停、活動和禁用。
提示框:
提示框是由事件觸發的彈出面板中顯示的組件。經常使用提示框的地方有刪除按鈕、疑難問題點、提示彈出信息等等。這種款式的設計很多，設計風格也不壹樣。定義地板樣式、文本樣式和陰影參數。
警告框:
頁面報錯的顯示風格，常用的預警信息有:操作成功，提醒用戶註意，警告用戶註意等。
表單:
表格的信息很多，要重點整理表格樣式和文字顏色大小。
彈出面板:
彈出的面板主要由四部分組成，分別是面板中的文本信息、按鈕、面板大小樣式、遮罩顏色和透明度。
數字步進機:
數字步進機是復合組件，可以理解為按鈕和輸入框鏈接的組件，所以輸入框和按鈕有屬性狀態，步進機有。
選項卡:
切換標簽意味著切換內容。與下拉選擇框不同，選項卡是排列多個選項的單選組件，需要考慮四種狀態:正常、懸停、活動和禁用。
？Ui設計規範，ui設計規範有哪些？這個問題的介紹就到此為止。妳知道現在的ui設計嗎？設計規範極大的促進了整個項目的標準化，但是需要時間和耐心的精心打磨，所以需要花費大量的時間和精力來整理資料，編輯資料，分類整合，最後在設計軟件中重新整理整個規範。如果妳還有其他關於ui設計的問題，歡迎繼續關註易夏蘭或者和我交流~