设计交互细节

1、LOGO设计交互细节 控件About Face 交互设计精髓设计交互细节 控件控件是使用者和数字产品进行交流的屏幕对象，它具有可操作性和自包含性。它们有时也被称为“小部件”（widget）、“小配件”（gadget）或者“小零件”（gizmos），是创建图形用户界面的主要构造模块。About Face 交互设计精髓根据用户目标，控件可分为4种基本类型：v 命令控件（imperative control）：用于启动功能。v 选择控件（selection control）：用于选择项或数据。v 输入控件（entry control）：用于输入数据。v 显示控件（display control）：用

2、于可视化地直接操作程序。有些控件还包含了上述一种或者几种类型。About Face 交互设计精髓About Face 交互设计精髓设计交互细节 控件1. 命令控件2. 选择控件3. 输入控件4. 显示控件1.命令控件在人机交互中，有一种由名词（有时称为“对象”）、动词、形容词和副词组成的语言。当我们发起命令时，便指定了动词动作的声明。当描述动作会影响到什么时，我们指定组成句子的名词。有时我们从已存在的列表中选择名词，有时输入一个新名词。我们分别用形容词和副词来休息名词和动词。About Face 交互设计精髓1.命令控件与动词相对应的控件类型叫做“命令控件”，因为它产生立即的操作，命令控件接收

3、操作并且立即执行。在控件世界里，命令习惯用法的精华例子是按钮。实际上它是唯一一种，虽然存在多种不同的外表，单击按钮及相关动作也就是动词，将立即执行。About Face 交互设计精髓1.命令控件About Face 交互设计精髓按钮 图标按钮 超链接 1.命令控件About Face 交互设计精髓1.1 按钮1.2图标按钮1.3 链接1.1按钮按钮一般具有三维模拟的凸起特征。如果控件是矩形（有时呈椭圆形）并凸起显示（右侧和底部的阴影，以及顶部和左侧的加亮产生了凸起的效果），那么它就具有命令的视觉启示。用户只要单击后释放鼠标，它就立即执行。About Face 交互设计精髓1.1按钮在对话框中总

4、有一个默认按钮（default button），常常被突出显示出来指示用户可以选择的最合理操作。About Face 交互设计精髓1.1按钮按钮要显示它的“可按压特性”。当用户指向并单击，屏幕上的按钮视觉上会发生改变。不要让人产生疑问：“它到底被按下了吗？”About Face 交互设计精髓正常状态：鼠标划过：鼠标单击：如果没有查询结果的变化很难辨别“它到底被按下了吗？”About Face 交互设计精髓1.1 按钮1.2图标按钮1.3 链接1.命令控件1.2图标按钮图标按钮图标按钮现已成为标准的习惯用法，和菜单栏一样为人熟知，按钮从传统的对话框移居到了工具栏中，按钮显著地扩展了它的功能、作用

5、和视觉特征。About Face 交互设计精髓交互设计精髓1.2图标按钮当按钮移居到工具栏中时变成了方形，没有文本而获得了象形文字，即一个图标。图标第一眼看上去难以确切理解，不过工具提示（ToolTips）的出现有效地提供了帮助。About Face 交互设计精髓按钮、图标按钮按钮、图标按钮有自己的相应状态和形式。About Face 交互设计精髓按照是否可用来分：可用、不可用。按照鼠标状态来分：正常、鼠标划过、鼠标点击、选中。About Face 交互设计精髓1.1 按钮1.2图标按钮1.3 链接1.命令控件1.3超链接超链接，或者链接是网页中的一种习惯用法，现在在各式各样的不同应用程序中都

6、可以见到它的身影，一般来说，它的形式是具有下划线的文本（当然图片也可以），可以作为浏览导航的命令控件。这是一种简单、直接并有用的交互习惯用法。About Face 交互设计精髓小结About Face 交互设计精髓链接用于浏览导航，按钮和图标按钮用于操作。设计原则About Face 交互设计精髓设计交互细节 控件1. 命令控件2. 选择控件3. 输入控件4. 显示控件2.选择控件About Face 交互设计精髓因为命令控件是动词，所以它需要一个名词来进行操作。选择控件和输入控件是两类用于选择名词的控件，选择控件允许用户从一组有效的选项中选择一个操作数。2.选择控件常见的选择控件有复选框（c

7、heck box）、列表框（list box）和下拉列表（drop-down list）。2.选择控件以前，选择控件不直接导致操作，操作通常需要命令控件来触发。现在一些导航控制的下拉列表就可以用于触发操作。和交互设计中的其他做法一样，这两种做法各有优缺点。如果使用者在发起操作前要做出一系列的选择，这时应该提供明显的命令控件（也就是按钮）；如果使用者想要立即看到选择的结果，并且这个操作也很容易被撤销，则完全有理由让选择控件也变成命令控件。About Face 交互设计精髓About Face 交互设计精髓2.1 复选框2.2 滚翻按钮2.3 单选按钮2.选择控件2.4 组合图标按钮2.5 列表控

8、件2.6 组合框2.7 树形控件2.1复选框复选框主要是基于文本的控件，它是熟悉而有效的习惯用法。和菜单一样，存在优点的同时也存在缺点。确切的文本使复选框清楚明确，但也使用户不得不放慢速度阅读，而且占据了数量可观的屏幕空间。About Face 交互设计精髓2.1复选框About Face 交互设计精髓2.1复选框我们还是有可能为复选框加进一些图形元素，就像图标按钮一样改进复选框。用图标代替文本，按钮可以演变成图标按钮并迁移到工具栏中。锁定图标按钮状态不再是瞬间的，而是锁定直到再次单击。控件特征也完全改变为截然不同的类型，命令控件成了选择控件。About Face 交互设计精髓2.1复选框开关

