关于平台&姿态

    在开始设计一个数字产品的交互框架时，要回答的 第一个问题是“什么样的平台(platform)和姿态(posture)是合适的?”

    产品的姿态(posture )是指产品的行为立场，也就是产品对用户的展现方 式。 姿态讨论的是用户在与产品交互上投入多少精力;以及产品又如何回应这 些精 力投入。这一决定必须建立在了解产品可能的用户场景和环境基础上。

我们讨论过软件的“姿态"(posture)。桌面应用软件的界面，有两种主 要的姿 态，分别是“独占式的”和“暂时式的”(sovereign 和 transient)。

eg。微软 Outlook 就是独占姿态应用程序的一个典型例子。它长时间、不间断地与用户进行交互，并与附近多种导 航和支持信

息窗格相邻，自始至终都是全屏使用。

关于暂态的移动应用

桌面应用多数都是独占式的，而移动应用相反，它们多数是暂态的(transient)。移动应用是在移动中使用的软件，是高度情境驱动的。暂态，在这里说的是用户与应用交互的特点:短暂、临时、关注于特殊的任务。

移动应用是暂态的另外一个主要原因，和设备的物理外形大小因素有关。这两个因素导致了移动屏幕上的信息和控制密度，与桌面屏幕上对话框的信息和控制密度 是差不 多的，因此最好也把移动屏幕当做是暂态的来对待。

关于手持设备上的应用

今天的手持式设备继续沿用着多年前的基本设计模式，很多概念也和以前一样，比 如 UI 元 素呈垂直堆叠放置，原来的列表、网格、栏、抽屉等概念依然在使用。当然，高性能、 高分辨率的处理 能力和多点触摸的能力，也带来了新的结构模式，例如轮显(carousel)、泳道 (swimlane)、卡片等，它 们逐步成为流行的移动习惯用法。

我的理解：信息架构的层面上的交互划分（导航、内容、控制）

关于移动导航、内容、控制的习惯用法

浏览控件

绝大多数的移动应用都是针对浏览需求的。无论是听音乐、看视频，还是刷新社交软件、查看 餐 厅点评，抑或是阅读电子邮件、网络购物、搜索内容等，我们在移动设备上进行着大量的阅读、 浏览、 观看、查看等动作。受制于外形大小和输入手段，在移动设备上浏览和选择内容，比直接输 入内容要方 便得多。基于此，在移动应用中，用于浏览内容的丰富模式就被开发出来了。

列表(list)

是手持触屏设备上最常用的一种组织内容的方式。列表内容的常见形式有:一行一行的项目、一段一段文本、一排一排的控件(如复选框、按钮)及其标签、图片或视频 的缩略图等。

网格

网格(grid)将诸如应用的图标、缩略图、功能图标等内容组织成规则的行列形式。最明 显的一个 例子就是 iPhone 的主画面(home screen)，它是展不应用图标的编辑 N 格。安卓有类 似的界面。微软 也借用了这个概念，同时将其融合到更具创新的“开始”(Start)屏幕网格，它 将应用和通知混合在一起， 却又不失美感和实用性

内容轮显

屏幕轮显使用水平滑动手势(swipe gesture)以全屏布局的方式在不同内容间导航。相对于与 屏幕 轮显，内容轮显是存于单一屏幕布局之内的。但同样使用了水平滑动手势，这样可以在固 定的全屏布局 内，展现并导航不同的内容对象。内容轮显适用的常见内容有媒体缩略图(或较 大的图片)，有时也用 于浏览包含了媒体和格式化文本的卡片或文本。

泳道

泳道是一种很聪明的格子轮显方法，很好地平衡了轮显的自然浏览频率与信息密度。泳道(swimlane)是一组垂直排列的轮显，每个轮显都可以独立水平滚动，对其他轮显没有影响。导 航到其他 泳道也很简单，只要垂直滚动就可以了。作为一种浏览多种类型内容的方法，泳道是 很巧妙的，其导航 也很简便。在某个内容类型的泳道中使用滑动手势，就可以浏览里面的内容， 而其他的泳道原地不动。 它比网格式的浏览要简便，后者要实现这样的功能，所有的列和行都 要问时移动。

