交互设计常用的控件详解

在线学习好工作/

交互设计常用的控件详解

不管是交互设计还是ui界面设计，要实现的目标都是让我们产品对用户体验更好，今天和大家分享的交互设计中常用的控件，一起来看看吧。

命令控件（网页中那些最小的部件）

1.按钮

具有三维模拟的凸起特征，它具有命令的视觉启示，用户只要单击后释放图标就立即执行，要看到按钮的改变。

逐渐变为扁平化设计，但鼠标经过按钮时还是会有突起。

1）交互前：三维模拟的凸起特征，显示“可按压特性”

2）交互中：由凸起变成凹下，显示它已被激活

3）交互后：执行相应操作

2.图标按钮

一般情况下没有凸起的提示，把光标放在图标上面有工具提示，并有可按压的视觉启示。

1）交互前：一般情况下没有凸起的提示，把光标放在图标上面有工具提示，并有可按压的视觉启示。

2）交互中：变成凹下，显示它已被激活。

3）执行相应操作

3.超链接

是网页中的习惯用法，形式是具有下划线的文本（图片也可以）可以作为浏览导航的命令控件，不能取代按钮和图标按钮。一般来说用户浏览内容上，在其他操作和功能上采用按钮和图标按钮。

1）交互前：具有下划线的文本（图片也可以）

2）交互中：色彩改变，显示被激活

3）交互后：进入对应页面

选择控件（用于选择某些数据项）

选择空间不直接导致操作，使用者再发起操作前要做出一系列的选择，这时就要提供明显的命令控件，如筛选，选择不同条件后，就需要一个明显的查询按钮去触发一系列操作。如果用户想要立即看到选择结果，并且操作也是可以被撤销的，我们就可以让选择控件变成命令控件。判断基础就是在于用户是否想要立即看到结果、以及操作是否很容易被撤销。

1.复选框

鼠标经过具有三维暗示，具备视觉启示和可单击的属性。点击由凸起变成凹陷。选中其他按钮，先前按钮自动恢复。主要是于文本的控件。传统上，复选框是方形。升级：用图标代替文本。

1）交互前：单击按钮时保持凹进或按下状态（所定图标按钮或开关），再次单击时凸起。所定图标按钮不是瞬间的。而是锁定知道再次单击。

2）交互中：鼠标经过具有三维暗示，具备视觉启示和可单击的属性。点击由凸起变成凹陷。

3）交互后：按钮保持凹陷或按下状态，直到再次单击。

2.翻面按钮

是用于节约界面空间的最常见控件变体，控件上的动词是控件所处的多个状态之一。

1）交互前：在按钮上标出动词或动词短语，显示“可按压特征”，把光标放在图标上面有工具提示。

2）交互中：命令状态改变。

3）交互后：命令状态改变，例如从“播放”变成“暂停”。

3.单选按钮

选择一个选项时，以前选择的选项会自动取消，每次只有一个按钮可以选择。单选按钮总以两个或多个成组出现，而且每组中只有一个按钮可以被选。一般是调形的。

1）交互前：单击选中，再次单击取消选择。

2）交互中：按键成凹陷状态，显示被激活，直至再次单击接触锁定。

3）交互后：显示被激活，并执行相应命令。

4.组合图标按钮

是单选图标按钮的一种变体，是右侧有向下小箭头的单一锁定图标按钮。单击箭头并停住，会有一个菜单，包含数个图标按钮。

1）交互前：使用者可以从中选择所需。选择的按钮就出现在工具栏的箭头旁边，单击图表按钮就会切换图标按钮状态。

2）交互中：选中的条目显示被激活，直至再次选择。

3）交互后：执行相应命令。

5.列表控件

首先通过单击，需要结合键盘上原键，进行成组的选择。是一种对用户操作要求较高的选择方式。如下拉菜单，可以通过单个地选择。

1）交互前：有两个相邻的列表控件，一个显示可用项，另一个显示已选项。他们之间有一个或2个按钮。允许选择项目并从一个转移到另一个。

2）交互中：选列表控件中的一个条目，按按钮转移到另一个列表中。

3）交互后：确定，执行相应操作。

6.树形控件

是表达层次关系数据的列表视图，它显示一个侧面的树，每个条目一个图标，条目可以展开或折叠。可以作为文件系统导航系统使用，在表达继承关系的层次信息时效果非常好。如windows的资源管理器中的树形目录，表达继承关系以及层次感。

输入控件（用于输入数据）

1.有界输入控件（用于有任何需要数值界限的地方）

1）微调控制项

是常见的键盘或鼠标数字输入控件，包括一个小的编辑字符，附有两个半高的按钮，使得有界控件和无界控件之间的差别非常模糊。

2）刻度查和滑块

是机械时代借用过来的习惯用法。分别对应旋转控制钮和滑动控制杆。可以很好的提供设定的视觉反馈，常被用于音频软件。

3）拇指轮

是刻度盘的变体，是一种紧凑的无界控件。是和平移和缩放。和滚动条不同，它不提供任何比例反馈，控件范围是有限的。

4）其他

2.无界输入控件

文本编辑控件

显示控件（用于可视化地直接操作程序）

经常看到的文字文本本身就是显示控件，常见的滚动条也是显示控件。向下滚动页面时，我们发现滚动条，停留在页面的右侧。滚动条是可进行操作的，给用户呈现信息的控件。抽屉式的轮播也是显示控件的一类。

文章来源：麦子学院

原文链接：/wiki/pmdesign/control/