今天為大家分享的是「組件設(shè)計(jì)」?，F(xiàn)在有很多成熟的組件庫(kù)，能為設(shè)計(jì)的規(guī)范性帶來(lái)更大的便利。

但作為設(shè)計(jì)師，不僅僅需要了解每個(gè)組件的樣子、用在哪些地方，更需要清楚地知道組件的本質(zhì)，即組件的形狀、行為、狀態(tài)等內(nèi)在屬性和設(shè)計(jì)細(xì)節(jié)，才能更深層地掌握組件設(shè)計(jì)。

組件的五種屬性

想要全面了解并學(xué)習(xí)組件，首先要搞清楚組件具備的屬性：

作用：定義組件的用途和作用，明白組件用來(lái)做什么的。

形狀：不同形狀的組件對(duì)產(chǎn)品、對(duì)用戶(hù)分別有哪些作用。

行為：通過(guò)用戶(hù)點(diǎn)擊或觸摸等動(dòng)作定義交互行為。

狀態(tài)：定義并告知用戶(hù)當(dāng)前的狀態(tài)。

語(yǔ)境：根據(jù)組件所屬的場(chǎng)景考慮組件不同的用途。

1. 形狀

通過(guò)形狀的差異，我們能快速辨別不同類(lèi)型的組件。在設(shè)計(jì)中，通常采用「文字與圖形」相結(jié)合的形式來(lái)定義組件的形狀。在設(shè)計(jì)組件時(shí)，要將形狀、顏色、圖標(biāo)和文字等視覺(jué)元素組合在一起，并合理安排組件的層級(jí)結(jié)構(gòu)。

例如一個(gè)點(diǎn)贊按鈕的設(shè)計(jì)，看起來(lái)很簡(jiǎn)單，但是如果我們結(jié)合不同的使用場(chǎng)景和吸引用戶(hù)注意力的程度去考慮，一個(gè)點(diǎn)贊的組件就可以分為下面 6 種甚至更多的形狀。

所以在設(shè)計(jì)時(shí)，要充分地考慮使用場(chǎng)景和訴求，并對(duì)組件的形狀有清晰的認(rèn)知，在接下來(lái)的設(shè)計(jì)中需要哪種形狀的組件直接對(duì)號(hào)入座，整個(gè)設(shè)計(jì)過(guò)程就會(huì)變得很明確。

2. 行為

行為和交互邏輯以及業(yè)務(wù)邏輯相關(guān)，會(huì)告訴用戶(hù)操作后的結(jié)果。用來(lái)告知用戶(hù)觸發(fā)組件時(shí)的即時(shí)反饋，或者組件當(dāng)前處于什么狀態(tài)。

3. 狀態(tài)

通過(guò)組件狀態(tài)的變化可以告訴用戶(hù)當(dāng)前在進(jìn)行哪一步操作，有助于用戶(hù)了解組件當(dāng)前的情況。常見(jiàn)的組件狀態(tài)包括：正常狀態(tài)、聚焦?fàn)顟B(tài)、懸停狀態(tài)、激活狀態(tài)、加載狀態(tài)、禁用狀態(tài)。

正常狀態(tài)(Normal)：是組件最常規(guī)的狀態(tài)，也是設(shè)計(jì)師首先設(shè)計(jì)的狀態(tài)，表示這是用戶(hù)可以交互的元素。

聚焦?fàn)顟B(tài)(Focus)：多用在電腦端中，表示元素已被選中。比如在填寫(xiě)表單時(shí)，點(diǎn)擊鍵盤(pán)上的 tab 鍵，電腦的光標(biāo)會(huì)切換到下一欄，下一欄的輸入框出現(xiàn)聚焦?fàn)顟B(tài)。

懸停狀態(tài)(Hover)：當(dāng)鼠標(biāo)懸停在元素上時(shí)，元素會(huì)有狀態(tài)的上的變化。另外，在移動(dòng)端和 Pad 端上的組件不需要懸停狀態(tài)。

激活狀態(tài) (Active)：點(diǎn)擊組件時(shí)，組件的顏色會(huì)變深，同時(shí)還會(huì)出現(xiàn)內(nèi)陰影等效果。

