In this article
一个定价页面可以使用吸引人的颜色，但仍可能难以阅读。一张卡片将续订说明放在价格上方，另一张卡片将其隐藏在长功能列表下方，第三张卡片则将其按钮移出屏幕。访客不得不进行布局考古，而不是比较计划。
建筑节奏在这里是一个有用的设计类比：重复重要的关系，以便人们可以找到自己的方向。这是一个类比，而不是证明整洁的网格能提高销售的证据。以下是一个经过演示的界面示例，带有故意说明性的尺寸，设计师或开发人员可以对其进行调整，而无需购买新的组件库。
从关系开始，然后选择间距比例
走一遍页面支持的决策流程。在主机比较中，买家需要了解工作负载、重复费用、限制、支持和下一步操作。这些关系应在每张卡片中保持清晰。在尝试让装饰性边缘对齐之前，先重复信息顺序。
在此示例中，使用 8 像素的基准，以及 8、16、24 和 32 像素的间距标记。这些是设计选择，而不是可访问性标准或普遍最优解。将标签与值保持 8 像素的距离，相关事实之间留出 16 像素的间距，使用 24 像素来分隔不同的组。在操作前使用更强的分隔，告诉读者比较已经结束。
按用途命名标记，例如字段间距、组间距和卡片内边距。开发人员应能够一次性更改卡片内边距，而不是在十七个几乎相同的声明中寻找。如果翻译后的标签需要另起一行，让组自然扩展。一致性意味着可预测的关系，而不是强迫每句话都进入相同的矩形。
一个有用的初步测试是去除图片和颜色。是否还能分辨哪个价格对应哪个计划，以及其限制在哪里？如果层次结构消失，说明布局过于依赖装饰。
实例演示：三种主机卡在桌面和移动设备宽度下的布局
想象一个虚构的三种主机配置比较。这是一个说明性的设计练习，而不是 Enigma 价格列表或客户成果。每张卡片包含计划名称、预期工作负载、计费信息、包含的资源、重要的排除项和一个操作。
在 1200 像素的内容宽度下，三列之间各有两个 24 像素的间距，每列有 384 像素的可用空间。两侧各留有 24 像素的内边距，每张卡片有 336 像素的内容空间。在 390 像素的视口下，16 像素的外边距留下 358 像素的卡片，或在相同内边距后留有 310 像素的内容。这些计算揭示了文字实际有多少空间。它们不会告诉浏览器忽略缩放或访客的字体设置。
在移动设备上卡片堆叠时，保持相同的信息顺序。将重复费用、计费周期和任何设置费用放在一起。将续订条件放在相关价格旁边，而不是依赖几屏之外的脚注。将排除项放在相关功能附近。
在桌面端，网格可以对齐主要组，同时允许文本换行。在移动设备上，移除固定卡片高度，让每个计划占据所需空间。测试最长的计划名称和最长的翻译后的操作标签。不要通过隐藏重要文字来解决溢出问题。如果访客无法找到隐藏的条款，即使截图很干净，也无法进行有效比较。
发布前使用这五个步骤进行布局审查
首先，不要看其他卡片，只看一张卡片。写下访客购买了什么，排除了什么，以及该操作的作用。任何需要提示、另一张卡片或销售电话才能回答的问题，都应该有更清晰的标签。
其次，扫描每张卡片上的相同信息。资源限制或支持安排应出现在可预测的位置，并使用可比较的单位。如果某种配置需要不同类型的信息，应解释差异，而不是制造一个看似整洁但具有误导性的行。
第三，测试窄视口、浏览器缩放和更长的文本。注意被截断的标签、按钮覆盖在文本上、隐藏的价格以及普通内容的水平滚动。真实文本比三行占位符文本更能作为压力测试。
第四，使用键盘。通过链接、选择器和可展开内容跟踪焦点指示器。展开的面板应与控制项保持连接，不应遮盖计划的价格或将下一个操作困在其下方。用触摸设备重复检查；仅靠悬停无法承载关键信息。
第五，在恢复视觉效果后审查决策。明亮的强调色是识别操作还是与其他六个明亮强调色竞争？保留有用的强调，去除装饰性噪音，并记录视口、主题、控件和预期行为中的任何问题。这会为开发人员提供一个可复现的问题，而不是那种永恒的工单：'看起来有点不对。'
检查对比度和重新流式布局，而不是依赖磨砂截图
磨砂卡片会随着其后的内容变化。在海军蓝上读起来良好的白色文字，当浅色插图移动到其下方时可能会消失。增加模糊度可以柔化背景，但不会提供足够的对比度。在重要文字后使用足够不透明的表面，然后在两种主题中测试实际渲染的组合。
WCAG的最低对比度标准规定普通文本的对比度比至少为4.5:1，合格的大文本对比度比至少为3:1。大文本在指南中有特定定义；标题并不因为是bold就自动豁免。该期刊的色彩对比检查器可以比较两种纯色，但不能认证整个页面或评估移动的半透明表面。
重新流式布局的指导是另一个有用的测试。普通垂直滚动内容在宽度相当于320 CSS像素时应保持可用，而不需要同时在两个方向上滚动。一些真正二维的内容有例外，因此应根据比较表的目的进行评估，而不是通过裁剪列来避免滚动条。
节奏也有其局限性。重复的卡片不应隐藏有意义的差异，匹配的视觉位置不应覆盖合理的文档阅读顺序。从语义标题、标记控件和清晰的文本开始。将间距视为对结构的支持。然后请某人完成实际的比较任务，注意他们在哪里犹豫，并修改设计。一致的网格是一种工具；它帮助某人做出的决策才是重点。
进一步阅读
下一步
在重新设计整个网站之前，先在其中一个定价或服务板块进行测试。保存视口大小，确定最长的内容，并捕捉重要文字背后的最浅背景。修复一个重复的关系，然后重复比较任务。
如果您的网站上出现相同的问题，Enigma 可以帮助将发现转化为共享组件和间距系统。带来屏幕和您的访客需要做出的决策。有用的起点是一个清晰的简报，而不是另一个渐变色会完成销售的承诺。