編輯導(dǎo)語： 在產(chǎn)品經(jīng)理的日常工作中，免不了要用到各種組件，那么，這些組件的名稱你都知道嗎？本文作者整理匯總了一些常用組件名稱，以及它們的用處，希望可以給你帶來幫助。

最近發(fā)生了兩件事：

和新來的研發(fā)溝通個問題——讓他替換下icon。

他問我什么是icon？

我說就是圖標(biāo)，他說哦哦。

和另外一個產(chǎn)品討論一個交互，我說使用穿梭選擇器，他問我什么是穿梭選擇器？

我說就是這種，他說哦哦。

對于很多組件名稱，有時候我也搞不明白。產(chǎn)品實習(xí)生之前問我徽標(biāo)內(nèi)容數(shù)值最多顯示99+行不行？

我也是一愣，才知道他說的就是小紅點。

我想，很多同學(xué)都會有搞不清楚組件名稱叫什么的時候，所以我整理了一些組件名稱，以及一些其他名詞。

內(nèi)容較多，建議收藏，希望對各位有用。

01 組件相關(guān)

1. icon

就是指圖標(biāo)，比如像app的icon圖標(biāo)，還有在頁面內(nèi)的圖標(biāo)，都能叫做icon。

icon需要有象征意義，需要有隱喻性，需要讓人能在最短的時間內(nèi)理解出icon的含義。

問你個事，抖音的第三個icon是啥？

2. 穿梭選擇器

也叫穿梭框，一般為左右兩欄，左邊為待選擇項，右邊為已選項。

從左邊選到右邊表示已選，從右邊移到左邊，表示取消選擇。

常用在B端產(chǎn)品中，當(dāng)需要多選且選擇項較多時，就可以使用穿梭選擇器。

當(dāng)可選項很多，大于10個時，可以考慮使用穿梭選擇框。這樣用戶就可以清楚的知道自己選擇了哪些內(nèi)容。

3. 徽標(biāo)（Badge）

徽標(biāo)可以理解為小紅點，就是在圖標(biāo)、文字右上角、或者在頁面某個地方的紅色小圓點。常用來表示有新消息或者是為了達(dá)到某種信息提示。

徽標(biāo)的形式不僅只有小紅點，也有紅圈里加數(shù)字，表示新消息數(shù)量。也有直接小紅圈+文字，來更好的傳達(dá)信息。

4. 骨架屏

骨架屏是一種加載狀態(tài)，也叫做加載占位符，加載時在頁面上通過灰色塊顯示出大致結(jié)構(gòu)。

可以有效緩解用戶的等待焦慮感，向用戶表達(dá)出“這個頁面有這樣的數(shù)據(jù)”的感覺。同時結(jié)合光澤掠過或者灰色塊來回收縮的動畫，來表達(dá)頁面正在加載中。

骨架屏比普通的加載loading動畫能提供更好的視覺效果，能產(chǎn)生加載很快的感覺，對用戶體驗也更好。

相同的響應(yīng)時間內(nèi)，菊花轉(zhuǎn)轉(zhuǎn)得再快，也比不上骨架屏來的感覺快。

5. 缺省頁/空狀態(tài)頁

是指在頁面內(nèi)沒有數(shù)據(jù)時顯示出空狀態(tài)效果。避免沒有數(shù)據(jù)時顯示出空白頁面，讓用戶陷入“到底有沒有數(shù)據(jù)”的困惑。

缺省頁包括網(wǎng)絡(luò)異常，加載失敗、無權(quán)限、搜索無結(jié)果等。

缺省頁不僅是只一個頁面全是空狀態(tài)，在頁面中的某個模塊中也會有空狀態(tài)，針對某個模塊內(nèi)也要添加缺省狀態(tài)。

沒有數(shù)據(jù)非常影響用戶體驗，這時就靠缺省頁來安慰用戶。添加合適的文案、圖案、引導(dǎo)、動效來給用戶一些正向的傳達(dá)。

