![05269ba5b23935adb3d2fc53ab71bd32.gif](https://i-blog.csdnimg.cn/blog_migrate/4b7947a0d80214e5afe71ec304f5d0f8.gif)
前言
我们在做设计的时候,经常会忘记某个控件的名称,比如心中知道某个控件的形态,却不知道如何称呼,所以今天给大家整理了设计规范中的一些控件合集,清晰明确的叫出某个控件的名称,也是一种专业性的体现~
![7b9f0b029f63ed63af5069ba98330f3b.gif](https://i-blog.csdnimg.cn/blog_migrate/dc4184d98a07412e4df336633dad68eb.gif)
1.状态栏 Status Bar/ 导航栏 Navigation Bar/ 标签栏 Tab Bar
![67d2d80a5f3321920c7886a7cffe08d3.png](https://i-blog.csdnimg.cn/blog_migrate/e500ffd1d6da248dd758cf5c738bb365.jpeg)
2.工具栏 Toolbars
![d5b8b4271defad43bd70686cad7c6872.png](https://i-blog.csdnimg.cn/blog_migrate/8d4ba61119ea6883cca8b5803061755c.jpeg)
ios系统样式
3.搜索栏 Search Bar
![540d08e95a3eaac3daef86c3dcea33e9.png](https://i-blog.csdnimg.cn/blog_migrate/6974002eeebc4bb9c941667ba9a95d9e.jpeg)
4.浮层弹框/气泡弹出框/浮出框 Popover
![9f3f300d693cfc36a861c90d3b4479ab.png](https://i-blog.csdnimg.cn/blog_migrate/210920b4b5caf1f980b7d27d9661ef36.jpeg)
![41c751bfb9764e69af081f7c176db634.png](https://i-blog.csdnimg.cn/blog_migrate/d73efd47dd09be732e17d5d64cb4e717.jpeg)
5.编辑菜单 Edit Menu
![b28c553a0a0759188d5f410e06ef7ed7.png](https://i-blog.csdnimg.cn/blog_migrate/9a918a93ca9e92d08d2db2a1d9584c74.jpeg)
6.工具提示/文字提示 Tooltips
![8de1fdc73ef8600e9031876d14fc789f.png](https://i-blog.csdnimg.cn/blog_migrate/b2f2038b7fac74319996fb45accd940d.jpeg)
常见网页端悬停状态
7.溢出菜单 Overflow Menu
![2515c408cd299108861bc373fe18dde1.png](https://i-blog.csdnimg.cn/blog_migrate/1c219fddd749ea4f0a9fbb5a334033de.jpeg)
安卓样式
8.对话框 Dialog/Alerts + 遮罩/蒙版 Mask
![66128b8b3adb746511c1ff182e0f66a3.png](https://i-blog.csdnimg.cn/blog_migrate/bd755fcf6dc5dddf6b1227dd999a1416.jpeg)
系统样式
9.吐司提示/弹出式提示 Toast
![3ec064858afe9043e71a72281b6683a2.png](https://i-blog.csdnimg.cn/blog_migrate/4e7aca3c7d82567b853c616d5b1ac89f.jpeg)
10.HUD
![821a750a4327cddf4bc59d52914bfc58.png](https://i-blog.csdnimg.cn/blog_migrate/4dbe443df51448ad819f371f9e52795d.jpeg)
ios音量调节提示样式
11.动作菜单(动作栏) Action Sheet/Activity View
![ed7a75d74b7544eaaf267790cd972cbc.png](https://i-blog.csdnimg.cn/blog_migrate/fdcfa1349a52388c668606af474711f8.jpeg)
ios系统样式
12.通告栏 Notification Bar/Notice Bar
![ab1826ed45534b6ef26077e58355faa5.png](https://i-blog.csdnimg.cn/blog_migrate/550c5c2a5c5483d1a08ca806a0726958.jpeg)
13.Snackbar
![58b0592d5445c5e5f88ba5d8100c9e99.png](https://i-blog.csdnimg.cn/blog_migrate/5ea450bdd8012fb57071869fab25b470.jpeg)
属于安卓控件
14.输入框/文本框 Text Fields
![7474f6e7ece98fdb842936f7e790f8e4.png](https://i-blog.csdnimg.cn/blog_migrate/9dcc900dac49bd3fd653fe39b807308f.jpeg)
15.列表 List
![5178f3def1818f4a64afb8942d7115a5.png](https://i-blog.csdnimg.cn/blog_migrate/f27442351347f290d8c61415a51e06df.jpeg)
16.表单页眉页脚 Table View Header and Footer
![b015c51e98e079bf9873dae9f3c635c8.png](https://i-blog.csdnimg.cn/blog_migrate/72a4cf0277c8c0b2df6b3cc1a6036bff.jpeg)
17.开关 Switch
![4d7c4b548b9652ac153399c423088927.png](https://i-blog.csdnimg.cn/blog_migrate/4b7099fe7dd4ee2ec69561f9dafa4010.jpeg)
开关颜色可修改
18.步进器 Stepper
![852b704687b327f8a52c7f667735fbd4.png](https://i-blog.csdnimg.cn/blog_migrate/63229d1268c6588d7e2ec7228fc87d24.jpeg)
![1ef9e991ee5b942710a7e445524cc7af.png](https://i-blog.csdnimg.cn/blog_migrate/51d3eab7a83e5f50bc5fb12c19f7782e.jpeg)
19.选择器/拾取器 Picker
![67915561882e5a70b516be396ba1f111.png](https://i-blog.csdnimg.cn/blog_migrate/5184f126a53416fe306ea0651811e0e0.jpeg)
单列选择器 iOS样式
![1d04d371f2516fe0ccb517619a29f570.png](https://i-blog.csdnimg.cn/blog_migrate/1dcb79d5733acca3ac9a53da3d4d559f.jpeg)
日期选择器 Date Picker
![fb06e625f113d635ca9f79b72dbceade.png](https://i-blog.csdnimg.cn/blog_migrate/189630470d66e32fbf7d4af69a655cbe.jpeg)
时间选择器 Time Picker
20.页面指示器 Page Indicator/Page Controls
![f9cf212a13aaea96c9c321144ff260a7.png](https://i-blog.csdnimg.cn/blog_migrate/8b386a4b97b7bec752ecb257fb95f450.jpeg)
ios系统样式
21.Home指示器/Home条 Home Indicator
![a975e3e62f197dbf6d3835c688d0f74d.png](https://i-blog.csdnimg.cn/blog_migrate/877021e41c20197412ac7a65d963ca70.jpeg)
iPhone X系统样式
22.滑块 Slider
![8e69f3e53b7445e4b93e084479232b41.png](https://i-blog.csdnimg.cn/blog_migrate/341b55176ca75095e4282a9c72705995.jpeg)
ios系统样式,也可自定义样式
23.进度条 Progress
![da64900b4c910d4d2afa35b64cdec700.png](https://i-blog.csdnimg.cn/blog_migrate/53ee98052541b667c5cc82d701b11197.jpeg)
![619f4e86cad42006a3dd17a52e8b882b.png](https://i-blog.csdnimg.cn/blog_migrate/2271e01806fe7ed17475c9a287e701c7.jpeg)
ios系统样式
24.字母索引导航 A-Z Index Scroller
![520b0fe2fac98e9e60a40ae8909902c6.png](https://i-blog.csdnimg.cn/blog_migrate/2f200e2ef91886c8747f624200df9472.jpeg)
这种控件一般出现在页面右侧,点击字母可以快速找到字母对应内容的位置;
25.分段控件 Segment Controls
![40fd92fb6533542ecb20367b67409506.png](https://i-blog.csdnimg.cn/blog_migrate/0b4738a6f1050cf89ccd7b527a2fce32.jpeg)
ios系统样式
26.标签 Tabs
![87acce1087d5d3faac5650a0e443bf57.png](https://i-blog.csdnimg.cn/blog_migrate/0edded7b948a5862ee873778cd8844ac.jpeg)
来自安卓系统样式,现在ios也适用
27.卡片 Cards
![56aa51425b99a9b075432fd5a1addb9f.png](https://i-blog.csdnimg.cn/blog_migrate/d40f4bc1a9cf35e3ae5252ae2718f173.jpeg)
28.小红点/徽标/徽章 Badge
![6b03e46e93df2e3ed40561c9981b3d92.png](https://i-blog.csdnimg.cn/blog_migrate/1a9da247ee11a604889f8621baf597ad.jpeg)
29.加载占位图 Skeleton Screen
![041326cc3581196e6583fc752cfd620a.png](https://i-blog.csdnimg.cn/blog_migrate/d049a86785decdb7bbd17043975e5e1f.jpeg)
30.按钮 Button
![6d68d263714f1c9a3c64fb29cab843a1.png](https://i-blog.csdnimg.cn/blog_migrate/4320fba7c025adb67f0181cedd79ef8f.jpeg)
按钮各种状态
31.悬浮按钮 Floating Action Button
![f03a87c684a23a4eb764efdd5201a0d5.png](https://i-blog.csdnimg.cn/blog_migrate/222fac34fd3cbdcf498d4aa31f46516c.jpeg)
Material Design中的一种设计语言,现在iOS内也会使用,常置于页面右下角,这种设计有利有弊,谨慎使用;
32.键盘/软键盘/虚拟键盘 Keyboard/Soft Keyboard/ Virtual Keyboard
![30b01e983e9bd03a3a5c6bd2cdc31134.png](https://i-blog.csdnimg.cn/blog_migrate/51e970177de6df698448fdf88bb6fdac.jpeg)
33.单选按钮 Radio Button
![9985e375ca8eda18ef0d00956ba46b3d.png](https://i-blog.csdnimg.cn/blog_migrate/b6101df19e0def148a7f293f144c6cbc.jpeg)
34.复选框 Checkbox
![94fdb18335447550b120c34b3a95bcef.png](https://i-blog.csdnimg.cn/blog_migrate/ecb034eec4b589ab2ec5d7c19f9f598f.jpeg)
35.九宫格 Grid
![ab00294fbcd1bb0764a91746a7e093e8.png](https://i-blog.csdnimg.cn/blog_migrate/3181cecb126f50ec5eccd2cfcd77f6f4.jpeg)
36.页脚 Footer
![7b1b05e5b7c821ebddee2b507a86d3df.png](https://i-blog.csdnimg.cn/blog_migrate/14fb24773ff9fff1092e7069ff6dccc4.jpeg)
以上,欢迎留言补充~
文章来自社区签约作者:Eason张UED