新型应用程序

  • 项目

一种开发新型应用程序的移动先行的方法

Rachel Appel

Rachel Appel此时此刻，数以百万计的移动设备正在访问数以百万计的网站和移动应用。根据皮尤研究中心和其他统计学家的调查，55% 以上的美国人使用智能手机访问 Internet，而 30% 的美国人只使用手机访问 Internet。随着电话变得越来越便宜、越来越易于使用，这些数字在不断增长。如果您对上述情况有所察觉，就会知道应该采用移动先行的设计。

当网站或应用程序采用移动先行的思维进行设计时，用户可以在从桌面到手机的所有设备上获得最佳体验。很难从大屏幕上缩小到小屏幕上。UI 就是无法正常工作。只需看看 Microsoft Windows Mobile 6.5 OS （不要将其与 Windows Phone 混淆）就知道了，这是收缩和几乎不能使用的桌面 UI 的主要示例。

但是，您可以将规模从手机扩大到桌面，而无需抛开可用性。在进行扩展时，您可以将多种功能添加到体验中，以使 UI 平稳过渡。这项技术称为渐进式增强。网站和应用程序都受益于这种移动先行的开发策略。

移动先行意味着响应式设计

调整内容以适合不同屏幕大小是多设备新型应用程序的主要要求。您必须执行以下两种方法之一。您可以设计两个版本的软件；一个用于桌面和更大的计算机，另一个用于较小的外形规格。另一个选择是将软件设计为调整 UI 以响应赖以使用的设备。

您将处理许多不同类型的设备。有些设备您可以佩戴，有些可能就放在您身边。您可能很快就会考虑将物联网 (IoT) 设备作为应用程序开发的设计要求的一部分。IoT 设备，如 Fitbit 或 Microsoft Band 都是跟踪用户活动的可穿戴设备。

IoT 设备的其他示例包括智能调温器（如 Nest）、智能门锁或新车辆上的软件。许多 IoT 设备与移动先行的网站或应用程序协同工作，如智能咖啡机。随着计算机越来越小、越来越便宜，越来越多的 IoT 设备将会涌入市场，使用方法也越来越多。

遵循移动先行也意味着考虑平台的影响。本机应用程序具有与 Web 应用程序不同的开发、体系结构，有时甚至是不同的业务要求。下面是移动先行应用程序的一些设计注意事项：

  • 响应式 UI
  • 导航
  • 项目的列表和网格，以及内容格式化
  • 存储，包括脱机存储
  • 支持触摸、笔或其他输入
  • 管理资源和性能

我将更详细地考虑这些内容。网站、混合和单页体系结构 (SPA) 应用程序使用 CSS 来实现响应式设计。XAML 应用程序和 Android 或 iOS 平台上的应用程序具有不同的专用方式来创建响应式 UI。例如，XAML 使用一个包含样式信息的名为 Resources 的对象。您可以将资源应用于 XAML 控件，以根据设备屏幕大小自动以合理的响应式方式呈现。

在 HTML 应用程序（Web 或本机，如 Windows Library for JavaScript [WinJS]）中，您可以使用 CSS 来定义样式和美感。CSS 使用媒体查询的概念来创建响应式 UI。媒体查询是响应不同媒体类型的 CSS 规则。这些媒体类型表示不同的屏幕尺寸、打印或电视、盲文、屏幕方向和其他功能。在创建媒体查询时，需要指定该设备支持功能的 CSS 规则，如以下代码中所示：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* style rules */
}
@media only screen and (min-width : 321px) {
/* style rules */
}
@media only screen and (max-width : 320px) {
/* style rules */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* style rules */
}
@media only screen  and (min-width : 1224px) {
/* style rules */
}

此处的 CSS 适用于纵向和横向模式下的智能手机，也适用于纵向和横向模式下的 iPad，最终同样适用于较大设备，如便携式计算机或台式计算机。若要阅读有关针对本机 Windows 应用程序使用 CSS 的详细信息，请参阅“使用适用于 WinJS 应用程序的 CSS 构建响应式新型 UI”(msdn.microsoft.com/magazine/dn451447)。

对于良好的响应式、移动先行的设计，不要在代码中指向特定的设备类型。您永远也无法将可用的几十种类型都设置为目标。请始终以各种屏幕尺寸为目标。例如，您可能希望面向 3 到 4 英寸的设备、5 到 8 英寸的设备、10 到 13 英寸的平板电脑，以及大于 13 英寸的便携式计算机和台式计算机。这样，您就可以创建适用于尽可能多的受众的 UI。重点介绍几个常见的手机大小。随着时间推移和新设备进入市场，此代码将继续可维护，因为您已按尺寸范围为其设置目标。