比如沒有關(guān)注，我們推薦用戶可關(guān)注的博主。當(dāng)加載失敗時，可以添加“重新加載”按鈕，讓用戶再次刷新。

缺省頁空狀態(tài)屬于數(shù)據(jù)為空的臨界值，經(jīng)常會一不小心遺漏，敲黑板，需要注意空狀態(tài)。

6. tab頁

指標(biāo)簽頁，可以理解為菜單、導(dǎo)航欄。通過不同tab頁聚合不同信息收納在一個頁面區(qū)域內(nèi)。

Tab頁分為頂部、底部、側(cè)邊欄。

頂部tab是最常見的，在很多app和網(wǎng)站中都有使用，因為頂部tab占據(jù)的頁面空間更小，同時采用滑動的形式可以容納很多tab。

頂部tab除了有文字，還有圖標(biāo)tab。

側(cè)邊欄tab有左、右，常見的是左側(cè)欄。如果更想突出內(nèi)容，可以采用右側(cè)邊欄。

tab頁的層級關(guān)系一般是底部tab＞頂部tab＞側(cè)邊欄tab。對于頁面內(nèi)容太多時，也能互相嵌用，比如頂部tab頁里再套個二級左側(cè)邊欄tab。

在ios里有個Segmented Controls，叫分段控件，和tab頁很像，都是用來聚合頁面。

不一樣的是，分段控件只能手動點擊，不能左右滑動切換，而tab頁可以左右滑動切換頁面。
分段控件可以是文字分段，也可以是圖標(biāo)，下圖是圖標(biāo)分段控件。

7. 模態(tài)彈窗與非模態(tài)彈窗

1）模態(tài)彈窗

對用戶操作做出阻礙的彈窗。用戶必須對彈窗內(nèi)容做出回應(yīng)才能進(jìn)行下一步操作，在操作確認(rèn)、重要信息提醒時，都需要用到模態(tài)彈窗。

對于用戶使用場景的不同，可以選擇使用不同的模態(tài)彈窗，比如對話框、氣泡提示、動作欄等（這些概念下邊會說）。

2）非模態(tài)彈窗

不會阻礙用戶操作的彈窗，像toast提示、通告欄就是非模態(tài)（這些概念下邊會說）。

8. 氣泡（popover）

氣泡可以理解為一個小彈窗，就像氣泡一樣，體積小、重量輕，想往哪飄就往哪飄，剛顯示出來，手指一搓，就bou~地沒有了。

氣泡是種形式，結(jié)合不同場景，常見的有氣泡確認(rèn)框、氣泡卡片、氣泡引導(dǎo)等，特點就是輕、小、靈活。

還有個大特點就是會有個小箭頭，來表示這個氣泡從哪出來的，能夠突出顯示特定位置的提示。所以在引導(dǎo)用戶時，就可以大大方方的使用氣泡引導(dǎo)。

對于一些不常用功能、或者快捷功能入口，可以采用隱藏的方式，在顯示的時候就可以通過“氣泡卡片”的形式彈出來。

9. 浮出層（popup）

這里浮出層是指浮出在半透明層上的彈窗窗口，可在浮出層中進(jìn)行操作。通常是點擊頁面某個區(qū)域后展示出來。

10. 動作欄（Action Sheets）

常指從頁面底部彈出的底部列表彈窗，懸浮在半透明蒙版上，不需要進(jìn)行跳轉(zhuǎn)頁面，在當(dāng)前頁面就可以進(jìn)行更多的操作。

11. 活動視圖 （ActivityViews）

這個概念來自ios，簡單理解是指在從底部出現(xiàn)的彈窗，常見的樣式為icon+標(biāo)題，可以讓用戶快速訪問其它功能。

當(dāng)動作欄用于分享場景時，可以叫做分享面板。

12. Toast

