作為一個 B 端設計師，我們究竟要如何理解組件？

當接觸到一個新組件時，通常會陷入到迷茫。一方面是組件過于的熟悉，我們在日常的工作當中會頻繁接觸到大量的組件內容（畢竟是組件設計師...）另一方面則是新的組件不斷涌入，我們作為設計師一時之間不知道如何進行分析，今天我們就來聊聊 B 端設計師與組件之間的“愛恨情仇”。

先來簡單說說什么是組件？

我認為組件就是組成用戶界面的基本元素，也是前端在開發過程當中，抽象出來可以復用的模塊。對于定義大家不必過于糾結，最主要還是要了解其使用，比如在下方頁面當中，會包含有哪一些組件？

A. 輸入框 開關 上傳 按鈕 文本提示

B. 輸入框 開關 上傳 按鈕 氣泡卡片

C. 輸入框 開關 圖片預覽 按鈕 文本提示

這就是我們要了解關于一個組件的判斷流程，我認為會有三步：形式、交互、場景。

一、形式決定功能

其實我們在去辨別新一個組件的時候，會優先關注組件的「樣子」，進而來進行辨別。

比如下方的兩個組件，我們其實很快速就能判斷出一個是 單選框，一個是多選框。因為在我們潛意識當中單選為圓形、多選則為方形，因此對于一個組件的第一印象則會和它的形式相關。

但很多時候，隨著業務的變化，我們也會給組件更多含義。比如在下方三個新建按鈕當中，因為他們的形式不同，所對應的含義也并不相同。

通過形式上，我們可以理解為：

• 第一個新建按鈕，
• 第二個新建按鈕：
• 第三個新建按鈕：

再舉一個例子，比如在這三個選擇組件當中，正是由于其組件形式的變化，導致它們在使用上也會存在較大差別~

當然，正是因為它們樣子的改變，組件的使用含義也會產生變化。

二、明確交互狀態

知道它的樣子還不夠，我們還要了解它究竟應該如何操作，因此就需要明確對應的交互狀態。

比如同樣給到大家兩個組件，請你去辨別這兩個組件分別是什么？

其實我們很難進行細致的辨認，因為這兩個組件在形式上基本相同。但我們一旦將其動起來，你就會發現不同，左側的是一個按鈕，而右側則為鏈接。

其實我們在辨別交互狀態時，通常會存在兩種辨別維度：常規交互與業務交互。

常規交互是指在網頁端當中的基礎交互，比如 Hover、點擊，這種情況大多數設計師經常接觸，因此我們就不花太多時間放在這上面。

第二種交互類型是業務交互，它主要出現在特定的頁面上。比如在圖表中的下鉆、過濾、聯動、縮放等等；在表格就會有 凍結、拖拽、選中 等交互，這些內容都是我們在涉及特定頁面時需要關注的。

所以我們再去理解一個組件的時候，也需要去考慮這個組件所關聯的交互狀態，這樣才能夠對于這個組件有個更為全面的認識。

三、作用對比

作用對比則是去思考這個組件與其他作用類似的組件之間究竟會存在什么差別？

因為每一個組件都會有它存在的意義，我們可以通過橫向單維度的對比，了解到這個組件它所對應的特點。

這個我們來舉一個完整的例子，帶大家感受一下~

舉一個例子

比如最近在行業當中，出現一種新的組件叫做：螞蟻線

剛開始在騰訊云的官網看到了螞蟻線，但其實我對他真的一無所知。于是乎，我開始了組件調研。

從形式開始，你會發現“螞蟻線”是位于文本下方，通過虛線的方式呈現。

通過這種形式，我們能夠拓展一些其他的類似樣式。

比如在飛書當中，當你寫一個錯別字的時候，飛書會提供默認的下劃線提示你修改錯誤。但這個下劃線是一個實線，并且會以黃色作為標注，這就是形式上的差異。

其次，在交互上，在整個頁面中，當你將鼠標懸停在虛線上時，這個提示會告訴你這里有信息可以進行預覽。通過這樣，我們就能大致明白“螞蟻線”的含義：它出現在文本下方，使用虛線的方式提示用戶這里有更多的信息。用戶通過將鼠標懸停在虛線區域的文本上，便可以查看更多內容。

最后，在對組件進行對比時，思考與“螞蟻線”具有相同作用的組件，我想到有兩個：Tooltips和Popover。并簡單整理它們在日常頁面的使用，一共會包含三種相同的情況下的交互形式。同時，明確分析緯度以信息凸顯程度進行對比，進而能夠將這三個組件進行區分。

并且在頁面中，交互的形式也會有所不同。因此我們簡單整理，會有三種相對應的對比方式。并明確它們，以信息干擾程度作為標準，來進行單維度的劃分。進而就能得到“螞蟻線”組件的一個整體的用途。

關于組件，確實由于時間有限，給大家分享到這里。