65.9K
CodeProject 正在变化。 阅读更多。
Home

为 Ultrabook™ 设备和触摸屏桌面应用程序设计

Intel
starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (2投票s)

2012年10月23日

CPOL

14分钟阅读

viewsIcon

17006

为 Ultrabook™ 设备和触摸屏桌面应用程序设计

随着 Windows 8* 和触摸屏计算机（如 Intel Ultrabook™ 设备）的推出，触摸作为一种额外的输入方式，为用户提供了与应用程序和软件互动的新方式。虽然过去触摸仅限于需要专用软件的利基设备，但如今许多制造商都在创建支持这些新输入方式的设备。

Ultrabook 的独特之处在于，它不仅包括触摸功能，还配备了传统笔记本电脑格式的键盘和鼠标触控板。因此，用户可以选择像过去一样使用键盘，也可以使用触摸作为输入来源。

智能手机和平板电脑的广泛普及意味着设计师需要调整思路，了解触摸的功能和局限性。本文将探讨这如何影响用户界面的设计，并为构建能够鼓励互动和提供出色用户体验的优秀软件提供一些指导。

触摸 

触摸输入并非全新。它实际上已经存在相当长一段时间了（我参与的第一个基于触摸的应用程序是在 20 世纪 90 年代初），但直到最近才开始普及到主流设备。过去，构建触摸应用程序非常罕见，而如今的智能手机几乎全部是基于触摸的，并且最终用户也乐于接受它们。随着 Windows 8 从头开始构建为一个以触摸优先的系统，我们可以预见会有更多的设备（无论是平板电脑、桌面还是笔记本电脑配置）包含触摸功能。

用户应该能够以自然的方式与 Ultrabook 的触摸屏互动。如果屏幕上有按钮，他们应该能够触摸它，使其像用鼠标移动到它并单击一样做出响应。同样，像捏合缩放、触摸并拖动以平移屏幕内容等手势，应该能够以用户期望的方式做出反应。

触摸是对功能齐全的机器能力的绝佳补充。

是否可触摸

用户不仅处于支持触摸的环境中，在某些情况下，例如设备键盘隐藏或移除时，甚至可能处于仅支持触摸的环境中。如果应用程序依赖于鼠标行为（如悬停以显示命令或操作），用户将无法使用该软件。为了使其可用，我们必须确保控件足够大以支持触摸，并且其放置方式符合预期的使用模式。

为触摸进行设计包括确定投入时间和资源的合理性，并将其与对业务的重要性以及投资回报（ROI）进行权衡。例如，在面向客户的应用程序中投入更多资金，比在只有少数用户使用的内部应用程序中投入更多资金，可能产生更高的 ROI（当然，如果内部应用程序对业务至关重要，则情况并非如此）。

微软定义了几个类别的触摸应用程序。这些包括：

  • 可触摸：控件的大小足以在仅触摸环境中正常运行，研究表明最小尺寸为 23 x 23 像素（6 毫米），并且控件之间留有足够的空间以防止意外选择。应用程序能够识别并使用系统手势（如轻扫和平移）来移动可滚动区域，并且不需要悬停。
  • 触摸支持：最常用的控件至少为 40x40 像素（10 毫米），并支持触摸目标的标准相关手势，如平移、捏合缩放和旋转。已实现基本的多点触控操作，并且行为符合预期。
  • 触摸优化：内容经过重新审视，以最大程度地减少混乱并优化用户体验。任务通过策略性地放置在屏幕易于访问区域的控件来完成。惯性、动量等更高级别的交互功能被用来使界面生动起来。

将现有应用程序迁移到新环境的挑战在于，确保它们至少是“可触摸”的，即它们能在仅触摸环境中运行。为了帮助您决定投入多少成本是合适的，可以借鉴重新设计操作系统以支持触摸的一些设计原则，并了解它们如何应用于桌面。

触摸设计原则

Windows 8 的设计者在 2011 年的 Build 大会（Build conference）上讨论了他们用于为触摸设计一等公民框架的原则。这些原则包括：

触摸应自然且直观。触摸输入是通过用户触摸屏幕来选择和操作对象和控件来捕获的。这意味着最终用户无需特殊培训即可与应用程序进行交互。例如，在使用 Ultrabook 时，一个很棒的功能是可以使用触摸密码登录。它不仅更具个性化，而且比其他一些身份验证方式更快、更安全。

直接且引人入胜。触摸控件会操作该控件，而不是界面中的其他区域，并向用户提供操作发生的反馈。这可能包括声音或振动。包括惯性和动量等功能可以提供更逼真的体验，更符合现实世界的规律。