卡片

卡片(cards)是一种移动设备上的新型习惯用法。不过，它的早期雏形可能是 Mac 上面的HyperCarcT。早期 Mac 的屏幕分辨率较低(比现在智能手机要低得多)，为迎合低分辨率的显 示器， 设计者将图片和文本信息整齐地结合在一起，用于信息和内容的展示和浏览等。HyperCard 最初的目标 用户群是有创作需求的大众，但最后变成了一个程序员们创建和编辑富媒体和内容

导航和工具栏

标签栏

标签栏(tab bar),包含一系列的文本或图标按钮。(在 iOS 的标签栏中，经常使用图标， 并在图 标下方加上对应的文本)。轻点标签栏上的标签按钮，会将主内容区域切换成一个新的列 表或网格视图， 这样的使用效果和桌面系统界面上的标签是差不多的。标签栏中的每个标签都 保持着各自的内容层级关 系，并用列表和网格展现出来，同时它还会保持当前运行应用的层级 状态。标签栏一般出现在 i〇S 屏 幕的下方，在安卓和 Windows 系统上则出现在屏幕的上方，如 图 19-18 所示。

更多控件

标签轮显

标签轮显(tab carousel)同样可以解决“更多...”控件要解决的问题，它是水平滑动轮显 和标签 栏的完美联姻。标签轮显中的标签看起来和标签栏中的标签没有什么两样，但它们可以 被滑动到 屏幕的外面。选中的标签会被置于中心的位置，或者被高亮标注出来。轻点哪个标签, 哪个标签就 被选中。用手指轻滑一下标签栏，就选中了和它相邻的左侧或右侧的下一个标签， 并将被选中的 标签所控制的内容展现在主区域里，

导航栏和动作栏

导航栏(nav bar),位于屏幕顶端，为列表或网格视图提供导航，如图 19-22 所示。通常来 说，导 航栏的左边都一个回退按钮，中间是当前列表、网格或其他形式视图的标题。安卓则将 这些控件称之为“动作栏”(actionbar)。多数情况下，功能菜单或按钮会放在右边。

工具栏和工具板

工具栏(toolbar)包含了针对当前应用或应用内所选内容的操控功能。iOS 应用经常会把一个或者两个动作按钮放在导航栏的右侧，对于浏览和查看类的应用来说，这样很好。不过，创作类的应用在创作和编辑的界面上，通常会在底端放置一个工具栏， 将底端原来的标准标签栏替换掉。

谷歌的安卓则趋向于在顶端放置一个动作栏，它将回退导航和动作按钮结合在一起。我们 推荐在其 下方设置一个标签栏，这在用户需要访问多个视图时会非常有用。谷歌的动作栏还支 持下拉，这样如果 需要加上更多的动作但标签栏上的位置又不够时就可以把额外的动作放到下 拉的视图里。

多数音频播放器应用则会在“正在播放”屏幕的底部放置一个传输栏(transportbar)或控 制窗格， 用于放置一些和“回放”有关的控件。

工具板(tool palette)是工具栏的变体，移动设备上的这个东西和它的桌面“表亲”(参见 第 18 章) 的用法是类似的，它上面包含了一些图标按钮，用于访问和操作被查看和编辑的对象。 (绘图和图像处理 软件等，是使用工具板的最典型的应用软件。)平板应用中的工具板，大量地 使用了弹出控制面板，提 供了一系列的工具和配置。

垂直的工具栏和工具板

更为复杂的工具栏，同时出现在平板的顶端和底端。同时，在左边或者右边（有时两边都有）还会有额外的垂直工具栏。

工具轮显

和各种轮显类的习惯用法一样，工具栏和轮显杂交的后代叫作工具轮显(tool camursel)。 它令有 限的屏幕可以容纳下更多的功能，用户通过滑动手势便可以跨越屏幕轻松访问大量的功 能。工具轮显在 图像处理应用中运用得最多，例如谷歌的 Snapseed，如图 19-24 所示。该工具轮 显中的每个功能都是 一个带有文本标签的缩略图，该缩略图描述了当前的滤镜或特效，以及施加 在样图上的效果。(更为理 想的是，缩略图是正在编辑的图像，但现实问题是手机屏幕不够大。)

