詳解|一文帶你瞭解「基礎元件」和「高階元件」

編輯導語:很多設計師對基礎元件和高階元件兩者並沒有過多的區分,但是二者是存在明顯區別的,本篇文章作者講述了基礎元件和高階元件之間的概念區分和設計重點等內容,一起來學習一下吧。

詳解|一文帶你瞭解「基礎元件」和「高階元件」

你可能經常會有這樣的疑惑:對於彈窗的尺寸、抽屜的寬度、輸入框的長度、表格每一欄的寬度等等元件的細節尺寸,為什麼 Ant Design 這類開源的元件庫,幾乎沒有給出明確的數值定義?

要回答這個問題,就要先理解這兩個概念:「基礎元件」和「高階元件」。

本文會從兩者的概念區別以及設計重點等方面,具體說說相關的知識。

詳解|一文帶你瞭解「基礎元件」和「高階元件」

一、概念區分

「基礎元件」和「高階元件」並不存在嚴格的界限區別,以至於很多設計師對二者沒有做過多的區分,但兩者各自有明顯的特點。

1. 基礎元件

「基礎元件」也可以被叫做

「原子元件」

「通用元件」

,是一種底層元件,其特點如下:

單一的不可再拆分的元件:

比如一個 button,一個輸入框,一個開關等。

適用於各類業務場景:

比如政務業務、電商業務、金融業務等業務都可以使用。

可保證設計質量和效率:

使用元件可以使設計稿具備較高的一致性,並提升設計和開發的工作協同效率。

詳解|一文帶你瞭解「基礎元件」和「高階元件」

最為大家熟知的、典型的基礎元件庫就是 Ant Design,

通用、開源、包容

是其主要特點。迄今為止,Ant Design 已擁有超過 1k+的設計和開發貢獻者,被應用於 2w+ 的企業各類業務場景中。

2. 高階元件

「高階元件」也可以被叫做

「區塊元件」

「業務元件」

,是一種相對來說更具備業務屬性的元件,其特點如下:

是複合型的區塊元件:

是基礎元件的合集,比如一個表單,一個表格,一張多功能卡片等。

適用於更專業的業務場景:

帶有強烈的業務屬性,在業務實操設計過程中,會更有針對性、更高效。

可保證業務完成的專業性和效率:

好的業務元件可以更好地賦能業務,更快地完成業務需求。

比如下圖中複合表單元件,提煉於政務類業務場景:

詳解|一文帶你瞭解「基礎元件」和「高階元件」

再比如下圖中指標 + 統計數值的複合元件,來源於資料統計類業務場景:

詳解|一文帶你瞭解「基礎元件」和「高階元件」

業務元件

源於業務

,是設計師對有

業務特色

的、

出現頻次高

的元件進行的整理和沉澱。Ant Design Pro(TechUI)就是 AntD 團隊根據業務中的實際應用場景和需求,總結出的更適合螞蟻集團業務場景的高階元件庫。

二、設計重點

「基礎元件」和「高階元件」在搭建和設計的過程中要注意哪些內容?什麼樣的內容可以被做成基礎元件?什麼樣的內容和元件又可以 /應該被封裝成業務元件?

1. 基礎元件設計依據

基礎元件可以直接借鑑已有的、成熟的開源元件設計體系,減少重複勞作。如果自己的團隊也想做,判斷依據通常包括:

內容或元素

出現和使用的頻次

使用者操作後的

基礎互動反饋

,比如 hover 後出現的氣泡、違規操作後看到的提示條;

設計走查的過程中經常會看到的

質量問題

,也可以用元件來統一,比如 icon 的顏色總是用錯、位置總是上上下下差幾個不一致等等。

2. 高階元件設計依據

相比於基礎元件,高階元件因其獨特的業務屬性,以及與產品的強繫結關係,很難找到已有的元件庫進行借鑑和應用。判斷內容是否應該被沉澱的依據通常包括:

元素或內容是很多個基礎元件的拼接合集,且在很多場景中的佈局具備一定規律,會同時出現;

在通用元件的基礎上帶有強烈的業務特性和需求,比如每次使用元件 A 的時候,都要加入業務需要的表單或提示資訊,A 就可以升級成業務元件 A+。

需要注意的是,業務元件庫中的元件數量不是越多越好。“專而精”有時會更高效。畢竟設計系統的根本目的是降本提效,而非設計師炫耀設計價值的工具。

另外,

“專而精” 也是另一個維度的 “全”

。當我們透過對業務需求和屬性的深入研究,將業務元件做的足夠專業,也會從另一個維度對業務進行

補充和賦能

,從設計側推動業務進行體驗最佳化,促進產品質量的提升。

業務元件的搭建標準和規則,更多由業務設計師來決定,也是所有 B 端設計師應該精進的能力。

3. 完整概念列表

所以回到我們開篇遇到的問題:

“為什麼對於彈窗的尺寸、抽屜的寬度、輸入框的長度、表格每一欄的寬度等等

元件的細節尺寸

,為什麼 Ant Design幾乎

沒有給出明確的數值定義

?”

因為每個產品各具特色,對於這種與業務強相關的元件尺寸,在通用的、開源的基礎元件庫中,不太好給出一刀切的定義。

但在我們日常面對業務需求所用的高階業務元件庫中,則需要有明確的規範。

那麼到底哪些資料需要被規範?應該如何編寫規範?「基礎元件」和「高階元件」在設計中還要注意到哪些細節?為了幫助大家更清晰地區分概念,關於「基礎元件」和「高階元件」我總結出了一個完整的清單列表:

基本概念區分;

案例區分;

元件設計工作流程區分;

元件設計內容區分。

本文由@ 元堯 原創釋出於人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基於CC0協議。

頂部