为什么我在每次设计评审前检查屏幕分辨率

我在这个问题的两边都待过，回想起来仍然让我难受。我在我的 27 英寸 5K 显示器上审查一个网站设计——清晰、通透、间距完美。我签署了批准，热情洋溢。客户在他们的 13 英寸 MacBook Air 上打开它，第一反应是一切都"太大太挤了"。我钟爱的主视觉部分需要滚动才能看到标题。我精心安排的三栏布局在他们屏幕上变成了混乱的一团。

从那时起，我开始在每次设计评审之前检查屏幕分辨率。

问题在于，我们大多数设计师都有不错的显示器。我们在高分辨率的大屏幕上工作，因为我们需要空间。但我们的用户是在 15 英寸笔记本、10 英寸平板、6 英寸手机，偶尔还有 32 英寸超宽屏上看同一个设计。如果我们只在自己的设置上审查，我们就是在井里设计。

我现在的流程是机械化的。在我分享任何设计进行反馈之前，我切换三种分辨率预设。第一，1920x1080，仍然是全球最常用的桌面分辨率。第二，1440x900，覆盖大多数 MacBook 屏幕。第三，1366x768，在 Windows 笔记本上出奇地常见，也是布局最容易崩溃的分辨率。

我还会以 100% 缩放看设计。缩小来看完整布局很诱人，但那不是用户看到的方式。如果你在标准笔记本屏幕上需要滚动才能找到行动号召按钮，你需要修复布局，而不是缩放级别。

真正的意外总是出现在极端情况下。在 1366x768 下，在我的 5K 显示器上感觉很慷慨的内边距变成了浪费的空间。在 1920x1080 下，看起来平衡的列突然让内容感觉被拉伸了。我抓到过导航栏在我从没想到要检查的宽度下崩溃。

我还会看浏览器 chrome——书签栏、标签栏、开发者工具面板。你的用户有这些。你的全屏预览没有。一个在全屏下看起来完美的设计，当浏览器 chrome 占据它那份像素时，其主要按钮可能会被推到折叠线以下。

缩放级别也很重要。我检查 100%、125% 和 150%。一些用户因为喜欢更大的文字而增大默认缩放，这改变了布局的阅读方式。如果你的设计在 125% 缩放时崩溃，你有问题。

如今我的设计审查清单从分辨率开始，而不是美观。布局第一，颜色第二，排版第三。它已经拯救了我无数次，避免了我无法计数的尴尬发布。

而那个用 13 英寸 MacBook 的客户？我发给他们的第二个版本完美适配他们的屏幕。他们十分钟就批准了。