不要为移动设计

移动-首先，解决了移动计算革命早期设备的限制。那时候它很有意义，即使到了今天，它在很多情况下也能很好地工作。尽管它一成不变地创造了两类设备-移动设备和台式机设备-这两类设备往往带有许多其他假设：

最新的移动设备比普通的笔记本电脑或台式机要强大得多。同时支持触摸和鼠标的混合设备越来越多。平板电脑是移动的还是台式的？或者它们完全是一个新的类别？

设备功能方法是一种渐进式增强方法，您最初针对的是功能较差的设备，然后在它们变得功能更强时进行增强。在许多方面，这正是移动优先正在尝试做的事情，只是效果较差。听我解释。

Canva是我的日常工作产品，它是一种相当复杂的东西。不久前，我们还在处理选择框架-选择元素时出现的控制柄。

之前，我们有一个桌面版和一个移动版--这两个版本让触控变得很友好--而且在很大程度上工作得很好。虽然大约在同一时间，我们也在开发一些东西，后来变成了Canva设计实验室。

从大多数标准来看，它都是一款台式设备--它有一个大屏幕，可以连接到WiFi，而且它位于一个位置--然而，它的屏幕是支持触控的。这一分类意味着大触摸屏使用的是桌面版本的选择框，该版本已针对鼠标使用进行了优化。

我们的目标是移动设备或台式机，而实际上我们应该瞄准的是该设备的特定功能。在这种特殊情况下，应该是指针，它本质上映射到触摸或鼠标。

这是一个相当极端的例子，但在更多的情况下，你会遇到类似的问题。下面是处理这些问题的一些互动示例和实际解决方案。

在移动优先设计时，最常考虑的是视口的大小。最常见的目标属性是视口宽度，其他属性包括高度、纵横比和设备方向，即纵向和横向。

首先要注意的是，视口不一定等于屏幕大小。偶尔会出现这种情况，但在大多数情况下，UI会占用空间，窗口没有使用整个屏幕，或者其他一些原因，比如安全区域。以您当前的情况为例：

为不同大小的设备设计的常用方法是使用断点。不过，大多数人在使用断点时犯的错误是将它们放在与普通设备大小(375px、768px、1024px等)完全匹配的位置。

当九月来临，苹果决定发布新的iPad时，这就变成了一场维护的噩梦--他们目前有4款不同尺寸的iPad在售。

如果我们退后一步，看看今天市场上所有的设备，在常见的设备类别-手机、平板电脑、笔记本电脑和台式机-周围都有相当明显的集群。它位于群集之间的空隙中，我们应该在其中放置断点：

David Gilbertson撰写了一篇精彩的文章，内容是关于使用CSS断点的100%正确方法，其中深入讨论了这个主题。

接下来是指针。典型的解释是触摸与鼠标-它甚至反映在指针媒体查询规范中-尽管现实更像是一种光谱：

当谈到指针精确度时，大多数平台都有关于最小目标大小的建议，这是一个很好的起点，尽管其他因素也值得考虑。

Spotify和地图等应用的汽车模式就是一个很好的例子。尽管设备相同，但上下文却大不相同。注意力集中在路上，设备使用的距离比通常情况下更远，再加上开车时通常会出现颠簸和跳跃，这意味着要准确点击屏幕上的元素要困难得多。要解决此问题，CAR模式会增加常用操作的大小：

即使是屏幕的类型也可能是个问题。现代智能手机上使用的电容式触摸屏比其他类型的触摸屏具有更高的精确度-我敢肯定，你们以前都曾在飞机和自动取款机上遇到过这种情况。

作为一个小实验，试着在下面的不同圆圈中拖动。您可能会注意到，有些需要付出更多努力，甚至是不可能在您的设备上四处移动：

每个指针都支持简单的点击或单击事件，但大多数支持更高级的事件-例如右键单击、双击或滑动。

通常，设备(特别是设备的大小)用于检测对这些事件的支持。当我们说移动设备是触摸式设备时，我们可能是对的。但很多笔记本电脑也是如此。

