小米时间选择控件_上海非凡教育分享UI组件设计解析之—— 单元控件

什么是单元控件?

控件解释为Control

组件解释为Component

通俗讲,就是多个元素组成组件,而单个元素即为单元控件。

单元控件1 搜索

什么是探索?

用户通过输入的关键词,搜索到想要的信息。

7f521548f12642875ee41e8e67b0b2ff.png

14a8e2fa03aef499b8af5c49f9b28901.png

5d28f4ca610d4695c1de37b34bbfd4dd.png

遵循iOS和Android设计规范

单元控件2 开关

什么是开关?

开关也是按钮,展示了两个互斥而又关联的选项和状态。

1f0f948a5a770cd655fe34f18a856dd2.png

2d0fef49441a7557c63b7e35c4ac836c.png

含有开关名,要表现出互斥状态(也就是选中和非选中)

单元控件3 页码控制器

什么是页码控制器?

显示当前视图的数量和当前进度。

9fc8f1db1ccd9e852e1df18e3ce3d31b.png

b024f3b9268e410a7f832171d933d2ba.png

c4ee8736ff7c61ff94d9058313fd2844.png

78f203117435b75a709470fa448bf61d.png

数量代表当前视图,通常不超过6个

单元控件4 图标

什么是图标?

图标是一种图形元素,用来执行应用程序已经定义的操作。

7e5f99e7d85b095662a4e45ae3724693.png

d62ccca59da17276a731201bb371d668.png

表现为由图标/文字/图标和文字

必须易识别并能与展示的内容相联系

单元控件5 滑块

什么是滑块?

让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值或选项。

168b3b89ad8007d61bac3bbafc590e0d.png

06ec0d41941754c98bcd59bb6ca94a75.png

左右两端设定图标强度

分为连续滑块和间续滑块

单元控件6 进度

什么是进度?

刷新加载或是提交时,需要等待一段时间,在这个过程中的一种动态设计。

9ede408c89b778aa1dcb27335ebb3811.png

7d3c6e3ffd8ca045c7080faa2202185a.png

尽可能减少视觉上的变化

以线形和圆形最常用

单元控件7 选框

什么是选框?

用户用来做单个或多个选项选择的控件。

00c9cd26dcd48b0fc62f441e78b29c75.png

d45847f7fde7f66838eed270f10719fb.png

单选框,只允许选择一个

复选框要有形态上的变化表示选或未选

在界面设计中要面对太多需求,而这些界面多数是由多个单元控件和多个组件组合而成,只要掌握单元控件的应用,就能设计出符合用户需求的界面。

所以理解单元控件和组件,是每一位设计师的必修课。

————————————————————————

谢谢,记得点赞哦~!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值