执行此操作并设计一个从智能手机扩展到桌面的项目的一个简单方式就是，在 Visual Studio 中选择一个适用于 Windows 应用商店和 Windows Phone 的跨平台应用类型。跨平台应用具有所有准备就绪的代码和结构来对不同的客户端做出反应。可以使用 XAML 或 HTML 来构建跨平台应用。这些应用程序共享他们代码的重要组成部分，因此您可以重用大量代码。如果您需要复习一下跨平台应用，请查看“为 Windows 平台构建跨平台应用”(msdn.microsoft.com/magazine/dn781364)。

开发人员通常会在网站和应用程序中以表格或列表的格式显示数据。尽管会浪费一些空间，但手机上的小列表可以在较大的屏幕上正常显示。会添加逐渐增强的 UI，并随着屏幕尺寸的增加，格式化更多内容。它也可以执行反向操作 — 删除并重新格式化屏幕以在较小的设备上显示较少内容。

正如您所预期的那样，手机应用程序往往只显示最重要的内容，因为智能手机屏幕小且空间有限。手机应用程序通常舍弃那些无用的内容。尽管有广告，但很小并且通常位于相同的位置。由于即使在最小的台式计算机上也会有非常多的空间，因此您会看到并不总是与网页主题相关的广告和内容。因此，当您添加内容时，应使其相关且有意义，这样它就不会妨碍用户。您添加的内容可能是有关内容本身的边栏、相关广告或甚至一些快速链接。

移动先行的导航

具有一种易于使用、直观的导航方案非常重要。导航是一种与应用程序本身进行交互的方法。它也是访问所需内容的一种方法。每个应用程序都有导航；遗憾的是，大量应用程序的导航较差。

本机的桌面软件（如 Windows Forms）倾向于使用传统的级联菜单作为导航。网站通常也是如此。事实上，网站通常使用需要外科医生手术般精确的 JavaScript 下拉菜单。幸运的是，这种做法很快就不用了。很明显，这些类型的菜单就是无法在智能手机上正常工作。能在智能手机上正常工作的是几种特定的导航技术：

  • 大磁贴：正方形或矩形，类似于 Windows 8。
  • 可触摸的列表：宽度和高度都足以适合所有手指和拇指大小的矩形。
  • 可轻扫的选项卡：这些选项卡可以让用户以短的水平动作轻扫，这是显示特定类别或功能的选项菜单的好办法。
  • 停靠应用栏：选项都位于屏幕顶部或底部的横条上。您可以隐藏应用栏，并在用户轻扫以请求它时进行显示。

此外，还可以使用导航技术组合，例如具有非常好的可触摸选项列表的可轻扫选项卡。通常，这些类型的导航菜单是内容本身的一部分，例如新闻应用程序让您可以点按文本标题行阅读文章。无论您选择哪种技术，请确保用户还可以向后导航。一个明显的后退按钮就可以收到很好的效果。

在 Windows 应用商店应用中，导航范例使用 Windows 网格系统来显示数据，并允许用户单击或点按以导航到有关当前网格项的详细信息。此外还有一个明显的后退按钮，以便用户始终可以取消一系列的导航步骤。或者，应用程序可以提供一个显示完整导航选择的应用栏。

数据存储和离线功能

很难找到不会受益于某些脱机支持的应用程序。如果您没有连接，即使是航空公司通过短信发送的作为超链接的航班登机牌都只是无法显示的网页。高质量的应用程序必须支持脱机功能。

许多应用程序不在本地存储内容。它们调用 Web 服务，或进行远程调用来检索数据，并远程保存数据。当然，不管怎样，始终都需要在本地存储少量数据，如应用程序或用户设置和首选项的数据。存储仅对本地存储有意义的数据，如 eReader 或某个游戏中的当前位置，或应用程序的主题颜色。

此处介绍，根据所面向平台的不同，存储要求的不同之处。在 HTML 客户端应用程序中，您可以使用域对象模型 (DOM) 存储或 IndexedDB。在本机的 XAML 应用程序中，您可以使用本地应用程序设置或 StorageFile 对象。

  • DOM 存储（HTML5 本地存储）：这是 HTML 应用程序中本地数据的轻量容器。
  • IndexedDB：这会在本地存储大量数据。在 HTML 应用程序中使用 IndexedDB 并在键值对中存储关系数据或 BLOB 数据。
  • 应用程序设置：XAML 和 HTML 的 Windows 应用商店和 Windows Phone 应用都可以访问应用程序设置的数据结构。该应用程序可以在这些较小的对象中存储数据。它们通常包含设置，例如登录名、主题颜色或其他设置。
  • 存储文件：这些是良好的老式文件，但是具有适用于 Windows Store、Windows Phone XAML 或 HTML 应用的 API。

