什么是单元控件?
控件解释为Control
组件解释为Component
通俗讲,就是多个元素组成组件,而单个元素即为单元控件。
单元控件1 搜索
什么是探索?
用户通过输入的关键词,搜索到想要的信息。
![7f521548f12642875ee41e8e67b0b2ff.png](https://i-blog.csdnimg.cn/blog_migrate/5b4d226ac88dc41e637220458d50ed7a.jpeg)
![14a8e2fa03aef499b8af5c49f9b28901.png](https://i-blog.csdnimg.cn/blog_migrate/5077557108f32415f121933954566d2c.png)
![5d28f4ca610d4695c1de37b34bbfd4dd.png](https://i-blog.csdnimg.cn/blog_migrate/3fa6f8cf0d068926cb164389bf09f33e.png)
遵循iOS和Android设计规范
单元控件2 开关
什么是开关?
开关也是按钮,展示了两个互斥而又关联的选项和状态。
![1f0f948a5a770cd655fe34f18a856dd2.png](https://i-blog.csdnimg.cn/blog_migrate/8a98272853917278455b26aeafdd2cda.png)
![2d0fef49441a7557c63b7e35c4ac836c.png](https://i-blog.csdnimg.cn/blog_migrate/4b8f0d38d4cfc7471deaf0367679940b.png)
含有开关名,要表现出互斥状态(也就是选中和非选中)
单元控件3 页码控制器
什么是页码控制器?
显示当前视图的数量和当前进度。
![9fc8f1db1ccd9e852e1df18e3ce3d31b.png](https://i-blog.csdnimg.cn/blog_migrate/4f550870130186b240c78944090b5a04.png)
![b024f3b9268e410a7f832171d933d2ba.png](https://i-blog.csdnimg.cn/blog_migrate/dd7c43b11a1808b2e77f87f50d3c815e.png)
![c4ee8736ff7c61ff94d9058313fd2844.png](https://i-blog.csdnimg.cn/blog_migrate/877c9707033c40444a12a5e724688fc6.png)
![78f203117435b75a709470fa448bf61d.png](https://i-blog.csdnimg.cn/blog_migrate/4af4f778cd6de9cdd74db35595f7f5b6.png)
数量代表当前视图,通常不超过6个
单元控件4 图标
什么是图标?
图标是一种图形元素,用来执行应用程序已经定义的操作。
![7e5f99e7d85b095662a4e45ae3724693.png](https://i-blog.csdnimg.cn/blog_migrate/f70e815c309224ca856e9b4165cf105b.png)
![d62ccca59da17276a731201bb371d668.png](https://i-blog.csdnimg.cn/blog_migrate/4e40ea1160f239f99a88c6dc267683b1.png)
表现为由图标/文字/图标和文字
必须易识别并能与展示的内容相联系
单元控件5 滑块
什么是滑块?
让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值或选项。
![168b3b89ad8007d61bac3bbafc590e0d.png](https://i-blog.csdnimg.cn/blog_migrate/2ff70a240461d202f8aed02c04b13a47.png)
![06ec0d41941754c98bcd59bb6ca94a75.png](https://i-blog.csdnimg.cn/blog_migrate/1b88d6d0936f7faedde13084aacc99ec.png)
左右两端设定图标强度
分为连续滑块和间续滑块
单元控件6 进度
什么是进度?
刷新加载或是提交时,需要等待一段时间,在这个过程中的一种动态设计。
![9ede408c89b778aa1dcb27335ebb3811.png](https://i-blog.csdnimg.cn/blog_migrate/4ee19d1839cca8fa3e63f043902b22e3.png)
![7d3c6e3ffd8ca045c7080faa2202185a.png](https://i-blog.csdnimg.cn/blog_migrate/863c64280295791c79532446c4b3b1b6.png)
尽可能减少视觉上的变化
以线形和圆形最常用
单元控件7 选框
什么是选框?
用户用来做单个或多个选项选择的控件。
![00c9cd26dcd48b0fc62f441e78b29c75.png](https://i-blog.csdnimg.cn/blog_migrate/b42983ceeb60633919a745d8c45536f8.png)
![d45847f7fde7f66838eed270f10719fb.png](https://i-blog.csdnimg.cn/blog_migrate/4ee2f6af4903c189ee8126431d342bbe.png)
单选框,只允许选择一个
复选框要有形态上的变化表示选或未选
在界面设计中要面对太多需求,而这些界面多数是由多个单元控件和多个组件组合而成,只要掌握单元控件的应用,就能设计出符合用户需求的界面。
所以理解单元控件和组件,是每一位设计师的必修课。
————————————————————————
谢谢,记得点赞哦~!