截止到2020年10月，互联网已经连接了46.6亿人，共占世界总人口的59%。值得关注的数据是移动用户及其在互联网世界的崛起。在46.6亿互联网用户中中，有42.8亿是移动互联网用户。这个数字提醒我们，移动用户是多么的重要，以及为什么我们要把他们放在优先位置。尽管这些数字令人惊讶，但随着全球移动用户和移动销售的突然增加，大家都看到了这一点。作为UI/UX设计人员，我们根据移动用户转变设计方法和开发策略已经有一段时间了。其中，移动优先设计就是这样一种设计范式，它见证了我们对全球移动互联网用户的承诺。以移动用户为出发点，围绕移动用户的兴趣而展开的设计策略。本篇文章以移动优先设计为中心，探讨移动优先设计开发和测试的复杂性，以及它如何对我们的业务产生积极影响。

什么是移动优先设计（Mobile-First Design）？

移动优先设计是指在规划和开发网站的过程中，首先考虑到移动用户。这种开发方法论改变了一直以来的桌面优先的方式，以应对全球移动互联网用户的激增。移动优先设计是一种渐进式的设计方法，在这种方法中，我们慢慢向更全面的设计迈进。

渐进式的设计方法从满足移动设备要求的基本设计开始。这个基本设计包括网页上的最小元素，消除所有移动用户不感兴趣的东西。从这里开始，我们再进一步增加一些元素，增加设计的复杂性，同时坚持现代网页设计技术和移动友好性。这样的过程一直持续到我们满意为止，并在我们的应用程序中实现了所有必要的功能。

如今，移动网站贡献了52%的互联网流量，一个移动优先的网站可以帮助我们提升整体的用户参与度，并使我们在搜索引擎上获得更高的排名。随着移动优先索引的开始，搜索引擎也不断改进他们的算法，这反映出移动用户的重要性。移动优先设计并不是一项复杂的任务，而是一系列小的开发变化，可以帮助你的网站在移动端完美呈现，让用户满意。开发一个移动优先设计的网站，我们需要吸收一些习惯，并记住一些小技巧，有效地测试应用。

如何进行移动优先的设计

开发移动优先设计的历程大致可以分为以下几个阶段。

线框图（Wireframing）

Wireframe在移动优先设计中的重要性类似于我们建造一栋新建筑时的地图。线框提供了一种架构方式，说明事情将如何发展。有了线框图，不仅是技术团队，与项目相关的每个人都可以了解应用的高层视图。

客户和分析师可以在需求清单上打勾，而开发人员则可以了解这些元素将如何展示到应用程序上。

使用响应式框架（Responsive Framework）

响应式框架是移动优先设计开发的关键一步。响应式网站会随着其呈现的环境，如屏幕大小、平台或方向而自我调整。移动设备在市场上没有一个固定的尺寸。Screensiz上铺天盖地的设备尺寸列表证明应用媒体查询（media query）和元标签（meta tag）并不能适用于所有设备。响应性不仅是适应设备的屏幕，也是适应用户的体验。例如，图片是网页的重要组成部分。即使用户可能会略过内容，但他们至少会瞥一眼图片。但在缩小网页长宽比的同时，我们却在不知不觉中把图像主体从图像中聚焦出来。

简单地调整图片大小可能会带来一定的风险，因为图像可能会完全失去其重要性。一个好的响应式网站会照顾到这一方面，并在较小的屏幕上呈现不同的低质量但裁剪的图像。

响应式框架将响应式需求牢记于心，并且内置了增强网站响应性的功能。有了响应式框架，开发者不需要照顾到每一件小事，可以专注于主要的问题。

遵循拇指法则（Thumb Rule）

在将我们的内容放在网页上之前，我们必须根据手机用户的交互习惯来决定每个元素的位置。一个简单的理由是大多数人只使用一只手来操作手机。

移动优先设计的挑战

设计一个桌面风格的网页室，不需要对内容有额外的关注。屏幕很大，可以容纳任何你想添加的内容。同样的态度在移动优先的方式下是行不通的。当屏幕较小，我们只有不到3秒的时间来打动用户时，内容就需要简明扼要，切中要害。要想把大量的内容从屏幕上替换下来，一个好的解决方案就是使用图片、分层设计的方法或者通过更好的用户界面。

当我们在移动优先的设计中使用元素时，也应尝试这个策略，原因同样是屏幕空间较小。提供一个繁杂的屏幕，过多的元素分布在屏幕上，会让用户感到困惑，让用户错过CTA。这在网页设计中也被称为极简主义方法(或称简约主义)。极简主义的方法将过少的元素分布在屏幕上，给用户留下了相当大的留白空间。

优先考虑用户体验的另一个方面是扩大触摸目标，以实现舒适的交互。与桌面上的小尖箭头不同，我们用拇指触摸屏幕需要相当大的面积。移动优先的设计鼓励大面积的可点击元素，并在它们之间留有白色空间，以避免不必要的点击。

在向桌面端发展的同时，保持设计些参数不变也是一个不错的想法。企业已经开始保持更好的UI，包括在桌面上触摸的大框，这清楚地显示了他们移动优先的设计方法。放大元素还包括考虑到较小的屏幕尺寸，确定网页的最佳字体大小。

请记住，字体类型也会影响字体大小在移动设备上的可见性和可读性。因此，最好是测试并找到你的完美尺寸。

阅读更多文章，请关注：未定义变量