Origami五分鐘入門秘籍

騰訊ISUX
2 評論 38775 瀏覽 82 收藏 13 分鐘
🔗 产品经理在不同的职业阶段,需要侧重不同的方面,从基础技能、业务深度、专业领域到战略规划和管理能力。

早在Facebook推出Facebook Home時,相信強大的原型工具Quartz Composer就進入了很多設計師的法眼,無須編寫代碼就可以輸出細膩豐富的動畫,這個太厲害了,和大家一樣,彼時我也信誓旦旦勵志要學會這個玩意兒,于是開始參考教學視頻摸索,甚至拿著Quartz Composer的Guideline企圖翻譯,結果發(fā)現(xiàn)并不是那么簡單。于是學QC這件事情就一直一直擱淺,直到Facebook又推出了Paper,有了Origami這個插件,QC的門檻瞬間降低了很多,終于,感覺自己入!門!了!!尤其是和Sketch聯(lián)動,做demo真是方便了很多。這里按照自己的理解參考各種資料的總結對Origami整理了一份入門篇文檔,真的可以幫助零基礎的同學入門,歡迎同樣在研究的同學一起探討,有不對的地方求指正~

基本概念

首先說一下“模塊”(patch),模塊是QC里面最基本的元素,不同的模塊實現(xiàn)不同的功能,要搭建一個原型,實際上就是把不同的模塊按照邏輯像搭積木那樣拼裝的過程。

模塊可以簡單區(qū)分為這樣兩類:圓角和方角。

圓角是最普通的模塊,而方角的模塊叫做“宏”(Macro),可雙擊進入詳細編輯。(我把它理解為文件夾)

Origami五分鐘入門秘籍

模塊還會有顏色的區(qū)別,藍色的模塊是輸出模塊,在畫布中可以被看到;黑色模塊是最常見的狀態(tài);紫色模塊表示模塊內(nèi)部還有其他子模塊。

模塊和模塊之間用連線的形式拼接起來,模塊左側是輸入接口,右側是輸出接口,將A模塊右側的輸出點連接到B模塊左側的輸入點,即可將A模塊的結果輸出到B模塊。

基本邏輯

這個模型是在一個文章里面一位朋友分享的,我覺得非常到位,基本上每一條操作都是這樣的執(zhí)行邏輯。

每一個動畫首先有一個交互觸發(fā)動作,然后用一個開關來控制一個動作的兩種狀態(tài),兩種狀態(tài)對應變換兩個數(shù)值,然后表現(xiàn)在層上~ 數(shù)值變化前多一個彈性動畫來控制動效。

Origami五分鐘入門秘籍

下圖是最簡單的圖片放大縮小的例子,在數(shù)值變化的地方給圖片大小一個初始值和結束值,就可以簡單的實現(xiàn)點擊圖片放大縮小的效果了~~~~

Origami五分鐘入門秘籍

Origami五分鐘入門秘籍

小試牛刀

搞清楚基本概念和基本邏輯之后,就可以上手試試了。

我們先新建一個Origami file。

Origami五分鐘入門秘籍

如下圖,會彈出左右兩個窗口,這是Origami默認的文件,由此也可以看出Origami為移動而生~ 第一個patch可以控制右側手機的樣式、橫屏還是豎屏等等,第二個patch是方角的,也就是上面說的宏(Macro),雙擊它就可以將我們想要設計的內(nèi)容放在手機里面了。第三個patch是藍色的顯示層。

Origami五分鐘入門秘籍

每一個patch都可以雙擊修改名字,在后面內(nèi)容變多的時候,起好名字變得非常重要??梢钥吹矫恳粋€patch都有自己的輸入輸出參數(shù),可以都調(diào)一下試試看效果~~~

在viewer窗口,有很多很好用的快捷鍵可以調(diào)整展示的樣式。例如,每次我會很習慣地去掉拿著手機的手……在viewer窗口激活的狀態(tài)下, 鍵盤輸入H,就可以去掉手了;鍵盤輸入=/-可以切換背景樣式;鍵盤輸入F可以全屏展示,去掉手機框。

Origami五分鐘入門秘籍

Demo1. Hello Origami

按照開發(fā)教程最習慣性的做法,我們先來做一個“Hello Origami”的demo。

雙擊Layer Group,進入界面內(nèi)編輯態(tài),這里有一個已經(jīng)存在的patch是Fill Layer,這是一個填充圖層,用來設置背景。

在編輯區(qū)域,鍵盤輸入T,就出現(xiàn)了一個Text Layer。 這里說一下,調(diào)出所有patch庫的快捷鍵是“command + enter”。(請叫我快捷鍵癮君子~)

可以看到viewer區(qū)域已經(jīng)有“text”顯示了,選中Text Layer 按“command+1”,可以呼出這個layer的設置項,就可以隨便調(diào)整試試看了,我們在Text項里寫上“Hello Origami”,就完成Demo1啦~~~

Origami五分鐘入門秘籍

Origami五分鐘入門秘籍

Demo2,可交互的Origami

