截止到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）
在将我们的内容放在网页上之前，我们必须根据手机用户的交互习惯来决定每个元素的位置。一个简单的理由是大多数人只使用一只手来操作手机。
75%的人用拇指来操作移动设备，当画成红绿色区域时，看起来如下。
上图中的绿色区域显示的是移动屏幕上容易访问的区域。我们最重要的元素，如CTA，应该位于绿色区域，以便移动用户轻松访问。请记住，用户不是用鼠标来操作移动设备。到达红色区域需要付出努力和反复的操作，不管是自愿的还是不自愿的，用户都会注意到。
下面给出的动图显示了一个很小的设计改变（在我看来，这并不是一个移动优先的设计）所需要付出的努力。
移动优先设计的挑战
设计一个桌面风格的网页室，不需要对内容有额外的关注。屏幕很大，可以容纳任何你想添加的内容。同样的态度在移动优先的方式下是行不通的。当屏幕较小，我们只有不到3秒的时间来打动用户时，内容就需要简明扼要，切中要害。要想把大量的内容从屏幕上替换下来，一个好的解决方案就是使用图片、分层设计的方法或者通过更好的用户界面。
当我们在移动优先的设计中使用元素时，也应尝试这个策略，原因同样是屏幕空间较小。提供一个繁杂的屏幕，过多的元素分布在屏幕上，会让用户感到困惑，让用户错过CTA。这在网页设计中也被称为极简主义方法(或称简约主义)。极简主义的方法将过少的元素分布在屏幕上，给用户留下了相当大的留白空间。下图就是极简主义的设计。
但移动设计与移动优先的设计是不同的。最终，我们也要为桌面用户扩展这个网页。对我们的设计和内容进行解构，提醒我们为什么要从基本到高级，而不是相反（也叫优雅的退化）。如果一开始是桌面设计，团队要先进行头脑风暴会议，把大屏幕填满，然后再把它们一个个去掉，放到移动设备上。到那个时候，管理就变得太复杂了，很难限制我们的元素，需要花费太多时间和精力。因此，从最基本的设计开始，然后再往前走，这是移动优先设计策略的第一步。
UI和UX的优先级
移动优先的设计需要围绕着移动用户来提高我们应用的参与度和转化率。虽然动画和过渡效果看起来非常花哨，但用户体验远比显性元素更重要。我们的用户体验不需要太过华丽，但应该在用户没有意识到我们的意图的情况下吸引他们。例如，在网页上，元素应该是非常容易找到的。移动用户永远不应该费力地找到搜索按钮，传统的元素位置在这种情况下是可行的，比如导航栏总是被安排在角落里（左边或右边）。
优先考虑用户体验的另一个方面是扩大触摸目标，以实现舒适的交互。与桌面上的小尖箭头不同，我们用拇指触摸屏幕需要相当大的面积。移动优先的设计鼓励大面积的可点击元素，并在它们之间留有白色空间，以避免不必要的点击。
在向桌面端发展的同时，保持设计些参数不变也是一个不错的想法。企业已经开始保持更好的UI，包括在桌面上触摸的大框，这清楚地显示了他们移动优先的设计方法。放大元素还包括考虑到较小的屏幕尺寸，确定网页的最佳字体大小。字体大小更容易通过媒体查询切换，你可以按照下面的图表来决定在哪种情况下选择哪种大小。
请记住，字体类型也会影响字体大小在移动设备上的可见性和可读性。因此，最好是测试并找到你的完美尺寸，以上述图表为参考。
CTA位置
CTA是一个重要的按钮。它有助于实现转化目标，每个企业都希望用户点击该按钮，提高转化率。因此，它需要团队成员特别注意。CTA的位置是首先要仔细敲定的，提醒自己不要让我们的用户太辛苦。
CTA一定要在拇指能触及的地方(还记得绿色区域吗?)，而且也要在第一个呈现的屏幕上(折页上方)。
除了CTA的位置，CTA的信息和表现形式本身也是一门艺术，但我们还是留待下次讨论吧。
导航栏
与桌面设计相比，移动优先设计的导航栏更需要简化。虽然桌面设计也将导航栏改造成了不同的独特设计，但移动优先还在享受传统的汉堡包菜单风格。如今人们对此充满期待! 如果用户在登陆屏幕上找不到一个选项，他就会寻找那三条水平线，他知道这三条水平线会带他到他要找的地方。
下图展示了LambdaTest在两种不同设备上对导航栏的改造。
移动优先的方法有助于我们缩小导航菜单上的可用链接，因为长长的链接列表并不受欢迎。对于那些不能牺牲的人来说，比起用长长的链接列表恐吓用户，嵌套式布局似乎是更好的选择。此外，它还能使我们的表现形式保持干净，并鼓励用去繁就简的内容方式进行最小化设计。
防止繁重的页面元素
网页的加载速度已经成为网站设计中的一个成败参数。Unbounce的调查显示，70%的客户会受到网站速度的影响。他们的决定受到FCP或全页面加载的影响。渲染FCP（你网站上可见的第一件事）是一个更好的选择，因为用户有东西可以参与。
谷歌建议加载时间在2秒及以下。目前，这些网站大多没有遵循这一标准。高达57%的人离开一个需要三秒以上加载时间的网站。当页面速度高于预期时，转化率也会受到影响，直接影响业务。那么，我们该如何自救呢？
在为移动用户精心制作的网页上使用更轻的元素是第一步要去做的。如果存在图片，可能应该采用JPEG等无损算法格式，并且尺寸较小。将它们调整到较低的比例也有帮助，因为除了产品图片外，移动用户很少关注高质量的图片。使用CDN也可以帮助减少页面加载时间。对于一个WordPress网站来说，插件应该尽可能的简约和轻量。静态插件是一个好的开始，但最终，网页上的元素应该更轻，使用FCP的异步算法，并且应该向服务器提出更少的请求。
阅读更多文章，请关注：未定义变量
