element ui 是一套爲開發者、ui/ux設計師和產品經理準備的採用vue 2.0作爲基礎框架實現的組件庫，提供配套的設計資源，可以幫助設計快速成型。

element ui 是一套爲開發者、ui/ux設計師和產品經理準備的採用vue 2.0作爲基礎框架實現的組件庫，提供配套的設計資源，可以幫助設計快速成型。即時設計也內置Element UI Kit資源，但有些小夥伴還是對此不太瞭解，接下來本文會詳細帶你瞭解。

一、Element UI 設計原則

在使用組件庫之前，按照慣例還是要先了解組件的設計原則。Element UI組件的設計原則是一致性、反饋性、效率和可控性。

• 一致性：與現實生活的過程和邏輯一致，遵循用戶習慣的語言和概念；界面中的所有元素和結構應保持一致，如設計風格、圖標、文本、元素位置等。
• 反饋性：通過界面樣式和交互效果，用戶可以清楚地感知自己的操作；操作後，通過頁面元素的變化清晰地顯示當前狀態。
• 效率性：設計簡單直觀的操作流程；界面簡單直觀，語言表達清晰，表達清晰，使用戶能夠快速理解和識別，減輕用戶記憶的負擔。
• 可控性：根據場景給出用戶操作建議或安全提示，但不能取代用戶決策；用戶可以自由操作，包括撤銷、退貨和終止當前操作。

二、Element UI 組件

Element UI的另一個重要方面是有豐富的組件類型。即時設計資源社區中的Element UI組件庫分爲顏色、漸變、字體、按鈕、輸入框、進度條等11類，共有60多個基本組件，可以很好地滿足大多數設計和開發的需要。

2.1 顏色

爲避免視覺傳達的差異，Element UI組件使用一套特定的調色板來規定顏色，爲您構建的產品提供一致的外觀視覺體驗。

