Framer是一款革新的交互原型設(shè)計(jì)工具，它推崇將編程和設(shè)計(jì)互相結(jié)合，讓它們做各自擅長的事，而不同于以往只有視覺化設(shè)計(jì)的原型工具。
我一直關(guān)注Framer的動(dòng)態(tài)，可以說他們軟件的每一次更新都能給我一些驚喜。尤其是最近的一次重大更新——新增了設(shè)計(jì)模式——雖然能在Framer中進(jìn)行的視覺化操作有限，但卻在真正意義上的實(shí)現(xiàn)了“design with code”。這種原型設(shè)計(jì)方式不僅能夠讓編程和設(shè)計(jì)各取所長，也可以增進(jìn)設(shè)計(jì)師對編程的了解，對于設(shè)計(jì)師和工程師的協(xié)作有很大的促進(jìn)作用。
在國外很多諸如Google、Facebook的巨頭公司都開始使用Framer進(jìn)行交互原型設(shè)計(jì)，但是在國內(nèi)卻使用者寥寥。就我個(gè)人身邊經(jīng)歷的一些事情來看，大概有這么幾個(gè)原因：
1、設(shè)計(jì)師對編程存在認(rèn)知誤區(qū)，容易“望碼生畏”。
2、Framer暫時(shí)只有Mac版，Windows需要自己搭建環(huán)境。
3、Framer使用過程中需要不斷查閱文檔，而其文檔只有英文版。
為此，我覺得應(yīng)該做些什么讓國內(nèi)更多的設(shè)計(jì)師嘗試這種全新的設(shè)計(jì)方式，而做一個(gè)Framer的中文站（framer.juuust.com）作為中文資料的補(bǔ)充是最好的方式。去年夏天開始我就著手做這件事，因?yàn)橥涎影Y直到今年才算完成。
最開始我的想法是，直接按照官網(wǎng)的風(fēng)格，將其內(nèi)容翻譯成中文。但后來事實(shí)證明這種做法效率太低，拷貝別人的代碼并修改它就好像給別人養(yǎng)孩子，過程極其坎坷。僅完成一個(gè)首頁就花了半個(gè)月，更讓人奔潰的一件事是，在我做完首頁沒多久Framer官網(wǎng)改版了！而且還是重大改版！我要是跟著改就前功盡棄，繼續(xù)做下去也沒了參考，陷入兩難境地。
我停了下來，開始從新思考這件事。我覺得我應(yīng)該從自己的視角出發(fā)，重新設(shè)計(jì)制作這個(gè)網(wǎng)站，而不是完全照搬過來。于是我開始從一個(gè)設(shè)計(jì)師的角度去思考這件事?，F(xiàn)在我回憶一下其中一些重要的階段。
結(jié)構(gòu)簡化
Framer官網(wǎng)內(nèi)容較多，導(dǎo)航里就包含了作品集、入門、資源、文檔、博客、社區(qū)等。但Framer中文網(wǎng)的首要作用是其中文資料的補(bǔ)充，交流區(qū)重要性還沒那么大，可以在以后考慮。因此，我決定讓Framer中文網(wǎng)的第一個(gè)版本中先包含以下四個(gè)部分：首頁、入門、參考和文章。
首頁將通過一個(gè)動(dòng)畫效果對Framer軟件進(jìn)行介紹；入門對應(yīng)官網(wǎng)的learn部分，通過一些基本概念的介紹讓設(shè)計(jì)師能夠平穩(wěn)地過渡到編程語言；參考則是文檔部分，設(shè)計(jì)師在工作過程中遇到問題可以隨時(shí)查閱；文章是我自己翻譯或原創(chuàng)的相關(guān)文章，不定期的發(fā)布，作為補(bǔ)充。
首頁設(shè)計(jì)
首頁很重要，我希望通過首頁能夠讓剛接觸Framer的人對它有個(gè)基本的認(rèn)識(shí)。官網(wǎng)在首頁用了很大的篇幅介紹Framer的各種特性，但在這里我只想體現(xiàn)“design with code”這個(gè)特點(diǎn)。
我開始在本子上畫草圖，最終確定了由代碼編輯轉(zhuǎn)場到logo變換的動(dòng)畫。代碼編輯就是讓大括號中的文字最后的光標(biāo)閃動(dòng)，模擬coding效果。而logo變換的靈感則來自于官網(wǎng)改版倒計(jì)時(shí)的時(shí)候首頁的logo變換，但我沒有和他們一樣，而是自己重新設(shè)計(jì)了一個(gè)小動(dòng)畫。
Framer的logo是一個(gè)字母“F”，我發(fā)現(xiàn)把這個(gè)字母的幾部分拆分后再重新組合可以變成一個(gè)長條，將這個(gè)過程反向，就是現(xiàn)在看到的效果。
多端自適應(yīng)
由于網(wǎng)站結(jié)構(gòu)功能都較為簡單，我采用了自適應(yīng)的方案，一套代碼適應(yīng)所有端。在參考和入門這里，桌面端采用的是側(cè)邊菜單，移動(dòng)端采用的則是彈出式菜單。
目前來說，自適應(yīng)能夠減少代碼量，也易于維護(hù)。但是隨著以后內(nèi)容逐漸增多可能會(huì)考慮重新分開設(shè)計(jì)桌面端和移動(dòng)端。
使用指南
對于初學(xué)Framer的設(shè)計(jì)師，我建議先將入門四個(gè)章節(jié)仔細(xì)看完并充分理解。Framer團(tuán)隊(duì)很貼心，知道設(shè)計(jì)師的代碼學(xué)習(xí)成本較高，所以用了較大的篇幅從Framer基礎(chǔ)、如何導(dǎo)入、原型預(yù)覽和Coffeescript這四個(gè)部分對設(shè)計(jì)師進(jìn)行引導(dǎo)。這些內(nèi)容我翻譯過后最大的感受就是：他們都盡量避開技術(shù)語言，使用簡單易懂的話語來引導(dǎo)設(shè)計(jì)師從設(shè)計(jì)語言平滑過渡到編程語言。
在這里，你可以理解Framer圖層的概念、滾動(dòng)和頁面組件是什么、導(dǎo)入設(shè)計(jì)圖時(shí)需要注意的事項(xiàng)、原型預(yù)覽是如何工作的、編寫代碼時(shí)的一些基本概念等。這部分內(nèi)容較多，建議設(shè)計(jì)師花一個(gè)星期左右的時(shí)間盡可能地理解它，再進(jìn)入實(shí)際操作階段。我發(fā)現(xiàn)很多設(shè)計(jì)師容易忽略這一點(diǎn)，沒有對Framer做過多了解就開始上手，導(dǎo)致遇到很多問題不知怎么解決，其實(shí)大部分問題都可以在這部分找到答案。
而參考文檔，則可以先泛泛的讀一遍，知道大概的內(nèi)容結(jié)構(gòu)，在實(shí)際使用中需要什么查什么，慢慢就會(huì)熟練起來。
目前文檔部分我只翻譯到“設(shè)備”那一部分，爭取每天都翻譯一點(diǎn)并及時(shí)更新。因?yàn)槲叶际前凑兆约旱睦斫夥g的，所以還請大家不要盡信，帶著懷疑的態(tài)度來閱讀。遇到不清楚的以官網(wǎng)為準(zhǔn)，當(dāng)然也可以和我交流，給我提建議意見。
ps：因?yàn)閭淇佳潘紩r(shí)間緊迫，最近速度慢了下來，望體諒。
