交互設(shè)計師的新寵:免費原型制作工具Origami

2 評論 12075 瀏覽 10 收藏 4 分鐘

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

Origami官方網(wǎng)站下載頁面:http://facebook.github.io/origami/
如果不能訪問Facebook,請在這里下載:http://vdisk.weibo.com/s/oquAYKKPrOc

在2013年4月份的時候,F(xiàn)acebook在推出Facebook Home的時候,曾力推Quartz Composer,希望它能夠成為一款設(shè)計師們都喜歡的高保真動態(tài)原型制作工具。然而因為QC的門檻依然很高,推廣沒有成功。
這一次,F(xiàn)acebook設(shè)計團(tuán)隊免費公開Origami,這款插件讓QC的使用更加方便,希望能夠借此再度推廣QC。

Origami-Work

下面簡單介紹一下Origami:

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

怎樣安裝:
①你需要一臺Mac
②安裝Quartz Composer
③安裝Origami
除了第一條,后面兩個都可以在Origami官方頁面(http://facebook.github.io/origami/)下載到。

Origami提供了哪些自定義的控件(Patch):
Switch(開關(guān)):開關(guān)就是開關(guān)
Scroll(滾動):用來滾動一張圖片
Bouncy Animation(彈性動畫):通過彈簧控制變化參數(shù)的動畫
Classic Animation(傳統(tǒng)動畫):傳統(tǒng)的曲線型緩動動畫
Transition(轉(zhuǎn)場動畫):輸入0-1的數(shù)值,輸出開始和結(jié)束值
Color Transition(顏色轉(zhuǎn)場):在兩種顏色間淡入淡出
Image Transition(圖像轉(zhuǎn)場):兩張圖片間淡入淡出
Interaction 2(交互2號):讓你可以點擊某個層
Layer(層):把圖片顯示在屏幕上
Text Layer(文字層):把文字顯示在屏幕上
Button(按鈕):可自定義標(biāo)簽和背景,連上“交互2號”使之可以響應(yīng)點擊
Hit Area(可點擊區(qū)域):同樣也要連“交互2號”
Phone(手機):在屏幕上畫一個手機,iPhone、安卓、WP都有
Timer(定時器):設(shè)定一個時間,到點了定時器會改變狀態(tài)
Counter 2(計數(shù)器2號):從一個數(shù)值增減到另一個數(shù)值,用來實現(xiàn)for循環(huán)的

Origami給QC帶來哪些變化:
①支持Retina顯示器
②拖進(jìn)來一張圖片的時候,自動在外面包一個層
③在參數(shù)窗口中支持鍵盤上下鍵切換
④被禁用的控件顯示為灰色
⑤讓查看窗口原生全屏支持
⑥當(dāng)分流器被刪除后,連接線保留
⑦其他bug修復(fù)

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

作者:搜狐Mued

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!