神奇的交互設(shè)計工具 Principle 中文文檔
![](http://image.woshipm.com/wp-files/img/57.jpg)
最近在學習 Principle,邊學邊整理了它們的官方文檔,今天也算是有了初步的入門吧。整理的文檔還有很多不足,比如沒有較好的截圖供大家參考,也沒有好的步驟引導和答疑。后期慢慢完善,希望大家不要介意~
簡單描述下這個應用,Principle 是前?Apple?工程師打造的一款交互設(shè)計工具,短時間內(nèi)即可制作出一個具有完整交互動畫的原型,并且可將交互動畫生成視頻或者 Gif?分享到?Dribbble、Twitter?等社交平臺,也能夠生成 Mac 應用,以及使用 Mirror 預覽交互。此外 Principle?還支持多種尺寸的原型設(shè)計,包括 Apple?Watch。你的動畫交互想法,比如設(shè)計更好的移動APP交互效果成為現(xiàn)實,用 Principle 輕松幫你實現(xiàn)。Principle 的原則使得它易于創(chuàng)建動畫和交互式的用戶界面設(shè)計。
界面(Interface)
畫布(Canvas)
在屏幕中心區(qū)域就是畫布,你將會在這里完成絕大部分工作。它包括所有的畫板,以及畫板之間的跳轉(zhuǎn)關(guān)系。當前被選中的畫板將會以綠色邊框高亮顯示。
預覽(Preview)
你可以隨時通過預覽功能,查看你當前的設(shè)計。預覽功能默認鎖定浮動在畫布的右上角。你可以拖拽預覽窗口到畫布外進行解鎖。你可以通過選擇 “查看 -> 切換查看光標類型(View -> Toggle Preview Cursor Type)”來調(diào)整預覽光標類型。這時候預覽鼠標光標會在箭頭和圓形兩種類型之間進行切換。
圖層列表(Layer List)
圖層列表在界面的的左下方,圖層列表包含你設(shè)計中的所有圖層,主要有畫布、子圖層、圖層間的層級關(guān)系。在圖層列表中拖拽圖層可以將圖層編組或者取消編組。拖拽畫板還能夠改變畫板在畫布中的顯示順序。點擊圖層以及組右側(cè)的眼睛可以在隱藏和顯示之間進行切換,不過這不會影響圖層在預覽窗口中的可見性。
檢查器(Inspector)
檢查器在界面的左側(cè),圖層列表的上方,在這顯示了選中圖層的各種屬性,包括:對齊操作、X/Y坐標、長/寬、角度、縮放、透明度、圓角、關(guān)聯(lián)的圖片、顏色填充、描邊、組合裁剪、水平/豎直操作等。
動畫視圖(Animate View)
動效視圖會出現(xiàn)在界面的底部,動畫視圖用來自定義畫板之間的動畫。你可以點擊工具欄上的 Animate 按鈕,或點擊畫板間的跳轉(zhuǎn)箭頭打開動畫視圖。動畫視圖通常用來調(diào)整切換動畫的時間和動畫曲線。
聯(lián)動視圖(Drivers View)
聯(lián)動視圖出現(xiàn)在界面的頂部,聯(lián)動視圖展示了當前選中畫板內(nèi)元素之間的聯(lián)動關(guān)系。聯(lián)動視圖可以用來創(chuàng)建復雜的、持續(xù)聯(lián)動的交互。你可以點擊工具欄上的 Drivers 按鈕打開聯(lián)動視圖。
繪圖(Drawing)
乍一看,Principle 像一款繪圖工具,并且跟你平常使用的工具長得很像。一些基本元素可以在 Principle 中繪制,并且能夠?qū)雸D片。
畫板(Artboards)
Principle 的畫板使用跟其他繪圖工具類似:每一塊畫板代表了一個獨立的設(shè)計狀態(tài)。你可以隨意調(diào)整畫板的尺寸以適應不同的設(shè)備,活著窗口大小。一些畫板在概念上等同于屏幕,但是完全不同。例如:兩個音樂播放器設(shè)計的畫板,除了 播放/暫停 按鈕,都是相通的。被選中狀態(tài)的畫板,在當前窗口展示為一個綠色邊框的矩形;新圖層會默認添加到這個選中畫板中。
想要創(chuàng)建畫板,可點擊工具欄左上角的“畫板(Artboard)”圖標,或者快捷鍵 A 來增加一個新的畫板。
通常情況下,考慮到創(chuàng)建逐幀補間動畫,本質(zhì)上是兩個畫板間內(nèi)部元素屬性的細微轉(zhuǎn)場;所以,我們經(jīng)常會在增加事件的時候,連接當前畫板。Principle 會幫我們自動創(chuàng)建一個完全一模一樣的畫板,并且畫板中的元素也完全一樣。
每個畫板對應一個或者一組狀態(tài),而多個畫板很有可能才代表一個真實的用戶界面。畫板和畫板之間只有細微的差別,這在創(chuàng)建補間動畫的時候很有意義。例如:設(shè)計播放器的播放和暫停兩個狀態(tài)就會使用到兩個畫板,但它對于用戶而言,實際上只呈現(xiàn)了一個用戶界面。
Principle 一開始便是針對移動互聯(lián)網(wǎng)設(shè)計的交互動畫工具,系統(tǒng)已經(jīng)內(nèi)置了iPhone4/5/6/6p、iPad、Apple Watch 以及 Dribbble 的標準尺寸;當然,你也可以自定義尺寸。
矩形(Rectangles)
想要在當前畫板中創(chuàng)建矩形,可點擊工具欄中的“矩形(Rectangle)”圖標,或使用快捷鍵 R 來添加個新的矩形。如果想畫一個圓,只需把圓角度數(shù)調(diào)成一個非常大的數(shù)值。如果想給圖形設(shè)置一個圖片背景,只需要把圖片(支持格式 PNG、JPEG、TIFF)拖到檢查器的圖片區(qū)中即可。新創(chuàng)建的矩形默認尺寸為 44×44 點,這符合 iOS 中的點擊區(qū)域設(shè)置。
文本(Text)
文本圖層和矩形圖層屬性類似,只多了字體、對齊方式、字體大小三種屬性。其中,字體和對齊方式兩個屬性在創(chuàng)建補間動畫的時候不能發(fā)生改變。創(chuàng)建文本,可點擊工具欄左上角的“T(Text)”圖標,或者快捷鍵 T 來增加一個新的文本。
字體(Custom Fonts)
并不是所有的字體都適用于 iOS 設(shè)備,并且也不是所有的字體都能夠在 Principle Mirror中顯示。使用常規(guī)字體或安裝所需字體來可解決這個問題。
圖片(Images)
在 Finder 中可以將拖拽圖片到 Principle,也可以直接粘貼 PNG 或 JPEG 到 Principle 中。如果你是 Sketch 用戶,也可以合并選區(qū)為一張 PNG 圖片后,復制并粘貼到 Principle。圖片圖層默認是被鎖定的,你可以在檢查器中點擊圖右側(cè)的小鎖圖標來解鎖圖層。
調(diào)整圖片(Changing Images)
要調(diào)整圖層的圖片,拖拽一張新圖片到檢查器中圖片屬性位置。如果這有一個已在使用圖片的圖層,Principle 會給你選擇將所有圖層更新為新圖片的權(quán)利。
在檢查器中點擊圖片屬性位置,或者按鍵盤中的 Delete 鍵,也可以將圖片從圖層中移除。
高分辨率圖像(High Resolution Images)
如果拖入的圖片名以”@2x”或”@3x”結(jié)尾(例如:1@2x.png、2@3x.png),導入的圖片將會自動縮放為 1/2 和 1/3 大小,并且那么在 Retina 屏幕中,查看的時候大小剛剛好。如果你已經(jīng)導入了一個高分辨率的圖片,也可以通過設(shè)置圖片的長寬數(shù)值達到同樣的效果。(另外,檢查器中對應的屬性輸入框支持簡單的數(shù)學運算,輸入“320/2”可以方便的縮放為原圖的一半。)
視頻和音頻文件錄制(Video and Audio Playback)
當你將鼠標放到預覽界面上的時候,視頻和音頻文件是可以播放的。默認情況下,文件將會一直循環(huán)播放,但是當你在檢查器中點擊媒體按鈕,活著選擇“播放一次(Play Once)”的時候,就會改變播放方式。
在畫板之間播放視頻或者音頻,只需要復制視頻或者音頻文件到對應的畫板,并確認圖層有相同的命名。默認情況下,媒體時間屬性是鎖定的,并允許連續(xù)播放。但是,需要手動去控制重新播放。
編組(Groups)
在 Principle 中,圖層可以編組,選中希望被組合在一起的多個圖層,點擊工具欄上的“組合(Group)”圖標,或者使用 Command+G 快捷鍵。你還可以在檢查器的圖層列表中,通過拖拽圖層到另一個圖層中實現(xiàn)編組。
在 Principle 中,編組可以視為一個含有子圖層的矩形圖層。最終的編組結(jié)果會擁有自己獨立的位置和大小。在 UIKit、Android 和 DOM 中也是如此繪制和設(shè)置動畫元素的。但是,如果你按照 Photoshop 或 Sketch 的方式去使用編組可能會有意外發(fā)生。在制作更復雜的圖層交互、旋轉(zhuǎn)不同原點的圖層,或者在每個圖層的基礎(chǔ)上實現(xiàn)多重動畫,編組都是非常有用的。
蒙板(Cropping/Masking/Clipping)
你可以通過文件夾對圖層進行“編組 Grouping(或快捷鍵 Command+G)”快速編組。想要得到一個圓形蒙板,調(diào)整編組的半徑屬性。
連續(xù)的交互(Continuous Interactions)
Principle 內(nèi)建了三種通用的交互:拖拽、滾動和翻頁,并可獨立的在圖層的 X 軸或 Y 軸開啟。
拖拽(Dragging)
對某個圖層開啟拖拽后,當點擊按住移動圖層的時候,就能夠改變圖層的位置。
滾動(Scrolling)
滾動能夠有機會在組中使用。當手指被拖拽到一個滾動圖層上的時候,子圖層將隨著手指移動,但是組缺不會改變位置。地圖、消息列表、或者大量內(nèi)容,都可以利用滾動視圖。如果你開啟的圖層上使用了滾動,可是這個圖層有沒有子圖層,Principle 將會為你自動的創(chuàng)建一個滾動視圖組,很棒吧。
翻頁(Paging)
翻頁和滾動很像,只不過翻頁可以每次滾動固定的距離,這個距離和組合的大小一致。翻頁可以用于圖片切換、主頁屏幕的圖標翻頁、或者任何當前流行的卡片式 UI 設(shè)計。如果你想在頁面間添加內(nèi)邊距,讓翻頁組稍稍比你需要的大一些,留空頁面內(nèi)容的邊距即可。
事件(Events)
事件觸發(fā)器用于不同畫板間的轉(zhuǎn)場。點擊畫布中的圖層,在右側(cè)發(fā)現(xiàn)“閃電”圖標,點擊該圖標會出現(xiàn)支持的事件列表。點擊并按住事件前面的空心圓,拖拽到想要跳轉(zhuǎn)的畫板,就能夠按照選中事件行為創(chuàng)建一種頁面跳轉(zhuǎn)的交互形式。這時你會發(fā)現(xiàn)兩個畫板之間會出現(xiàn)一條箭頭,表示畫板間的轉(zhuǎn)場。
拖拽時如果指向當前的畫板的圖層,會在右側(cè)復制出一份當前畫板。
如果把圖層的透明度設(shè)置為 0,那么這個圖層就不會產(chǎn)生交互。創(chuàng)建一個明確的可點擊區(qū)域,將填充調(diào)整為 0 就可以了。
事件類型主要有:
點擊(Tap)
點擊是最常用的事件,當點擊圖層并釋放的時候就會被觸發(fā),點擊不需要移動。
拖拽開始(Drag Begin)
當手指按住圖層并開始移動時,就會觸發(fā)這個事件。使用這個事件的前提是圖層開啟了可移動屬性(draggable)。如果在目標畫板中有同樣名稱的圖層,完成拖拽事件后圖層的位置也就確定了。
拖拽結(jié)束(Drag End)
拖拽圖層之后松開手指會觸發(fā)事件。同樣在使用之前需要打開可移動屬性。
滾動開始(Scroll Begins)
當一個圖層開始滾動時觸發(fā)事件。使用前需要打開可滾動屬性。
滾動釋放(Scroll Released)
當圖層滾動并抬起手指時觸發(fā)事件。注意,此時滾動可能還沒停止,只是手指松開了而已。這個事件同時對滾動和翻頁起作用,同樣的,使用前也需要打開可滾動屬性。
滾動結(jié)束(Scroll Ended)
當滾動完全停止時觸發(fā)事件。這個事件同時對滾動和翻頁起作用。由于必須完全停止后才觸發(fā)事件,所以整個動畫可能有很長時間的延遲等待動畫完全結(jié)束。使用前需要打開可滾動屬性。
按下(Touch Down)
當手指按下時觸發(fā)事件??梢杂糜谥谱靼粹o的按下效果。
抬起(Touch Up)
當手指抬起時觸發(fā)事件。注意,手指從外部按下,移入有事件的部件圖層,這樣是不能觸發(fā)事件的,必須在帶有事件的部件圖層按下才可以觸發(fā)事件。
長按(Long Press)
手指按住0.5秒后觸發(fā)事件。
鼠標移進(over Inside)
當手指移進一個圖層時觸發(fā)事件。
鼠標移出(Hover Outside)
當手指移出一個圖層時觸發(fā)事件。
自動事件(Auto)
自動觸發(fā),并不需要雨用戶交互。多用于循環(huán)或復雜的多步驟動效。只有當鼠標進入預覽區(qū)域時才會觸發(fā)該事件,這一設(shè)計的主要目的是為了避免循環(huán)導致縮短電池壽命。
為自動事件添加延遲,點擊自動事件的肩頭并在動畫面板中調(diào)整動畫就可以了。
延遲場景中沒有動畫的事件,你可以在畫板外稍微偏移的位置添加圖層,這樣就能創(chuàng)造出延遲的動畫了。
改變事件類型(Changing an Event Type)
如果你想改變控制補間動畫的類型,你可以通過點擊補間動畫尖頭并通過“Delete”鍵刪除補間,或者你創(chuàng)建一個新的事件類型。你創(chuàng)建的動畫關(guān)鍵幀并不會隨之消失,因為它們被存儲在畫板中,而不是補間動畫中。
動畫(Animation)
當觸發(fā)事件時,Principle 會自動創(chuàng)建當前畫板與目標畫板之間創(chuàng)建補間動畫。
動畫映射(Animation Mappings)
如果一個圖層在兩個畫板中名稱一樣,Principle 就認為這兩個圖層是同一個,繼而會根據(jù)這個圖層的位移等屬性變化創(chuàng)建補間動畫。反之,如果在兩個圖層間沒有圖層名稱相同,圖層切換時部件就會突然消失或顯示。
自定義動畫(Custom Animations)
默認動畫持續(xù)的時間是 0.3秒,這采用了 iOS 和 OSX 系統(tǒng)中默認的緩動曲線數(shù)值。你可以在動畫面板(Animate View)中調(diào)節(jié)它,具體的方法是:點擊兩個畫板頂部的箭頭,補間動畫會在顯示該轉(zhuǎn)換的動畫面板上,在畫板上列出了所有發(fā)生動畫的圖層以及其屬性以列表方式顯示,在這個時間軸拖拽節(jié)點就可以調(diào)節(jié)動畫持續(xù)時長、出現(xiàn)時機和動畫曲線。
關(guān)鍵幀(Keyframes)
在動畫面板中,每條時間軸都會有兩個關(guān)鍵幀,一個代表動畫開始時刻,另一個是結(jié)束時刻。拖拽關(guān)鍵幀可以改變動畫延遲和持續(xù)時間等。
緩動曲線(Easing Curves)
緩動曲線決定了以下動畫相關(guān)屬性的速率:移動會不會從慢逐漸變得越來越快?或是開始非???,但接近終點時突然又變慢了?以上現(xiàn)象就是由緩動曲線去控制的。
在動畫視圖中點擊時間軸右側(cè)的下拉菜單,菜單中顯示了預設(shè)的幾種曲線,點擊曲線名稱可以在坐標軸里查看。
預設(shè)的幾種曲線跟 iOS 和 OSX 使用的一樣。你可以隨時調(diào)節(jié)預設(shè)的曲線:拖動曲線的兩個手柄,改變長短和角度,或者在下方直接輸入坐標都可以自定義動畫曲線。自定義曲線不會抹掉預設(shè)曲線,可以大膽使用。
彈性曲線(Springs)
通過在曲線選擇器中旋轉(zhuǎn)“Spring”來使用彈性曲線。它可以把一個圖層中元素的運動變成生動活潑,但也不能濫用,因為它會吸引人的注意力而打斷思路。曲線選擇器有兩個選項,張力和摩擦力。動畫曲線是沒有結(jié)束關(guān)鍵幀的,因為彈性曲線動畫的結(jié)束時間由物理彈性決定。你可以通過改變彈性曲線的張力和摩擦力調(diào)整彈性曲線。
鎖定屬性(Frozen Properties)
有時它是有用的,用來維持當前的畫板在過渡期間的屬性值。Principle 將這類屬性稱之為“鎖定(Frozen)”(或者稱凍結(jié),不過我個人認為叫鎖定更合理)。你可以通過點擊動畫面板中的雪花圖標來鎖定一個屬性。鎖定一個屬性可以防止動畫及其補間被改變。鎖定屬性可以用來記住其他畫板等一組滾動偏移的東西,一個可拖動的層的位置,或選定元素的不透明度。默認情況下,Principle 鎖定滾動 X 軸和 Y 軸的屬性,以此來保持兩個畫板之間盾冬的位置。如果你需要一個事件來滾動到特定的位置,你可以解鎖滾動 X 軸和 Y 軸。
動畫分享(Animations are Shared)
每個轉(zhuǎn)場動畫的信息都被存儲到了目標畫板中。這意味著,所有專場動畫將到達一個特殊的畫板,并且擁有相同的動畫設(shè)置。例如,如果你在畫板 A 到 B 之間使用彈性動畫,彈性動畫也將會出現(xiàn)在畫板 C 到 B 之間。
聯(lián)動(Drivers)
想制作帶有交互的視差效果?想讓一個圖層在拖拽的同時,根據(jù)拖拽程度旋轉(zhuǎn)?聯(lián)動功能可以實現(xiàn)。聯(lián)動用關(guān)鍵幀鏈接了每個屬性。和動畫不同,動畫發(fā)生在畫板切換時,聯(lián)動發(fā)生在同一個畫板中。在工具欄點擊 Drivers 按鈕可以展開當前畫板的聯(lián)動面板。如果你的鼠標不支持水平滾動,按住 空格鍵(Space)同時拖拽聯(lián)動面板來滾動。
聯(lián)動和典型的動畫時間軸工作原理相似,唯一不同的地方在于:聯(lián)動不是基于時間,而是基于屬性參數(shù)的變化。
聯(lián)動源(Driver Sources)
想要創(chuàng)建聯(lián)動,在畫板上必須存在一個可改變的屬性,這叫做聯(lián)動源。在聯(lián)動視圖中列表中,可拖拽圖層、可滾動圖層,以及選擇屬性將自動展示出來。
聯(lián)動屬性(Driven Properties)
一旦有了聯(lián)動源,你就可以用它控制其他任意(包括自己)圖層的屬性。選擇一個你想控制的圖層,在聯(lián)動面板點擊藍色的加號圖標,選擇一個你想聯(lián)動的屬性。這時會以當前的屬性參數(shù)創(chuàng)建一個起始關(guān)鍵幀。只有一個關(guān)鍵幀不起任何作用,然后我們:
聯(lián)動關(guān)鍵幀(Driver Keyframes)
完整的聯(lián)動需要至少兩個關(guān)鍵幀才能有效果。方法很簡單:水平拖拽灰色標記移動到你想添加的關(guān)鍵幀位置,然后調(diào)整屬性值。Principle 將自動為你插入一個新的關(guān)鍵幀。關(guān)鍵幀能夠通過點擊衣櫥,然后點擊紅色按鈕到關(guān)鍵幀的左側(cè)。
導入(Import)
Overview
Sketch 是一個矢量設(shè)計工具,常被用來做界面設(shè)計。在 Sketch 中設(shè)計的元素可以很容易的通過工具欄上的導入按鈕,將文件導入 Principle,或者通過”文件 > 導入(File > Import)”。
從 Sketch 導入前有幾件事你需要知道:
- Sketch 必須打開狀態(tài);
- Sketch 有一個文件打開;
- Sketch 文檔的當前界面,必須至少含有一個畫板;
如果 Sketch 同時打開著多個文件,Principle 會默認導入置于當前窗口的文件。如果 Sketch 文件包含多個頁面,Principle 會默認導入當前的頁面。
位于 Sketch 底部的畫板(左側(cè)Page顯示的畫板列表底部)尺寸最終決定了 Principle 中畫板的大小。畫板將在 Principle 中按照它們在 Sketch 中的順序展現(xiàn),這與在畫布中展現(xiàn)的順序是不同的。
縮放(Scaling)
在導入的下拉菜單中,你可以選擇從 Sketch 中導入的不同縮放尺寸??s放不影響圖層的尺寸,如果有圖片的話,分辨率會受到影響。當你 Sketch 文件是在 1x 的分辨率環(huán)境中創(chuàng)作的,但是你又喜歡在 2x 或者 3x 的 Retina 屏幕上完成 Principle 交互原型,這個功能就顯得十分有用。Principle 會記住你最后一次使用的縮放尺寸,所以不必每次導入的時候都去選擇。
再次導入(Importing again)
如果你修改了 Sketch 文件,你可以重新將 Sketch 文件再次導入 Principle,其動畫、事件以及圖層的動畫映射依然保持不變。如果你想改變從 Sketch 導入圖層的位置和屬性所以,你可以先在 Sketch 中調(diào)整之后在導入到 Principle。有時候,你在 Sketch 中刪除了一個圖層,然后重新創(chuàng)建了它,這需要使用其他的方式來實現(xiàn)導入;因為在這種情況下,Principle 是不清楚這個新的圖層跟之前的圖層是概念上的同一個,所以,之前綁定在舊圖層上的所有事件將都會丟失。畫板從 Sketch 文件中刪除,或者從另外一個 Sketch 文件中導入,將不受再次導入特性的影響。
是時候做出改變了!
如果你發(fā)現(xiàn)你需要針對圖層做視覺上的修改,建議最好是在 Sketch 中修改,然后再次導入。包括復制畫板和圖層。在 Principle 中復制圖層,由于并沒有一對一映射到 Sketch 文件中,顯然不會對 Sketch 文件中做任何修改。
圖層的扁平化 (Layer flattening)
會盡其所能將 Sketch 中的圖層導入 Principle,并作為其原生的圖層保留,以保證他們的屬性是可以被添加各種動畫。如果你不需要在組中為突出添加動畫,你可以將組扁平化之后再導入到 Principle。
但是事與愿違,一些客觀的原因,Sketch 中設(shè)計的圖層不得不扁平化,最終以圖片的方式簡單粗暴的導入到 Principle 中:
- 路徑(Paths)多于一個帶有半徑的圓角的矩形會被扁平化
- 填充(Fills)含有填充的圖層,其填充必須是一個純色填充,否則會被扁平化
- 邊框(Borders)含有邊框的圖層,其邊框必須是一根實線,否則會被扁平化
- 陰影/模糊/其他效果(Shadows,Blur,other effects)含有陰影、模糊或者其他效果的圖層,都將被扁平化
- 蒙版(Masks)含有蒙版的組或者圖層,將被扁平化。為了最大限度的減少扁平化厚圖層的數(shù)量,蒙板圖層會被編組并且圖層會帶有蒙板
導出(Export)
一旦完成一個漂亮的交互,你一定想讓全世界都看到你的成果。有以下幾種方式可以實現(xiàn):
視頻錄像和 Gif 動圖(Videos and Gifs)
要導出視頻或者 Gif 動畫,點擊工具欄的錄制按鈕就可以了。你可以選擇光標的類型,是圓形點擊,箭頭,或者是隱藏光標三種方式。在選擇光標之后,Principle 開始在預覽窗口展示動畫。開始錄制后,再次點擊錄像按鈕停止錄制。
Gif Setting
當你導出 Gif 時,你可以在下拉菜單選擇或鍵入?yún)?shù)來設(shè)置下面幾個預設(shè)格式:
- 45%:輸入一個百分數(shù)可以生成按百分比縮小的版本;并且這個設(shè)置會覆蓋下面的設(shè)置
- 134h:導出一個確定高度的 Gif,等比縮放
- 320w:導出一個確定寬度的 Gif,等比縮放
- 400w 300h:導出一個固定大小的 Gif,此時會縮放畫布至合適的大小,并且會自動增加內(nèi)邊距和投影,還可以在右側(cè)設(shè)置圖片背景的顏色
導出到 Mac(Export for Mac)
如果你想分享你的設(shè)計,其他人可能沒有 Principle,你可以導出一個獨立的 Mac 應用程序,任何人用蘋果可以打開。
- 注:導出的 Mac 應用程序只能在 Mac 上運行,而不是在 iPhone 上。如果你想在 iOS 設(shè)備上運行,請看 Running on Device 章節(jié)。通過“文件 > 導出為 Mac(File > Export for Mac)”,導出 Mac 應用程序。最終的應用程序,可以以你喜歡的方式通過電子郵件發(fā)送或共享。
不明身份的開發(fā)商警告
你發(fā)送應用程序的人可能會得到一個消息說它“不能打開,因為它是從一個不明身份的開發(fā)者”。這是因為它是由你創(chuàng)造的(不明身份的開發(fā)者)。他們可以通過點擊應用圖標運行應用,選擇打開,然后在一個對話框中會出現(xiàn)讓他們選擇是否打開你的應用。
在 iOS 設(shè)備上運行(Running on Device)
Principle Mirror iOS 版應用可以幫助你在 iOS 設(shè)備上預覽并分享你的設(shè)計。下載 Principle Mirror 在你的 iOS 設(shè)備上然后用數(shù)據(jù)線連接電腦。Principle Mac 版會自動發(fā)現(xiàn)已連接的設(shè)備,并立即連接當前的設(shè)計稿到移動設(shè)備上。在預覽過程中,使用快捷鍵“Cmd + ~”可以快速切換兩個設(shè)計稿(Principle 文檔與 iOS 應用中的文件)。
iOS 設(shè)備上的設(shè)計稿在斷開數(shù)據(jù)線后可以繼續(xù)運行。這可以讓你更容易地把設(shè)計展示給團隊成員。Principle 文件可以在 iOS 設(shè)備上直接打開。所以你可把文件發(fā)送給他人,或者讓別人把設(shè)計稿發(fā)給你,一切就是這樣簡單。
分享(Sharing an interactive design)
如果你想分享你的設(shè)計使自己能與他人互動的話,他們可以在他們的iOS設(shè)備安裝原理鏡子,你可以向他們發(fā)送文件。分享你的文件必須有。珠三角擴展和不可壓縮為iOS開放原則的鏡子。
- 電子郵件
從電子郵件中打開一個 PRD 文件,點擊附件,然后點擊 iOS 分享按鈕。在分享面板中選擇 Principle Mirror,或者“打開…”按鈕(如果 Principle 是不可見的)。
- 自己的服務器
如果你擔心使用文件共享服務,為安全起見,你可以把 .PRD 文件放到自己的 FTP 服務器。直接鏈接到該文件,其他人可以在他們的手機上查看。Safari 瀏覽器會顯示“Open in Principle”按鈕。
- Dropbox,Google Drive,Box,等
你可以將你的文件上傳到一個文件共享服務,并生成一個鏈接到文件。
關(guān)于Dropbox:
默認情況下,Dropbox 的鏈接將帶你到一個 Dropbox 網(wǎng)頁而不是文件本身。你可以繞過這個由 Dropbox 的鏈接最終從“DL = 0”鏈接到“DL = 1”
關(guān)于 Google Drive 的說明:
Google Drive 的特殊文件類型有問題,所以我們不建議使用它來共享原則文件。
動畫參數(shù)(Animation Values)
Principle 目前沒有導出動畫的屬性值,但工程師可以在 Principle 看到它們。單擊并按住一個關(guān)鍵幀,就能看到。點擊關(guān)鍵幀之間的藍色區(qū)域來訪問它的緩和曲線。這些值與平臺無關(guān)的。
快捷鍵(Shortcuts)
圖層(Layers)
- 添加矩形(Add rectangle): R (Alt + R to add as child)
- 添加文本(Add Text): T (Alt + T to add as child)
- 添加畫板(Add Artboard): A
- 編組(Group): Cmd + G
- 取消編組(Ungroup): Cmd + Shift + G
- 移到頂層(Bring to Front): Shift + Cmd + ]
- 上移一層(Bring forward): Cmd + ]
- 下移一層(Send Backward): Cmd + [
- 移到底層(Send to Back): Shift + Cmd + [
編輯(Editing)
- 移動(Nudge): Arrow Keys
- 快速移動(Big Nudge): Shift + Arrow Keys
- 旋轉(zhuǎn)(Rotate): Cmd + Drag handle
- 旋轉(zhuǎn)15°的倍數(shù)(Rotate in 15 degree increments): Cmd + Shift + Drag handle
- 復制(Duplicate): Cmd+D
- 復制并移動(Duplicate and Move): Alt+Drag
- 選擇器文本框(Inspector Textfields): understand basic equations like “320/2+10”
- 選擇器標簽(Inspector Labels): dragging textfield labels quickly scrubs values
- 重命名(Rename Layer): Cmd+R
畫布導航(Canvas navigation)
- 移動畫布(Pan): Space + drag
- 放大畫布(Zoom in): Z + Click
- 縮小畫布(Zoom out): Alt + Z + Click:
- 連續(xù)縮放(Continuous Zoom): Alt + Space + Drag
- 放大畫布(Zoom in): Cmd + =
- 縮小畫布)Zoom out): Cmd + –
- 完整顯示(Zoom All): Cmd + 1
- 區(qū)域完整顯示(Zoom Selection): Cmd + 2
- 把選區(qū)移到中央(Center Selection): Cmd + 3
- 實際大?。ˋctual Size): Cmd + 0
聯(lián)動導航(Driver Navigation)
- 選擇(Pan): Space + drag
- 放大(Zoom in): Z + Click
- 縮?。╖oom out): Alt + Z + Click:
- Continuous Zoom): Alt + Space + Drag
動畫導航(Animate Navigation)
- 選擇(Pan): Space + drag
選擇(Selection)
- 選擇父級文件(Select Parent): Esc
- 選擇子級文件(Select Child): Enter
- 選擇其他(Select Next Sibling): Tab
- 選擇當前其他(Select Previous Sibling): Shift+Tab
- 全選(Select all Siblings): Cmd + A
預覽(Preview)
- 改變光標類型(Change cursor type): View -> Toggle Preview Cursor Type
- 重置預覽(Rewind Prototype): W
- 開始錄制(Start recording video): Ctrl+V
- 開始錄制不帶光標(Start recording video without cursor): Ctrl+alt+V
常見問題(FAQs)直接貼原文啦~
有沒有學生版?Do you have educational discounts?
有,價格 50%,需要發(fā)郵件提供證件,之后官方會發(fā)地址給你。
We have a 50% educational discount for students and faculty. Once you’ve tried the free trial and are ready to purchase, email a photo of your class schedule and student ID and we’ll make a discount link for you! The link expires two days after we make it.
是否有 Window 以及其他版本?Will Principle be released for Windows / Linux / Android / Web?
Principle 和 Principle Mirror 目前只支持 OSX 以及 iOS,沒有其他版本
Principle and Principle Mirror are built on core technologies exclusive to OS X and iOS, so it won’t be available on other platforms.
試用版不管用了!The free trial link doesn’t work!
通過網(wǎng)絡(luò)下載其他的文件,推薦用官方的 。Dropbox is probably blocked on your local network. Try downloading from another network.
Can you provide a Quote?
Principle is $99 per user. License keys that can be used by more than one person can be purchased by changing the quantity on the purchase page. We do not offer reseller discounts. Can I add additional users to an existing license? Not at this time, you must purchase a new license.
Do you accept purchase orders, faxes, etc?
Nope, our website handles the entire purchase process.
Will Principle be available on the Mac App Store?
We’re not planning to release Principle on the Mac App Store because of all its frustrations. By selling outside the store, we can release updates as often as we like and are free to pursue advanced features that may not be possible if Principle were in the App Store.
What is the road map for Principle?
We don’t talk about our future plans. If there is a feature you’d like to see added, send us an email!
Buying for Someone Else
Licenses can be purchased for someone else by clicking the gift icon at checkout. The recipient will get an email with the license keys, and the purchaser get one with the invoice.
Invoices
You can generate an invoice by clicking the link in the email you receive after purchase.
圖文版獲取地址:http://yuedu.baidu.com/ebook/5ae49c28770bf78a64295491
本文由人人都是產(chǎn)品經(jīng)理專欄作家 @鄭幾塊 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理?。未經(jīng)許可,禁止轉(zhuǎn)載。
Axure不可以嗎?
現(xiàn)在用principle做交互,app開發(fā)人員是使用可以使用動效的具體數(shù)值完成高質(zhì)量的產(chǎn)品 是嘛?所以說,做交互就是為了更清楚的展示產(chǎn)品,我們公司之前沒有專門做交互的人員,我正在學,希望多多交流
這個工具目前按年收費了,我一段時間沒關(guān)注它的動態(tài)。
交互方面,我認為工具起到的是輔助實現(xiàn)效果的作用。如果用其他方式(比如其他工具Hype3、紙質(zhì)方式等都可能使用)能說明交互,并表達效果,也是可行的。
交互理解上,我認為交互不是為了清除地展示產(chǎn)品,而是:1.更好的表達產(chǎn)品基本的使用過程;2.清除地表達用戶使用產(chǎn)品的過程,以及如何讓這個使用過程更加順暢自然,并達到預期的效果或者目的;3.效果目的方面因產(chǎn)品不同而不同。
補充交互理解,基本的交互過程包含的是界面-界面之間、界面內(nèi)空間等的效果處理方式,這些處理都是需要與業(yè)務或者說產(chǎn)品使用流程相關(guān)的。可以說,交互是修飾性的“語言”,主要修飾的是用戶使用產(chǎn)品過程的,更好的影響用戶,觸達其心理,以期達到預期的效果和目的。
這個軟件是只能夠在Mac 系統(tǒng)上使用的么 ?
是噠
principle、pixate、hype3、flinto都是非常好的交互工具
就像你跟程序員溝通的時候,沒有原型圖他啥都聽不進去。你這沒有圖片我不知道這是啥啊。也沒有找到下載鏈接和云盤
后期會補充的
好的好的,辛苦辛苦,謝謝分享。![:mrgreen:](http://www.codemsi.com/wp-includes/images/smilies/mrgreen.png)
為什么這么好的原型工具沒有圖全是文字呢?
因為我還木有時間添加圖片 ?