Principle是一個(gè)為Web，移動(dòng)和桌面設計動(dòng)畫(huà)和交互式用戶(hù)界面的工具，通過(guò)允許您在投入寶貴的工程時(shí)間之前快速評估您的想法，Principle顯然更致力于提供通用功能的工具箱，這些功能可以創(chuàng )造性的方式組合以產(chǎn)生各種結果。
接下來(lái)我們來(lái)一起了解一下關(guān)于Principle部分的軟件功能
1. 界面
畫(huà)布： Principle中心的畫(huà)布是您完成大部分工作的地方。它包含所有畫(huà)板，以及它們之間的過(guò)渡。當前的畫(huà)板以綠色邊框突出顯示。Principle自動(dòng)從左到右定位畫(huà)板。您可以通過(guò)在圖層列表中拖動(dòng)它們來(lái)重新排序畫(huà)板，除此之外沒(méi)有其他辦法重新定位它們。當您在畫(huà)板的邊界外移動(dòng)圖層時(shí)，Principle會(huì )將畫(huà)板分隔開(kāi)來(lái)。
預覽：預覽允許您隨時(shí)與設計進(jìn)行交互，它就?？吭诋?huà)布的角落。它也可以通過(guò)將其拖離畫(huà)布而分離到獨立的窗口中。您可以通過(guò)選擇“視圖” - >“切換預覽光標類(lèi)型”來(lái)更改預覽中顯示的鼠標光標。
圖層列表：窗口左下角的圖層列表顯示了設計中的所有圖層?？梢酝ㄟ^(guò)拖動(dòng)行來(lái)對圖層進(jìn)行分組和取消分組?？梢酝ㄟ^(guò)拖動(dòng)畫(huà)板的行來(lái)更改畫(huà)布上的畫(huà)板順序。
隱藏的圖層：將鼠標懸停在圖層的行上會(huì )顯示隱藏按鈕，該按鈕看起來(lái)像一只眼睛。單擊該圖標可在編輯器中切換圖層的可見(jiàn)性，但不會(huì )影響圖層在預覽中的可見(jiàn)性。
鎖定的圖層：可以通過(guò)轉到“排列”菜單并選擇“鎖定圖層”來(lái)鎖定圖層。鎖定后，將無(wú)法在畫(huà)布中選擇鎖定的圖層。如果圖層被鎖定，則圖層列表中將顯示鎖定圖標。單擊鎖定圖標以解鎖圖層。將鼠標懸停在鎖定圖層上會(huì )在光標旁邊顯示一個(gè)鎖定圖標，讓您知道點(diǎn)擊可能無(wú)法選擇您期望的圖層。如果要在畫(huà)布中選擇鎖定圖層，可以右鍵單擊圖層并使用“選擇圖層”菜單將其選中。
檢查器：在窗口左側和圖層列表上方，檢查器會(huì )顯示所選圖層的屬性。
動(dòng)畫(huà)面板：動(dòng)畫(huà)面板出現在窗口底部，用于自定義畫(huà)板之間的動(dòng)畫(huà)?？梢酝ㄟ^(guò)單擊工具欄上的“動(dòng)畫(huà)”按鈕或在畫(huà)布上選擇過(guò)渡箭頭來(lái)顯示它。
聯(lián)動(dòng)面板：在窗口頂部，“聯(lián)動(dòng)”面板顯示當前選定的畫(huà)板的聯(lián)動(dòng)。“聯(lián)動(dòng)”用于創(chuàng )建復雜的連續交互。
2. 繪畫(huà)
畫(huà)板：Principle的畫(huà)板與其他繪圖程序的工作方式類(lèi)似：每個(gè)都代表了您設計的獨特狀態(tài)?？梢愿漠?huà)板的大小以適應不同的設備或窗口大小。所有畫(huà)板都具有相同的尺寸。如果您需要更改尺寸，模擬旋轉或更改窗口大小，請使畫(huà)板成為您需要的最大尺寸，并使內容在該區域內更改。某些畫(huà)板在概念上可能是相同的屏幕，但略有不同。例如：除了播放/暫停按鈕之外，音樂(lè )播放器設計的兩個(gè)畫(huà)板可以是相同的。
預覽窗口顯示的畫(huà)板在編輯器中將有一個(gè)綠色邊框; 新圖層將添加到此畫(huà)板中。
矩形：擊工具欄的“矩形”按鈕或按“R”將新矩形添加到當前畫(huà)板?？梢酝ㄟ^(guò)將矩形的半徑設置為較大的值來(lái)創(chuàng )建圓。通過(guò)將圖像（PNG，JPEG，TIFF）拖動(dòng)到檢查器中的圖像上，可以將圖像背景添加到矩形中。創(chuàng )建的矩形大小為44x44點(diǎn) - iOS的推薦點(diǎn)擊區域大小。
文本：文本圖層具有與“矩形”圖層類(lèi)似的屬性，并添加了字體外觀(guān)，對齊方式和大小。無(wú)法設置字體外觀(guān)和對齊屬性的動(dòng)畫(huà)。
自定義字體：并非您的計算機上的所有字體都可在iOS上使用，并且不會(huì )出現在“預覽”中。使用AnyFont等應用在您的設備上安裝非iOS字體。
圖像，視頻，音頻：通過(guò)從Finder拖動(dòng)或使用復制/粘貼，可以將圖片，影片和聲音導入到Principle中。如果您是Sketch用戶(hù)，則從Sketch復制會(huì )將所選內容展平為單個(gè)圖像。默認情況下，圖像和視頻圖層的寬高比處于鎖定狀態(tài)，可以通過(guò)單擊檢查器中的鎖定圖標來(lái)關(guān)閉它。
3. 持續交互
Principle中有三種常見(jiàn)的交互：拖動(dòng)，滾動(dòng)和分頁(yè)滾動(dòng)。這些可以在圖層的垂直和水平軸上獨立啟用。
拖動(dòng)：當您想要在圖層上保持觸摸時(shí)允許圖層的位置移動(dòng)時(shí)，啟用對圖層的拖動(dòng)。
滾動(dòng)：可以在組圖層上啟用滾動(dòng)。當手指在滾動(dòng)圖層上拖動(dòng)時(shí)，子圖層將隨手指移動(dòng)，但組本身不會(huì )改變位置。地圖，消息線(xiàn)程或任何大型內容都是滾動(dòng)的理想選擇。如果你在沒(méi)有任何子圖層的圖層上打開(kāi)滾動(dòng)，Principle會(huì )自動(dòng)為你創(chuàng )建一個(gè)滾動(dòng)窗口組，非常的棒。在滾動(dòng)圖層上啟用“剪輯子圖層”，以在子圖層滾動(dòng)到組外時(shí)隱藏子圖層。
分頁(yè)：分頁(yè)就像滾動(dòng)一樣，除了它在滾動(dòng)結束時(shí)自動(dòng)將其滾動(dòng)位置捕捉到組大小的增量。使用分頁(yè)圖像輪播，帶圖標的主屏幕，任何現在如此受歡迎的卡片用戶(hù)界面。如果您想在頁(yè)面之間添加填充，請使分頁(yè)組略大于一個(gè)元素，并將元素分隔開(kāi)。
4. 事件
事件是觸發(fā)畫(huà)板之間的過(guò)渡。要添加事件，請在畫(huà)布上選擇一個(gè)圖層，然后單擊其右側顯示的閃電按鈕，然后從其中一個(gè)圓圈拖動(dòng)到目標畫(huà)板。將從源畫(huà)板指向目標畫(huà)板的畫(huà)布添加過(guò)渡箭頭。
5. 動(dòng)畫(huà)
觸發(fā)事件時(shí)，Principle會(huì )在當前畫(huà)板和事件的目標畫(huà)板之間進(jìn)行動(dòng)畫(huà)補全。
動(dòng)畫(huà)映射：如果不同畫(huà)板上的兩個(gè)圖層具有相同的名稱(chēng)，則原則將在過(guò)渡期間自動(dòng)為它們設置動(dòng)畫(huà)。如果源和目標畫(huà)板上沒(méi)有具有相同名稱(chēng)的圖層，則圖層將消失或顯示為沒(méi)有動(dòng)畫(huà)。
動(dòng)畫(huà)面板將在源和目標畫(huà)板上同時(shí)存在名稱(chēng)的圖層上顯示動(dòng)畫(huà)屬性。如果我們在畫(huà)板1上有一個(gè)同名的圖層，位于（x：0，y：0），畫(huà)板2位于（x：0，y：50）。動(dòng)畫(huà)面板將顯示y屬性的動(dòng)畫(huà)信息，但不顯示x屬性。
自定義動(dòng)畫(huà)：默認情況下，所有動(dòng)畫(huà)的持續時(shí)間均為0.3秒，并使用iOS和OSX中使用的默認緩動(dòng)曲線(xiàn)。您可以在動(dòng)畫(huà)視圖中自定義此視圖。單擊畫(huà)板上方的過(guò)渡箭頭將顯示動(dòng)畫(huà)視圖，其中列出了將要設置動(dòng)畫(huà)的所有屬性以及更改時(shí)間和緩動(dòng)的時(shí)間軸。
關(guān)鍵幀：動(dòng)畫(huà)視圖中的每一行都顯示兩個(gè)關(guān)鍵幀，一個(gè)表示動(dòng)畫(huà)的開(kāi)始時(shí)間，另一個(gè)表示結束。拖動(dòng)這些關(guān)鍵幀會(huì )更改動(dòng)畫(huà)的延遲和持續時(shí)間。
凍結屬性：有時(shí)，在轉換期間保持前一個(gè)畫(huà)板的屬性值是有用的。原則將這些類(lèi)型的屬性稱(chēng)為“凍結”。您可以通過(guò)單擊動(dòng)畫(huà)面板中的雪花圖標來(lái)凍結屬性。凍結屬性可防止其在轉換期間發(fā)生變化，從而實(shí)現動(dòng)畫(huà)制作。凍結屬性可用于記住來(lái)自其他畫(huà)板的內容，例如滾動(dòng)偏移，可拖動(dòng)圖層的位置或組件所在的畫(huà)板。原理默認情況下凍結Scroll X和Scroll Y屬性，以便在畫(huà)板之間保持滾動(dòng)位置。如果您需要一個(gè)事件來(lái)滾動(dòng)到特定位置，您可以解凍Scroll X和Y.
