随着 Windows 8* 以及支持触控的计算机的推出(例如英特尔超极本™ 设备,其中触摸是额外的输入方式),用户拥有了与应用和软件交互的新方式。在过去,触摸仅限制在特殊设备中使用,这些设备需要专门的软件,而今天我们看到大量制造商正在制造支持这些新输入方式的设备。
超极本在这些设备中显得卓尔不同,不仅包含触摸功能,也配备有笔记本电脑式键盘和鼠标触控板,以便于以传统方式操作。因此用户可选择过去所用的键盘,也可使用触摸作为输入源。
The 智能手机和平板电脑的广泛普及意味着设计人员需要调整自己的思维,清楚了解触摸的功能和限制。本文将讨论这对用户界面的设计有何影响,并提供一些指导以设计出可促进交互并提供卓越用户体验的出色软件。
触摸
触摸输入并非全新的输入方式。这种方式实际上已存在了很长时间(我参与开发的首个基于触摸的应用程序可追溯到 90 年代早期),但是直到最近才走向平价,在主流设备中获得广泛应用。在过去,构建基于触摸的应用程序的情况非常少见,而今天的智能手机几乎都以触摸为基础,并且最终用户也十分喜爱这种方式。随着全新 Windows 8 (设计定位为触摸优先系统)的发布,预期将有更多设备采用触摸模式,无论是平板电脑、台式机还是笔记本电脑。
用户应当能以自然的方式与超极本的触摸屏交互。如果屏幕上有按钮,它们应该凸显出来,在触碰它后,发生的效果就和将鼠标移动到按钮上并进行点击一样。相似地,诸如二指拨动缩放以及触摸并拖动以将内容在屏幕上四处平移的手势应当能如用户所预期一般发挥作用。
触摸方式是全特性设备在功能上的绝佳补充。
是否可触控
用户不仅仅会处于支持触控的情况,在某些情况下,例如设备的键盘被隐藏或移除,就可能处于只能进行触控的环境。如果应用程序依赖于鼠标行为(例如悬停以展示命令或操作),用户将无法使用软件。为了让这种软件可用,我们必须确保控件足够大以支持触控,并且在预期的使用模式下布置方式将会有效。
触摸设计包括确定投入多少时间和资源更合适,这需要根据对于业务的重要性以及投资回报 (ROI) 进行权衡。例如,投入到面向客户的应用程序上可能要比投入到仅有少数用户使用的内部应用程序上得到更高的投资回报(业务关键应用程序可能并非如此)。
定义了数个支持触控的应用程序类别。这些类别包括:
- 可触控:控件的尺寸被设计得足够大以在只能触控的环境下正确发挥作用,据研究表明,尺寸至少要达到 23 x 23 (6 mm) 像素并且控件之间要有足够的空间,才能防止意外误操作。应用程序能够感知和使用诸如轻拂和平移的手势,从而移动可滚动的区域并且无需使用悬停。
- 触控支持:大多数常用控件至少达到 40x40 像素 (10 mm),并且支持触控目标的标准相关手势,例如平移、二指拨动缩放和旋转。基本多点触摸操作已实施,并且能够如预期发挥作用。
- 触控优化:重新访问内容以最大程度降低混乱并尽可能提升用户体验。使用战略性布置在屏幕上易于访问的区域中的控件执行任务。诸如惯量和动量的更高级别的交互功能可让界面变得更生动。
将现有应用程序迁移到新环境的挑战在于至少确保这些应用程序可触控,从而能够在只能触控的环境下起作用。为了帮助您进行投入决策,本文将讨论重新设计触摸操作系统时用到的一些设计原则,并探索如何将它们应用至桌面。
触控设计原则
在 2011 年的 Build conference 大会上亮相的 Windows 8 的设计人员们讨论了他们用于开发以触控优先的框架的一套原则。这些原则包括:
触控应当自然而直观。通过用户触碰屏幕来获取触摸输入,从而选择和操作对象和控件。这意味着最终用户不需要专门的培训就可与应用程序交互。例如在使用超极本时,其中一个很好的功能是可以创建并使用触摸密码来登录。与其他一些身份验证模式相比,这样不仅更个性化,速度也更快,并且更安全。
直接而真实。 触摸一个控件可操作该控件,而不是操作界面中不同区域中的对象,并且对用户提供发生了某些事件的反馈。这种反馈包括声音或振动。包括惯量和动量等特性可提供更为实际的体验,并且与真实世界更为一致。
例如在屏幕上用手指轻拂某个控件可移动图片,但是在摩擦力和惯量的作用下最终停下来。如果尝试做一些不支持的操作,例如将控件移动至屏幕上无效的位置,它会轻微移动,但是会迅速返回原位置。
可移植并且一致。应用程序应当遵照行业标准并且以一致的方式实施手势。手势和操作在不同应用程序上意味着同样的事情。例如,二指拨动手势可通过将控件调整得更小来缩小或影响控件,而分开手指的手势则起到相反的作用。触摸和拖放可执行平移操作。在创建新的自定义手势时需要仔细思考,尤其是在和系统手势的操作方式一样时。
没有阻碍。 设计为可感知触摸的控件要容易访问并且在界面设计中位于合理的位置。对这些对象的操作不会妨碍或阻碍任务的完成。
来自构建 Windows 8 博客 - Windows 8 触控语言 |
触摸限制
触摸在选择上的精确度较差,并且不可执行应用程序的悬停等事件。因此设计人员需要确保控件足够大,要有足够的边距,以便能触摸到它们。不应该加入依靠悬停(类似鼠标悬停)来完成操作或任务的控件。应当了解的一些限制包括:
- 鼠标和指针具有很高的精度,可让用户选择特定像素,而触摸的精度要差得多,需要触摸目标足够大并且目标间隔足够距离才能选择目标。例如在使用触摸在屏幕上书写时,您无法看到接触点在何处。用于文本输入的其他方式可能更有效。
- 屏幕上尺寸更大的控件以及可选键盘显示意味着可供显示内容的屏幕区域变小。
- 既然悬停不可用,则将需要重新构思依赖于悬停的控件。
- 用于文本、输入和选择时将更为困难。
- 屏幕键盘会占用空间,从而留给您的内容的空间变少。
- 触摸必须是可以撤销的,有时用户会不小心碰到屏幕并触摸到一些东西,应用不应该进行不可恢复的破坏性行为。
采用触摸通常是为了以易用和自然的方式与应用程序交互,它可能是众多输入方式中的一种,也可能是唯一可用的输入方式。这意味着您的应用程序不能依赖于键盘和鼠标的可用性。由于触摸和手势活动由操作系统转变为鼠标事件,因而良好支持鼠标的应用程序可方便地转变为支持触控的应用程序。
触摸目标大小调整考虑事项
将触摸作为输入方式时,首先要考虑的事项之一是用于选取操作的物体,也就是手指,要比鼠标指针或触摸笔尖大得多。手指的大小可从儿童的 8 mm 到职业运动员的 18 mm 或更大。平均大小在 11 mm 到 15 mm 之间。
指导
触摸目标要有足够的大小才能实现可触控,至少要达到 23 x 23 像素(大约 6 mm)。有些控件则过小而无法触摸到,例如大小为 9 x 15 像素的旋转控件,因此设计人员应当考虑备选方式,为用户提供更多选择。
控件之间的间隔是另一方面,越大越好。如果链接或选项彼此过于靠近,用户则更有可能发生误触。因此,如果空间允许,建议增大控件之间的间距。
Acceptable | Better |
工具栏图标为默认大小(16 x 16 像素)时难以被触摸到,因此您应当考虑使用更大的图标,并且在其间加入足够大的边距,让进行所需的选择更为容易。五个像素大小的边距比较合适,但是如果屏幕布局允许,则越大越好。此外要考虑包含在工具栏中的控件的类型,例如下拉列表或文本框,并让它们足够大,以正常发挥作用。
菜单区域中,命令之间的间隔可能对于只能触控的设备显得过于紧凑。默认设置下,命令之间的间隔为 7 个像素,但是如果多增加 4 个像素,就可以拥有更加易用的菜单系统。幸运的是,您可利用操作系统的原生功能帮助您实现体验的一致性和实施应用程序所需的大量工作。
如果这些准则显得过于约束,可考虑使用功能区。该控件于 2007 年推出,采用触摸友好型设计,允许您选择按钮大小和组织方式,以满足非常复杂的场景的要求。例如,Windows Explorer 使用标准的功能区让查找用于文件复制或重命名的命令更为容易,还以直观、易用的方式提供了对于非常用命令的访问。请注意,最常用的命令将以更大的图标表示。
功能区也是可折叠的。因此在不需要它时,用户可在视图中隐藏它。按钮、复选框、组合框以及其他命令可设计到功能区中,让用户可更方便地根据需要查找和完成任务。
位置 – 控件的布置
一般而言,开发人员可以根据硬件限制来限制应用程序必须感知的布局数目。具有 1024 x 768 屏幕大小的标准横向意味着应用程序设计人员可以直接在画布上安排控件,并且应用对大多数用户可用。由于平板电脑和超极本可以方便地旋转,控件的固定布局意味着屏幕的特定区域将比其他区域更容易被触摸到。在平板电脑上效果良好的控件布局可能在笔记本电脑上适得其反。
这种情况下,自适应的布局将凸显作用。使用诸如 XAML 的标记语言构建的应用程序可使用布局容器来放置控件,并让它们更接近用户。通过检测输入设备(例如物理键盘的可用性)来确定哪种布局适用,这样将帮助您的应用程序适应正在使用的设备。确保常用控件之间有明显的差异是不错的做法,无论是位置还是所用的图像都最好有明显差异。例如,您不希望用户在需要点击保存时意外碰到删除或取消。
多个布局的设计
设计人员需要确保软件将会适应用户选择将在其中运行它的环境。这意味着我们需要测试一个分辨率矩阵,确保软件良好工作,其中包括根据每种可能采用的输入方式测试每种分辨率。
这样会增加要测试的场景数目。但是通过了解不同的操作模式,您将了解自己的软件是否可满足用户期望的使用方式。
系统控件和手势
关于 Windows 8 要注意的一点是,屏幕的边距由操作系统用作访问特定功能和行为的常用位置。例如,从屏幕右侧轻扫将显示超级按钮。从左侧轻扫将允许用户循环访问活动的应用程序栈。在放置控件时,您应当避免与该区域过于接近,从而与这些系统手势混淆。
- 超级按钮 –从屏幕的左缘轻扫便可显示 Windows 8 支持的标准功能,其中包括搜索、共享、开始、设备和设置
- 应用程序栈 –从屏幕的右缘轻扫,就可在活动的应用程序之间切换。向内和向外轻扫可显示活动的应用程序的缩略图。
- 应用程序栏 –从顶部或底部轻扫可显示应用程序栏,其中有上下文与活动的应用程序一致的命令,但在桌面模式中,由于桌面处于活动状态而没有活动的应用程序栏。
灵敏响应
在实施某个行为时,您应当确保应用程序立即响应。如果在与应用程序交互时延迟过长,将导致用户怀疑应用程序是否理解手势或操作。请记住,触控应当直接而简便。因此当实施某个行为时,如果可行,可尝试将复杂处理卸载到后台进行。
对于复杂的动画,建议在这些动画需要大量时间和/或处理时,以单独的线程运行它们您也可在动画的末尾完成细节渲染。
考虑内容空间
很显然,如果我们需要更大的控件尺寸以及控件之间的更大边距,就无法在单个屏幕上放置足够多的内容。就强制我们了解特定交互点的核心数据是什么而言,这并不一定是坏事。通过去除不重要的细节或将它们移动至其他屏幕并提供在它们之间顺畅导航的方法而确保屏幕的整洁有序,这样可提高应用程序的易用性。
简单是好事。挑战在于确定要点以专注于应用的本旨。确定在不同点用户需要在屏幕上呈现什么将有助于划分内容优先级。有时候当前选择的控件的上下文有助于确定在不同时刻应当显示和隐藏什么。
总结
尽管大多数 Windows 7 应用程序确实可继续在 Windows 8 上运行,但这并不意味着应用程序能够全面发挥自己的功能。如果在只能触控的设备中使用依赖于悬停或准确到像素的指点和选择操作,则对设计以及触摸的整合的构思将显得很关键。
没有完全一样的应用程序,但是您应当谨慎确定投入多少更合适。至少,要使用足够大的控件以支持只能触控的环境,让应用程序可触控。把握好控件的大小、间隔和布置方面的触摸原则,确保界面的干净整洁。
最后要注意的一点是,触摸虽然体验甚佳,但在超极本上它是键盘和鼠标之外的额外输入方式。有句格言说得好,“可以这样做并不意味着你应当这样做”,因此您应该将触摸用在最合适的地方,并发挥其他输入方式的优势。在设计应用程序时,外观以及使用模式将影响您内容的安排方式,对此有相应的数个视频和文章专门讨论了已做的相关研究(请参见下面提供的参考资料)。
支持触控的超极本是一种极佳的设备,将改变人们使用笔记本电脑的方式。马上开始利用新功能并探索构建支持触控的应用程序的方法吧。
参考
撰写本文所用的资源如下:
- 有关 Daria Loi 对触控的研究的文章 - http://www.intelfreepress.com/news/do-people-want-touch-on-laptop-screens/
- Steve Chippy Paine 的有关超极本触摸屏使用方法示例的视频 - http://www.youtube.com/watch?v=WIm2w2oNdA8&feature=relmfu
- Windows 触控指南 - http://msdn.microsoft.com/en-us/library/windows/desktop/cc872774.aspx
- 设计自适应网站 - http://msdn.microsoft.com/library/ie/jj583806.aspx
- Luke Wroblewski 的有关重新构思超极本应用的视频 - http://software.intel.com/en-us/videos/re-imagining-apps-for-ultrabook-part-1-touch-interfaces
- 了解 Windows 触控 - http://msdn.microsoft.com/en-us/library/windows/desktop/touch.aspx
- 构建 Windows 8 博客 - http://blogs.msdn.com/b/b8/archive/2012/03/28/touch-hardware-and-windows-8.aspx
- 使用图片密码登录 - http://blogs.msdn.com/b/b8/archive/2011/12/16/signing-in-with-a-picture-password.aspx
附件
下载 design-for-desktop-touch-and-the-ultrabook-ccefinal.pdf (890.92 KB)