多用途網(wǎng)頁ui組件套件和設(shè)計(jì)系統(tǒng)模板 - Finesse UI

Finesse UI 是一套多用途網(wǎng)頁ui組件套件和設(shè)計(jì)系統(tǒng)模板,包含500多個(gè)設(shè)計(jì)系統(tǒng),4000多個(gè)ui組件,1000多個(gè)圖標(biāo),提供Figma、Sketch格式。組件包含有:

1. 警報(bào) - 向用戶顯示的信息性信息

2. 頭像 - 用戶或物體的代表,通常用于識別。

3. 3.按鈕 - 用于觸發(fā)動(dòng)作或?qū)Ш降目牲c(diǎn)擊元素。

4. 4.切換器 - 允許用戶在兩種狀態(tài)之間切換的控件。

5. 復(fù)選框 - 允許用戶選擇一個(gè)或多個(gè)選項(xiàng)的控件。

6. 單選按鈕 - 允許用戶從一個(gè)組中選擇一個(gè)選項(xiàng)的控件。

7. Check Circles - 允許用戶選擇一個(gè)或多個(gè)選項(xiàng)的控件。

8. 圖標(biāo)按鈕 - 僅包含一個(gè)圖標(biāo)的按鈕,用于在屏幕上觸發(fā)一個(gè)動(dòng)作。

9. 分段控制 - 允許用戶在不同的選項(xiàng)或視圖之間切換。

10. 輸入 - 允許用戶輸入數(shù)據(jù)或信息。

11. 徽章 - 用來顯示計(jì)數(shù)或狀態(tài)的指示器。

12. 工具提示 - 顯示額外信息的小型彈出窗口。

13. Snackbars - 在屏幕底部顯示給用戶的簡短信息。

14. 分頁 - 用來移動(dòng)一系列內(nèi)容的導(dǎo)航元素。

15. Breadcrumbs - 用于顯示用戶當(dāng)前位置的導(dǎo)航元素。

16. 進(jìn)度指示器 - 用于顯示一個(gè)正在進(jìn)行的過程的狀態(tài)的指示器。

17. 滑塊 - 允許用戶通過拖動(dòng)手柄來調(diào)整數(shù)值的控件。

18. 下拉框 - 允許用戶從一個(gè)選擇列表中選擇一個(gè)選項(xiàng)。

風(fēng)格組件:

1. 排版 - 文本樣式兼容所有響應(yīng)的設(shè)備尺寸,如手機(jī)、平板電腦、桌面等。

2. 調(diào)色板 - 最小的單色調(diào)色板,遵循無障礙標(biāo)準(zhǔn)。

3. 陰影 - 為每個(gè)組件和不同的狀態(tài)(如懸停、按壓等)建立重點(diǎn)陰影。

4. 圖標(biāo) - 我們的設(shè)計(jì)系統(tǒng)使用Heroicons,這是一個(gè)由880多個(gè)拋光和美麗的手工制作的SVG圖標(biāo)的集合,由Tailwind CSS的制造商制作。

5. 頭像圖片 - 我們的設(shè)計(jì)系統(tǒng)使用來自Craftworks的精心制作的頭像插圖。

6. 公司標(biāo)志 - 這些標(biāo)志僅用于說明目的,并不暗示與各公司的認(rèn)可或聯(lián)系。

使用此功能,您可以通過使用可輕松定制以滿足您的品牌和項(xiàng)目要求的預(yù)構(gòu)建組件開始您的設(shè)計(jì)過程,從而節(jié)省時(shí)間和精力。

25xt-165526-Finesse UI – Figma UI Kit and Design System - V1.01.jpg

25xt-165526-Finesse UI – Figma UI Kit and Design System - V1.02.jpg

25xt-165526-Finesse UI – Figma UI Kit and Design System - V1.03.jpg

25xt-165526-Finesse UI – Figma UI Kit and Design System - V1.04.jpg

25xt-165526-Finesse UI – Figma UI Kit and Design System - V1.05.jpg

25xt-165526-Finesse UI – Figma UI Kit and Design System - V1.06.jpg