• 主色：Element 主要品牌顏色爲鮮豔友好的藍色(色值爲:#409EFF)。
• 輔助色：除主色外的場景色，需要在不同的場景中使用（如危險色#F56C6C表示危險操作）。
• 中性色：用於文本、背景和邊框顏色。通過使用不同的中性色來表達層次結構。
• 邊框：一級#DCDFFE6 ——二級#E4E7ED ——三級#EBEF5-四級#F2FFF6FC
• 文字：主要文字#303133-常規文字#606266-次要文字 #909399佔位文字#COC4CC

2.2 佈局

Element通過基礎 24 分欄，可快速簡單地創建佈局。

• 基礎佈局：利用單欄創建基礎格柵佈局。
• 分欄間隔：分欄間隔。
• 混合佈局：通過基礎的1/24欄任意擴展組合，形成較爲複雜的混合佈局。
• 分欄偏移：支持偏移制定的欄數。
• 對齊方式：通過flex佈局對欄進行靈活對齊。
• 響應式佈局：參考 Bootstrap 預設五個響應尺寸的響應式設計：xs、sm、md、lg、xl。

2.3 字體

Element 在UI中，mac用戶熟悉PingFang SC、Microsoft用戶熟悉Microsoft YaHei和Hiragino Sans GB、San Francisco UI等字體。

• 在字號方面，Element UI定義了 6 字體的大小，其中最小的是最大的是12px 20px。
• 在行高方面，遇到多行文字時，設置不同的文字 line-height 會有不同的渲染效果，一般設置至少爲 1.5。常用規則爲+6，即文本12px，行間距爲18px，依次類推。此外，您還可以使用文本大小乘以1.5，以獲得整個旅行間距。

2.4 按鈕

Element UI的按鈕功能相對全面，主要區分顏色，提供簡單按鈕、圓角按鈕、圓按鈕等選擇，需要注意的是，圓按鈕一般只放一個圖標。對於同一按鈕，有正常、焦點、懸掛等狀態，以確保不同的交互效果有一些反饋。

2.5 輸入框

輸入框用於輸入用戶名、密碼等信息，Element提供了功能和風格豐富的輸入框。Element UI輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用和獲取焦點。輸入框的尺寸應設置爲8倍，如大按鈕40px、中按鈕36px、小按鈕32px。

2.6 下拉菜單

Element UI下拉菜單的組件有三種:默認尺寸、中等尺寸和小尺寸，可以在不同的場景中選擇合適的尺寸。選擇器分爲常規、禁用、懸浮、點擊、禁用、清空等狀態。

2.7 標籤

Element UI的標籤組件用於標記和選擇。尺寸方面，有默認標籤、中等標籤、小標籤和超小標籤，可以在不同場景下選擇合適的按鈕尺寸。提供dark/ligh/tplain有三個不同的主題。用法包括基本標籤、可移除標籤和動態編輯標籤（點擊標籤關閉按鈕後觸發的事件可以實現動態編輯標籤）。

2.8 分頁

當數據量過多時，Element UI使用分頁組件分解數據。基本用法是簡單的數字顯示，也可以設置最大的頁碼按鈕數。根據場景需要，可以添加顯示總數、調整每頁顯示條數、直接訪問和完整功能等功能的分頁模塊。當總頁數超過此值時，頁碼按鈕的數量將被摺疊（大於或等於） 5 且小於等於 21 的奇數。

2.9 通知

Element UI的通知組件懸浮在頁面角落，顯示全球通知提醒信息。

基本用法：適用性廣的通知欄。

有傾向性：有 icon，常用來顯示「成功、警告、新聞、錯誤」類系統新聞。

2.10 表格

Element UI的表格組件用於顯示多個結構相似的數據，可以對數據進行排序、篩選、比較或其他自定義操作。有基本表格、斑馬圖案表格、邊框表格和狀態表格（表格內容可以 highlight 顯示，便於區分「成功、信息、警告、危險」等內容）。

• 格式：當縱向內容過多時，可選擇固定表頭。當橫向內容過多時，可選擇固定列。
• 流體高度：當數據量動態變化時，可以是 Table 設置最大高度。
• 多級表頭:當數據結構複雜時，可以使用多級表頭來顯示數據的層次關係。
• 單選/多選:選擇單行數據時使用色塊表示。選擇多行數據時使用複選框。

2.11 進度條和步驟條

Element UI的進度組件用於顯示操作進度，並告知用戶當前的狀態和預期。有線性進度條、百分比內顯示進度條、環形進度條和儀表盤進度條。

Element UI步驟組件用於引導用戶按流程分步完成任務，步驟可根據實際應用場景設置，步驟不少於 2 步驟。有基本步驟條、包含狀態步驟條、描述步驟條、中間步驟條、圖標步驟條和垂直步驟條，步驟條狀態等待 / 處理 / 完成 / 錯誤 / 成功。

三、如何免費使用Element UI Kit

即時設計資源社區內置大量國內外大廠的設計系統和組件庫，包括TDesign、Arco Design、Ant Design、Material design等優秀的設計規範，所有大廠組件庫資源都可以一鍵調用，可以學習最新的設計規範，統一項目的視覺效果。顏色、文本樣式和圖層樣式不僅可以一鍵保存爲資源，還可以重複添加爲組件資源，與團隊共享，實現快速再利用。

js.design/community?category=detail&type=resource&id=622ee3a3f7f4d247c1fb2311&source=sh&plan=yb6032

在進行UI設計時，許多設計師都夢想在更短的時間內完成項目，同時又不犧牲可用性或創造力，Element UI Kit憑藉高複用性和一致性，可幫助設計師實現這一目標。在即時設計使用Element UI Kit非常方便快捷，工慾善其事必先利其器，我們一定要學會利用好工具，將即時設計的組件庫功能發揮到最大，趕快打開即時設計工作臺來試試吧！

以上就是element ui是什麼的詳細內容，更多請關注本站其它相關文章！