@陳澤濤 Facebook上周發(fā)布的獨(dú)立應(yīng)用Paper今天正式上架蘋果App，該應(yīng)用看起來相當(dāng)簡潔，與眾不同，并沒有像Facebook的原有應(yīng)用產(chǎn)品那樣充斥著各種按鈕和菜單。

Paper?的詩意現(xiàn)身，一個(gè)叫做Origami的工具功不可沒。Facebook?開發(fā)的這款圖像設(shè)計(jì)動(dòng)畫合成工具，可以快速構(gòu)建原型，并在不寫一行代碼的前提下完成對(duì)復(fù)雜動(dòng)畫的合成和測(cè)試。自上個(gè)月發(fā)布后，全世界的設(shè)計(jì)師都可以免費(fèi)使用。

正如?Paper?可能取代?Facebook?本身的?App?一樣，?Origami?的出現(xiàn)可能會(huì)對(duì)?Photoshop?造成威脅。?這個(gè)工具讓設(shè)計(jì)師們給?Paper?原型設(shè)計(jì)出了許多復(fù)雜的動(dòng)畫,?無論是在一個(gè)屏幕里實(shí)現(xiàn)翻頁和切換主題，還是用滑動(dòng)來移動(dòng)板塊提取新聞，屏幕和手機(jī)永遠(yuǎn)處于即時(shí)互動(dòng)狀態(tài)，iOS7?的?3-D?效果更給圖片增添了無限立體感。

Origami?自九個(gè)月前由大名鼎鼎的?Facebook?產(chǎn)品設(shè)計(jì)師?Brandon?Walkin?和?Drew?Hamlin?開始，與他們的作品?Paper?同時(shí)進(jìn)行，隨著?Paper?需要承載的功能越來越多?Origami?也在不斷完善其功能。事實(shí)上，在?Paper?上面看得到的每個(gè)動(dòng)畫效果都是先由設(shè)計(jì)師們?cè)?Origami?上成型后再由?Facebook?的程序員們?cè)?App?上編寫的。

神器推薦：
《PHOTOSHOP玩膩了！這10個(gè)圖形編輯神器你知道嗎？》
《讓網(wǎng)頁舞動(dòng)起來！25個(gè)免費(fèi)的視差滾動(dòng)插件》
《高端干貨！PHOTOSHOP實(shí)用腳本大合集》

Origami的意思是折紙（聽起來是由日文翻譯過來的）。它是Facebook的設(shè)計(jì)團(tuán)隊(duì)花費(fèi)了9個(gè)月時(shí)間開發(fā)的工具，Origami是一款基于Quartz Composer的插件，安裝Origami之后，Quartz Composer的界面會(huì)變得更加友好，更適合于交互設(shè)計(jì)師操作。

Origami官方網(wǎng)站下載頁面：http://facebook.github.io/origami/
如果不能訪問Facebook，請(qǐng)?jiān)谶@里下載：微盤下載

在2013年4月份的時(shí)候，F(xiàn)acebook在推出Facebook Home的時(shí)候，曾力推Quartz Composer，希望它能夠成為一款設(shè)計(jì)師們都喜歡的高保真動(dòng)態(tài)原型制作工具。然而因?yàn)镼C的門檻依然很高，推廣沒有成功。

這一次，F(xiàn)acebook設(shè)計(jì)團(tuán)隊(duì)免費(fèi)公開Origami，這款插件讓QC的使用更加方便，希望能夠借此再度推廣QC。

下面簡單介紹一下Origami：

大多數(shù)設(shè)計(jì)師在向工程師講解設(shè)計(jì)想法的時(shí)候，都是通過靜態(tài)原型圖來完成的，但是現(xiàn)在APP的趨勢(shì)是：動(dòng)態(tài)的設(shè)計(jì)越來越多，設(shè)計(jì)師們需要更好的交互設(shè)計(jì)工具，Origami應(yīng)運(yùn)而生。

怎樣安裝：

①你需要一臺(tái)Mac
②安裝Quartz Composer
③安裝Origami

除了第一條，后面兩個(gè)都可以在Origami官方頁面（facebook.github.io）下載到。

Origami提供了哪些自定義的控件（Patch）：

Switch(開關(guān))：開關(guān)就是開關(guān)
Scroll(滾動(dòng))：用來滾動(dòng)一張圖片

Bouncy Animation(彈性動(dòng)畫)：通過彈簧控制變化參數(shù)的動(dòng)畫

Classic Animation(傳統(tǒng)動(dòng)畫)：傳統(tǒng)的曲線型緩動(dòng)動(dòng)畫

Transition(轉(zhuǎn)場(chǎng)動(dòng)畫)：輸入0-1的數(shù)值，輸出開始和結(jié)束值

Color Transition(顏色轉(zhuǎn)場(chǎng))：在兩種顏色間淡入淡出

Image Transition(圖像轉(zhuǎn)場(chǎng))：兩張圖片間淡入淡出

Interaction 2(交互2號(hào))：讓你可以點(diǎn)擊某個(gè)層

Layer(層)：把圖片顯示在屏幕上

Text Layer(文字層)：把文字顯示在屏幕上

Button(按鈕)：可自定義標(biāo)簽和背景，連上“交互2號(hào)”使之可以響應(yīng)點(diǎn)擊

Hit Area(可點(diǎn)擊區(qū)域)：同樣也要連“交互2號(hào)”

Phone(手機(jī))：在屏幕上畫一個(gè)手機(jī)，iPhone、安卓、WP都有

Timer(定時(shí)器)：設(shè)定一個(gè)時(shí)間，到點(diǎn)了定時(shí)器會(huì)改變狀態(tài)

Counter 2(計(jì)數(shù)器2號(hào))：從一個(gè)數(shù)值增減到另一個(gè)數(shù)值，用來實(shí)現(xiàn)for循環(huán)的

Origami給QC帶來哪些變化：

①支持Retina顯示器

②拖進(jìn)來一張圖片的時(shí)候，自動(dòng)在外面包一個(gè)層

③在參數(shù)窗口中支持鍵盤上下鍵切換

④被禁用的控件顯示為灰色

⑤讓查看窗口原生全屏支持

⑥當(dāng)分流器被刪除后，連接線保留

⑦其他bug修復(fù)

好了，趕緊下載一個(gè)試一試吧。下載完成后會(huì)跳轉(zhuǎn)到樣例下載頁面，通過4個(gè)樣例你可以學(xué)習(xí)到通過Origami制作出很多神奇動(dòng)效的方法。

原文地址：mued.sohu
分享人：@陳澤濤

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量63萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：