例如，在屏幕上轻拂手指会移动图片，但它会受到摩擦力和惯性的影响，最终会静止下来。如果用户尝试执行不支持的操作（例如将控件移动到屏幕上不起作用的位置），它会轻微移动但会弹回原位。

便携且一致。应用程序应遵循行业标准，并以一致的方式实现手势。手势和操作在不同应用程序中的含义应相同。例如，“捏合”手势会缩小视图或通过调整控件大小使其变小，而“展开”手势则执行相反的操作。“触摸并拖动”执行平移操作。您应该仔细考虑创建新的自定义手势，特别是当系统手势已实现相同功能时。

不干扰。设计为支持触摸的控件易于访问，并符合界面设计的逻辑。操作这些对象不会遮挡或妨碍任务的完成。

来自 Windows 8 博客 - Windows 8 触摸语言

触摸的局限性

触摸的精度较低，并且应用程序无法获得悬停等事件。因此，设计师需要确保控件足够大，并有足够的边距来方便触摸。依赖悬停（如鼠标悬停）来完成操作或任务的控件不应被包含。需要注意的一些局限性包括：

  • 鼠标或指针精度很高，允许用户选择特定像素，而触摸精度则差很多，这要求触摸目标足够大且分开，以便能够进行选择。例如，在触摸屏上书写时，您看不到接触点在哪里。其他处理文本输入的方式可能更有效。

  • 屏幕上控件尺寸的增大以及可选的屏幕键盘表示意味着用于显示内容的屏幕区域减少。
  • 当悬停不可用时，依赖它的控件需要重新考虑。
  • 处理文本、输入和选择更加困难。
  • 屏幕键盘为您的内容留下的空间更少。

  • 触摸必须具有容错性，也就是说，如果用户不小心靠在屏幕上触摸了某些内容，应用程序也不应执行不可恢复的破坏性行为。

触摸旨在成为一种易于使用且自然的与应用程序互动的方式，它可能是可用的多种输入设备之一，也可能是唯一的可用输入。这意味着您的应用程序不能依赖键盘和鼠标的可用性，尽管支持鼠标良好的应用程序会更容易转换为支持触摸的应用程序，因为触摸和手势事件由操作系统转换为鼠标事件。

触摸目标大小的考虑因素

关于触摸作为输入方式，首先要认识到的是，选择设备——人手指——比鼠标指针或笔要大。手指尺寸的范围从儿童的 8 毫米到职业运动员的 18 毫米或更大。平均尺寸在 11 毫米到 15 毫米之间。

指导

触摸目标尺寸需要足够大才能进行触摸，至少为 23 x 23 像素（约 6 毫米）。有些控件太小以至于无法触摸，例如旋转控件，尺寸为 9 x 15 像素，因此设计师应考虑用其他方式向用户展示选项。

控件之间的间距是另一个“越多越好”的区域。如果链接或选项太靠近，用户更有可能意外单击错误的选项。因此，建议在空间允许的情况下增加控件之间的间距。

可接受

更好

工具栏图标的默认尺寸（16 x 16 像素）很难触摸，因此您应该考虑使用更大的图标，并在它们之间留出足够的边距，以便更容易进行所需的选择。五像素的边距就不错，但如果您的屏幕布局允许，越多越好。此外，还要考虑工具栏中包含的控件类型，如下拉列表或文本框，并使其足够大以正常工作。

菜单是命令之间的间距可能很紧，对仅触摸设备来说是一个问题。默认情况下，命令之间有 7 像素的间距，但如果您增加 4 像素，您将拥有一个更易于使用的菜单系统。幸运的是，您可以利用操作系统原生功能来帮助您实现一致的体验和降低应用程序的实现难度。

如果这些指南看起来有局限性，可以考虑使用功能区（ribbon）。该控件于 2007 年推出，其设计本身就友好于触摸，因为它允许您选择按钮大小和组织方式以满足非常复杂的需求。例如，Windows 资源管理器使用标准功能区，方便查找复制或重命名文件的命令，并以直观、易用的方式访问不太常用的命令。请注意，最常用的命令以更大的图标表示。

功能区也可以折叠。因此，当不需要时，用户可以将其隐藏。按钮、复选框、组合框和其他命令都可以设计到功能区中，从而使用户更容易根据需要查找和完成任务。

局部性 – 控件的放置

