移动优先设计指南：2023版

编者按：做设计的第一要务是什么？弄清楚用户在哪里使用。经过十多年的发展，几乎每个人兜里都有一部智能手机，而移动流量也已经占据了web流量的半壁江山多。优先考虑移动端的呈现自然也要成为设计师的指导原则。本文介绍了移动优先设计的一些指南与最佳实践，文章来自编译。  移动优先是一种从移动端开始产品设计过程的设计方法。首先设计网站或应用的移动版本。然后基于移动版本适配平板电脑版或桌面版本。换句话说，我们首先针对智能手机屏幕尺寸（4.7 至 6.5 英寸）进行设计，然后再转向更大的显示器和屏幕。 “移动优先”并不是每年突然冒头又黯然褪去的无数移动应用设计趋势之一。对于专业的网页和应用设计师来说，这是一种基本的设计实践，跟移动应用设计最佳实践类似，比方说导航要清晰简洁。为什么？因为这种方法优先考虑的是移动用户的需求。 2012年那时候，全球的web流量只有10.88%来自手机。 2023年，这个数字已高达56.86%！过去四年的时间里，移动搜索也占到了谷歌搜索总量的 50% 以上。简而言之，互联网用户采用移动优先已经无可争议。 为了跟上他们的步伐，网页设计师与 UI UX 设计咨询专家必须采取同样的做法：自己也得移动优先。在这篇文章里，我们会分享我们对移动优先设计的一些深层理解。我们将回顾这种设计方法的基本原理，并分析它们在当今背景下的重要性。 ### 移动优先的设计理念 我们将指导你如何将移动优先设计方法的最佳实践应用到公司的网站或应用之中。但在此之前，我们需要澄清一些有助于建立起“移动优先”数字平台的设计概念。 #### 响应式网页设计 响应式网页设计（RWD）是一种网页设计技术，可以自动适应所有设备上的不同屏幕尺寸，用来创建灵活的网站。 响应式网页设计具有布局灵活、流式网格的特点。设计元素可以根据被浏览的设备按比例自动调整大小、重新排列。 不管你用什么设备访问响应式网站或web应用，后者在所有设备上往往都有不错的观感，并且感觉易于使用。 #### 自适应网页设计 RWD 是自适应网页设计 (AWD) 的现代版。 AWD 是一种比较旧的设计方法，会针对不同的设备采用独立的布局，但不够灵活。 “不灵活”是指设计布局、网格和元素不会自动调整来适应不同的设备。 这种设计方法下，设计人员必须为网站的桌面、平板电脑和智能手机版本手动创建不同的设计布局。这项额外的工作导致自适应网站很难维护。因此，这种网页设计方法已被 RWD 取代。 #### 渐进式推进（Progressive Advancement）  渐进式推进这种设计方法是指先设计产品的最基本版本。然后逐渐将新的复杂性一层层叠加到设计中。随着时间的推移，应用/网页设计会变得更加精致，有层次。但是，东西都是从简单做起的。 渐进增强（Progressive enhancement）被广泛认为是移动应用设计最佳实践之一。应用设计师先做简单但可行的产品设计，只包含基本功能，但保证这些简单的设计可以在多个平台上使用。然后，设计人员再进行可用性测试，收集反馈，从而改进设计。 渐进式增强设计方法也正在逐步在网页设计领域攻城略地。这是因为品牌更喜欢简单但可用的网页设计，希望从一开始设计出来的网页能适配所有的浏览器以及屏幕尺寸。其设计师会根据用户需求的不断变化，有策略地叠加设计复杂性，从而让网站不会过时。 #### 优雅降级（Graceful Degradation） 优雅降级与渐进增强正好相反。在这种设计方法下，原本功能设计得很复杂且全面的网页或应用要做减法，去掉部分功能或内容。这种情况下就不是从零开始设计，而是把功能齐全的设计拆卸，剥离部分功能，让网页、应用与其他设备或平台兼容。  假设你正在设计一个可与最新 Chrome 浏览器完美适配的 Web 应用。但是，你需要它也能在老式得 Opera 浏览器正常工作。为此，你需要优雅降级，简化现有设计。 说了这么多，为什么这四个设计概念对移动优先设计很重要呢？因为移动优先的设计方法是建立在渐进增强与响应式网页设计的基础之上的。 在“移动优先设计”里，我们总是先从移动端开始设计产品得。然后再逐渐将新功能添加到设计里。此外，大多数移动优先设计都是用 HTML 创建的。而 HTML 网站与应用可以适用所有浏览器。 基于 HTML 的应用或网页设计相对简单，品牌可以轻松入手，然后逐步完善，让它们变得更加复杂。因此，从零开始设计移动优先的网页或应用时，设计师总是考虑采用渐进增强的方法。 但是，采用移动优先方法的设计师未必总会把响应式网页设计（RWD）放在考虑的范畴之内。在 RWD 下，设计人员会运用灵活的网格、布局以及媒体查询。这些灵活的元素可以检测用户设备的屏幕尺寸，并相应对网站布局做出自动调整。 移动优先设计的重点是只针对移动设备设计网站或应用。在开始设计时，设计只针对小屏幕进行优化。是，设计可能会有一些 RWD 元素。是，之后可能会适配更大的屏幕。 但是，设计的主要重点是为移动用户设计出友好的界面。这就是这种设计方法在现代产品设计当具有中极其重要地位的原因。 ### 为什么“移动优先”对现代产品设计至关重要 用户日益更多地用移动设备来访问互联网是“移动优先”设计方法的主要驱动力。 2016 年，移动互联网地使用量超过了桌面使用量。从那之后，移动互联网就一骑绝尘了。据估计，到 2025 年，网络流量将有 73% 出自移动设备。 到那时，不采用“移动优先”的网站和应用设计就得升级，要么就会被扔进垃圾桶。另一方面，移动优先的设计方法可以帮助网站或应用从发布之日起就吸引到更多的用户。除了有增加曝光度的潜力之外，移动优先的方法本身还有一些内在优点。  移动优先设计对现代产品设计至关重要 对于设计师来说，从很小的地方开始，然后逐渐向上扩展，要比从一张巨大的画布开始，然后裁减东西要简单得多。以下是采用移动优先方法的其他一些内在优点： #### 让用户访问关键信息 在针对小屏幕进行设计时，设计师没法把尽可能多的信息塞进去。他们必须建立起信息的层次结构，并且只能向用户展示最重要的内容。 换句话说，移动优先设计可以帮助企业领导突出对自身业务最重要的那些信息。更重要的是，它可以帮助企业推出简单但信息量大的数字产品，为有可能成为潜在客户的用户提供所需的信息。 #### 错误更少 更少代码意味着复杂性更小、错误更少。如前所述，渐进增强是移动优先设计的核心，当你从小而简单的事情做起时，检测和防止错误就会容易许多。 #### 提供简单但有效的用户体验 移动优先设计就是让网站和应用尽可能易用。无缝、无摩擦的交互是这种设计方法的关键。 #### 谷歌排名 谷歌用特殊的移动机器人来抓取搜索结果。对于适配移动设备的网站，这些机器人给予了更高的排名。 2021 年，谷歌曾对页面体验进行了一次升级，排名上朝着移动体验好的更加倾斜，这使得移动设备友好型设计变得更加重要。通过采用移动优先的方法，设计师和品牌可以让自己的应用和网站对谷歌友好。 #### 成本效益 品牌也喜欢移动优先的设计方法，因为这种方法具有成本效益。设计复杂的桌面网站需要大量资源。每个错误都会付出高昂代价，并且始终存在客户不喜欢最终设计的风险。在移动优先设计里，一切都从小处做起，因此不存在重大风险或缺点。 设计师不需要花费大量的金钱或时间来为移动网站和应用创建设计原型。就算设计失败了，推倒重来也很轻松。而如果设计成功，他们就可以逐步给自己的设计叠加更多的复杂性。 ### 移动优先有什么缺点吗？ 移动优先设计这个概念并非完美。在桌面尺寸的设计方面经验丰富的老派设计师经常声称，移动设计这种做法相当受限，几乎没有创造力的发挥空间。此外，很多品牌都不喜欢雇佣更多的资源来应对移动优先的挑战。 可是，移动优先设计的优点要远远大于缺点，尤其是当你设计的产品主要是由移动用户使用时。如果你正在设计此类产品，下面我们将告诉你如何在设计过程中运用移动优先的方法。 ### 如何在产品设计中运用移动优先的做法？  前面我们已经了解了移动优先设计的基础知识，接下来我们就来了解一下设计师如何将这种方法付诸实践吧。 * 假设有一支设计师团队，成员包括Web 设计师和 UI 设计师，他们接到一个任务，要为一家餐厅设计一个网站（或 Web 应用）。这支团队打算采用移动优先的方法。 * 他们需要做的第一件事是评估目标受众（移动用户）对餐厅网站的期望。 * 鉴于我们是为移动用户设计的，所以内容可呈现的空间很小。因此，他们在原始设计中只放置了与餐厅相关的关键细节。 * 营业时间、地点、联系方式、菜单：这些是目标用户与餐厅取得联系所需的主要详细信息。 基于这些假设，移动网站的基本设计可能会是下面这样子的：  简单餐厅应用的线框图，上面呈现了一些基本要素。 看到了吗？这个移动网页设计草图是不是很简单？基于这种简朴的精神，让我们分解一下设计师在设计时的简单步骤，看看他是如何实施移动优先法的吧。 #### 内容优先级 在web和app设计领域，“移动优先”这个词大致可以解读成“内容优先”。正如你在上面的餐厅例子所看到的那样，确定哪些内容对网站/应用最重要是移动优先设计师第一步要做的事情。 这是要放置到移动网站或app主要页面上的主要内容，是需要马上被识别出来的。要想用户一下子看到，最好的办法是用电子表格把app或网站所有要呈现的内容都列出来，进行排名与排序。这是一个例子：  专业的移动优先设计师会用这样的电子表格给不同类型的内容（标题、行动号召、图像等）赋值。然后，再确定哪些内容应优先呈现并放置在主app或网站页面的顶部。 为什么要放在顶部？根据尼尔森诺曼集团的一项研究显示，移动用户会把 74% 的浏览时间花在移动app/网站主页的顶部部分。 如果你希望移动优先的设计给人留下深刻的第一印象，那么将相关且引人注目的内容放置在主页顶部至关重要。 #### 识别可视化层次结构 一旦根据内容可带来的用户价值对内容进行排序和排名后，接下来就要建立可视化层次结构。什么是可视化层次结构？基于相关性、显著度以及对注意力的吸引度来确定可视化设计元素的优先顺序。 比方说，假设你正在为一所大学设计一个移动网站。这个产品设计最重要的目标是： * 向用户介绍学院及其品牌 * 让学生注册大学的邮件列表 * 让用户可以轻松访问重要链接和页面 基于这些信息，我们可以创建以下可视化层次结构：  移动设计的可视化层次结构。 以下是这个移动优先网站可视化层次结构的主要特征： * 大学的logo放在顶部。 * 主要的品牌信息位于屏幕中央。 * 主页上有一个简单的注册过程。 * 内容信息位于屏幕底部。 * 有个一个简单的小部件，让用户可以即时访问所有相关链接。 当然，建立可视化层次结构并没有什么特定方式。但是，这个例子展示了大多数有竞争力的设计师的做法，研究这个可以看出他们是如何将自己认为与目标用户最相关的元素进行编排来制定设计的。 #### 画出线框图，然后按比例放大 画出移动线框图，然后设计移动app或网站的布局。接着，把线框图当作扩展的模型。初始线框图应体现初始产品的概念，并且： * 简要概述app或网站主页的结构 * 在主页上提供信息架构的简明概述 * 定义用户流 * 不需要关注样式、颜色、图形以及其他非功能性特征 以下是一个教育移动网站级web app的线框图示例：  用于移动设计的线框图设计。 #### 触控设计 人类手指不像鼠标光标那样具备“像素级的精确度”。移动优先设计师必须牢记这一点，所以按钮要设计得更大，给超链接提供足够的空间，并确保所有交互设计元素周围留出足够的空白。屏幕的每个“触摸目标”的宽度至少应该有 45-57 像素，这样用户的手指才可以放得进去。 #### 针对移动直觉的设计 移动用户习惯了某些行为和做法。比方说，在使用app或访问网站的时候，他们希望在屏幕的右上角或左侧看到紧凑的汉堡菜单（三行菜单图标）。这就是他们的“移动直觉”。 移动优先设计师必须利用这种固有的用户直觉，为用户提供他们想要的东西。使用经过反复测试的设计元素、选项卡栏、导航功能和内容布局。 #### 回避大型媒体文件 移动优先的web或app设计的所有内容都应针对小型手持屏幕进行优化。高清照片、复杂图形以及高清视频在此类屏幕上的显示效果不佳。此外，这些内容还可能导致网站和app加载缓慢。所以，要坚持使用更简单的图像和logo。 #### 在真实设备上测试原型 设计师从线框图阶段进展到原型创建阶段并不需要太多时间。原型设计完成后，必须在手机上进行测试。要测试app/网页的访问，确保加载速度快且易于导航。 测试设计的其他功能并创建更正列表。目标受众的成员必须参与测试过程。他们的反馈应该用来对app/网站设计进行必要的改进。 ### 移动优先设计的最佳实践  移动优先设计团队已经确定了许多可以帮助他们简化工作的实践。我们已经在上面也讨论了其中的一些做法。让我们再次回顾一下这些移动优先的最佳实践： * 优先考虑内容而不是其他设计元素 * 让所有页面元素保持一致 * 用直观的导航确保用户获得自己想要的东西 * 用干净的代码、轻量的媒体文件，确保app/网站能快速加载 * 整个网站都要运用大胆且引人注目的行动号召 (CTA) * 在真实设备上测试原型并让最终用户参与测试 如果你需要更多指导性的蓝图，可看看[谷歌的移动优先设计指南](https://developers.google.com/search/mobile-sites)，[苹果的人机界面设计指南](https://developer.apple.com/design/human-interface-guidelines/)。以下是有关移动优先设计指南其他一些有用资源： * [微软流畅设计系统（Fluent Design System）](https://www.microsoft.com/design/fluent/#/) * [Atlassian 设计系统](https://atlassian.design/) * [Uber设计系统](https://brand.uber.com/guide) * [Shopify 设计系统](https://polaris.shopify.com/) * [IBM Carbon 设计系统](https://carbondesignsystem.com/) * [Salesforce闪电设计系统（Lightning Design System）](https://www.lightningdesignsystem.com/) 通过这些工具，你可以了解更多有关移动友好数字产品的设计艺术。 ### 最后思考 移动设备已经接管了互联网。如果你的app或网站没有针对移动未来而设计，就没法与针对智能手机进行了优化的竞争产品相媲美。希望这个指南可以为新兴的移动优先设计世界提供可靠的介绍。利用本指南创建移动友好型的数字产品吧，这可以极大地扩大你的品牌影响力！ 译者：boxi。