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

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

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

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

A. 輸入框 開關(guān) 上傳 按鈕 文本提示

B. 輸入框 開關(guān) 上傳 按鈕 氣泡卡片

C. 輸入框 開關(guān) 圖片預(yù)覽 按鈕 文本提示

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

一、形式?jīng)Q定功能

其實我們在去辨別新一個組件的時候，會優(yōu)先關(guān)注組件的「樣子」，進(jìn)而來進(jìn)行辨別。

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

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

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

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

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

當(dāng)然，正是因為它們樣子的改變，組件的使用含義也會產(chǎn)生變化。

二、明確交互狀態(tài)

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

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

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

其實我們在辨別交互狀態(tài)時，通常會存在兩種辨別維度：常規(guī)交互與業(yè)務(wù)交互。

常規(guī)交互是指在網(wǎng)頁端當(dāng)中的基礎(chǔ)交互，比如 Hover、點擊，這種情況大多數(shù)設(shè)計師經(jīng)常接觸，因此我們就不花太多時間放在這上面。

第二種交互類型是業(yè)務(wù)交互，它主要出現(xiàn)在特定的頁面上。比如在圖表中的下鉆、過濾、聯(lián)動、縮放等等；在表格就會有 凍結(jié)、拖拽、選中 等交互，這些內(nèi)容都是我們在涉及特定頁面時需要關(guān)注的。

所以我們再去理解一個組件的時候，也需要去考慮這個組件所關(guān)聯(lián)的交互狀態(tài)，這樣才能夠?qū)τ谶@個組件有個更為全面的認(rèn)識。

三、作用對比

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

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

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

舉一個例子

比如最近在行業(yè)當(dāng)中，出現(xiàn)一種新的組件叫做：螞蟻線

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

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

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

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

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

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

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

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