传统上，开发人员可以依赖硬件限制来限制应用程序必须考虑的布局数量。标准横向模式和 1024 x 768 的屏幕尺寸意味着应用程序设计者可以简单地在画布上布置控件，应用程序就能为大多数用户工作。由于平板电脑和 Ultrabook 可以轻松旋转，固定布局的控件意味着屏幕的某些区域将比其他区域更容易触摸。在平板电脑上对控件的良好布局，在笔记本电脑上可能效果相反。

这就是自适应布局有意义的地方。使用 XAML 等标记语言构建的应用程序可以使用布局容器将控件放置在用户附近。检测输入设备，例如物理键盘的可用性，以确定哪种布局有意义，将有助于您的应用程序适应所使用的设备。最好确保常用控件之间有清晰的区别，包括放置和使用的图像。例如，您不希望用户
在他们本想单击“保存”时，意外单击了“删除”或“取消”。

为多种布局设计

设计人员需要确保软件能够适应用户选择运行它的环境。这意味着我们需要测试各种分辨率，以确保软件运行良好，包括将每种分辨率与每种可能的输入方法进行测试。

这增加了需要测试的场景数量。但通过了解不同的操作模式，您将知道您的软件是否能以用户期望的方式使用。

系统控件和手势

关于 Windows 8 的一个注意事项是，屏幕的边缘被操作系统用作访问某些功能和行为的公共区域。例如，从屏幕右侧滑动会显示“超级按钮”（Charms）。从左侧滑动允许用户在活动应用程序堆栈之间切换。您应该避免将控件放置得太靠近，以免与这些系统手势混淆。

  • 超级按钮 (Charms) – 从屏幕左边缘滑动会显示 Windows 8 支持的标准合同，包括搜索、共享、开始、设备和设置。
  • 应用程序堆栈 (Application Stack) – 从屏幕右边缘滑动可在活动应用程序之间切换。滑动进出会显示活动应用程序的缩略图。
  • 应用程序栏 (Application Bars) – 从顶部或底部滑动会显示一个应用程序栏，其中包含与活动应用程序上下文相关的命令，但在桌面模式下没有活动应用程序栏，因为桌面是活动的。

保持响应

在实现某个行为时，应确保您的应用程序立即响应。与应用程序交互时的长时间延迟会导致用户怀疑应用程序是否理解了手势或操作。请记住，触摸应该是直接且引人入胜的。因此，在实现行为时，尽量将复杂的处理卸载到后台。

对于复杂的动画，建议如果它们需要大量的时间和/或处理，可以从单独的线程运行它们。或者，您也可以在动画结束时完成详细的渲染。

考虑内容

如果我们需要的控件尺寸更大、控件之间的间距更大，那么我们无法在单个屏幕上显示相同数量的内容，这一点应该是显而易见的。这不一定是坏事，因为它迫使我们审视特定交互点的核心数据是什么。通过移除不重要细节或将其移动到其他屏幕，并提供平滑导航的手段，可以减少屏幕混乱，从而提高应用程序的可用性。

简洁是件好事。挑战在于确定什么对保持应用程序的意图焦点很重要。确定用户在不同时间点需要在屏幕上显示什么，将有助于确定内容的优先级。有时，当前选中控件的上下文可以帮助确定您应该在不同时间显示或隐藏什么。

摘要

虽然大多数 Windows 7 应用程序在 Windows 8 上仍可运行，但这并不意味着它们能以完整的潜力运行。当依赖悬停或像素级精确指向和选择的应用程序在仅触摸设备中使用时，查看设计和集成触摸的需求变得至关重要。

所有应用程序都不同，但您应该仔细确定投入多少才算合理。至少，应使用足够大的控件来支持仅触摸环境，使应用程序变得“可触摸”。减少混乱，使用简洁的界面，并利用触摸设计原则中的尺寸、间距和控件放置。

最后一点是，虽然触摸很棒，但在 Ultrabook 上，它只是键盘和鼠标之外的一种额外输入。俗话说“因为你能，不代表你应该”在这里很适用，也就是说，您应该根据触摸的优势来使用它，并根据其他输入的优势来使用它们。在设计应用程序时，外形尺寸和使用模式应影响您内容的布局方式，还有一些视频和文章强调了已进行的研究（请参阅下面的参考资料）。

支持触摸的 Ultrabook 是一款很棒的设备，它将改变人们使用笔记本电脑的方式。开始充分利用新功能，并探索如何构建支持触摸的应用程序。

参考文献

用于创建本文的资源包括以下内容：

© . All rights reserved.