也叫吐司提示、輕提示，是一種非常輕量級提示。出現(xiàn)后，過幾秒自動消失。出現(xiàn)位置有屏幕頂部、中部、底部。

由于出現(xiàn)時間短、面積小，過幾秒就會自動消失，所以不能添加過多的文字，也不能放重要信息。Toast屬于非模態(tài)。

13. 通告欄 （Notice Bar）

形式一般為在頁面上方顯示的小橫條內(nèi)容?？捎脕碜鰻顟B(tài)提示、消息通知。屬于非模態(tài)，可以提示用戶，但不影響用戶的操作。

通告欄比toast達(dá)到的提示更重，因為它更明顯；比彈窗提示、氣泡提示達(dá)到的提示輕，因為它不會影響用戶的操作。

通告欄位置通常在頁面上方，也有在頁面下方顯示。可以主動消失，也可以常駐。同時在一個頁面內(nèi)也可以添加多個通告欄。

14. 提示對話框（Snackbar）

可以理解為懸浮在頁面底部的消息通知，可以自動消失，也可以常駐，手動點擊消失。

snackbar的提示強度比Toast強，不影響用戶操作，屬于非模態(tài)。另外snackbar在出現(xiàn)時可以添加操作按鈕，引導(dǎo)用戶做其它操作。

15. HUD

HUD有幾種說法，我們一個個看下。

1）HUD-輕提示，和上邊的Toast相似

與toast不同的是，它作為提示出現(xiàn)時，都在頁面中部顯示，Toast只有文字，而HUD為圖標(biāo)+文字。

2）HUD-平視顯示器，全稱是Head-up Display

在航空航天、汽車領(lǐng)域HUD指將參數(shù)內(nèi)容投射到頭盔、擋風(fēng)玻璃的一種顯示設(shè)備?？梢栽谝暰€中顯示的參數(shù)內(nèi)容，如開車時不需要看儀表盤，在視野范圍內(nèi)就能看到車速。

16. 透明指示層

是指在頁面中顯示出交互操作的指示層，也是種反饋組件，常見的如看視頻的快進(jìn)提示，或者是調(diào)整音量的提示。

有些文章把HUD也叫作透明指示層，正確性我無法判斷，所以在這把透明指示層單獨說明。

17. 工具提示/文字提示（Tooltips）

常指在鼠標(biāo)懸浮在某個圖標(biāo)、按鈕、文本等元素上，顯示出來描述或者功能說明，用于輔助用戶了解某個功能。

18. Chips

有些文章翻譯為紙片，但是我覺得不形象，那么Chips是什么呢？

看下邊的圖，這個像按鈕的就是chips。

但是Chips與按鈕是不同的，按鈕的內(nèi)容是固定的，而chips是動態(tài)的，根據(jù)支持內(nèi)容不同顯示不同的內(nèi)容。所以chips更像是標(biāo)簽。

Material Design將Chips分為4類，分別是輔助chips、過濾chips、輸入chips、建議chips。

• 輔助chips：可以跨越多個app的智能或自動化操作，比如說購買電影票后把看電影的時間添加到日歷。
• 過濾chips：用于篩選，可用于單選與多選。
• 輸入chips：用戶輸入的信息聚合，比如發(fā)郵件輸入收件人后，后邊有個“×”。
• 建議chips：動態(tài)生成的建議來幫助縮小用戶的意圖。

19. 步進(jìn)器（Stepper）

步進(jìn)器是指通過增、減按鈕對數(shù)值進(jìn)行控制的組件。常用于小范圍整數(shù)數(shù)值輸入,每次增、減的數(shù)量都是恒定的。

20. 滑動選擇器

是指通過橫軸中通過滑動的方式選擇對應(yīng)的數(shù)值、區(qū)間。

特點是在橫軸中展示出了最小值與最大值，用戶可以通過滑動的方式自己選擇對應(yīng)數(shù)值。