接下來我們試著讓案例交互起來,做一個點擊窗口,文案顏色和背景顏色互換的demo。

在編輯窗口,鍵盤輸入I,可以看到出來了一個Interaction2的紫色patch,這是一個交互指令patch,輸出交互指令,down是鼠標按下狀態(tài),up是鼠標單擊狀態(tài),tap是觸碰,drag是拖拽(這里提一下,從手機來操作時,感覺up和tap是一樣的,我也有點不理解)。

在編輯窗口,鍵盤輸入“command + enter”,呼出Patch?Library,輸入Color Transition,其實看名字大家應該就知道這是個啥,對就是這個東西來切換顏色。再在編輯窗口,鍵盤輸入“shift + S”,得到Switch patch,這是一個開關。

連接幾個patch,我們就可以切換Hello Origami的顏色了,同樣的方式,把背景再同步切換一下,Demo2 完成~~~~

Origami五分鐘入門秘籍

Origami五分鐘入門秘籍

和切換顏色同樣的道理,我們可以用Transition切換文本的大小。Layer中,scale是控制大小的元素,按百分比變化,1為100%以此類推。這時候你可能會覺得切換效果不夠柔和,很生硬,在編輯窗口,鍵盤輸入A,出現(xiàn)一個Pop Animation,這是一個動畫過渡的效果,把這個patch放在顏色變化前,就會有過渡效果啦~~~~

Origami五分鐘入門秘籍

如下圖,就出來一個最簡單的閃屏感覺的動畫。

Origami五分鐘入門秘籍

一些概念

關于坐標

在Origami里,每一個patch的anchor point,默認狀態(tài)在畫布中心(0,0),我們可以對每一個patch定義它的anchor point, 舉例來說,如果想要一個元素在左上角,則可以設置它的anchor point為top left,然后設置它位于左上角的位置是(100,-100),如此,就可以得到一個距離頂部和左邊緣分別100的位置。

Origami五分鐘入門秘籍

關于單位

在Origami里,width、height、position都是以pixels為單位;opacity和scale是百分制,0-1分別對應0和100%。

常用patch

這部分也是參考了網(wǎng)友的智慧~~~把他們按照類型簡單歸了一下類,很清晰~

顯示類

Origami五分鐘入門秘籍

交互觸發(fā)類

Origami五分鐘入門秘籍

交互響應類

Origami五分鐘入門秘籍

其他

Origami五分鐘入門秘籍

常用快捷鍵

Origami五分鐘入門秘籍

大招來了 Origami + Sketch

Origami五分鐘入門秘籍

在Sketch里,只要把文件的名稱命名規(guī)范,就可以用插件自動切圖,再然后在Origami里面,所有圖都可以用Live Image這個patch來承載,這樣當你在Sketch調(diào)整圖片的時候,使用快捷鍵“shift + option + command + o”,便可以一鍵同步到你的動態(tài)demo。

Origami五分鐘入門秘籍

終極武器

你可以說以上內(nèi)容其實我們都可以用PS + AE完成,但Origami有一個終極理由讓你使用它來做動畫——導出代碼。

因為QC本來就是Xcode的一個可視化程序,因此它的運行邏輯其實和代碼是一樣的,Origami做了一件事情是可以直接一鍵導出代碼,據(jù)說開發(fā)GG可以直接使用哦!這個我也還沒有試過,如果真的可以很方便的導出代碼直接給開發(fā)用,那么又省掉一個環(huán)節(jié)提高效率啦~~~~~~~

Origami五分鐘入門秘籍

下圖的案例是簡單做了一個QQ音樂里面播放頁彈出的動效~

Origami五分鐘入門秘籍

Origami五分鐘入門秘籍

附錄

以下是對我?guī)椭畲蟮膸讉€網(wǎng)址,這份文檔很多內(nèi)容也參考了他們,非常感謝~~~

http://facebook.github.io/origami/

http://www.zhihu.com/question/20956344

http://www.csdn.net/article/2014-06-09/2820131

http://www.douban.com/group/topic/49037071/

 

作者:外星來的蘋果

來源:騰訊ISUX

原文地址:http://isux.tencent.com/origami.html

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. ?? 內(nèi)容不錯

    來自廣東 回復
  2. 感謝分享

    來自廣東 回復
专题
15343人已学习15篇文章
本专题的文章分享了B端组件的设计指南。
专题
13751人已学习14篇文章
在很多产品中,搜索都是其中比较基础且很重要的一个功能。搜索的设计、逻辑、交互等问题也是需要特别注意,本专题的文章分享了电商搜索功能的设计指南。
专题
11918人已学习16篇文章
栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考,它让页面设计变得有规律,从而减少了设计决策成本。本专题的文章分享了浅析栅格系统。
专题
14820人已学习14篇文章
痛点是什么?为什么用户会有痛点?如何抓住用户痛点?优先解决哪些用户痛点?本专题的文章分享了以上的问题详解。
专题
18801人已学习13篇文章
本专题的文章分享了从不同维度拆解一款产品或者功能,有利于提升我们对于产品和功能的思考能力。