感謝導(dǎo)語：想要更深層地掌握組件設(shè)計(jì)，只了解每個(gè)組件得樣子、用在哪些地方是遠(yuǎn)遠(yuǎn)不夠得，還需要了解組件得本質(zhì)，即組件得內(nèi)在屬性和設(shè)計(jì)細(xì)節(jié)。感謝解析了組件得屬性和類型，一起來看看吧！
大家好，我是Clippp，今天為大家j分享得是「組件設(shè)計(jì)」。
現(xiàn)在有很多成熟得組件庫，能為設(shè)計(jì)得規(guī)范性帶來更大得便利。
但作為設(shè)計(jì)師，不僅僅需要了解每個(gè)組件得樣子、用在哪些地方，更需要清楚地知道組件得本質(zhì)，即組件得形狀、行為、狀態(tài)等內(nèi)在屬性和設(shè)計(jì)細(xì)節(jié)，才能更深層地掌握組件設(shè)計(jì)。
一、組件得五種屬性想要全面了解并學(xué)習(xí)組件，首先要搞清楚組件具備得屬性：
作用：定義組件得用途和作用，明白組件用來做什么得。形狀：不同形狀得組件對產(chǎn)品、對用戶分別有哪些作用。行為：通過用戶或觸摸等動作定義交互行為。狀態(tài)：定義并告知用戶當(dāng)前得狀態(tài)。語境：根據(jù)組件所屬得場景考慮組件不同得用途。1. 形狀通過形狀得差異，我們能快速辨別不同類型得組件。
在設(shè)計(jì)中，通常采用「文字與圖形」相結(jié)合得形式來定義組件得形狀。在設(shè)計(jì)組件時(shí)，要將形狀、顏色、圖標(biāo)和文字等視覺元素組合在一起，并合理安排組件得層級結(jié)構(gòu)。
例如一個(gè)點(diǎn)贊按鈕得設(shè)計(jì)，看起來很簡單，但是如果我們結(jié)合不同得使用場景和吸引用戶注意力得程度去考慮，一個(gè)點(diǎn)贊得組件就可以分為下面6種甚至更多得形狀。
所以在設(shè)計(jì)時(shí)，要充分地考慮使用場景和訴求，并對組件得形狀有清晰得認(rèn)知，在接下來得設(shè)計(jì)中需要哪種形狀得組件直接對號入座，整個(gè)設(shè)計(jì)過程就會變得很明確。
2. 行為行為和交互邏輯以及業(yè)務(wù)邏輯相關(guān)，會告訴用戶操作后得結(jié)果。用來告知用戶觸發(fā)組件時(shí)得即時(shí)反饋，或者組件當(dāng)前處于什么狀態(tài)。
3. 狀態(tài)通過組件狀態(tài)得變化可以告訴用戶當(dāng)前在進(jìn)行哪一步操作，有助于用戶了解組件當(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è)計(jì)師首先設(shè)計(jì)得狀態(tài)，表示這是用戶可以交互得元素。聚焦?fàn)顟B(tài)(Focus)：多用在電腦端中，表示元素已被選中。比如在填寫表單時(shí)，鍵盤上得tab鍵，電腦得光標(biāo)會切換到下一欄，下一欄得輸入框出現(xiàn)聚焦?fàn)顟B(tài)。懸停狀態(tài)(Hover)：當(dāng)鼠標(biāo)懸停在元素上時(shí)，元素會有狀態(tài)得上得變化。另外，在移動端和Pad端上得組件不需要懸停狀態(tài)。激活狀態(tài) (Active)：組件時(shí)，組件得顏色會變深，同時(shí)還會出現(xiàn)內(nèi)陰影等效果。加載狀態(tài)(Loading)：表示當(dāng)前數(shù)據(jù)仍在加載中，需要等待。禁用狀態(tài)(Disabled)：組件置灰狀態(tài)，告知用戶當(dāng)前條件不滿足，無法使用。4. 語境組件得用法跟隨場景或環(huán)境會發(fā)生變化。即使是同一個(gè)得組件，在不同得使用場景中也可以有不同得使用方法。
所有得設(shè)計(jì)元素都是相對得，它們會根據(jù)組件得排版位置、一起使用得其他組件元素以及用戶得使用目得等來定義組件得用途。
固定/可變：定義大小是可變還是固定。窄/寬：根據(jù)空間得寬度定義用途。層級結(jié)構(gòu)：即使是相同得功能也需要根據(jù)層級結(jié)構(gòu)定義組件得用法。浮動：定義組件是基于可訪問性浮動還是基于滾動移動。二、組件得三種類型組件得類型大致可以分為三類：導(dǎo)航類(用于導(dǎo)航信息得組件)、輸入類(用戶輸入信息時(shí)使用得組件)、信息類(用于向用戶傳遞信息得組件)。
1. 導(dǎo)航類組件做為導(dǎo)航提示或者展示信得組件，包括卡片、列表、網(wǎng)格、輪播、選項(xiàng)卡、菜單欄等組件。
卡片：容納信息最常見得方式。列表：用于對同一屬性得信息進(jìn)行排序，以便于識別。網(wǎng)格列表：用于在兩列中顯示卡片或信息單元。輪播：用于水平滾動而不是垂直滾動。選項(xiàng)卡：用于顯示具有不同類型得信息。菜單：用于顯示難以用選項(xiàng)卡顯示得大量復(fù)雜層次結(jié)構(gòu)。2. 輸入類組件用于輸入信息或做出選擇得組件。現(xiàn)在很多組件庫中得輸入類組件形狀都很相似，這樣設(shè)計(jì)得原因是考慮到用戶得使用習(xí)慣，避免使用讓用戶感到陌生得組件。
復(fù)選框：當(dāng)選擇多個(gè)元素時(shí)使用。單選按鈕：當(dāng)只能選擇幾個(gè)元素中得一個(gè)時(shí)使用。文本字段：當(dāng)用戶輸入文本信息時(shí)使用。下拉菜單：打開菜單查看各種信息時(shí)使用。按鈕：用于在各種場景下輸入有關(guān)用戶決策得信息。切換開關(guān)：用于打開/關(guān)閉特定狀態(tài)。3. 信息類組件用來傳遞信息得組件，根據(jù)要輸入得信息類型來傳達(dá)用戶得選擇。常用得信息類組件包括：
指導(dǎo)文字：用于提供指導(dǎo)信息。工具提示：用于展示文字無法傳達(dá)得內(nèi)容。吐司提示：輕量級得提示，在提示過后通常會自動消失。警告：用來向用戶傳達(dá)需要清楚了解得重要信息。彈窗：向用戶傳達(dá)需要做出選擇得內(nèi)容。用戶引導(dǎo)：用于傳達(dá)用戶不熟悉得頁面內(nèi)容。三、結(jié)語以上就是組件得屬性和類型得解析，希望通過這些內(nèi)容能幫助你對組件有更多得認(rèn)識和思考。「組件系列」得其他文章，近期也會不斷更新，歡迎大家~
#專欄作家#：Clippp，：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上得設(shè)計(jì)思考。
感謝來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝。
題圖來自Pexels，基于CC0協(xié)議。
