Framer是一款現(xiàn)代化的網(wǎng)頁(yè)設(shè)計(jì)工具，可以幫助開發(fā)者快速創(chuàng)建交互式原型和動(dòng)畫效果，也可用于UI/UX設(shè)計(jì)和網(wǎng)站建設(shè)，并且無(wú)需編寫代碼，簡(jiǎn)直是技術(shù)小白的福音！本文將主要介紹Framer軟件的功能特點(diǎn)和一些基本的使用方法。
Framer官網(wǎng)地址：點(diǎn)擊訪問(wèn)
一、Framer功能和特點(diǎn)介紹
1、原型功能豐富
Framer提供了豐富的原型功能，可用來(lái)制作豐富的交互和動(dòng)畫功能。例如支持自由的添加各種觸發(fā)事件、動(dòng)畫和過(guò)渡效果等，能夠快速實(shí)現(xiàn)生動(dòng)、流程、高度可定制的交互效果。
2、支持AI生成Web網(wǎng)頁(yè)
Framer利用AI生成技術(shù)，根據(jù)用戶的描述生成網(wǎng)頁(yè)初始版本。用戶提供的細(xì)節(jié)越多，生成的網(wǎng)頁(yè)效果就越好。
3、自由形式畫布
Framer可以在自由格式的畫布上設(shè)計(jì)網(wǎng)站，例如添加動(dòng)畫和交互元素。另外設(shè)計(jì)界面、圖層編輯、代碼編輯器和交互預(yù)覽等方敏，F(xiàn)ramer和其他主流的設(shè)計(jì)工具（如 Sketch、Figma）和開發(fā)工具（如 React、Angular）實(shí)現(xiàn)了無(wú)縫集成，方便設(shè)計(jì)和開發(fā)團(tuán)隊(duì)之間的協(xié)作，提高了工作效率。
4、支持代碼自定義
Framer可以通過(guò)編寫代碼來(lái)自定義設(shè)計(jì)元素和動(dòng)畫效果，因此能夠更靈活地實(shí)現(xiàn)自己的設(shè)計(jì)想法，提高設(shè)計(jì)質(zhì)量。
5、跨平臺(tái)使用
Framer還支持Windows、macOS和Linux等多個(gè)操作系統(tǒng)，因此可以在不同的平臺(tái)上使用Framer。
6、搜索引擎優(yōu)化
Framer隨時(shí)一個(gè)網(wǎng)頁(yè)設(shè)計(jì)工具，但也支持SEO和性能優(yōu)化，為上線前后節(jié)省了大量的時(shí)間。
二、Framer組成部分
1、圖片導(dǎo)出工具
從Photoshop導(dǎo)出設(shè)計(jì)圖實(shí)際上是使用了Adobe ExtendScript腳本。Adobe ExtendScript腳本語(yǔ)言可以操縱photoshop執(zhí)行一些自動(dòng)化操作。Mac下作者用Framer.app包裝了腳本代碼，windows下則直接提供了腳本 http://www.framerjs.com/static/downloads/FramerPS.jsx.zip。導(dǎo)出工具不僅導(dǎo)出了圖片，還生成了一個(gè)上面目錄結(jié)構(gòu)的完整工程，用瀏覽器打開index.html就可以了。
在原型設(shè)計(jì)的過(guò)程中，可能會(huì)需要多次導(dǎo)出圖片，而導(dǎo)出工具不會(huì)覆蓋app.js文件，所以不用擔(dān)心你寫的代碼會(huì)被覆蓋。它只會(huì)在沒(méi)有文件的情況下才自動(dòng)生成。
2、JS類庫(kù)
JS類庫(kù)提供了View(視圖)、animation(動(dòng)態(tài)特效)、event(事件綁定)等類，可供使用者調(diào)用。
3、app.js
Framer默認(rèn)生成app.js文件。在使用Framer的過(guò)程中，除了用Photoshop設(shè)計(jì)原型圖之外，這里也是花時(shí)間最多的地方。前面準(zhǔn)備的素材就看你怎么組織了。視圖的創(chuàng)建、切換、動(dòng)態(tài)特效、手勢(shì)、事件綁定，都可以在這個(gè)文件里完成。
三、Framer定價(jià)
購(gòu)買地址：Framer官網(wǎng)
1、個(gè)人版
2、商業(yè)版
四、Framer使用步驟
1、用Photoshop軟件設(shè)計(jì)原型圖；
2、用Framer.app從Photoshop中導(dǎo)出設(shè)計(jì)圖；
3、在app.js里寫視圖展示及交互代碼，可以加各種特效；
4、用瀏覽器打開index.html文件就可以查看和調(diào)試了。
Framer項(xiàng)目的代碼結(jié)構(gòu)是這樣的：
/
app.js //【重要】用來(lái)寫視圖和交互代碼
framer/ //Framerjs的框架，app.js里用到的功能都是它提供的
framer.js //framer核心文件
framerps.js //根據(jù)views.app.js生成frame對(duì)象
views.app.js //根據(jù)psd文件的結(jié)構(gòu)導(dǎo)出的文件，用來(lái)記錄圖片屬性和圖層關(guān)系(用json格式表示)，app.js中要用到
images/ //從photoshop導(dǎo)出的圖片都在這里
index.html //預(yù)覽時(shí)的首頁(yè)-
廣告合作
-
QQ群號(hào)：4114653
