編輯導(dǎo)語：想要更深層地掌握組件設(shè)計，只了解每個組件的樣子、用在哪些地方是遠(yuǎn)遠(yuǎn)不夠的，還需要了解組件的本質(zhì)，即組件的內(nèi)在屬性和設(shè)計細(xì)節(jié)。本文作者解析了組件的屬性和類型，一起來看看吧！

大家好，我是Clippp，今天為大家j分享的是「組件設(shè)計」。

現(xiàn)在有很多成熟的組件庫，能為設(shè)計的規(guī)范性帶來更大的便利。

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

一、組件的五種屬性

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

• 作用：定義組件的用途和作用，明白組件用來做什么的。
• 形狀：不同形狀的組件對產(chǎn)品、對用戶分別有哪些作用。
• 行為：通過用戶點擊或觸摸等動作定義交互行為。
• 狀態(tài)：定義并告知用戶當(dāng)前的狀態(tài)。
• 語境：根據(jù)組件所屬的場景考慮組件不同的用途。

1. 形狀

通過形狀的差異，我們能快速辨別不同類型的組件。

在設(shè)計中，通常采用「文字與圖形」相結(jié)合的形式來定義組件的形狀。在設(shè)計組件時，要將形狀、顏色、圖標(biāo)和文字等視覺元素組合在一起，并合理安排組件的層級結(jié)構(gòu)。

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

所以在設(shè)計時，要充分地考慮使用場景和訴求，并對組件的形狀有清晰的認(rèn)知，在接下來的設(shè)計中需要哪種形狀的組件直接對號入座，整個設(shè)計過程就會變得很明確。

2. 行為

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

3. 狀態(tài)

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

• 正常狀態(tài)(Normal)：是組件最常規(guī)的狀態(tài)，也是設(shè)計師首先設(shè)計的狀態(tài)，表示這是用戶可以交互的元素。
• 聚焦?fàn)顟B(tài)(Focus)：多用在電腦端中，表示元素已被選中。比如在填寫表單時，點擊鍵盤上的tab鍵，電腦的光標(biāo)會切換到下一欄，下一欄的輸入框出現(xiàn)聚焦?fàn)顟B(tài)。
• 懸停狀態(tài)(Hover)：當(dāng)鼠標(biāo)懸停在元素上時，元素會有狀態(tài)的上的變化。另外，在移動端和Pad端上的組件不需要懸停狀態(tài)。
• 激活狀態(tài) (Active)：點擊組件時，組件的顏色會變深，同時還會出現(xiàn)內(nèi)陰影等效果。
• 加載狀態(tài)(Loading)：表示當(dāng)前數(shù)據(jù)仍在加載中，需要等待。
• 禁用狀態(tài)(Disabled)：組件置灰狀態(tài)，告知用戶當(dāng)前條件不滿足，無法使用。

4. 語境

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

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

• 固定/可變：定義大小是可變還是固定。
• 窄/寬：根據(jù)空間的寬度定義用途。
• 層級結(jié)構(gòu)：即使是相同的功能也需要根據(jù)層級結(jié)構(gòu)定義組件的用法。
• 浮動：定義組件是基于可訪問性浮動還是基于滾動移動。

二、組件的三種類型

組件的類型大致可以分為三類：導(dǎo)航類(用于導(dǎo)航信息的組件)、輸入類(用戶輸入信息時使用的組件)、信息類(用于向用戶傳遞信息的組件)。

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

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

• 卡片：容納信息最常見的方式。
• 列表：用于對同一屬性的信息進行排序，以便于識別。
• 網(wǎng)格列表：用于在兩列中顯示卡片或信息單元。
• 輪播：用于水平滾動而不是垂直滾動。
• 選項卡：用于顯示具有不同類型的信息。
• 菜單：用于顯示難以用選項卡顯示的大量復(fù)雜層次結(jié)構(gòu)。

2. 輸入類組件

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

• 復(fù)選框：當(dāng)選擇多個元素時使用。
• 單選按鈕：當(dāng)只能選擇幾個元素中的一個時使用。
• 文本字段：當(dāng)用戶輸入文本信息時使用。
• 下拉菜單：打開菜單查看各種信息時使用。
• 按鈕：用于在各種場景下輸入有關(guān)用戶決策的信息。
• 切換開關(guān)：用于打開/關(guān)閉特定狀態(tài)。

3. 信息類組件

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

• 指導(dǎo)文字：用于提供指導(dǎo)信息。
• 工具提示：用于展示文字無法傳達的內(nèi)容。
• 吐司提示：輕量級的提示，在提示過后通常會自動消失。
• 警告：用來向用戶傳達需要清楚了解的重要信息。
• 彈窗：向用戶傳達需要做出選擇的內(nèi)容。
• 用戶引導(dǎo)：用于傳達用戶不熟悉的頁面內(nèi)容。

三、結(jié)語

以上就是組件的屬性和類型的解析，希望通過這些內(nèi)容能幫助你對組件有更多的認(rèn)識和思考。「組件系列」的其他文章，近期也會不斷更新，歡迎大家關(guān)注~

#專欄作家#

作者：Clippp，微信公眾號：Clip設(shè)計夾。每周精選設(shè)計文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Pexels，基于CC0協(xié)議。