最近不少朋友问我，想在 Mac 上做交互原型，到底该从哪个工具入手。我一般都会先推荐 Framer for Mac 交互原型设计器。原因很简单，它既能像画图一样拖拖拽拽把界面搭出来，又能加上真实的点击、跳转、动效，做出来的东西直接能发给同事或客户点着看。不过新手第一次打开 Framer for Mac 交互原型设计器，确实容易有点懵，面板多、概念多，不知道先点哪里。这篇就按我自己的使用顺序，把新手快速上手的关键几步讲清楚，跟着走一遍基本就能做出第一个能点的原型了。
先搞懂 Framer for Mac 交互原型设计器是干嘛的
别被“交互原型设计器”这几个字吓到。说白了，Framer for Mac 交互原型设计器就是一个让你在电脑上把 App 或网页的样子画出来，并且能设置点击后发生什么事的工具。比如你画一个登录按钮，设置点击后跳到首页，那预览的时候点一下真的会跳。它和纯画图工具最大的区别就在这，能模拟真实操作。新手刚开始不用追求做多复杂，先理解“画布、图层、组件、交互”这四个词就够了。画布就是你干活的区域，图层是画布上每一个元素，组件是可以重复用的模块，交互就是元素之间的动作连接。
安装完先别急着画，把界面摸一遍
打开 Framer for Mac 交互原型设计器之后，左边一般是图层和页面列表，中间是画布，右边是属性面板。顶部有插入、预览、分享这些按钮。我建议新手花十分钟就做一件事：随便拖几个矩形和文字到画布上，然后点预览看看效果。别小看这个动作，很多人一上来就想做完整页面，结果连预览在哪都找不到。另外提醒一句，Framer for Mac 交互原型设计器有网页版也有 Mac 客户端，新手用 Mac 客户端会更顺手，快捷键和系统贴合得更好。如果你之前用过 Sketch 或者 Figma，那上手会更快，因为逻辑有点像。
从组件开始搭，别一个个复制
这是我踩过的坑。刚开始做原型的时候，我一个按钮复制了十几遍，后来改个颜色要一个个改，烦死了。Framer for Mac 交互原型设计器里的组件功能就是解决这个问题的。你只要把一个按钮做成组件，后面所有地方都用这个组件，改一次全都跟着变。新手做导航栏、按钮、卡片这些重复出现的东西，一定要养成用组件的习惯。操作也不难，选中元素后右键创建组件就行。另外，Framer for Mac 交互原型设计器自带一些常用组件库，比如按钮、输入框、导航条，直接拖出来改改就能用，省时间。
交互设置其实就那几步，别想复杂了
很多人卡在交互这一步，觉得要写代码。真不用。Framer for Mac 交互原型设计器里做交互，基本就是选中一个元素，然后拖一根线到另一个页面或者另一个状态，再选触发方式，比如点击、悬停、拖拽。然后设置动画效果，淡入淡出、滑动、缩放，选一个就行。新手最容易犯的错是交互太多太乱，一个按钮点一下跳三个地方。建议一开始只做最简单的：点击跳转页面，点击切换状态。等熟悉了再加动效。预览的时候如果没反应，先检查是不是没连对图层，或者触发方式选错了。这个我遇到过好几次，排查一下就好了。
预览和分享，做完一定要自己点一遍
做完原型不预览，等于白做。Framer for Mac 交互原型设计器右上角有个预览按钮，点一下就能在窗口里模拟真实操作。我习惯做完一个页面就预览一次，看看有没有点不动的按钮或者跳错的地方。确认没问题后，可以生成分享链接发给别人，对方在手机或电脑浏览器里就能直接点，不用装任何东西。这个功能对新手来说特别友好，拿去给领导或者客户看，反馈来得快。另外，Framer for Mac 交互原型设计器还支持导出一些切图资源，不过新手前期先不用管这个，先把交互跑通再说。
新手常问的几个小问题
第一个，Framer for Mac 交互原型设计器难不难？说实话，比纯代码简单多了，但比纯画图工具要多花点时间理解交互逻辑。第二个，要不要先学设计基础？有一点更好，没有也能做，Framer for Mac 交互原型设计器里很多模板可以直接套。第三个，做出来的原型能直接变成 App 吗？不能，它主要是用来演示和验证想法的，不是最终产品。第四个，Mac 配置要求高吗？正常近几年的 Mac 都能跑，不吃配置。第五个，有没有免费版？有，新手用免费版先练手完全够，等需要团队协作或者更多页面再考虑升级。
总的来说，Framer for Mac 交互原型设计器对新手算是比较友好的，关键别一上来就想做大的。先拖几个方块，连一个点击跳转，预览一下，成就感就来了。然后慢慢加组件、加动效，用不了几天就能做出像模像样的可点击原型。你要是刚接触，就按上面这个顺序走一遍，遇到卡住的地方多预览多试，比看一堆教程管用。
喜欢 
高兴
鬼脸
呵呵
无聊
伤心