抽屉

抽屉(drawer)是一种巧妙的习惯用法，用户可以通过抽屉来访问一个包含了导航元素的 垂直列表， 这些导航元素实际上有点类似于标签(tab)。抽屉把一个面板层隐藏在主内容区域 之下，因此只需要占 用极少的屏幕面积。抽屉图标，有时也被称为“汉堡包菜单图标”。之所以 被称为汉堡包，是因为其图标 是三个堆叠的横杠，形状类似汉堡包。轻点抽屉图标，或者在有 些应用中水平滑动主内容区，主内容区 下面的抽屉便被抽了出来。和标签栏一样，被选中的项 目会被高亮突出。再点一下抽屉中的项目，项目 的具体内容就会显示在主内容区，同时抽屉也 会“啪”的一下收回关上。抽屉内的项目通常都是文本的， 有时也有图标和其他装饰物。一些 额外的控件，可能也会出现在抽屉里。iPhone 中的谷歌 Gmail 应用， 如图 19-25 所示，就使用 了抽屉这种习惯用法。

次要动作抽屉

抽屉可取代导航标签栏，也可与应用中的次要对象交互。抽屉通常从屏幕左侧滑动打幵， 但有时 不是这样。有些次要对象或次要动作被放置在了右侧的抽屉里。例如，iPhone 上的 Facebook 应用，常 用的主要动作是按照一般的标准被放置在底端的标签栏，用于主要的导航工 作，同时在右侧可以滑出一 个抽屉，在此用户可以访问所有在线的朋友，并同他们聊天，

双抽屉

Path 是 iOS 上的一款基于时间线的社交软件。它很受大家欢迎，原因之一是 Path 成功地将 标签 栏和工具栏最小化，从而释放出宝贵的屏幕不动产。Path 的界面，如图 19-27 所示，釆用 了两个抽屉: 一个是标准的从左侧滑出的抽屉，用于不同视图间的主要导航;另一个是类似 f Facebook 的右侧抽屉， 用于在朋友间收发信息。它还使用了一个非标准但很有意思的工具菜单 控件，用户可以从屏幕左下角将 其调出。对于用户来说，虽然要先点一次才能调出该工具菜单, 但这个“点一下”的交互过程非常清晰， 而且很好玩——执行时，内容区域会闪烁

条目级抽屉

有些手持设备上的应用，将滑出抽屉的概念运用到了列表中的单个条目。在列表中，滑动单个 条 目(向左或向右)后，会将条目底下的工具栏展现出来，里面包含着针对该条目的一些操作 动作。这 样，屏幕顶端或底端的工具栏就没有必要存在了。

我的理解：内容功能层面的交互划分

搜索、排序、筛选

欢迎和帮助界面

我的理解：手势/触摸屏层面的交互划分

关于手势交互

手势是移动体验的核心。虽然这类手势体验的种类是十分丰富的，而且是十分拟真的，但 主要的手 势只有几个，也是最好的几个。用户的手势词汇量无须太多，满足日常使用即可，这 是我们设计的原则。 我们要做到让手势尽可能简单和直接，这样用户才能快速理解和掌握。

Tap to select, activate, or toggle - 轻拍选择、激活或开关

The tap is used to select objects and toggle the activation state of controls. Tapped items should get an appropriate selection highlight or activation/deactivation state or animation.

轻拍可以选择、激活控件的状态。被轻拍的物体，应该适当展示出被选择的高亮状态，或 被激活的 状态或动画状态等

Tap-and-hold - 轻拍保持

Tap-and-hold is a gestural idiom that is falling out of favor, and probably rightfully so. It is typically used to open a contextual pop-up menu on an object, similar to the desktop。right-click idiom. However, this gesture isn’t very discoverable, and few users are famil- iar with it. Therefore, this gesture isn’t recommended. Instead, a visible menu control should be placed on the object. Or a tap-to-select model, combined with an action menu, should be used.

轻拍保持(tap-and-hold),这种手势已经开始不太流行了，其实不流行也好。它通常被用 来打开对 象上的情境菜单，类似于桌面上的点击鼠标右键。其缺点是，这个手势不太容易被用 户摸索出来，很少 有人习惯于使用它。因此，我们不推荐使用这种手势。

