探索移动设计方法和设计移动应用时须考虑的基本要素
标签: 移动开发
Kevin Ready
发布: 2020-05-27
要更全面地了解全栈移动开发以及探索原生和混合移动开发备选方案，可阅读“ 全栈移动开发入门”。
要设计一个全栈移动应用，就必须考虑应用的总体用户体验，从用户界面的图形设计到应用性能，再到出现问题时的请求支持，均要一一顾及。此外，还需要考虑各个平台以及用户对于该平台的预期。
迄今为止，移动应用已有十多年的历史了。开发者的任务是在现代全栈移动应用的用户体验中包含一些标准：
- 初始及后续的动画加载
- 响应式和适应性设计
- 特定于设备和平台的字体和图标
- 跨设备应用品牌的一致性和熟悉度
- 缓存和其他形式的持久性
- 离线和网络中断体验
- UI 的异步注意事项
Web、移动应用程序和站点的设计在某些方面是类似的，而在另外一些方面则各具特色。一般来说，您可以将应用程序主体、表单控件、字体和排版呈现、组件呈现以及导航或路由视为需要分别处理的元素。
过去的 Web 设计师以平面设计为基础，但如今这种情况已经不太常见。现代的许多移动应用设计师可能都有传统 Web 或平面设计的背景，因此，移动应用开发者不仅要认识到其中的共性并从中受益，还要区别各种环境下的用户体验以及适用的概念和工具之间的不同。在某种环境或某个平台上有效的内容可能因多种原因而无法适用于另一环境或平台。
要了解有关不同移动应用类型的更多内容，可阅读“ 为移动应用开发选择最佳编程语言。”
简单地说，传统 Web 设计向移动 Web 设计逐渐过渡的方式及原因并不难以想象。页面和站点依旧是仅为桌面浏览器搭建的，但其中一大部分已被“移动先行”响应式设计范式所取代，这很可能是因为 Google 改变了其算法，提高了移动友好型网页的排名。超过半数的站点访客是通过移动设备访问传统 Web 内容的。除了其他方面，这还意味着像悬停这样的鼠标事件不再适用，与此同时，还在组合中添加了屏幕方向和多点触控事件。通过使用 CSS 中的媒体查询和 JavaScript 中的对等代码，传统 Web 设计已经能够以新的方式使用熟悉的结构来包含设备目标。
移动 Web 设计通常涉及浏览器内容，但也可用于描述嵌入到移动应用中的 UIView 中的内容。另一方面，混合设计指的是一种设计范式，其输出内容是移动应用本身。对于 Web 设计师来说，混合设计在其熟悉的框架（如 React 或 Angular）和 iOS 与 Android 设备所需的框架之间架起了一座桥梁。这其中包含的方法与 React Native（输出原生移动应用）和 Apache Cordova（本质上是打包移动 Web 内容，并提供与本机移动应用功能通信的接口）完全不同。这两种方法均输出原生应用：前者使用与原生功能匹配的新组件来实现，后者则通过提供从 Web 内容到原生环境的消息传递层来实现。
移动设计面临的一个最大挑战就是要确保各种各样的设备目标上的内容呈现符合预期且可接受。这些设备的宽高比、显示分辨率、带宽和功耗各异。例如，Facebook 这家供应商已经面向 Android 发布了 Facebook Lite，其中不含视频功能。许多情况下，供应商都发布了适合平板电脑和手机的应用版本。 在下面的列表中，前三项是从物理演示级别对设备进行描述。这包括设备大小、操作系统和屏幕方向。以此为基础，显示不同的界面视图。最后两项则涉及分别支持移动和离线用例时的设计注意事项。务必要牢记的是，全球内容受众大部分时间可能是在离线的移动设备上使用应用。
这些术语适用于移动 Web 设计和移动应用设计：
- 响应式设计：随着移动设备的出现，利用 CSS 媒体查询业务逻辑、设备大小和屏幕方向特性，响应式设计正式推出。其目的是响应应用程序呈现中截然不同的静态特性和变化特性。（深入了解 IBM Developer 文章：探讨的响应式设计的未来。）
- 适应性设计：适应性设计和响应式设计之间的区别通常在于前者为固定的离散度量，而后者通常是流动尺寸和布局。在适应性设计中，对于多种显示分辨率，往往会看到更精确的尺寸。
- 渐进式设计：渐进式设计（如渐进式 Web 应用中的渐进式设计）涉及以下类型的应用或站点：它们能够快速加载，且具有身份验证层，用于完成诸如填写表单字段或设置地图显示之类的任务。
- 移动先行：移动先行是设计师开发传统 Web 内容的指导原则，即优先考虑手机及其他屏幕较小的设备，尽可能为它们提供最高质量的视图。
- 离线优先：离线优先是指开发在没有网络连接时也能运行的应用程序。这包括在应用中加载初始内容、使用本地存储访问和保存数据以及避免中断用户体验等功能。
在谈到网站和页面时，这些术语看起来比较随意，但将这些同类型的技术应用于移动设备，通常要比用于传统设备需要进行更多细微调整。Android 和 iOS 均提供了许多分辨率和大小不同的图标、屏幕和字体。即使对于可扩展内容，无论是 SVG 还是动态计算的尺寸和布局，每个平台的每个具体设备所需的精确度也非常难以掌控。幸好，现在大多数工具代替您做了大量工作。最好是知道您要支持的具体设备和平台。尤其是要了解需要应用以不同方式呈现内容的最低要求和大小断点。
在构建移动应用或桌面应用时，在结构上最需要注意的可能就是布局层次以及导航或路由层次。这些结构是在页面、视图或组件及其子组件或嵌套组件中安排界面的高级组织形式。页面、视图或组件的结构方式会影响应用中使用的导航类型，例如选项卡或堆叠式导航。移动应用设计师随后必须依照为该应用创建的样式准则和模板来调整方向、分辨率和像素密度。
无论选用哪种应用构建技术，都会面临特定的挑战。有时，您可以通过混合设计来规避这些问题，但这通常要求设计师掌握每个设备平台的需求或特性。我们可能会希望只进行一次设计，然后在任何地方都沿用这一设计，但往往又不得不考虑设备特定的外观，例如导航的位置或表单元素的外观。
表 1 给出了如何在原生和混合移动应用开发中处理这些设计问题的高级视图。
iOSAndroid跨平台应用程序主体控制器和视图。活动和容器。主体和 div。导航导航通常置顶。导航通常置于底部。导航置顶。路由由控制器处理且不以 URL 形式展示。故事板和视图提供展示层路由。起初从悬浮按钮 (FAB) 开始。布局和活动是主要目标区域，托管着辅助导航元素。通常与状态结合使用，支持用户向下钻取内容。URL 通常向下钻取到状态以及路由视图和嵌套内容。组件渲染使用内置或定制组件，构建时在应用程序中包含了详细信息。使用内置或定制组件，构建时在应用程序中包含了详细信息。可使用转换为原生对等组件的传统 HTML 组件。使用定制或非标准原生组件时通常需要特别注意。表单控件iOS 有自己专属的表单控件，如 Spinner。这些控件与其他平台不匹配，可能需要替换。Android 的表单控件中也有一些专属控件。选择元素和其他多数据组件与传统表单元素不匹配。HTML 组件，但此类组件需要在设备上进行测试（不能仅在模拟器上测试）。在各平台间匹配表单元素是最困难的任务之一。自定义元素元素可以有自己独特的字体、大小和布局要求。有关布局、缩放和交互的操作可能还需要遵循第三方标准及平台指南。元素可以有自己独特的字体、大小和布局要求。有关布局、缩放和交互的操作可能还需要遵循第三方标准及平台指南。一些第三方元素在 Web 和混合应用设置中工作方式相同，但通常需要封装或托管技术中的附加代码。字体和排版Apple 开发者网站中提供了 Apple 用户可使用的字体和排版。Android 可使用 Google 的 Material Design 及其他设备友好型字体和布局指南。通常情况下，谨慎的做法是使用预处理方法识别出正在使用的设备，让字体和排版与平台相匹配。
不论采用何种平台，也不论是采用原生还是混合方法，都应该尊重用户的共性。对于导航，最小直径触摸屏元素的标准一直是 48 像素（1.5 厘米或 2/3 英寸）。设备上的方向变化是适应性方式下直接处理的，而不是像混合开发那样可供选择。
更加常见的一个问题是，认为移动应用与传统或移动 Web 应用差不多。虽然 React Native 可支持访问 CSS Flexbox 样式，Cordova 为您提供了更熟悉的 Web 样式和构造，但 XCode 和 Android Studio 做不到，且原生语言也无法理解 CSS。此外，网站的相似度很高。而移动应用外观与网站相似时，您会发现它看起来不再像原生外观那样让人感觉温暖舒服。
在 Xcode 中，您可以创建和插入故事板、视图和组件，并使用界面构建器中的约束和对齐来定位内容。在混合环境与原生环境之间迁移时，您必须认识到，在原生应用程序创建环境中看到的内容，最终可通过编辑后的代码进行处理。这意味着在 React Native 或 Apache Cordova 中不论使用哪种结构，最终都将转换为 Xcode 中可用的相同结构（以 iOS 为例）。花一些时间来学习 Xcode，掌握上述内容，有助于改进您在其他工具中构造混合应用的方式。
Android Studio 与 Xcode 不同，它是可用于编写 Android 应用的几款应用程序中的一种。 iOS 情况下，要求该应用程序导出完成的应用。Android Studio 除了提供创建环境外，还提供了模拟器。在 GUI 中，您可以看到与 Xcode 类似的、用于呈现视觉元素的属性。有些属性的名称相同，如视图或按钮，但这两个系统并不直接兼容。相较于 iOS，Android 中要考虑的目标环境更多。模拟器有时并不会显示设备上项目的实际外观，而且也不是每种目标设备都存在模拟器。与混合方法通常只提供原生环境本身所提供的部分内容相比，使用 Android Studio 可以更全面地了解内置组件和可用的组件。
在设计全栈移动应用时，最先要考虑的问题就是用户体验。我们所奉行的 移动先行 或 离线优先 等准则，都引起了人们对这一问题的关注。2018 年，超过半数的访客使用移动设备访问网站，其中不仅包括智能手机和平板电脑，还包括可能使用 iOS 或 Android 操作系统的其他屏幕。
我们目前考虑的可能是 iPhone X 或 Pixel 3，但随着时间推移，我们关注的对象也会不断变化。不仅要迎合设备供应商的期望，而且还要确保应用品牌满足设备平台的要求，这一点十分重要。
每款应用都自带特质，远不只是平台上所表现出来的那样。让应用保持本色可能无法满足设备的要求，而忽略设备对应用设计的影响虽然能使应用保留本色，但却会将潜在用户拒之门外。
无论您是选择为 iOS 或 Android 设计和开发原生移动应用，还是选择同时为 iOS 和 Android 设计和开发跨平台应用，都需要列一张设计清单，解决移动应用开发中的相关问题。
本文翻译自： Designing full-stack mobile apps（2019-07-02）