在开发移动优先设计的过程中，前一篇文章介绍了从基本的最小化设计开始为移动用户设计，并在不妨碍用户体验的情况下增加复杂度。但是测试对一个应用程序来说同样重要的。测试一个应用程序可以指出隐藏的bug和功能，要么是不被人们喜欢，要么是交互行为不当。让我们来看看如何通过测试去打磨我们的移动优先设计。
测试工具
与在程序开发中使用响应式框架类似，测试工具不仅为网站呈现到移动设备上创建了渲染环境，它也提供了许多必要的调试功能，这对于移动优先的设计来说是极其重要的。
考虑到这些，我最近在ProductHunt上发现一个这样的工具：LT浏览器。 LT浏览器是一款专门为移动网页测试和网站的响应式测试而制作的浏览器。它提供了45种以上的屏幕尺寸，供测试人员在上面渲染网站。有了这样的工具，我们可以使用内置的调试器轻松找到bug，并充分利用热重启(hot reload)功能也能帮助我们进行开发。通过内置的集成和性能报告，我们可以分析性能并与队友轻松分享。
测试和调试（Test & Debug） - 用户通过使用LT浏览器，他们可以在旅途中测试和调试他们的网站，其内置的开发者工具方便又使网站无缝跨设备。
网络节流(Network Throttling) - 这是LT浏览器提供的一个神奇而独特的功能，利用它，用户可以检查网站在高和低网络带宽下的运行情况。
本地测试(Local Testing) - 本地测试允许开发者在网站上线之前就对网站进行测试。通过本地隧道，他们可以在本地系统的45个以上的设备上查看网站。
性能报告(Performance Report) - 为了分析最终的网站性能，开发人员和测试人员可以查看基于google灯塔(google lighthouse)的性能报告，这将帮助他们改变网站的某些方面，以便在移动和桌面设备上获得更多分数。
测试工具可以帮助开发者提高工作效率。工具的选择是测试人员的个人自由，但它们绝对应该在整个测试中发挥作用。
跨浏览器测试
跨浏览器测试是在不同的目标浏览器、操作系统和分辨率上分析网站的过程。对于一个移动友好型网站来说，要想成功，它应该在移动屏幕上呈现出预期的效果，而不用担心使用的平台和浏览器。这可以通过LambdaTest等跨浏览器工具进行测试。
作为一个测试者和开发者，手动承担这些工作绝对不是一个好主意。有大量的操作系统、浏览器和分辨率组合，将花费太多精力来安装和测试。更好的方法是选择支持移动浏览器和操作系统的在线跨浏览器测试工具，或者像上面讨论的LT浏览器这样的移动专用浏览器。
那么，我们在跨浏览器测试过程中要找什么呢？
跨浏览器测试要寻找网页元素的问题，以及是否支持这些元素。功能测试是测试的另一个环节，而跨浏览器测试则指出了跨浏览器的兼容性问题。例如，如果你在网页上使用了CSS子网格，它们可能无法在Google Chrome 62版本上呈现。JavaScript库和其他代码也是如此。有了浏览器矩阵在手，我们在进行测试后就可以放心了，我们的用户不会像在网页上出现元素崩溃时那样感到困惑。
验证HTML和CSS代码
网页上bug并不都是浏览器的错，有时程序员也会犯错! 由于网页是由浏览器渲染或解析的，而不是编译的，所以错误和警告并不能阻止网页的加载。现在我们已经进行了跨浏览器测试，但还是找不到问题，缺失元素一般是语法错误。当我们从移动优先发展到完整的桌面设计时，这样的语法错误和不遵循W3C网页标准会让我们陷入困境。
HTML和CSS代码是非常容易验证的。有很多工具可以为我们完成这项工作。其中一些是Validator.nu，W3CMarkup Validator和W3C CSS Validator。
网络性能(Network Performance)
在我们测试网页的页面加载速度时，一个主要的障碍就是网络。网络速度慢，意味着网页下载速度慢，页面加载时间多。对于一个移动优先的设计来说，在进行测试的时候，覆盖各类用户是极其重要的。其中一部分是网络较慢的用户，如3G网络占北美网民的12%。现在北美只有4%的人使用5G网络。想象一下，对于网络基础设施较差的国家，这个数字是多少！
网络性能可以在真实设备上通过切换连接或通过提供此类功能的在线工具进行测试。LT浏览器有一个网络节流功能，可以在不同的连接上测试网站，这有助于同时进行响应式或跨浏览器测试。
A/B测试(A/B Testing)
A/B测试是一种变异测试或分割测试的类型，它向不同的用户群展示网页的不同变异。然后，网站所有者分析两个版本的性能，并选择性能更好的一个版本。对于一个移动优先的设计应用，我们可能会按照教科书上的每一个规则完美地开发出一切，但最终的判决是由用户决定的。如果用户没有按下那个闪闪发光的CTA按钮，我们需要通过了解用户想要什么来解决这个问题。
在A/B测试中，一个很流行的问题是，我们在哪里创造变异？我们不能把网页上的每一个元素都乱七八糟的给用户创造五十个变体。这样会对业务产生不良影响。为了了解我们哪里出了问题，哪些元素需要调整，我们可以选择Heatmap功能。Heatmap可以让网页应用主看到用户对网页的参与度，以及他们忽略了哪些部分。
案例：一个著名的A/B测试案例是EA体育的《模拟城市5》不同页面布局导致销售额由此提高了40%。
改进后的设计（同时增加了40%的销售量）
实用性测试（Usability Test）
完成我们的移动优先网页设计的最后一步是将它展示给真实用户，并接受他们的反馈。A/B测试固然好，但即使你看到了网页的热图，你也无法与真实用户交谈，问他们为什么不按CTA按钮？可用性测试就能弥补这个漏洞。
可用性测试的对象是真正的用户，他们应该是应用的目标受众。例如，你不能要求一个诗人去查看一个编码网站吧？一旦这些用户被选中，我们就会要求他们或者记录他们的会话、屏幕，并让他们大声说出他们的想法。有时候，测试人员也可以和用户坐在一起，通过提问来做他们的笔记。有时，我们可以只要求他们填写一张有各种选项的表格。无论你用什么方式，可用性测试都是很重要的，它可以发现隐藏的bug，而这些bug在移动优先的设计中是很难发现的，因为这本身就是一个棘手的事情。
为什么移动端很重要？
我们对移动优先设计及其开发技术的分析会让你觉得：为什么要做移动优先设计？移动端存在有那么重要吗？
早在2019年，谷歌Search Console就开始弹出的如下信息：
移动优先设计在今天非常重要，谷歌认为移动优先索引是主要的搜索索引技术，并提高移动搜索上的可见度，而移动搜索占互联网流量的52%!
更好的搜索引擎
移动优先的设计为移动用户服务的。因此，谷歌意识到我们有一个非常适合移动用户的网站，并使我们在智能手机产生的查询中更加明显。因此，我们的排名提高了。更好的谷歌排名吸引了其他企业，因为我们更明显，如果我们愿意，可以在我们的网站上为他们做广告。由于用户一般不会记住网站的名称，所以谷歌搜索将帮助我们产生流量和转化。
更高的转换率
移动优先的设计将确保降低跳出率。当跳出率很低，人们对你的网站真正感兴趣时，他们会坚持下去，也会经常回来。鉴于CTA的定位正确，所有的资格标准都得到了满足，移动优先的设计将推动你的转化率提高，直接产生更好的参与和目标建立。因此，你将从你的应用程序中获得稳定的业务。
覆盖面大
当企业在搜索引擎排名上可见，并建立了移动优先的设计时，企业也会产生大量的受众群。庞大的受众群是任何企业的优势。他们需要较少的努力来参与，因为已经建立了信任。另一方面，看到你的应用有更大的参与度，你也可以引入其他功能和服务。这样强大的基础对企业来说是一种营销红利。
更好的市场占有率
满足以上讨论的三个要求，直接导致了更好的市场表现。尽管移动优先设计被推荐给每个企业，但目前还很少见。移动优先设计尚未成为网站开发的标准，选择它将使你在竞争中保持领先。谷歌搜索关键词在查询结果中显示你的链接，会增加你在竞争对手中的市场占有率。他们不仅要更加努力地工作才能超越你，而且如果他们还在进行桌面设计的话，他们可能还需要重组他们的设计。
更好的市场存在意味着更好的口碑，关于你的发生，功能和即将到来的亮点。这样的存在直接导致了更好的收入和更好的未来。
阅读更多文章，请关注我的公众号 ：未定义变量
