什么是前端开发中的 mobile first 策略

在 2010 年的世界移动大会上，谷歌 CEO 埃里克施密特提出，设计师在产品设计中应该遵循“移动优先”的原则。 “移动优先设计”是什么意思？ 它为什么如此重要？ 如何制作？ 我将在下面的部分回答这 3 个问题。

两个相关联的概念：

1. Responsive Web Design (RWD)

响应式网页设计是一种网页设计方法，它使网页能够自动适应不同设备的屏幕，以人们感觉舒适的方式显示内容。 这大大减少了用户浏览网页时的平移、缩放和滚动等操作。

2. “Progressive Advancement” & “Graceful Degradation”

这两个概念是在响应式网页设计之前提出的。 为了使网页或应用程序界面在不同设备上合理显示，设计人员提供了针对不同终端的定制版本的产品。

Progressive Advancement 是指我们在设计产品时，首先为相对较低的浏览器（如手机上的浏览器）构建一个版本。 此版本包括最基本的功能和特性。 之后，我们倾向于平板电脑或PC的高级版本，在基本版本的基础上增加交互、更复杂的效果等，以获得更好的用户体验。

而“优雅降级”则相反，从桌面这样的高级端开始产品设计，并在一开始就构建一个功能全面的版本。 然后设计师通过裁剪一些功能或内容，使产品与移动端兼容。

如果 UI/UX 设计师从桌面版本开始产品设计，他们将不可避免地希望利用高级端的大部分优势。例如，光标鼠标支持的悬停效果；高清图像和复杂图表，只有在最近有带宽时才能正常显示。就这样，设计师们努力完成一个令人惊叹的桌面版本，却发现它很难被移动端采用，除非他们放弃很多漂亮的想法。如果是这样，移动端版本将更像是一个事后的想法，一个被淡化的不完整的产品。

但如果我们以移动端产品设计为出发点，在带宽、屏幕尺寸等限制下，设计师自然会抓住产品的关键点，走向功能优先的简洁利落的产品。当平台扩展到平板电脑或个人电脑时，设计人员可以利用这些先进端的独特功能，逐步加强产品。这可能是渐进式进步策略被广泛使用的主要原因。

“移动优先”正是“渐进式推进”的规则。

“移动优先”，顾名思义，就是从限制较多的移动端开始产品设计，然后扩展其功能，打造平板或桌面版本。

除了上面提到的渐进式进步对抗优雅降级的胜利之外，我们有更多切实的理由相信移动优先原则在产品设计中很重要。 也就是说，这些年来全世界移动使用的爆炸式增长。

更多Jerry的原创文章，尽在："汪子熙":