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非常方便快捷,工欲善其事必先利其器,我們一定要學會利用好工具,將即時設計的組件庫功能發揮到最大,趕快打開即時設計工作臺來試試吧!