很多设备都支持触摸，但不包括移动设备，还有更多的设备支持几种不同的指针类型--iPad的最新更新包括对鼠标和触控板的一流支持。

一种精确得多的方法是使用各种指针API中的一种，这些API揭示了有关当前指针类型的大量信息。单击或轻触下面的按钮，查看有关您的指针的信息：

理想的解决方案是设计成适合能力最差的指针的需要，然后在必要时，随着精确度和功能的提高而逐渐增强。

值得一提的是，虽然不是所有的高级事件都可以在每台设备上使用，但通常还有其他交互事件可以作为合适的替代方案。请记住以下几点：

键盘实际上只有两个选项可用：虚拟键盘或物理键盘。大多数设备都支持其中一种，尽管同时支持这两种功能的设备越来越多--尽管从来不会同时支持这两种功能。例如，如果连接了蓝牙或智能键盘，iPad就不会显示虚拟键盘。

物理键盘不会带来太大问题，尽管虚拟键盘在出现时会占据宝贵的屏幕空间。不幸的是，目前还没有很好的方法来检测虚拟键盘的存在，也没有准确测量结果键盘的大小。有一些老套的解决方案-例如检测视口大小的更改-只需记住，任何解决方案都是不可靠的，应该在不同的设备和平台上进行测试。

我最初确实提到过，键盘只有两种选择，不过严格说来并非如此。如果你想在这里进入一个怪异而美妙的兔子洞，这是一个关于键盘选择的很好的指南。

设备、传感器和硬件是事情开始变得有趣的地方。它们包括陀螺仪、GPS、触觉引擎、相机、指纹传感器和环境光传感器。

这些传感器和硬件的使用范围很广，从对用户的微妙增强，比如来自触觉引擎的少量反馈，一直到打开GPS的整个产品类别。

有许多不同的API可以从浏览器中访问这些传感器和硬件。你可能会遇到的一个例子是地理定位API，它可以用来定位你的当前位置。该API支持的不仅仅是定位，请单击或轻拍下面的按钮以了解更多信息：

不幸的是，在各种平台和浏览器上对这些API中的许多API的支持并不是很好，所以请谨慎操作。大多数都在积极开发中，因此值得及时更新可用的浏览器API，以获得更多有趣和即将到来的选项，如触觉反馈和环境光传感器。

网络速度不一定是设备的限制，但它会极大地影响设备的使用方式。检测网络速度的方法有多种，精确度各不相同。

最简单的检查就是看看你是否在线。Navigator.onLine API返回一个布尔值，检查您是否连接到网络。

通过让浏览器获取已知大小的媒体，然后测量已用时间，可以检测速度。还有一个实验性的网络信息API，它提供了连接类型等方面的更多细节。

遗憾的是，这两种方法都不是特别准确，也不是得到广泛支持，因此最好的方法是采取网络速度可能很慢且不可靠的立场。因此，只发送必要的内容，并始终压缩文件和资产。

同样值得澄清的是，移动连接不能保证低速，就像有线或WiFi连接不能保证高速一样。Wifi和移动连接之间的相对速度差异在世界各地差异很大：

还有更多的情境因素会影响速度--我敢肯定，你们以前都在机场或咖啡馆用过摇摇欲坠的WiFi连接。

移动优先的意图是正确的。对于普通的网站或应用程序来说，移动优先方法和设备功能方法之间的结果大致相同。

不过，随着设备版图的不断融合，分类将继续变得模糊。当你给你的站点引入更多的交互性和更复杂的功能时，单一的方法开始瓦解。

这只是这两种方法之间的一个微小的心态转变，但却是一个重大的转变。它是为触摸屏而设计的，它将与鼠标配合使用，为慢速连接优化性能，它将为更快的连接而工作，它将为小屏幕而设计，至少它将在更大的屏幕上工作。

自从我们在Canva开始采用这种方法以来，它意味着更少的代码、更少的设计和更少的测试--所有这些都会带来更好的结果。而这是我认为我们都可以落后的。