起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品經理必會的30個組件（匯總）
編輯導語： 在產品經理的日常工作中，免不了要用到各種組件，那么，這些組件的名稱你都知道嗎？本文作者整理匯總了一些常用組件名稱，以及它們的用處，希望可以給你帶來幫助。
最近發生了兩件事：
和新來的研發溝通個問題——讓他替換下icon。
他問我什么是icon？
我說就是圖標，他說哦哦。
和另外一個產品討論一個交互，我說使用穿梭選擇器，他問我什么是穿梭選擇器？
我說就是這種，他說哦哦。
對于很多組件名稱，有時候我也搞不明白。產品實習生之前問我徽標內容數值最多顯示99+行不行？
我也是一愣，才知道他說的就是小紅點。
我想，很多同學都會有搞不清楚組件名稱叫什么的時候，所以我整理了一些組件名稱，以及一些其他名詞。
內容較多，建議收藏，希望對各位有用。
01 組件相關
1. icon
就是指圖標，比如像app的icon圖標，還有在頁面內的圖標，都能叫做icon。
icon需要有象征意義，需要有隱喻性，需要讓人能在最短的時間內理解出icon的含義。
問你個事，抖音的第三個icon是啥？
2. 穿梭選擇器
也叫穿梭框，一般為左右兩欄，左邊為待選擇項，右邊為已選項。
從左邊選到右邊表示已選，從右邊移到左邊，表示取消選擇。
常用在B端產品中，當需要多選且選擇項較多時，就可以使用穿梭選擇器。
當可選項很多，大于10個時，可以考慮使用穿梭選擇框。這樣用戶就可以清楚的知道自己選擇了哪些內容。
3. 徽標（Badge）
徽標可以理解為小紅點，就是在圖標、文字右上角、或者在頁面某個地方的紅色小圓點。常用來表示有新消息或者是為了達到某種信息提示。
徽標的形式不僅只有小紅點，也有紅圈里加數字，表示新消息數量。也有直接小紅圈+文字，來更好的傳達信息。
4. 骨架屏
骨架屏是一種加載狀態，也叫做加載占位符，加載時在頁面上通過灰色塊顯示出大致結構。
可以有效緩解用戶的等待焦慮感，向用戶表達出“這個頁面有這樣的數據”的感覺。同時結合光澤掠過或者灰色塊來回收縮的動畫，來表達頁面正在加載中。
骨架屏比普通的加載loading動畫能提供更好的視覺效果，能產生加載很快的感覺，對用戶體驗也更好。
相同的響應時間內，菊花轉轉得再快，也比不上骨架屏來的感覺快。
5. 缺省頁/空狀態頁
是指在頁面內沒有數據時顯示出空狀態效果。避免沒有數據時顯示出空白頁面，讓用戶陷入“到底有沒有數據”的困惑。
缺省頁包括網絡異常，加載失敗、無權限、搜索無結果等。
缺省頁不僅是只一個頁面全是空狀態，在頁面中的某個模塊中也會有空狀態，針對某個模塊內也要添加缺省狀態。
沒有數據非常影響用戶體驗，這時就靠缺省頁來安慰用戶。添加合適的文案、圖案、引導、動效來給用戶一些正向的傳達。
比如沒有關注，我們推薦用戶可關注的博主。當加載失敗時，可以添加“重新加載”按鈕，讓用戶再次刷新。
缺省頁空狀態屬于數據為空的臨界值，經常會一不小心遺漏，敲黑板，需要注意空狀態。
6. tab頁
指標簽頁，可以理解為菜單、導航欄。通過不同tab頁聚合不同信息收納在一個頁面區域內。
Tab頁分為頂部、底部、側邊欄。
頂部tab是最常見的，在很多app和網站中都有使用，因為頂部tab占據的頁面空間更小，同時采用滑動的形式可以容納很多tab。
頂部tab除了有文字，還有圖標tab。
側邊欄tab有左、右，常見的是左側欄。如果更想突出內容，可以采用右側邊欄。
tab頁的層級關系一般是底部tab＞頂部tab＞側邊欄tab。對于頁面內容太多時，也能互相嵌用，比如頂部tab頁里再套個二級左側邊欄tab。
在ios里有個Segmented Controls，叫分段控件，和tab頁很像，都是用來聚合頁面。
不一樣的是，分段控件只能手動點擊，不能左右滑動切換，而tab頁可以左右滑動切換頁面。
分段控件可以是文字分段，也可以是圖標，下圖是圖標分段控件。
7. 模態彈窗與非模態彈窗
1）模態彈窗
對用戶操作做出阻礙的彈窗。用戶必須對彈窗內容做出回應才能進行下一步操作，在操作確認、重要信息提醒時，都需要用到模態彈窗。
對于用戶使用場景的不同，可以選擇使用不同的模態彈窗，比如對話框、氣泡提示、動作欄等（這些概念下邊會說）。
2）非模態彈窗
不會阻礙用戶操作的彈窗，像toast提示、通告欄就是非模態（這些概念下邊會說）。
8. 氣泡（popover）
氣泡可以理解為一個小彈窗，就像氣泡一樣，體積小、重量輕，想往哪飄就往哪飄，剛顯示出來，手指一搓，就bou~地沒有了。
氣泡是種形式，結合不同場景，常見的有氣泡確認框、氣泡卡片、氣泡引導等，特點就是輕、小、靈活。
還有個大特點就是會有個小箭頭，來表示這個氣泡從哪出來的，能夠突出顯示特定位置的提示。所以在引導用戶時，就可以大大方方的使用氣泡引導。
對于一些不常用功能、或者快捷功能入口，可以采用隱藏的方式，在顯示的時候就可以通過“氣泡卡片”的形式彈出來。
9. 浮出層（popup）
這里浮出層是指浮出在半透明層上的彈窗窗口，可在浮出層中進行操作。通常是點擊頁面某個區域后展示出來。
10. 動作欄（Action Sheets）
常指從頁面底部彈出的底部列表彈窗，懸浮在半透明蒙版上，不需要進行跳轉頁面，在當前頁面就可以進行更多的操作。
11. 活動視圖 （ActivityViews）
這個概念來自ios，簡單理解是指在從底部出現的彈窗，常見的樣式為icon+標題，可以讓用戶快速訪問其它功能。
當動作欄用于分享場景時，可以叫做分享面板。
12. Toast
也叫吐司提示、輕提示，是一種非常輕量級提示。出現后，過幾秒自動消失。出現位置有屏幕頂部、中部、底部。
由于出現時間短、面積小，過幾秒就會自動消失，所以不能添加過多的文字，也不能放重要信息。Toast屬于非模態。
13. 通告欄 （Notice Bar）
形式一般為在頁面上方顯示的小橫條內容?？捎脕碜鰻顟B提示、消息通知。屬于非模態，可以提示用戶，但不影響用戶的操作。
通告欄比toast達到的提示更重，因為它更明顯；比彈窗提示、氣泡提示達到的提示輕，因為它不會影響用戶的操作。
通告欄位置通常在頁面上方，也有在頁面下方顯示?？梢灾鲃酉?，也可以常駐。同時在一個頁面內也可以添加多個通告欄。
14. 提示對話框（Snackbar）
可以理解為懸浮在頁面底部的消息通知，可以自動消失，也可以常駐，手動點擊消失。
snackbar的提示強度比Toast強，不影響用戶操作，屬于非模態。另外snackbar在出現時可以添加操作按鈕，引導用戶做其它操作。
15. HUD
HUD有幾種說法，我們一個個看下。
1）HUD-輕提示，和上邊的Toast相似
與toast不同的是，它作為提示出現時，都在頁面中部顯示，Toast只有文字，而HUD為圖標+文字。
2）HUD-平視顯示器，全稱是Head-up Display
在航空航天、汽車領域HUD指將參數內容投射到頭盔、擋風玻璃的一種顯示設備?？梢栽谝暰€中顯示的參數內容，如開車時不需要看儀表盤，在視野范圍內就能看到車速。
16. 透明指示層
是指在頁面中顯示出交互操作的指示層，也是種反饋組件，常見的如看視頻的快進提示，或者是調整音量的提示。
有些文章把HUD也叫作透明指示層，正確性我無法判斷，所以在這把透明指示層單獨說明。
17. 工具提示/文字提示（Tooltips）
常指在鼠標懸浮在某個圖標、按鈕、文本等元素上，顯示出來描述或者功能說明，用于輔助用戶了解某個功能。
18. Chips
有些文章翻譯為紙片，但是我覺得不形象，那么Chips是什么呢？
看下邊的圖，這個像按鈕的就是chips。
但是Chips與按鈕是不同的，按鈕的內容是固定的，而chips是動態的，根據支持內容不同顯示不同的內容。所以chips更像是標簽。
Material Design將Chips分為4類，分別是輔助chips、過濾chips、輸入chips、建議chips。
- 輔助chips：可以跨越多個app的智能或自動化操作，比如說購買電影票后把看電影的時間添加到日歷。
- 過濾chips：用于篩選，可用于單選與多選。
- 輸入chips：用戶輸入的信息聚合，比如發郵件輸入收件人后，后邊有個“×”。
- 建議chips：動態生成的建議來幫助縮小用戶的意圖。
19. 步進器（Stepper）
步進器是指通過增、減按鈕對數值進行控制的組件。常用于小范圍整數數值輸入,每次增、減的數量都是恒定的。
20. 滑動選擇器
是指通過橫軸中通過滑動的方式選擇對應的數值、區間。
特點是在橫軸中展示出了最小值與最大值，用戶可以通過滑動的方式自己選擇對應數值。
區間滑動選擇器是指可以選擇最小值與最大值，讓用戶自己選擇區間范圍，常用于價格選擇。
21. 懸浮按鈕/浮動按鈕/Fab
Floating action buttons ，浮動按鈕，就是懸浮按鈕。
常用于主功能入口，如新建。
22. 導航欄、狀態欄
狀態欄是手機屏幕上方顯示時間、電量、手機信號的那一欄。
導航欄是指狀態欄下邊的那一欄，導航欄可以是很簡單的只有一個標題、也可以放搜索框，或者其它操作按鈕，或功能入口。
23. 指示器
在圖片或卡片可進行左右滑動時，常使用指示器來表達所在位置。
根據指示器的樣式不同，有圓點指示器、滑塊指示器、線型指示器、數字指示器。
24. 卡片
卡片是一種容納信息的展示方式，每張卡片內承載不同內容，不僅能有效處理信息集合，同時有效的讓用戶聚焦到卡片中的內容。
卡片的高效分區、信息突出在很多產品中都已經使用到。
25. 泳道
可以橫向左右滑動來查看內容的方式叫做泳道。
將多個元素內容在一定區域內橫向滑動，擴展了頁面的橫向空間，一般是手動滑動查看，并沒有自動滑動。
26. Banner
Banner是指出現在頁面中明顯的橫幅圖片，通常作為推薦位、廣告位，如產品推薦、廣告位等，大家應該都清楚這個。
但是根據樣式不同，還能分為膠囊banner、瓷片區banner、白底banner，這些名字是否為標準的，我也不清楚，所以如果你不知道描述，可以就按這種名字叫。
27. 瓷片區
將不同矩形塊通過網格布局的方式就組成了瓷片區。
特點就是布局很靈活，比banner占據的空間小，相同面積能夠放更多的流量入口。
28. 金剛區
是指在首頁中icon+文字通過宮格形式排列的區域。把多個功能入口排列的一起，很好地起到了引流的作用，特點還是很靈活。
據說是“金剛區”“瓷片區”這些詞是美團造的，“金剛區”意思為“百變金剛”，靈活多變；“瓷片區”就像瓷片貼墻上一樣，工工整整。
Banner、金剛區、瓷片區被稱為3大運營版塊，起著為不同業務模塊、不同活動引流的作用。
02 導航相關
29. 抽屜導航
我們先說下抽屜，抽屜是指一種對組件展示方式的描述，像抽屜一樣進行開合，將多余內容隱藏，出現的時候彈出，和浮出層很像。
對于不常用的功能，將功能入口隱藏起來，用戶需要時，點擊入口，然后將功能列表顯示出來。
當起到導航作用時，就叫抽屜導航，也叫溢出菜單、擴展菜單、漢堡導航，就是將側邊欄隱藏起來。
30. 宮格導航
先說下宮格，宮格是指一種布局方式，通過icon+文字直接平均排列開，讓用戶直接看到每個獨立的模塊入口，自己去點擊。
當宮格布局用于導航時，就可以叫做宮格導航，像金剛區就是宮格導航。
31. 索引導航
索引導航欄是指通過首字母、或者數字進行分類組織內容，并進行導航的控件。
32. 舵式導航
舵式導航是底部tab的變體，常用在Apptabbar上。
對于app的核心功能、想要用戶操作的功能放在中間，變換下形式，引導用戶去點擊。
通常在UGC社區中，為了引導用戶發布內容，將入口放在最明顯的位置，通過最短的路徑，引導用戶發布。
03 設計相關
33. 襯線體、無襯線體
襯線體是指在字的筆畫邊角中有彎彎繞繞的字體，像宋體就是襯線體。
無襯線體與襯線體完全相反，是筆畫線條統一，邊角沒有彎彎繞繞的字體，像微軟雅黑就是無襯線體。
34. 容器變換
容器變換是一種動效的定義，來自 Material Design。
通俗的說是指在一個小卡片的基礎上放大擴展到新頁面。如點擊小紅書首頁瀑布流卡片，進入到詳情頁面的動效，就是容量變換。
容器變換采用過渡的方式，引導用戶的視線，減少使用過程中的頓挫感，提升流暢度。
35. 語義色
直接用顏色表示出具體語境含義：
- 紅色：警告
- 黃色：提示
- 綠色：成功
- 灰色：不支持
- 藍色：鏈接色
rex-design語義色板
36. 內容出界
內容出界是指讓內容溢出畫框的設計方式，可以突出氛圍，讓畫面更有沖擊力。
37. Z軸
這個概念也來自Material Design，在二維設計的基礎上升到了三維，為了表現出頁面中的深度，引進了Z軸的概念。
簡單理解，就是層級關系。
通過使用陰影、浮層等來體現出頁面的高度。
04 其它
38. 熱區
熱區是指頁面中可以點擊的區域，點擊熱區會觸發一個交互事件。
比如說點擊頭像，進入個人主頁，頭像區域就是個熱區。
熱區的尺寸范圍也會影響用戶體驗，比如說單選按鈕，為了讓用戶快速選擇，我們可以選擇擴大熱區范圍，將圖標+文字作為熱區。
39. 熱力圖
熱力圖，也叫熱圖，是指以特殊高亮的形式在頁面中顯示用戶經常點擊的區域，區域越亮，說明用戶點擊越多。
熱力圖非常直觀地展示出用戶在頁面上的操作，對于我們分析頁面的合理性，提高頁面轉化率都有很好的指導作用。
05 總結
以上就是我想介紹的一些組件名稱以及其他名詞，當然一些組件的中文名稱通過不同的翻譯方式，在國內的叫法各異。
我們不需要去過度糾結名稱的專業叫法，只要這個名稱讓團隊成員有相同的認識，不會出現誤解，能夠滿足溝通就夠了。
比如微信小程序右上角膠囊按鈕里的三個點：
我找遍了微信小程序組件庫也沒找到標準叫法，但是直接叫三個點，大家也都知道是什么，所以就沒必要再去糾結了。
如果你想更深入了解組件的用法，你可以去下邊幾個網址去看看：
[1] Android：https://m3.material.io/components/menus/guidelines
[2] ios：https://developer.apple.com/design
[3] RexDesign：https://alibaba.github.io/rex-design/design
[4] AntDesign：https://ant.design/components/overview-cn/
[5] ArcoDesign：https://arco.design/docs/spec/link
本文由 @王大鹿 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
學習了，您這~~就叫專業！
寶藏，全是干貨，不來虛的
絕了
作者的分享作為半路出家的我來說太棒了。這個春節就看你的分享啦！
大佬，我怎么這么喜歡看你寫的東西呢？
看完這篇長文啦，內容充實，框架清晰，干貨滿滿，謝謝作者大大的分享
看完了我只想求一套Axure的組件
可以去我公眾號：產品大鹿 領取
文章里提到的組件名稱，國內叫法各異，如果有硬傷的錯誤，歡迎各位指正（抱拳）