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