前言
我們在做設計的時候，經常會忘記某個控件的名稱，比如心中知道某個控件的形態，卻不知道如何稱呼，所以今天給大家整理了設計規範中的一些控件合集，清晰明確的叫出某個控件的名稱，也是一種專業性的體現~
1.狀態欄 Status Bar/ 導航欄 Navigation Bar/ 標籤欄 Tab Bar
2.工具欄 Toolbars
ios系統樣式
3.搜索欄 Search Bar
4.浮層彈框/氣泡彈出框/浮出框 Popover
6.工具提示/文字提示 Tooltips
常見網頁端懸停狀態
7.溢出菜單 Overflow Menu
安卓樣式
8.對話框 Dialog/Alerts + 遮罩/蒙版 Mask
系統樣式
9.吐司提示/彈出式提示 Toast
10.HUD
ios音量調節提示樣式
11.動作菜單(動作欄) Action Sheet/Activity View
ios系統樣式
12.通告欄 Notification Bar/Notice Bar
13.Snackbar
屬於安卓控件
14.輸入框/文本框 Text Fields
15.列表 List
16.表單頁眉頁腳 Table View Header and Footer
17.開關 Switch
開關顏色可修改
18.步進器 Stepper
19.選擇器/拾取器 Picker
單列選擇器 iOS樣式
日期選擇器 Date Picker
時間選擇器 Time Picker
20.頁面指示器 Page Indicator/Page Controls
ios系統樣式
21.Home指示器/Home條 Home Indicator
iPhone X系統樣式
22.滑塊 Slider
ios系統樣式，也可自定義樣式
23.進度條 Progress
ios系統樣式
24.字母索引導航 A-Z Index Scroller
這種控件一般出現在頁面右側，點擊字母可以快速找到字母對應內容的位置；
25.分段控件 Segment Controls
ios系統樣式
26.標籤 Tabs
來自安卓系統樣式，現在ios也適用
27.卡片 Cards
28.小紅點/徽標/徽章 Badge
29.加載佔位圖 Skeleton Screen
30.按鈕 Button
按鈕各種狀態
31.懸浮按鈕 Floating Action Button
Material Design中的一種設計語言，現在iOS內也會使用，常置於頁面右下角，這種設計有利有弊，謹慎使用；
32.鍵盤/軟鍵盤/虛擬鍵盤 Keyboard/Soft Keyboard/ Virtual Keyboard
33.單選按鈕 Radio Button
34.複選框 Checkbox
35.九宮格 Grid
36.頁腳 Footer
閱讀更多 PMTalk產品經理社區 的文章
