element ui 是一套為開發(fā)者、ui/ux設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的采用vue 2.0作為基礎(chǔ)框架實(shí)現(xiàn)的組件庫，提供配套的設(shè)計(jì)資源，可以幫助設(shè)計(jì)快速成型。

element ui 是一套為開發(fā)者、ui/ux設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的采用vue 2.0作為基礎(chǔ)框架實(shí)現(xiàn)的組件庫，提供配套的設(shè)計(jì)資源，可以幫助設(shè)計(jì)快速成型。即時(shí)設(shè)計(jì)也內(nèi)置Element UI Kit資源，但有些小伙伴還是對(duì)此不太了解，接下來本文會(huì)詳細(xì)帶你了解。

一、Element UI 設(shè)計(jì)原則

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

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

二、Element UI 組件

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

2.1 顏色

為避免視覺傳達(dá)的差異，Element UI組件使用一套特定的調(diào)色板來規(guī)定顏色，為您構(gòu)建的產(chǎn)品提供一致的外觀視覺體驗(yàn)。

• 主色：Element 主要品牌顏色為鮮艷友好的藍(lán)色(色值為:#409EFF)。
• 輔助色：除主色外的場景色，需要在不同的場景中使用（如危險(xiǎn)色#F56C6C表示危險(xiǎn)操作）。
• 中性色：用于文本、背景和邊框顏色。通過使用不同的中性色來表達(dá)層次結(jié)構(gòu)。
• 邊框：一級(jí)#DCDFFE6 ——二級(jí)#E4E7ED ——三級(jí)#EBEF5-四級(jí)#F2FFF6FC
• 文字：主要文字#303133-常規(guī)文字#606266-次要文字 #909399占位文字#COC4CC

2.2 布局

Element通過基礎(chǔ) 24 分欄，可快速簡單地創(chuàng)建布局。

• 基礎(chǔ)布局：利用單欄創(chuàng)建基礎(chǔ)格柵布局。
• 分欄間隔：分欄間隔。
• 混合布局：通過基礎(chǔ)的1/24欄任意擴(kuò)展組合，形成較為復(fù)雜的混合布局。
• 分欄偏移：支持偏移制定的欄數(shù)。
• 對(duì)齊方式：通過flex布局對(duì)欄進(jìn)行靈活對(duì)齊。
• 響應(yīng)式布局：參考 bootstrap 預(yù)設(shè)五個(gè)響應(yīng)尺寸的響應(yīng)式設(shè)計(jì)：xs、sm、md、lg、xl。

2.3 字體

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

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

2.4 按鈕

Element UI的按鈕功能相對(duì)全面，主要區(qū)分顏色，提供簡單按鈕、圓角按鈕、圓按鈕等選擇，需要注意的是，圓按鈕一般只放一個(gè)圖標(biāo)。對(duì)于同一按鈕，有正常、焦點(diǎn)、懸掛等狀態(tài)，以確保不同的交互效果有一些反饋。

2.5 輸入框

輸入框用于輸入用戶名、密碼等信息，Element提供了功能和風(fēng)格豐富的輸入框。Element UI輸入框的交互狀態(tài)包括默認(rèn)、輸入結(jié)果、提示錯(cuò)誤、禁用和獲取焦點(diǎn)。輸入框的尺寸應(yīng)設(shè)置為8倍，如大按鈕40px、中按鈕36px、小按鈕32px。

2.6 下拉菜單

Element UI下拉菜單的組件有三種:默認(rèn)尺寸、中等尺寸和小尺寸，可以在不同的場景中選擇合適的尺寸。選擇器分為常規(guī)、禁用、懸浮、點(diǎn)擊、禁用、清空等狀態(tài)。

2.7 標(biāo)簽

Element UI的標(biāo)簽組件用于標(biāo)記和選擇。尺寸方面，有默認(rèn)標(biāo)簽、中等標(biāo)簽、小標(biāo)簽和超小標(biāo)簽，可以在不同場景下選擇合適的按鈕尺寸。提供dark/ligh/tplain有三個(gè)不同的主題。用法包括基本標(biāo)簽、可移除標(biāo)簽和動(dòng)態(tài)編輯標(biāo)簽（點(diǎn)擊標(biāo)簽關(guān)閉按鈕后觸發(fā)的事件可以實(shí)現(xiàn)動(dòng)態(tài)編輯標(biāo)簽）。

2.8 分頁

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

2.9 通知

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

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

有傾向性：有 icon，常用來顯示「成功、警告、新聞、錯(cuò)誤」類系統(tǒng)新聞。

2.10 表格

Element UI的表格組件用于顯示多個(gè)結(jié)構(gòu)相似的數(shù)據(jù)，可以對(duì)數(shù)據(jù)進(jìn)行排序、篩選、比較或其他自定義操作。有基本表格、斑馬圖案表格、邊框表格和狀態(tài)表格（表格內(nèi)容可以 highlight 顯示，便于區(qū)分「成功、信息、警告、危險(xiǎn)」等內(nèi)容）。

• 格式：當(dāng)縱向內(nèi)容過多時(shí)，可選擇固定表頭。當(dāng)橫向內(nèi)容過多時(shí)，可選擇固定列。
• 流體高度：當(dāng)數(shù)據(jù)量動(dòng)態(tài)變化時(shí)，可以是 table 設(shè)置最大高度。
• 多級(jí)表頭:當(dāng)數(shù)據(jù)結(jié)構(gòu)復(fù)雜時(shí)，可以使用多級(jí)表頭來顯示數(shù)據(jù)的層次關(guān)系。
• 單選/多選:選擇單行數(shù)據(jù)時(shí)使用色塊表示。選擇多行數(shù)據(jù)時(shí)使用復(fù)選框。

2.11 進(jìn)度條和步驟條

Element UI的進(jìn)度組件用于顯示操作進(jìn)度，并告知用戶當(dāng)前的狀態(tài)和預(yù)期。有線性進(jìn)度條、百分比內(nèi)顯示進(jìn)度條、環(huán)形進(jìn)度條和儀表盤進(jìn)度條。

Element UI步驟組件用于引導(dǎo)用戶按流程分步完成任務(wù)，步驟可根據(jù)實(shí)際應(yīng)用場景設(shè)置，步驟不少于 2 步驟。有基本步驟條、包含狀態(tài)步驟條、描述步驟條、中間步驟條、圖標(biāo)步驟條和垂直步驟條，步驟條狀態(tài)等待 / 處理 / 完成 / 錯(cuò)誤 / 成功。

三、如何免費(fèi)使用Element UI Kit

即時(shí)設(shè)計(jì)資源社區(qū)內(nèi)置大量國內(nèi)外大廠的設(shè)計(jì)系統(tǒng)和組件庫，包括tdesign、arco design、Ant Design、Material design等優(yōu)秀的設(shè)計(jì)規(guī)范，所有大廠組件庫資源都可以一鍵調(diào)用，可以學(xué)習(xí)最新的設(shè)計(jì)規(guī)范，統(tǒng)一項(xiàng)目的視覺效果。顏色、文本樣式和圖層樣式不僅可以一鍵保存為資源，還可以重復(fù)添加為組件資源，與團(tuán)隊(duì)共享，實(shí)現(xiàn)快速再利用。

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

在進(jìn)行UI設(shè)計(jì)時(shí)，許多設(shè)計(jì)師都?jí)粝朐诟痰臅r(shí)間內(nèi)完成項(xiàng)目，同時(shí)又不犧牲可用性或創(chuàng)造力，Element UI Kit憑借高復(fù)用性和一致性，可幫助設(shè)計(jì)師實(shí)現(xiàn)這一目標(biāo)。在即時(shí)設(shè)計(jì)使用Element UI Kit非常方便快捷，工欲善其事必先利其器，我們一定要學(xué)會(huì)利用好工具，將即時(shí)設(shè)計(jì)的組件庫功能發(fā)揮到最大，趕快打開即時(shí)設(shè)計(jì)工作臺(tái)來試試吧！