區(qū)間滑動選擇器是指可以選擇最小值與最大值，讓用戶自己選擇區(qū)間范圍，常用于價格選擇。

21. 懸浮按鈕/浮動按鈕/Fab

Floating action buttons ，浮動按鈕，就是懸浮按鈕。

常用于主功能入口，如新建。

22. 導(dǎo)航欄、狀態(tài)欄

狀態(tài)欄是手機屏幕上方顯示時間、電量、手機信號的那一欄。

導(dǎo)航欄是指狀態(tài)欄下邊的那一欄，導(dǎo)航欄可以是很簡單的只有一個標(biāo)題、也可以放搜索框，或者其它操作按鈕，或功能入口。

23. 指示器

在圖片或卡片可進(jìn)行左右滑動時，常使用指示器來表達(dá)所在位置。

根據(jù)指示器的樣式不同，有圓點指示器、滑塊指示器、線型指示器、數(shù)字指示器。

24. 卡片

卡片是一種容納信息的展示方式，每張卡片內(nèi)承載不同內(nèi)容，不僅能有效處理信息集合，同時有效的讓用戶聚焦到卡片中的內(nèi)容。

卡片的高效分區(qū)、信息突出在很多產(chǎn)品中都已經(jīng)使用到。

25. 泳道

可以橫向左右滑動來查看內(nèi)容的方式叫做泳道。

將多個元素內(nèi)容在一定區(qū)域內(nèi)橫向滑動，擴(kuò)展了頁面的橫向空間，一般是手動滑動查看，并沒有自動滑動。

26. Banner

Banner是指出現(xiàn)在頁面中明顯的橫幅圖片，通常作為推薦位、廣告位，如產(chǎn)品推薦、廣告位等，大家應(yīng)該都清楚這個。

但是根據(jù)樣式不同，還能分為膠囊banner、瓷片區(qū)banner、白底banner，這些名字是否為標(biāo)準(zhǔn)的，我也不清楚，所以如果你不知道描述，可以就按這種名字叫。

27. 瓷片區(qū)

將不同矩形塊通過網(wǎng)格布局的方式就組成了瓷片區(qū)。

特點就是布局很靈活，比banner占據(jù)的空間小，相同面積能夠放更多的流量入口。

28. 金剛區(qū)

是指在首頁中icon+文字通過宮格形式排列的區(qū)域。把多個功能入口排列的一起，很好地起到了引流的作用，特點還是很靈活。

據(jù)說是“金剛區(qū)”“瓷片區(qū)”這些詞是美團(tuán)造的，“金剛區(qū)”意思為“百變金剛”，靈活多變；“瓷片區(qū)”就像瓷片貼墻上一樣，工工整整。

Banner、金剛區(qū)、瓷片區(qū)被稱為3大運營版塊，起著為不同業(yè)務(wù)模塊、不同活動引流的作用。

02 導(dǎo)航相關(guān)

29. 抽屜導(dǎo)航

我們先說下抽屜，抽屜是指一種對組件展示方式的描述，像抽屜一樣進(jìn)行開合，將多余內(nèi)容隱藏，出現(xiàn)的時候彈出，和浮出層很像。

對于不常用的功能，將功能入口隱藏起來，用戶需要時，點擊入口，然后將功能列表顯示出來。

當(dāng)起到導(dǎo)航作用時，就叫抽屜導(dǎo)航，也叫溢出菜單、擴(kuò)展菜單、漢堡導(dǎo)航，就是將側(cè)邊欄隱藏起來。

30. 宮格導(dǎo)航

先說下宮格，宮格是指一種布局方式，通過icon+文字直接平均排列開，讓用戶直接看到每個獨立的模塊入口，自己去點擊。

當(dāng)宮格布局用于導(dǎo)航時，就可以叫做宮格導(dǎo)航，像金剛區(qū)就是宮格導(dǎo)航。

