在產(chǎn)品設(shè)計(jì)過程中，我們會(huì)經(jīng)常用到一些小組件、模塊，但你知道這些組件叫什么名字嗎？這篇文章，我們來解決下這個(gè)問題。

我看身邊有很多小伙伴對很多組件有一種“看著很熟，自己設(shè)計(jì)原型時(shí)也會(huì)使用，但是卻不知道叫啥”的情況，這樣就會(huì)影響產(chǎn)品內(nèi)部以及和技術(shù)小伙伴的工作溝通。

所以基于以上情況，本次專門整理了一些常用組件的專業(yè)知識(shí)，分享給不太關(guān)注組件專業(yè)術(shù)名的“產(chǎn)品老手”以及根本就沒用過相關(guān)組件的“產(chǎn)品新手”~

Popup 彈出層：彈出層容器，用于展示彈窗、信息提示等內(nèi)容，支持多個(gè)彈出層疊加展示。支持頂部，底部，左側(cè)，右側(cè)不同位置的彈出。

toast輕提示：在頁面中間彈出黑色半透明提示，用于消息通知、加載提示、操作結(jié)果提示等場景。分為文字提示、加載提示、成功提示、失敗提示、動(dòng)態(tài)更新提示；可以頂部展示或者底部展示。

snackbar：比toast稍微重一點(diǎn)的輕量型反饋方式，包含一行與進(jìn)行中的操作相關(guān)的文案&(最多)一個(gè)操作，并且snackbar不能包含使其消息的“取消”操作。

注：很多組件庫中沒有該組件，需要技術(shù)小伙伴自己來寫(例如技術(shù)常用的vant3就沒有~)

Calendar 日歷：日歷組件用于選擇日期或日期區(qū)間?？蛇x擇單個(gè)日期，多個(gè)日期，日期區(qū)間。

級(jí)聯(lián)選擇框：用于多層級(jí)數(shù)據(jù)的選擇，典型場景為省市區(qū)選擇。

時(shí)間選擇器：支持日期、年月、時(shí)分等維度，通常與彈出層件配合使用。

Picker 選擇器：提供多個(gè)選項(xiàng)集合供用戶選擇，支持單列選擇和多列級(jí)聯(lián)，通常與彈出層組件配合使用。

Rate 評(píng)分：用于對事物進(jìn)行評(píng)級(jí)操作。

Slider 滑塊：滑動(dòng)輸入條，用于在給定的范圍內(nèi)選擇一個(gè)值。

Stepper 步進(jìn)器：由增加按鈕、減少按鈕和輸入框組成，用于在一定范圍內(nèi)輸入、調(diào)整數(shù)字。

Badge 徽標(biāo)：在右上角展示徽標(biāo)數(shù)字或小紅點(diǎn)。

NoticeBar 通知欄：用于循環(huán)播放展示一組消息通知?？伤娇纱怪睗L動(dòng)。

Popover 氣泡彈出框：彈出式的氣泡菜單

Tag 標(biāo)簽：用于標(biāo)記關(guān)鍵詞和概括主要內(nèi)容。

ActionBar 動(dòng)作欄：用于為頁面相關(guān)操作提供便捷交互。

Tab 標(biāo)簽頁：選項(xiàng)卡組件，用于在不同的內(nèi)容區(qū)域之間進(jìn)行切換。

Tabbar 標(biāo)簽欄：底部導(dǎo)航欄，用于在不同頁面之間進(jìn)行切換

TreeSelect 分類選擇：用于從一組相關(guān)聯(lián)的數(shù)據(jù)集合中進(jìn)行選擇。支持單選和多選模式

此次分享到此結(jié)束，歡迎小伙伴留言分享其他常用但是很多小伙伴不容易叫上名字的組件~