我们在手机上设计，而不是在 Figma 中设计

第一次在真正的手机上打开精心设计的 Figma 模型时，总会有一些东西让你大吃一惊。

文字比你想象的要小。点击目标之间的间距比你想象的要近。整个布局看起来比在显示器上更显拥挤——因为在显示器上，你看到的是孤立的设计；而在手机上，你看到的是它与你手部其他动作同时呈现的效果。.

我们仍然使用设计工具。它们有助于快速探索创意、比较不同方案，并确保设计元素的一致性。但我们不会将它们视为设计获得批准的场所。.

我们的规则

任何设计决策，在实际手机上运行至少48小时之前，都不能算作最终定案。不是在模拟器上，也不是从笔记本电脑镜像显示的画面。而是在手机上——握在手中，在日光下，在黑暗的房间里，在地铁上，在屏幕关闭又重新点亮时，手机就放在口袋里。.

经过那次测试后，大多数决定都会发生改变。字体大小会增加一个号。内边距会稍微放宽一些。那条优雅的细线会变成2像素的粗线，因为在阳光明媚的公交车站，1像素的字迹根本看不清。.

如何将设计应用到设备上

最快捷的途径通常是先制作一个粗略的版本，而不是一个精雕细琢的原型。一个显示真实数据、真实字体并支持真实滚动的界面，比一个完美的可点击模拟图更能让我们了解应用的实际表现，因为它的运行方式与应用本身一致。对于小幅修改，我们只需将其整合到测试版本中，当天就能安装到自己的手机上。.

真实数据与真实设备同样重要。一个只包含三个名称整齐有序的条目的原型，无法说明当用户面对长列表、非常长的名称，或者目前尚无任何内容时会发生什么。因此，我们使用杂乱的内容进行测试：一份包含多种文字脚本的宾客名单、包含十几个停靠点的行程，以及一个数月来不断添加植物的花园。.

超越手机

这一原则同样适用于我们的其他平台。Windows 应用是在普通笔记本电脑屏幕上以正常缩放比例进行测试的，而不仅仅是在大尺寸外接显示器上。 浏览器扩展程序会在真实的工具栏中进行测试，弹出窗口会显示在真实的网页之上。在 Mac 上运行的 iPhone 应用则会在可调整大小的窗口中进行测试。每种界面形式在原型与实际效果之间都存在其特有的差异。.

手机教会你什么

这教会了你谦逊。在原型设计工具中看起来很精致的设计，在实际设备上却显得单薄或令人困惑。那些原本觉得很巧妙的手势，当你尝试单手操作时却显得笨拙。在高刷新率显示器上看起来流畅的动画，在三年前的 Android 设备上却显得卡顿。.

我们的失误

过去，我们在设计稿在设备上运行之前，总会将其打磨得非常精致，然后花上好几天时间为那些在实际操作中显然行不通的决策辩护。这种精雕细琢让设计看起来似乎已经定型，但实际上并非如此。现在，我们故意让设计稿保持粗糙的状态，并尽早将其移植到设备上，这样改变主意所付出的代价就很小。.

其取舍在于，早期版本看起来不够完善，要避免仅凭外观来评判它们，需要一定的自律。但在第一周就修正布局，远比在产品发布后修正要省事得多。.

这并不是坏消息。这只是你的作品所依托的真实载体。你的设计越早与这个载体结合，最终效果就越好。.