Drag to scroll - 拖滚

Drag to scroll can work horizontally or vertically, and is a fundamental direct manipu- lation gesture.

Vertical dragging can be used to scroll lists or, in conjunction with drag handles, reorder objects in a list. Dragging downward on a list can initiate a refresh when the list has already been scrolled to the top. A drag upward can initiate an incremental addition of items after the last displayed item in a list.

The top and bottom drawers supported by some mobile OS’s also can be accessed via vertical dragging.

Horizontal dragging can scroll a carousel or swimlane, or open a left-hand or right-hand drawer.

拖滚(drag to scroll)，水平或垂直均可，是一个基本的直接操作手势。 垂直拖动可以用来滚动列表，或者配合拖动控制柄实现列表重新排序。如果列表已经被滚 到最上端，则向下拖动并释放可以刷新该列表。向上拖动列表，则列表继续向上滚动，显示更 多的列表项目。 有些移动系统上，在顶端或底端垂直拖动一下，会调出顶端抽屉或底端抽屉。 水平拖动则可以滚动轮显或泳道，或者打开左侧或右侧的抽屉。

Drag to move - 拖移

Dragging also can be used to move or copy an object from one list, pane, or container to another, or to move an object arbitrarily within a canvas or grid.

拖移(drag to move)还可以被用来移动或复制对象，可将对象从一个列表、窗格或任何容 器中， 移动或复制到另一个容器中，也可以在一个画布内或网格内移动或复制对象。

Drag to control - 拖动控制

Dragging also can be used to control knobs, switches, sliders, virtual x-y control pads, and contextual touch controls, and to operate palette tools (such as brushes in a paint- ing app) on a canvas.

拖动还可以控制旋钮、滑块、虚拟的 x-y 型操控板，以及各式情境触控物，也可以用来在 画布上 操作工具板上的东西(例如绘画应用中的画笔)。

Swipe up/down - 向上/下滑动

Swiping up usually is synonymous with dragging up, although iOS uses a swipe up ges- ture in desktop edit mode to close a running app. Swiping a list or grid upward causes it to continue scrolling for a while with simulated momentum.

Swiping down usually is synonymous with dragging down. Swiping a list or grid down- ward causes it to continue scrolling for a while with simulated momentum.

向上滑动和向上拖动基本上是同义词。不过，iOS 在桌面编辑模式中，向上滑动手势意味 着关闭 一个正在运行的应用。向上滑动列表或网格，会导致列表或网格向上滚动数秒，并伴随 着模拟的运动效 果显示。

向下滑动和向下拖动基本上是同义词。同样，向下滑动列表或网格，会导致列表或网格向 下滚动 数秒，并伴随着模拟的运动效果显示。

Swipe left - 向左;骨动 

Swiping left usually is synonymous with dragging left. Swiping a carousel or swimlane to the left causes it to continue scrolling for a while with simulated momentum.

Swiping left also can open a right-hand drawer or close a left-hand drawer.

Apple’s Safari browser uses a swipe left to navigate like the forward button. Google’s Chrome browser uses a swipe left to delete browser tabs when in tab edit mode.

向左滑动和向左拖动基本上是同义词。向左滑动轮显或泳道时，会导致轮显或泳道向左滚 动数秒，并伴随着模拟的运动效果显示。

向左滑动有时也被用来打开右侧的抽屉，或关闭左侧的抽屉。

苹果的 Safari 浏览器用向左滑动的手势来执行“前进”导航。谷歌的 Chrome 浏览器在标 签编辑模 式下，向左滑动意味着删除该标签。

Swipe right - 向右滑动

Swiping right usually is synonymous with dragging right. Swiping a carousel or swim- lane to the right causes it to continue scrolling for a while with simulated momentum.

Swiping right also can open a left-hand drawer or close a right-hand drawer.

Apple’s Safari browser uses a swipe right to navigate like the back button. Google’s Chrome browser uses a swipe right to delete browser tabs when in tab edit mode.

