国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

先來(lái)簡(jiǎn)單說(shuō)說(shuō)什么是組件？

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

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

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

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

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

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

其實(shí)我們?cè)谌ケ鎰e新一個(gè)組件的時(shí)候，會(huì)優(yōu)先關(guān)注組件的「樣子」，進(jìn)而來(lái)進(jìn)行辨別。

比如下方的兩個(gè)組件，我們其實(shí)很快速就能判斷出一個(gè)是 單選框，一個(gè)是多選框。因?yàn)樵谖覀儩撘庾R(shí)當(dāng)中單選為圓形、多選則為方形，因此對(duì)于一個(gè)組件的第一印象則會(huì)和它的形式相關(guān)。

但很多時(shí)候，隨著業(yè)務(wù)的變化，我們也會(huì)給組件更多含義。比如在下方三個(gè)新建按鈕當(dāng)中，因?yàn)樗麄兊男问讲煌鶎?duì)應(yīng)的含義也并不相同。

通過(guò)形式上，我們可以理解為：

• 第一個(gè)新建按鈕，
• 第二個(gè)新建按鈕：
• 第三個(gè)新建按鈕：

再舉一個(gè)例子，比如在這三個(gè)選擇組件當(dāng)中，正是由于其組件形式的變化，導(dǎo)致它們?cè)谑褂蒙弦矔?huì)存在較大差別~

當(dāng)然，正是因?yàn)樗鼈儤幼拥母淖?，組件的使用含義也會(huì)產(chǎn)生變化。

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

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

比如同樣給到大家兩個(gè)組件，請(qǐng)你去辨別這兩個(gè)組件分別是什么？

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

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

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

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

所以我們?cè)偃ダ斫庖粋€(gè)組件的時(shí)候，也需要去考慮這個(gè)組件所關(guān)聯(lián)的交互狀態(tài)，這樣才能夠?qū)τ谶@個(gè)組件有個(gè)更為全面的認(rèn)識(shí)。

三、作用對(duì)比

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

因?yàn)槊恳粋€(gè)組件都會(huì)有它存在的意義，我們可以通過(guò)橫向單維度的對(duì)比，了解到這個(gè)組件它所對(duì)應(yīng)的特點(diǎn)。

這個(gè)我們來(lái)舉一個(gè)完整的例子，帶大家感受一下~

舉一個(gè)例子

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

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

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

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

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

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

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

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

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