加載狀態(tài)(Loading)：表示當(dāng)前數(shù)據(jù)仍在加載中，需要等待。

禁用狀態(tài)(Disabled)：組件置灰狀態(tài)，告知用戶(hù)當(dāng)前條件不滿(mǎn)足，無(wú)法使用。

4. 語(yǔ)境

組件的用法跟隨場(chǎng)景或環(huán)境會(huì)發(fā)生變化。即使是同一個(gè)的組件，在不同的使用場(chǎng)景中也可以有不同的使用方法。

所有的設(shè)計(jì)元素都是相對(duì)的，它們會(huì)根據(jù)組件的排版位置、一起使用的其他組件元素以及用戶(hù)的使用目的等來(lái)定義組件的用途。

固定/可變：定義大小是可變還是固定。

窄/寬：根據(jù)空間的寬度定義用途。

層級(jí)結(jié)構(gòu)：即使是相同的功能也需要根據(jù)層級(jí)結(jié)構(gòu)定義組件的用法。

浮動(dòng)：定義組件是基于可訪問(wèn)性浮動(dòng)還是基于滾動(dòng)移動(dòng)。

組件的三種類(lèi)型

組件的類(lèi)型大致可以分為三類(lèi)：導(dǎo)航類(lèi)（用于導(dǎo)航信息的組件）、輸入類(lèi)（用戶(hù)輸入信息時(shí)使用的組件）、信息類(lèi)（用于向用戶(hù)傳遞信息的組件）。

1. 導(dǎo)航類(lèi)組件

作為導(dǎo)航提示或者展示信的組件，包括卡片、列表、網(wǎng)格、輪播、選項(xiàng)卡、菜單欄等組件。

卡片：容納信息最常見(jiàn)的方式。

列表：用于對(duì)同一屬性的信息進(jìn)行排序，以便于識(shí)別。

網(wǎng)格列表：用于在兩列中顯示卡片或信息單元。

輪播：用于水平滾動(dòng)而不是垂直滾動(dòng)。

選項(xiàng)卡：用于顯示具有不同類(lèi)型的信息。

菜單：用于顯示難以用選項(xiàng)卡顯示的大量復(fù)雜層次結(jié)構(gòu)。

2. 輸入類(lèi)組件

用于輸入信息或做出選擇的組件?，F(xiàn)在很多組件庫(kù)中的輸入類(lèi)組件形狀都很相似，這樣設(shè)計(jì)的原因是考慮到用戶(hù)的使用習(xí)慣，避免使用讓用戶(hù)感到陌生的組件。

復(fù)選框：當(dāng)選擇多個(gè)元素時(shí)使用

單選按鈕：當(dāng)只能選擇幾個(gè)元素中的一個(gè)時(shí)使用

文本字段：當(dāng)用戶(hù)輸入文本信息時(shí)使用

下拉菜單：打開(kāi)菜單查看各種信息時(shí)使用

按鈕：用于在各種場(chǎng)景下輸入有關(guān)用戶(hù)決策的信息

切換開(kāi)關(guān)：用于打開(kāi)/關(guān)閉特定狀態(tài)

3. 信息類(lèi)組件

用來(lái)傳遞信息的組件，根據(jù)要輸入的信息類(lèi)型來(lái)傳達(dá)用戶(hù)的選擇。常用的信息類(lèi)組件包括：

指導(dǎo)文字：用于提供指導(dǎo)信息。

工具提示：用于展示文字無(wú)法傳達(dá)的內(nèi)容。

吐司提示：輕量級(jí)的提示，在提示過(guò)后通常會(huì)自動(dòng)消失。

警告：用來(lái)向用戶(hù)傳達(dá)需要清楚了解的重要信息。

彈窗：向用戶(hù)傳達(dá)需要做出選擇的內(nèi)容。

用戶(hù)引導(dǎo)：用于傳達(dá)用戶(hù)不熟悉的頁(yè)面內(nèi)容。

最后

以上就是組件的屬性和類(lèi)型的解析，希望通過(guò)這些內(nèi)容能幫助你對(duì)組件有更多的認(rèn)識(shí)和思考。

作者：Clip設(shè)計(jì)夾