可以将应用程序设置保存在只读 ApplicationDataContainer 对象中。您可以通过 applicationData localSettings 属性来访问此设置。下面的代码检索本地和漫游应用程序设置和它们的文件夹：

var localSettings = applicationData.localSettings;
var roamingFolder = applicationData.roamingFolder;
var roamingSettings = applicationData.roamingSettings;

当然，本地设置只能从关联的设备上进行本地访问，而漫游设置可以从多个设备或位置访问。有关 Windows 应用商店应用中数据存储的详细信息，请参阅“Windows 应用商店应用中的数据访问和存储选项”(msdn.microsoft.com/magazine/jj991982)。

移动先行的体系结构和开发

遵循移动先行的重要一点就是，您要实际确保正在创建的软件首先能在移动设备上正常工作。对于屏幕和 UX，放大比缩小更容易。您始终可以随着屏幕尺寸的增加添加信息。

性能对移动用户而言非常重要。人们购买昂贵但往往有限的数据计划。他们不想等待，付费下载网页或应用程序。如果您认为必须管理和囤积每个比特和字节的日子一去不返了，其实不然，这一想法还为时过早。在移动开发中管理内存和资源举足轻重。

当今的手机和 IoT 设备达到了与过去较大桌面的同等设备相媲美的技术熟练程度。即使存储容量增加到天文级别，许多 IoT 设备的 RAM 仍小于 1 GB。而且，别忘了电池使用寿命。如果您的应用程序耗电量大，用户很快就会抛弃它。并且您想要跨尽可能多的平台来尽可能多地使用同一基本代码。移动先行的方法适用于网站和应用程序。请记住，这不只是关乎屏幕尺寸。

作为移动先行体系结构的一部分，首先确定您生成的移动应用的类型。它是一个移动网站吗？也许它是本机应用程序。您必须支持多少个平台？如果您拥有现有的移动化网站，并且想要快速连接到应用商店，混合可能是最好的选择。

如果您需要帮助决定选择哪种方法，请阅读“移动网站与本机应用与混合应用”(msdn.microsoft.com/magazine/dn818502)。在确立明确的构建内容目标后，下一步就是演示应用程序的体系结构。有关如何规划您的移动网站或应用的更多详细信息，请查看我的专栏“设计跨平台的现代应用程序体系结构”(msdn.microsoft.com/magazine/dn683800)。

以应用商店为目标的独立开发人员习惯于考虑移动先行。其部署的目标通常是一个或多个应用商店。企业开发人员倾向于部署到其内部网络上的位置或可能是其私有云中的位置。

在企业开发中，JavaScript 大受欢迎。开发人员甚至在服务器上运行 JavaScript。现在，它可能是世界上最受欢迎的方法。不管喜欢与否，开发人员都会将 JavaScript 用作以 Web 应用的形式提供跨平台软件的最简单方法。即使企业开发人员也正在使用多个 JavaScript 来增强企业应用程序的 UI。随着企业自带设备办公 (BYOD) 运动的出现，员工将他们的 iPad、Surface 和智能手机带到各处的工作场所中，情况更是如此。

如果您要编写企业 JavaScript 或 SPA 应用程序，则可以考虑使用 TypeScript。TypeScript 已经实现了开发人员会耐心地等待的所有 ECMAScript 6 要求，如继承，以及一组类型、面向对象和帮助您生成更好代码、文件和项目组织的其他功能。建议您熟悉 UI 设计模式和开发模式。这两种模式都有助于建立更有条理的项目结构。在您的企业 JavaScript 项目中使用 TypeScript 之前，请参阅“在新型应用程序中使用 TypeScript”(msdn.microsoft.com/magazine/dn201754)。

总结

本文最重要的是在构建软件时考虑移动先行将会使软件更易于放大。渐进式设计的 UI 通常意味着更加模块化的体系结构。这本身就会使代码易于维护和添加新功能。此外，用户肯定会喜欢时尚且设计良好的 UI。移动先行策略会强制您专注于最重要的数据和功能。正是这些功能让您的软件在应用商店中获得较高的评级并增加更多的销售量。

Rachel Appel 是一名顾问、作家、导师和前 Microsoft 员工，在 IT 行业有 20 多年的经验。她常在 Visual Studio Live!、DevConnections、Mix 等顶级行业大会上发言。她的专业是开发侧重于 Microsoft 系列开发技术和开放式 Web 并且符合业务和技术需要的解决方案。有关 Appel 的详细信息，请访问她的网站 rachelappel.com。

衷心感谢以下 Microsoft 技术专家对本文的审阅：Frank La Vigne