Principle是一個(gè)為Web，移動(dòng)和桌面設計動(dòng)畫(huà)和交互式用戶(hù)界面的工具，通過(guò)允許您在投入寶貴的工程時(shí)間之前快速評估您的想法，Principle顯然更致力于提供通用功能的工具箱，這些功能可以創(chuàng )造性的方式組合以產(chǎn)生各種結果。
接下來(lái)我們來(lái)一起了解一下關(guān)于Principle部分的軟件功能
1. 聯(lián)動(dòng)
聯(lián)動(dòng)的工作方式與動(dòng)畫(huà)時(shí)間軸類(lèi)似，但聯(lián)動(dòng)根據更改的屬性而非時(shí)間進(jìn)行動(dòng)畫(huà)處理。
聯(lián)動(dòng)源：為了創(chuàng )建一個(gè)聯(lián)動(dòng)，一個(gè)可以改變畫(huà)架上需要存在的屬性，這稱(chēng)為聯(lián)動(dòng)源?？赏蟿?dòng)圖層，可滾動(dòng)圖層和可選屬性將自動(dòng)在“聯(lián)動(dòng)”視圖中列為聯(lián)動(dòng)源。
聯(lián)動(dòng)屬性：擁有聯(lián)動(dòng)源后，您可以使用它來(lái)控制其他屬性。選擇您要控制的圖層，單擊“聯(lián)動(dòng)”視圖中的藍色“+”按鈕，然后選擇您需要的聯(lián)動(dòng)屬性。這將創(chuàng )建一個(gè)具有當前值的關(guān)鍵幀的聯(lián)動(dòng)。這個(gè)單一的關(guān)鍵幀本身不會(huì )做任何事情，這導致我們要添加下面的聯(lián)動(dòng)關(guān)鍵幀：
聯(lián)動(dòng)關(guān)鍵幀：要添加關(guān)鍵幀，請將灰色驅動(dòng)器光標拖動(dòng)到您要添加關(guān)鍵幀的位置，然后更改該屬性的值。原則將自動(dòng)為您插入新的關(guān)鍵幀?？梢酝ㄟ^(guò)單擊關(guān)鍵幀，然后單擊關(guān)鍵幀行左側的紅色按鈕來(lái)刪除關(guān)鍵幀。
2. 組件
Principle2.0中引入的組件允許您在多個(gè)位置重用設計元素，并將嵌入式交互添加到現有畫(huà)板。在內部，組件的工作方式與標準Principle文件類(lèi)似; 他們有自己的畫(huà)板，活動(dòng)和動(dòng)畫(huà)獨立于他們的父母。如果編輯組件的一個(gè)實(shí)例，則將更新該組件的所有其他實(shí)例。組件還可以包含其他組件，從而可以實(shí)現復雜的組合。
組件內的事件的工作方式與組的子圖層上的事件的工作方式相同。如果組或組件的子圖層具有點(diǎn)擊事件，則會(huì )觸發(fā)該點(diǎn)按事件，而不會(huì )點(diǎn)擊該組或父級上的事件。
如果需要創(chuàng )建一個(gè)更改大小的組件，例如彈出菜單，最好的方法是使組件的大小與折疊菜單的大小相同，然后使擴展的菜單層超出該范圍。如果您將組件設置為展開(kāi)菜單的大小，即使折疊也會(huì )阻止觸摸，因為畫(huà)板非常大。
創(chuàng )建和編輯：要創(chuàng )建組件，請在畫(huà)板上選擇一個(gè)或多個(gè)圖層，然后單擊“Principle”工具欄中的“創(chuàng )建組件”按鈕。這些圖層將組合在一個(gè)組件中，您將進(jìn)入該組件以開(kāi)始編輯它。單擊Principle的畫(huà)布左上角的“返回到父級”按鈕，返回到創(chuàng )建組件的位置。如果以后需要再次編輯組件，可以選擇它并單擊檢查器中的“編輯組件”按鈕。您也可以雙擊要編輯的組件，或在選擇組件時(shí)按Enter鍵。
您可以將現有的Principle文件拖到畫(huà)布上，以將其作為組件導入。
觸摸路徑：主要路線(xiàn)接觸最深的最頂層。如果你有一個(gè)組件或透明層高于其他一切，它將接收觸摸。組件畫(huà)板可以調整為較小或不在屏幕外，以便當內容不可見(jiàn)時(shí)，組件的畫(huà)板層不會(huì )接收到觸摸。
如果組件中的觸摸事件和組件父級中的觸摸事件，組件的觸摸甚至會(huì )觸摸，因為它是最深的層。這與在兩個(gè)組和組的子圖層上都有事件時(shí)觸發(fā)路由的方式相同。
3. 導入
Sketch和Figma是經(jīng)常用于靜態(tài)界面設計的矢量繪圖程序。通過(guò)單擊工具欄中的導入按鈕或轉到文件>導入，可以將在Sketch和Figma中創(chuàng )建的設計導入到Principle中。
您需要導入一些內容時(shí)：
1.Sketch或Figma必須打開(kāi)文檔
2.文檔必須在當前頁(yè)面上至少有一個(gè)Sketch Artboard或Figma Frame
如果文檔有多個(gè)頁(yè)面，則將導入當前頁(yè)面。
Principle將按照它們在頁(yè)面上顯示的順序，從左到右，然后從上到下導入Sketch畫(huà)板和Figma框架。
在導入過(guò)程中，有一些事情會(huì )導致圖層自動(dòng)展平為圖像：
路徑：不僅僅是具有單個(gè)半徑的圓角矩形的圖層將被展平
填充：圖層必須具有單一的純色填充，以避免被展平。
邊框：圖層最多只能有一個(gè)單一的實(shí)心內邊框，否則它們會(huì )變平
模糊和其他效果：具有模糊或其他效果的圖層將會(huì )變平
具有遮罩層的蒙版組或畫(huà)板將拼合成單個(gè)圖層。為了最大限度地減少由于蒙版而變平的圖層數量，您可以將蒙版圖層和蒙版圖層分組。
文本文本圖層被展平為圖像，因為Principle不支持Sketch中的所有文本選項。展平文本的另一個(gè)好處是確保在iOS上查看Principle文件時(shí)所有字體都能正確呈現，而iOS上的字體與Mac不同。
導入故障排除：如果導入失敗，您可以重新啟動(dòng)Principle以重新運行它的兼容性檢查。在某些情況下，需要更新Principle才能從Sketch的新版本導入，這可能已經(jīng)更改了其腳本API。如果沒(méi)有可以從您的Sketch版本導入的新版本的Principle，則Principle將在導入對話(huà)框中顯示一個(gè)鏈接以下載兼容版本的Sketch。如果導入仍然失敗，您可以與我們聯(lián)系，提供有關(guān)您擁有的Principle和Sketch版本的信息，我們將對其進(jìn)行調查。
4. 導出
一旦你創(chuàng )造了完美的交互，你就會(huì )想要向世界展示。有幾種方法可以做到這一點(diǎn)。
圖片：通過(guò)選擇圖層并單擊“文件”菜單中的“導出所選圖層的圖像”，可以將圖層導出為圖像。這會(huì )將每個(gè)選定圖層的PNG圖像導出到保存Principle文件的文件夾，如果尚未保存Principle文件，則將桌面導出到桌面。
視頻和GIF動(dòng)畫(huà)：要導出設計的視頻或動(dòng)畫(huà)Gif，請單擊預覽窗口右上角的攝像頭圖標。您可以選擇使用圓形觸摸光標，箭頭光標，或將光標隱藏在錄制中。選擇光標選項后，Principle將開(kāi)始預覽窗口的屏幕錄制。因為它實(shí)際上是在錄制您的屏幕，所以視頻的導出大小受到顯示器分辨率的限制。當圖標開(kāi)始閃爍時(shí)，錄制已開(kāi)始，您可以開(kāi)始與您的設計進(jìn)行交互（錄制開(kāi)始可能需要一些時(shí)間）。完成錄制設計后，再次單擊相機圖標以停止錄制。
導出為Mac程序：如果您想將您的設計分享給可能沒(méi)有Principle的其他人，您可以導出一個(gè)獨立的Mac程序，任何人都可以打開(kāi)該程序。注意：Mac應用程序的導出在Mac計算機上運行，而不是在iPhone上運行。要導出Mac設計，請轉到文件>導出為Mac。生成的應用程序可以根據您的需要進(jìn)行共享，但根據您的共享方式，在將應用程序上傳到文件共享服務(wù)或通過(guò)電子郵件發(fā)送之前壓縮應用程序可能會(huì )有所幫助。
動(dòng)畫(huà)價(jià)值：Principle使用標準貝塞爾緩動(dòng)函數，以及動(dòng)畫(huà)的延遲和持續時(shí)間值。由于這是描述動(dòng)畫(huà)的標準方式，因此無(wú)論您要定位哪個(gè)平臺，這些值通常都會(huì )直接映射到代碼中。單擊并按住關(guān)鍵幀以查看其時(shí)間偏移。單擊關(guān)鍵幀之間的藍色區域以訪(fǎng)問(wèn)其緩動(dòng)曲線(xiàn)。Spring動(dòng)畫(huà)使用標準的RK4物理積分器。我們不建議使用任何帶有持續時(shí)間參數的UIKit彈簧API，因為這是彈簧物理的粗略近似，而不是真正的彈簧模擬。
5. 性能
與靜態(tài)設計工具不同，Principle需要以平滑的60幀/秒為您的設計制作動(dòng)畫(huà)。您通常不必考慮這一點(diǎn)，但為了獲得最佳性能，請記住以下幾點(diǎn)：
①使用與其顯示的圖層大小相同的圖像和視頻。
②如果您正在設計照片查看界面，您可能會(huì )直接從相機拍攝一些非常大的樣本照片，例如超過(guò)3000 x 3000像素。由于界面可能只顯示某些圖像的150x150像素圖標，因此在將圖像拖入“Principle”之前，將有助于調整圖像大小和裁剪圖像。
③將非動(dòng)畫(huà)組展平為單個(gè)圖層。
④某些組表示靜態(tài)元素，如圖標或狀態(tài)欄，并且不會(huì )相對于彼此進(jìn)行動(dòng)畫(huà)處理。將這些層組合為單個(gè)展平層是有幫助的。如果從Sketch導入，則可以將“principle flatten”（不帶引號）附加到Sketch中組名稱(chēng)的末尾，以使原則將組導入為單個(gè)展平圖像層。
⑤將圖層用作組。
Principle的矩形層可以包含子層，就像一個(gè)組。使用此技巧可減少總層數。例如：按鈕的文本圖層可以直接放在其后面的矩形圖層中，而不是將兩個(gè)圖層包裝在一個(gè)組中。
