交互设计常用控件详解.pdfVIP

在线学习好工作 / 交互设计常用的控件详解 不管是交互设计还是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.树形控件 是表达层次关系数据的列表视图，它显示一个侧面的树，每个条目一个图标， 条目可以展开或折叠。可以作为文件系统导航系统使用，在表达继承关系的层次 信息时效果非常好。