0

在高层次上，我们试图了解 Framer 渲染具有动态高度的图层的最佳方式。

我们正在将我们的设计从 Sketch 导入 Framer。我们正在构建一个简单的问答页面。每页有 1 个问题，用户将完成 20 个问题，一个接一个的问题页。

这是设计的粗略版本： 具有动态高度部分的页面设计

页眉、页脚和提示的高度始终相同。问题和答案部分会根据我们要呈现的问题和答案而变化。

我们看到了三种可能的解决方案：

  1. 创建 20 个不同的草图模板/卡片，每一个代表不同问题的呈现（例如，卡片 1 将列出问题 1 和答案 1）。当第一个问题得到回答时，我们渲染下一张草图卡以显示问题 2 和答案 2。为了清楚起见，我建议每张卡片都包含所有内容：页眉、问题、提示、答案和页脚。
  2. 有 1 个草图模板/卡片，它是页眉、问题 1、提示、答案 1 和页脚的完整呈现。有一堆也导入 Framer 的迷你模板/卡片层。每个问题都有一个层，每组答案都有一个层。当 Framer 尝试加载问题 2 时，它会加载 question1 的完整呈现与 answers1（以及页眉、页脚等），并将包含 question1 的层与 question2 交换，并将包含 answers1 的层与 answers2 交换。有一个问题，question2 小于 question1，所以现在问题和提示层之间有很大的空白。因此，以编程方式遍历 Framer 中的图层并使用 align 正确对齐它们。
  3. 有几个小层（标题、问题 1、问题 2、...、问题 20、提示、答案 1、...、答案 20、页脚），并使用 Framer 通过逐层添加每一层来构建页面。还要编写 CSS 以完美匹配设计像素。

问题：我们对#2 的问题是有很多前期工作来重新定位“所有层”。据我们所知，Framer 会复制所有草图图层，并根据它们的绝对位置以及 x 和 y 坐标来定位它们。由于所有层都是绝对定位的，因此必须遍历每一层并根据它们相对于彼此的定位方式重新应用对齐。这看起来确实很笨拙，据我们所知，Framer 中没有帮助函数来帮助实现这一点。当然，我们可以编写一些通过父树并重新对齐兄弟树的东西，但这感觉太容易出错，而且不符合使用 Framer 构建原型的精神。

我们对 #3 的问题是，这感觉就像是在构建网站，而这不像是原型设计。由于我们无法直接导入像素完美的草图设计，因此需要大量像素推送。我们希望在设计更改时快速更新原型。我们预计设计会经常更改，因为我们正在进行大量用户测试并获得很好的反馈。每次更改设计以“重新设计”我的原型时，这种方法都会让我花费大量时间来搅动。

想法？我们是否遗漏了一些明显的东西？感谢您的阅读并感谢您的时间。

4

2 回答 2

0

我不知道卡片周围有多少铬，如果你想在 Sketch 中定义图层之间的边距，但是编写一个函数来对齐具有可变高度的图层列表实际上并没有必须那么难：

stackLayers = (layerList, startY = 0, spacing = 0) ->
    currentY = startY
    for layer in layerList
        layer.y = currentY
        currentY = layer.maxY + spacing

完整示例：http: //share.framerjs.com/sztcm5e9l4li/

如果您保持包含卡片的 Sketch 图层的名称相同，您可以从 Sketch 重新导入，即使尺寸发生变化，重新定位也会继续工作。

因为 Sketch 文件中组的结构树包含在 Framer 中，所以您可以将要堆叠的所有图层放在一个组中，并调用stackLayers(sketch.nameOfGroup.children, 0, 10)将“nameOfGroup”的所有子层堆叠在一起。

于 2016-08-31T12:31:13.250 回答
0

我们最终用方法#2 解决了这个问题。总结：交换层并重新定位下面的所有层，还检查所有父层并根据需要调整大小（例如，如果新层小于我们要交换的旧层，我们需要缩小父层由差异）。

一般的做法是：

  • 使用 TextLayer 创建一个包含新问题文本的新图层
  • 测量原始草图问题文本层和我们新的 TextLayer 之间的大小差异
  • 根据 #2 中计算的差异调整父层的大小
  • 删除原始草图层
  • 在与原始草图图层相同的 x 和 y 坐标中插入新的 TextLayer

代码要点：https ://gist.github.com/MrNickBreen/5c2bed427feb8c701d5b6b1fbea11cb4

特别感谢 Niels 的建议，帮助我解决了这个问题。

于 2016-10-01T00:54:55.310 回答