9、按钮作为单次选择习惯用法广泛地取代了复选框，特别适合用在非模态交互中，这样不会打断用户做决定时的流状态。锁定图标按钮比复选框更节省空间。About Face 交互设计精髓About Face 交互设计精髓2.1 复选框2.2 滚翻按钮2.3 单选按钮2.选择控件2.4 组合图标按钮2.5 列表控件2.6 组合框2.7 树形控件2.2滚翻按钮About Face 交互设计精髓滚翻按钮是一种用于节约界面控件的最常用控件变体，但这却让用户极度困惑。该按钮上的动词总是控件所能处在的多个状态之一，最为经典的滚翻按钮是音乐播放器中的播放和暂停按钮。2.2滚翻按钮About Face 交互设计精髓这种方法的

10、问题在于人们可能认为控件是显示当前音乐播放器状态（暂停或者播放两种状态）的指示器，意味着这个按钮会提供两种既非常合理，又非常矛盾的解释。控件或者作为状态指示器，或者作为状态转换的命令控件，但不能同时表示二者。ONOFF单击控件当前处于OFF状态控件当前处于ON状态2.2滚翻按钮About Face 交互设计精髓这个问题的解决方法是要么在按钮上标出动词或者动词短语播放或者暂停，要么用一种更好的方式彻底采用其他技术，比如用两个按钮取代它，这样做的不利因素是消耗了较多的屏幕空间。总之，尽量不要使用滚翻按钮。About Face 交互设计精髓2.1 复选框2.2 滚翻按钮2.3 单选按钮2.选择控件2

11、.4 组合图标按钮2.5 列表控件2.6 组合框2.7 树形控件2.3单选按钮About Face 交互设计精髓复选框的一个变体是单选按钮，单选按钮的行为是相互排斥的，这意味着选择一个选项时以前选择的选项会自动取消，每次只有一个按钮可以选择。2.3单选按钮About Face 交互设计精髓因为相互排斥，所以单选按钮总以两个或者多个成组出现，而且每组中只有一个单选按钮可以被选中。单个单选按钮没有意义；相反，它必须表现得象复选框一样（在这种情况下，你应该使用复选框或者相似的非互斥选择控件）。2.3单选按钮About Face 交互设计精髓单选按钮甚至比复选按钮更浪费空间，在某些情况下，这种浪费是值

12、得的，特别是在向用户显示全部可获得选项的集合时非常重要。它们可以合理地用于不常使用的对话框。而在独占姿态应用的界面中，因为它必须迎合日常用户的需要，所以下拉列表则更好。2.3单选按钮About Face 交互设计精髓你可能会想象，图标按钮就像对复选框那样，也能为单选按钮做些什么，即在应用程序界面上取代它。如果两个或者两个以上的锁定图标按钮按组放在一起，并且相互排斥以至每次只能锁定其中之一，从而构成了一组单选图标按钮。About Face 交互设计精髓2.1 复选框2.2 滚翻按钮2.3 单选按钮2.选择控件2.4 组合图标按钮2.5 列表控件2.6 组合框2.7 树形控件2.4组合图标按钮Ab

13、out Face 交互设计精髓单选图标按钮的一种变体是下拉版本的，由于它和组合框控件相似，所以我们称为“组合图标按钮”。通常，它是一个右侧有向下小箭头的锁定图标按钮。按照展现形式的不同分为：分体式按钮、一体式按钮。2.4组合图标按钮About Face 交互设计精髓分体式按钮：图标与小箭头各有作用。单击图标，会切换成图标按钮上的状态。单击箭头，会下拉出一个菜单，选择了菜单中的某项，图标会随之变化。2.4组合图标按钮About Face 交互设计精髓一体式按钮：弹出面板。单击一体式按钮，会弹出一个面板或者下拉菜单。2.4组合图标按钮About Face 交互设计精髓这些菜单可以将很多效能和信息堆

14、积为紧凑的控件。这种用法是针对频繁使用鼠标的用户设计的。这种习惯用法通常在自己发现或者有人示范以后会立即变得很清晰。对于用户需要长时间交互的独占姿态应用程序来说，这是一个极好的常用控件。About Face 交互设计精髓2.1 复选框2.2 滚翻按钮2.3 单选按钮2.选择控件2.4 组合图标按钮2.5 列表控件2.6 组合框2.7 树形控件2.5列表控件About Face 交互设计精髓列表控件允许用户从有限的文本字符串中选择，每个文本字符串代表一个命令、对象或属性。这些控件有时称为“选择列表”（picklist），根据所讨论的平台和控件变体，它们有时候称为“列表框”（list box）或“

15、列表视图”（list view）。和单选按钮一样，列表控件是简化交互功能的强大工具，因为它排除了做出错误选择的可能性。2.5列表控件About Face 交互设计精髓列表控件通过滚动条上下移动，用户每次单击一次选择一行文本，一种列表控件变体允许多重选择，用户单击的同事按住Shift键或者Ctrl键一次可以选择多个项目。2.5列表控件About Face 交互设计精髓列表框对显示列表项有好处，允许用户选择一个或多个项如果列表视图中的项是可以拖动的，那么它就为用户提供了一个好工具，将项按特殊顺序排列。2.5列表控件About Face 交互设计精髓用图标来区分重要的文本项设计原则2.5列表控件About Face 交互设计精髓用图标来区分重要的文本项About Face 交互设计精髓2.1 复选框2.2 滚翻按钮2.3 单选按钮2.选择控件2.4 组合图标按钮2.5 列表控件2.6 组合框2.7 树形控件2.5列表控件About Face 交互设计精髓组合框是由一个列表