用framer的网的原型设计

 罗斯芬里克 经过 罗斯芬里克  |  2016年9月1日

fr 是一个真正强大的工具,可以将任何东西原型,但如果你看一下Framer的画廊,你会很快注意到一些事情:

001

出于54个例子,其中48个是应用程序,4个用于Apple Watch,1个用于iPad,1对于Apple TV。 Framer甚至意味着'传统'网/桌面设计?

绝对地。

在IBM设计,我的大多数设计都是为企业桌面Web应用程序制作的。我使用的大多数设计师 草图 (包括我自己)。然后使用像这样的工具对这些草图文件进行原型进行调制 invision. 或在代码中重建和原型。作为设计团队的前端开发人员,我在设计和代码原型中有一个独特的位置。

在学习Framer的基础之后,我决定将其添加到我的工作流程中,它真的改善了我的设计过程。单个最强大的部分是能够将静态草图文件导入成帧器,并在相对较短的时间内将其变为真实的交互式原型。

有了这个,我不必在代码中重新创建设计的开始时花费宝贵的时间。我可以在利益相关者面前获得想法&用户更快。当项目更加凝固时,我可以保存编码。

002

在使用Framer后几个月这是我学到的一些事情:

003

 

计划和范围原型

在我开始一个项目之前,我决定了一些事情:

我想做什么?

原型是用于用户测试还是让想法概念化,是什么 所需的最低工作量 要了解自己的想法或从测试中获得洞察力?我不只是懒惰;),这有助于决定所需的必要的交互,动画和屏幕。

您在设计上花费的时间越多,您就越多。所附的越多,你要做必要的变化的可能性越小。

让我们用上面的原型作为一个例子。

我正在研究一个新的项目,我想探索任何基于卡的布局与“Shuffling”动画在各州中看起来像。我勾勒出了我想要制作并用作我的起点的基本想法。

004

如果你 看一看 在完成原型的原型中,每步只有第一张卡片。没有办法返回,没有悬停状态,最后一个屏幕中的内容不完整,它不是几乎像素完美。 没有人有必要让我的想法在那里,所以我没有花时间在内的时间。 Framer可以做任何事情,但这并不意味着你应该尝试在你的原型中做所有事情。

 

使用Andreas'Awesome ViewController模块创建UI流

你可以使用 ViewController. 素描插件在剪影中创建UI流程。快速将您的设计转换为可点击的原型而无需编写代码。

005
006

这对于向利益相关者展示您的工作并确实很简单。您可以介绍交互式原型或分享托管的FRAMER项目URL,而不是使用十几个艺术板或.pdf走过草图文件。

根据我尝试完成的内容,我最终可能会为悬停效果,动画和文本输入等物品编写一些代码,以获得额外的现实主义和交互性。同样,作为设计师,决定有必要在适当的情况下实现自己的想法和实现。

查看 andreas' 使用草图和货物文章创建UI流量 了解有关插件的更多信息。

 

微互动

007

我认为有一些原因是移动原型的原因是真正热心的成帧,其中一个是微互动似乎在手机上的常见情况。但它不一定是这样!我认为随着网络的设计者可以更好地让我们的工作更好地有更多的运动和成帧真的很擅长。

这只是我使用素描文件的快速交互的简单示例,我的团队上的设计师已经制作了。探索这样的互动需要几分钟。

 

当然,但为什么不仅仅是代码?

作为前端开发人员,我的许多项目最终将最终结束编码原型。然后,我用这个原型作为将前端代码写入产品的基础,沿着侧面工程工作。那么为什么不仅仅是从一开始的代码?

正如我之前提到的那样, 速度。 我可以快速肉体彻底通过从草图进入Framer来制作我或其他设计师的想法。对于设计过程的早期部分来说,您很棒的是​​您正在探索想法和快速实施反馈。我可以在代码中非常快地移动,但Framer将它带到一个下一个级别。

另一个原因是 自由。 简单的事实是,我在Framer中写的所有代码都将被抛弃实际上是伟大的。它允许我尝试我不会及说与我的代码更加松动的东西。我可以花15分钟探索一个想法,然后没有任何悔恨的垃圾。

 

一些技巧& tricks

您(或者您使用的设计者)可能必须必须以不同的方式设置草图文件。

  • 分组你的层。不在组中的图层被忽略
  • 避免使用组名中的空格
  • 剪影中的隐藏图层仍然导入,但它们的可见性将设置为false。
  • 为您的画廊创建简单的唯一名称
  • 您的画板末尾的减号将排除它以进口到成帧器中

在草图中展平出静止的任何层。这将改善项目的加载时间,在创建Heftier原型时特别伟大。您可以通过将星号(*)添加到图表中的图层的末尾来完成此操作。

008

值得花一些时间与您的团队中的设计师一起过度,以便在如何设置素描文件以最适合工作流程以及最适合团队的工作。

将草图文件导入Framer时,您将看到类似的东西:

# Import file "design" sketch = Framer.Importer.load("imported/[email protected]")

用$替换素描,您现在可以使用$来引用您的草图图层,从而保存自己写出数百次素描:

$ = Framer.Importer.load("imported/[email protected]")

使用“普通游标”代码段进行普通鼠标指针:

document.body.style.cursor = "auto"

我导入我的设计 @2x 然后按住它们,所以它们额外的清脆。请注意,这似乎与上面提到的ViewController模块相处得不到。

 fr .Device.contentScale = .5

素描和成帧器使用Web的不同默认画板/设备。草图使用1440.×1024虽然Framer使用1440×900. I opt for 1440×900.不要以为您的高度限制为900像素,您可以轻松地在FRAMER中创建可滚动页面。

 

[–这篇文章最初是 在媒体上发布,重新发布提交人的许可–]