31. 索引導(dǎo)航

索引導(dǎo)航欄是指通過首字母、或者數(shù)字進(jìn)行分類組織內(nèi)容，并進(jìn)行導(dǎo)航的控件。

32. 舵式導(dǎo)航

舵式導(dǎo)航是底部tab的變體，常用在Apptabbar上。

對于app的核心功能、想要用戶操作的功能放在中間，變換下形式，引導(dǎo)用戶去點擊。

通常在UGC社區(qū)中，為了引導(dǎo)用戶發(fā)布內(nèi)容，將入口放在最明顯的位置，通過最短的路徑，引導(dǎo)用戶發(fā)布。

03 設(shè)計相關(guān)

33. 襯線體、無襯線體

襯線體是指在字的筆畫邊角中有彎彎繞繞的字體，像宋體就是襯線體。

無襯線體與襯線體完全相反，是筆畫線條統(tǒng)一，邊角沒有彎彎繞繞的字體，像微軟雅黑就是無襯線體。

34. 容器變換

容器變換是一種動效的定義，來自 Material Design。

通俗的說是指在一個小卡片的基礎(chǔ)上放大擴(kuò)展到新頁面。如點擊小紅書首頁瀑布流卡片，進(jìn)入到詳情頁面的動效，就是容量變換。

容器變換采用過渡的方式，引導(dǎo)用戶的視線，減少使用過程中的頓挫感，提升流暢度。

35. 語義色

直接用顏色表示出具體語境含義：

• 紅色：警告
• 黃色：提示
• 綠色：成功
• 灰色：不支持
• 藍(lán)色：鏈接色

rex-design語義色板

36. 內(nèi)容出界

內(nèi)容出界是指讓內(nèi)容溢出畫框的設(shè)計方式，可以突出氛圍，讓畫面更有沖擊力。

37. Z軸

這個概念也來自Material Design，在二維設(shè)計的基礎(chǔ)上升到了三維，為了表現(xiàn)出頁面中的深度，引進(jìn)了Z軸的概念。

簡單理解，就是層級關(guān)系。

通過使用陰影、浮層等來體現(xiàn)出頁面的高度。

04 其它

38. 熱區(qū)

熱區(qū)是指頁面中可以點擊的區(qū)域，點擊熱區(qū)會觸發(fā)一個交互事件。

比如說點擊頭像，進(jìn)入個人主頁，頭像區(qū)域就是個熱區(qū)。

熱區(qū)的尺寸范圍也會影響用戶體驗，比如說單選按鈕，為了讓用戶快速選擇，我們可以選擇擴(kuò)大熱區(qū)范圍，將圖標(biāo)+文字作為熱區(qū)。

39. 熱力圖

熱力圖，也叫熱圖，是指以特殊高亮的形式在頁面中顯示用戶經(jīng)常點擊的區(qū)域，區(qū)域越亮，說明用戶點擊越多。

熱力圖非常直觀地展示出用戶在頁面上的操作，對于我們分析頁面的合理性，提高頁面轉(zhuǎn)化率都有很好的指導(dǎo)作用。

05 總結(jié)

以上就是我想介紹的一些組件名稱以及其他名詞，當(dāng)然一些組件的中文名稱通過不同的翻譯方式，在國內(nèi)的叫法各異。

我們不需要去過度糾結(jié)名稱的專業(yè)叫法，只要這個名稱讓團(tuán)隊成員有相同的認(rèn)識，不會出現(xiàn)誤解，能夠滿足溝通就夠了。

比如微信小程序右上角膠囊按鈕里的三個點：

我找遍了微信小程序組件庫也沒找到標(biāo)準(zhǔn)叫法，但是直接叫三個點，大家也都知道是什么，所以就沒必要再去糾結(jié)了。

如果你想更深入了解組件的用法，你可以去下邊幾個網(wǎng)址去看看：

[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

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

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