在 2010 年之前，除了智能手机和台式机/笔记本电脑外，网络上几乎没有其他设备。开发人员可以假设手机用户拥有小屏幕、低带宽，并且短暂地使用 web 应用。台式机用户被认为拥有大屏幕、高带宽，并在应用程序中花费大量时间。

现在设计 web 应用意味着为 2014 年及以后设计，届时用户会购买各种尺寸的巨型手机、平板手机和平板电脑。4G 连接速度可能比 DSL 或咖啡店中受限的 Wi-Fi 速度更快。许多笔记本电脑和“一体机”配备了触摸屏。用户可能在沙发上用平板电脑度过一个小时。而且，并非所有台式机用户都希望应用程序占用整个屏幕，编写电子邮件或报告通常需要参考另一个应用程序，该应用程序应该满足于一半的屏幕。

如今，按设备划分用户通常会导致对庞大少数群体进行错误的假设。用户在一天中使用多种设备，并且不喜欢为不同的设备学习不同的交互模式。苹果的“回到 Mac”计划试图将智能手机功能带到 OS X，而 Windows 8 和 Ubuntu Unity 努力从手机到台式机提供一致的体验。

应用程序示例

正如 Windows 8 和“回到 Mac”的批评所显示的那样，很难为所有设备和屏幕尺寸实现良好的用户体验。对于一系列设备来说，这是可以做到的，尤其是对于不受旧有预期负担的新应用程序来说。在这里，我展示了两个针对智能手机到台式机进行优化的 Web 应用（但不包括“智能”电视、功能手机或智能手表）：一个图片库和一个备忘录应用。

图片库

图片库是图片分享应用的一部分。 图片库的示例相册 可在线查看。（整体应用的描述 值得一看。）

图片库遵循许多先前图片浏览应用使用的模式。缩略图以网格形式呈现，并垂直滚动。列的数量和宽度取决于屏幕宽度。网格单元格可以是小或大，我选择最小单元格尺寸为智能手机的最小常见屏幕宽度：320 个 CSS 像素。因此，列数为 floor(windowWidth / 320)，单元格大小为 windowWidth / 列数。列的宽度通常在 320 到 639 像素之间。

列数限制为四列，因此滚动不会超过数据传输速度。

一种方法是使用 300×300 的固定尺寸缩略图，并在单元格变大时增加填充。但是，可用的图片库（libjpeg）只支持一半、四分之一和八分之一尺寸的缩减，因此填充是固定的，图片被调整大小以填充。web 应用会请求适当大小的图片，服务器（用 node.js 编写，通常在手机上运行）会返回填充请求大小单元格的图片的最小版本。

点击缩略图会切换到一个填充窗口的走马灯。用户可以通过双击图片或使用鼠标滚轮进一步放大。最初，当显示走马灯时会启用全屏模式；但是，在许多设备上切换到全屏模式需要几秒钟时间，因此现在必须手动设置全屏模式。触摸屏用户可以滑动以向前和向后导航，而台式机用户可以使用键盘。一个缺点是，鼠标用户可以点击图片向前导航，但必须滑动（或使用键盘）向后导航。鼠标用户可以从可见的导航按钮中受益，但 web 应用难以检测鼠标。

在任何设备上，从缩略图库到走马灯模式的切换都很容易。这支持典型的场景：用户浏览缩略图以找到感兴趣的图片，点击放大，使用走马灯浏览相关的图片，并返回到缩略图。用户可以在任何设备上以相同的方式浏览大量图片。更大的屏幕一次显示更多缩略图，并提供更多单个图片的细节，但交互方式相同。

通过创造性地使用 Enyo 2 的 List 小部件（尽管可以使用任何列表小部件），开发工作变得更容易。应用程序代码调整单元格大小，并用 1-4 个缩略图填充每一行，而 List 小部件负责创建和重复使用 DOM 元素。走马灯是 Enyo 的 ImageCarousel，它从一开始就被设计为在多种设备上运行良好。

备忘录应用

第二个示例是一个看似简单的备忘录应用，可以 在线使用 或从 Marketplace 安装到 Firefox OS 上。

基本布局是两个并排的面板。在宽度小于 640 个 CSS 像素的窗口中，第二个面板会从第一个面板顶部滑入。折叠完全基于窗口宽度，而不是设备类别，因此平板手机用户在纵向模式下将有一列，在横向模式下将有两列。

平板电脑和台式机用户不需要处理对话框或图层，而手机用户则拥有快速的过渡。最重要的是，从手机到更大设备时的思维模式转变很容易。虽然此应用程序目前不跨设备同步用户数据，但添加此功能将提供无缝的跨设备体验。

目前，帮助面板取代了详细信息面板。在宽度大于 960 像素的窗口中，帮助面板应该真正成为第三个面板。

折叠面板使用 Enyo 的 Panels 小部件。另一个 Panels 实例用于在第二个面板中交换详细信息面板和帮助面板。使用专门为支持多种设备而设计的 JavaScript 框架可以真正加快开发速度。

为了最大限度地显示用户数据，列表放弃了对项目上的控件，而采用直接操作：可以通过滑动（或双击）项目来执行删除等操作。重新排序通过按住并拖动来完成。可发现性被牺牲了以换取功能，许多应用程序需要取得不同的平衡。将来可能在更大的屏幕上添加可见的控件或至少是工具提示。

固定分组（例如文件夹或笔记本）需要用户导航到一个额外的层级才能访问数据。搜索允许一个备忘录存在于多个分组中，并且需要更少的 UI。（但是，它不适合依赖于空间记忆的用户。）

虽然在触摸屏上打字很费力，但该应用通过使用前缀搜索来最大限度地减少打字。搜索“s fra”将找到所有包含“San Francisco”的备忘录，以及数百个备忘录中很少的误报。大多数手机上的屏幕键盘会遮挡除几个列表项之外的所有内容，但实时搜索和命中计数会告诉用户她何时将搜索范围缩小到几个备忘录。然后，浏览列表允许用户选择所需的记录。实时全文搜索使用 IndexedDB 实现。

通过将搜索本地化为浏览器或操作系统的首选语言，还可以最大限度地减少打字。在西班牙语中，ñ 与 n 是不同的字母（西班牙语键盘专门有一个键用于 ñ），就像英语中的 w 与 u 是不同的字母一样。对于西班牙语用户，peña 永远不会匹配 pena，从而减少了误匹配。但是，用户不需要知道除他们自己的语言之外的其他语言，因此对于西班牙语用户，“cote”会匹配法语中的 cote、coté、côte 和 côté。

硬件键盘使用户能够更快、更准确地打字，更大的屏幕减少了滚动，更快的处理器和磁盘使复杂的搜索几乎是瞬时的，但界面在所有设备上都保持一致。

移动优先

这两个应用程序都是“移动优先”设计的，这往往会产生精简的应用程序，其功能少于标准的台式机应用程序。鉴于台式机应用程序中的大多数功能很少使用，这对台式机用户来说不一定是问题。精心选择的默认设置消除了对首选项设置的需求。

设计出在各种设备上都能良好运行的用户界面设计通常需要在最初投入更多精力，但可以带来更友好的用户体验，并带来易于维护的额外好处。一些强大的用户界面元素可以消除对许多窗格、对话框、下拉列表和按钮的需求。