向右滑动和向右拖动基本上是同义词。向右滑动轮显或泳道时，会导致轮显或泳道向右滚 动数秒， 并伴随着模拟的运动效果显示。

  向右滑动有时也被用来打开左侧的抽屉，或关闭右侧的抽屉。

苹果的 Safari 浏览器用向右滑动的手势来执行“回退”导航。谷歌的 Chrome 浏览器在标 签编辑模 式下，向右滑动也意味着删除该标签。

Pinch in/out - 双指张合

The pinch-in gesture is used to shrink or zoom out on objects physically (such as on a map view). Or you can perform a semantic zoom—zoom out or up one level in the hier- archy in a set of physically or conceptually nested structures.

The pinch-out gesture is used to expand or zoom in on objects physically (such as on a map view). Or you can perform a semantic zoom—zooming in or down one level in the hierarchy in a set of physically or conceptually nested structures.

双指合拢(pinch-in)手势被用来缩小对象的物理视图(例如地图中的缩小操作可以看到更 大范围的地图)。我们也可以运用它来执行“语义式”的缩小，即在物理或虚拟的层级结构中退 到上一级中。 双指张开(pinch-out)手势被用来放大对象的物理视图(例如地图中的放大操作可以看到 更小范围的细节)。我们也可以运用它来执行“语义式”的放大，即在物理或虚拟的层级结构中 进入到下一级中。

Rotate - 旋转

Rotate is a gesture employing the thumb and forefinger twisted clockwise or counter- clockwise together on the touchscreen surface. This gesture can be used to actuate knob controls. But knobs probably should also support a horizontal or vertical drag action that starts on the knob as an alternative and more discoverable gesture. It can also be used to rotate objects, like a selection of pixels in an image editing app.

This gesture is somewhat awkward to carry out, given the anatomy of the human wrist. FiftyThree Inc.’s iOS app, Paper, uses this gesture to control Undo/Redo. Although this is a novel approach, it seems inferior to the more standard Undo/Redo arrow icons from a usability standpoint.

旋转(rotate)是用拇指和食指顺时针或逆时针在触屏上旋转的手势。这个手势可以用来操 作旋钮 控件，不过旋钮控件也可以用水平或垂直拖动来操作，或者其他易于被用户摸索出来的 手势等。旋转手 势还可用来旋转物体，例如图像编辑软件中的被选择的像素对象等。

从人机工学上来看，这个扭动的手势，做起来不太方便。FiftyThree 公司的 iOS 应用 Paper, 运用 旋转手势来控制“撤销/重做”(imdo/redo)。这是个创新的用法，不过从可用性角度讲似乎 传统的“撤销/重做”箭头图标更好用一些。

Multifinger swipes - 多指滑动

很多移动 OS 都支持多指滑动。例如 iOS 可以选择用四指滑屏来切换正在运行的应用。 总体来说，多指滑动不太容易被用户摸索出来，而且如果在应用中使用，很有可能会 和操作系统

级的手势相互干扰。因此最好不要用多指滑动，或者将它们备用，以应对特殊 需求。

轻拍显示及其他直接操作

轻拍显示控件

轻拍一个对象， 操控工具便显示出来。同样，视频流应用也大量运用了轻拍显示这一习惯用法，在播放视频时，轻拍屏幕可以调出一 些隐藏的 功能。

直接操作控件

有些应用让直接操作进一步挖掘了触屏的潜力。比如，有些应用将传统的诸如滑块等非直 接操作， 变成了手势直接操作。谷歌的 Snapseed 图像编辑器，是将直接操作发挥到极致的应用 之一。在提供手 势直接操作的同时，它还将直接操作的效果实时地展现在被编辑的图像上。

一般性设计原则

嵌入系统(内置了软件系统的物理设备)和桌面系统相比，除了它们都有软件交互这一类 似的地 方之外，嵌入系统有其独特的困难和问题。在为嵌入系统设计的时候，无论是智能家电、 信息台系统， 还是手持设备，我们都必须牢记如下原则:

• 不要把你正在设计的产品认为是计算机。• 把硬件和软件设计集成在一起。

• 让使用情境来驱动设计。

• 模式的运用要明智，如果有的话。

• 限定范围。

• 要根据显示器的分辨率来考虑导航。• 尽可能简化输入。