探究了一下 。 呃~~作出了下邊這玩意
做的好的是這樣的,瞬間把自己給菜了,給大家看看,設計需要UI功夫啊
把這個用上你的界面就搞基了,圖形在水平、垂直上的動態效果(*。*)
簡歷圖形文字文件 拖動就可以分組了 能干啥吃:你找的時候就造了
原理是為Web,移動和桌面設計動畫和交互式用戶界面的工具(一些設計團隊甚至將其用於虛擬現實!)。通過允許您在投入寶貴的工程時間之前快速評估您的想法,原則將加速設計開發周期。在決定最終設計后,原型原型將工程團隊的想法傳達給工程師。
原則不是提供專門用於傳遞設計趨勢或利基用例的功能,而是努力提供一個通用功能的工具箱,可以以創造性的方式組合以產生各種各樣的結果。由於無法涵蓋這些功能可以組合的所有方式,本文檔將重點介紹“原則”的工作原理,並將其留給讀者發現創意應用程序。
接口
帆布
原則中心的畫布是您做大部分工作的地方。它包含所有畫板,以及它們之間的轉換。當前的畫板突出顯示綠色邊框。原則會自動將您的畫板從左到右放置。您可以通過在圖層列表中拖動其行來重新排列畫板,但否則無法重新定位。當您在畫板邊界之外移動圖層時,原理將會放出您的畫板。
預習
“預覽”允許您隨時與設計進行交互,並且停靠在畫布的角落。將其從畫布上拖動可以分離到自己的窗口中。您可以通過選擇視圖 - >切換預覽光標類型來更改預覽中顯示的鼠標光標。
圖層列表
窗口左下角的圖層列表顯示您設計中的所有圖層。可以通過拖動其行來對圖層進行分組和取消分組。可以通過拖動畫板的行來更改畫布上的畫板順序。詳細了解圖層
隱藏層
懸停在圖層的一行顯示隱藏按鈕,看起來像一個眼睛。單擊圖標可以在編輯器中切換圖層的可見性,但不會影響圖層在預覽中的可見性。
鎖定層
可以通過轉到排列菜單並選擇“鎖定層”來鎖定圖層。無法在畫布中選擇鎖定的圖層。如果圖層被鎖定,圖層列表中將顯示鎖定圖標。單擊鎖定圖標以解鎖圖層。將鼠標懸停在鎖定的圖層上將會顯示光標旁邊的鎖定圖標,讓您知道點擊可能不會選擇您期望的圖層。如果要在畫布中選擇鎖定圖層,可以右鍵單擊該圖層,然后使用“選擇圖層”菜單進行選擇。
檢查員
窗口左側和圖層列表上方,檢查器顯示所選圖層的屬性。
動畫面板
出現在窗口底部的“動畫”面板用於自定義畫板之間的動畫。可以通過單擊工具欄上的Animate按鈕或通過在畫布上選擇一個轉換箭頭來顯示。詳細了解動畫
司機面板
在窗口頂部,“驅動程序”面板顯示當前選定的“工作板”驅動程序。驅動程序用於創建復雜的連續交互。了解更多關於司機
畫畫
乍一看,原理就像一個平面設計工具,就像你使用的其他工具一樣。基本元素可以在原則內部創建,並且圖像可以導入其他所有內容。
畫板
原則的畫板與其他繪圖程序類似:每個都是您設計的獨特狀態。畫板的大小可以改變,以適應不同的設備或窗口大小。所有畫板的尺寸都相同。如果您需要更改尺寸,以模擬旋轉或更改窗口大小,請將畫板設置為最大尺寸,並使內容在該區域內更改。一些畫板可能在概念上是相同的屏幕,但有微小的差異。例如:除了播放/暫停按鈕之外,音樂播放器設計的兩個畫板可能是相同的。
預覽窗口顯示的畫板在編輯器中將會有一個綠色邊框; 新圖層將添加到此畫板。
矩形
單擊工具欄的“矩形”按鈕或按“R”將新的矩形添加到當前畫板。可以通過將矩形的半徑設置為較大的值來創建圓形。通過在檢查器中將圖像(PNG,JPEG,TIFF)拖放到圖像上,可以將圖像背景添加到矩形。矩形的大小為44x44點,建議點擊面積大小為iOS。
文本
文本圖層具有與矩形圖層相似的屬性,並添加了字體,對齊和大小。字體和對齊屬性無法動畫。
自定義字體
您的計算機上並不是所有的字體都可以在iOS上使用,並且不會出現在“原始鏡像”中。使用像AnyFont這樣的應用程序在您的設備上安裝非iOS字體。
圖像,視頻,音頻
圖像,視頻和音頻可以通過從Finder拖動或通過復制/粘貼導入原則。如果您是草圖用戶,則從草圖復制將選擇變為單張圖像。默認情況下,圖像和視頻圖層的寬高比被鎖定,可以通過單擊檢查器中的鎖定圖標將其關閉。
資產被復制到原則文件中,以便可以移動,電子郵件和查看設計,而不會丟失其資產。因此,盡量使用最短的視頻和音頻資源來保持文件大小的下降。連接到運行“原則鏡”的iOS設備時,將資產大小降低也將提高速度。
設計中不支持動畫GIF,因為它們可以同時非常大(壓縮差)和低質量(僅支持256色)。他們也表現很差,因為與視頻不同,沒有硬件解碼器。我們建議使用視頻進行小動畫,而不是嘗試使用gif。
更改圖層的資產
要更改圖層的圖像,請將新圖像拖動到檢查器中的媒體按鈕上,或單擊檢查器中的媒體按鈕,然后單擊菜單中的“選擇...”。如果還有其他層也使用舊資產,則“原則”將為您提供使用新資產更新所有這些圖層的選項。
可以通過單擊檢查器中的媒體屬性並單擊菜單中的“剪切”從圖層中刪除資產。
高分辨率圖像
在文件名末尾帶有“@ 2x”或“@ 3x”的圖像將以1x點大小導入,資源在視網膜屏幕上觀看時將看起來正確。如果您已經導入了沒有后綴的高分辨率圖像,則手動將圖層的寬度和高度減半會導致相同的事情。(專業提示:檢查員的文本領域了解“320/2”的基本方程式)
從草圖或其他工具復制和粘貼通常會導致1x資產,因此在導入原則之前以視網膜分辨率出口確保資產的尺寸正確。
視頻和音頻播放
視頻和音頻資源將在鼠標懸停在預覽窗口上時播放。默認情況下,資產將永久循環,但可以通過單擊檢查器中的媒體按鈕並選擇“播放一次”來更改。
要在畫板之間無縫播放視頻或音頻,只需將視頻或音頻圖層復制到兩個畫板,並確保圖層具有相同的名稱。媒體時間屬性默認凍結,允許無縫播放,但可以手動解凍以使播放重新開始。了解有關凍結屬性的更多信息
組
可以通過選擇它們並單擊工具欄中的“組”按鈕,或按Command + G,將圖層分組在“原則”中。您也可以通過在圖層列表的另一個頂部拖動一行來對圖層進行分組。
原則中的組實際上只是具有一些子層的矩形層。團體有自己的位置和大小,無論其子層的位置如何。這是UIKit,Android和DOM繪制和動畫元素的方式,如果您習慣於組合在像Photoshop和Sketch等程序中工作的方式,可能會意外。這種行為有助於使圖層的交互區域更大,圍繞不同的原始位置旋轉圖層,或者層疊多個動畫。
裁剪/掩蔽/裁剪
您可以通過分組(Command + G)並啟用組上的“剪輯子層”來裁剪圖層。要獲得圓面罩,請調高組的半徑屬性。
改變錨點
默認情況下,圖層將旋轉並圍繞其中心進行縮放。如果您想在某個其他位置旋轉或縮放圖層,則可以使用一個組來實現。通過對圖層進行分組,將其定位在組內並旋轉組,您將圍繞新的錨點旋轉圖層。使組的寬度和高度為0有助於使得更容易知道旋轉點的位置。
持續互動
原則中有三種常見的互動:拖動,滾動和分頁滾動。這些可以在圖層的垂直和水平軸上獨立啟用。
拖延
當您希望允許圖層的位置移動時,當觸摸被覆蓋時,可以在圖層上進行拖動。
滾動
可以在組圖層上啟用滾動。當手指在滾動圖層上拖動時,子圖層將隨着手指移動,但組本身不會改變位置。地圖,留言線程或任何大內容是滾動的絕佳候選人。如果您打開在沒有任何子圖層的圖層上滾動,則“原則”將自動為您創建一個滾動窗口組,多么好。打開滾動圖層上的“剪輯子圖層”,以便在滾動到組外部時隱藏子圖層。
分頁
分頁就像滾動一樣,除了在滾動結束時自動將其滾動位置按照組大小增加。使用分頁圖像轉盤,帶有圖標的主屏幕,任何現在如此受歡迎的卡UI。如果要在頁面之間添加填充,則使分頁組比一個元素大一點,並將元素放空。
活動
事件觸發畫板之間的轉換。要添加事件,請在畫布上選擇一個圖層,然后單擊右側顯示的閃電按鈕,然后從其中一個圓圈拖動到目標畫板。一個轉換箭頭將被添加到從源畫板指向目標畫板的畫布上。
將出口箭頭拖動到所選圖層的畫板將創建一個重復的畫板。
不透明度為0%的層不互動。要創建一個清晰的可觸發區域,請使用清除填充而不是0%不透明度。
有幾種類型的事件:
-
拖動開始 #
當手指放在圖層上並開始移動時,會觸發此事件。將此事件添加到圖層將使圖層不能拖動。如果目標畫板中具有相同名稱的圖層,則其可拖動狀態將決定事件觸發后拖動交互是否繼續。 -
拖動結束 #
在層上移動的手指松開時觸發。將此事件添加到圖層將將其垂直和水平屬性設置為拖動。 -
滾動開始 #
可滾動圖層開始滾動時觸發。將此事件添加到圖層將其垂直和水平屬性設置為滾動。 -
滾動發布 #
手指滾動圖層時觸發。此事件適用於滾動和分頁。由於減速或分頁動畫,內容可能在此事件之后繼續滾動。將此事件添加到圖層將其垂直和水平屬性設置為滾動。 -
滾動結束 #
滾動到達完成停止時觸發。此事件適用於滾動和分頁。因為減速需要一段時間才能完全停止,所以這個事件可能會比預期的延遲更長時間才能觸發。將此事件添加到圖層將其垂直和水平屬性設置為滾動。 -
觸摸向下 #
手指與圖層接觸時觸發。用於將按鈕轉換為突出顯示的狀態。 -
潤色 #
手指抬起一層時觸發。用於取消突出顯示的按鈕。如果觸摸起源於另一層,則不觸發。 -
長按 #
手指握住層數半秒鍾后觸發。 -
懸停在里面 #
當鼠標在圖層內時觸發 -
懸停在外面 #
當鼠標在圖層之外時觸發 -
汽車 #
自動觸發,無需用戶交互。可以用於循環的原型和動畫。當鼠標懸停在預覽上時,自動事件才會觸發,以節省電池的使用壽命,並保持理智。要為自動事件添加延遲,請單擊自動事件箭頭並在“動畫”面板中延遲其動畫。
要在沒有動畫的屏幕之間延遲自動事件,您可以在稍微不同的位置添加兩個畫板的虛擬圖層。這將創建一個可以延遲的動畫。
留言活動
從原則3.0開始,組件及其父母可以與消息事件通信。消息事件通過允許組件彼此控制而無需導航到完全不同的畫板,大大降低了原型的復雜性。消息事件可以從組件發送到父級,父級到組件,或從組件發送到組件。
事件可以發送消息,收聽消息,或同時發送。事件偵聽並發送消息到特定圖層:組件或組件的父級。對於要工作的消息,必須同時發送和偵聽事件。例如,電子郵件組件可以向父級發送“發送郵件”消息,並且父級具有來自偵聽“發送郵件”消息的組件的事件。只是因為組件發送或監聽特定消息並不一定意味着消息的另一端有一個事件。原則將在創建事件進出組件時為您創建發送和偵聽事件。
發送事件給父母
要將事件從組件發送到其父級,請輸入組件,並像往常一樣開始創建輕敲事件,但將箭頭拖動到畫布左上角的“發送到父級”按鈕。懸停在按鈕上將顯示一個彈出窗口,讓您在父母中選擇一個畫板。這將創建兩個事件:組件中的一個,當觸發器觸發時將消息發送到父級,父級中的另一個事件偵聽相同的消息,然后轉到父級中的另一個畫板。
發送事件到組件
要將事件發送到組件,請將事件箭頭拖動到具有閃爍的藍色邊框的組件上,以顯示組件畫板彈出窗口。然后釋放所需的目的地畫板。
觸發現有組件消息
單擊組件上的閃電按鈕將顯示一個列出傳統事件(如輕擊)的彈出窗口,但也會顯示組件發送給父級的所有消息。
重命名消息事件
原則給消息唯一的默認名稱,如“事件1”,但是您可以更改此事件,以使事件更有意義的名稱或從一個消息切換到另一個消息。
雙擊事件箭頭上的藍色消息可以編輯消息。原則有一點魔法,使其重命名發送的消息將自動重命名偵聽消息,反之亦然。
由於消息只是文本,文本必須完全匹配發送事件以觸發偵聽事件。發送“發送郵件”的事件不會觸發和事件偵聽“發送郵件”。
更改事件類型
如果要更改觸發轉換的事件類型,可以刪除轉換(單擊轉換箭頭,然后按鍵盤上的刪除),並創建具有所需事件類型的新轉換。您的動畫關鍵幀和曲線將不會丟失,因為它們存儲在畫板中,而不是在轉換中。了解有關共享動畫的更多信息。
觸摸路由
觸摸被路由到被標記為可觸摸的頂層,最內層的嵌套層,然后傳遞到父層,直到其中一層可以使用觸摸。
我們來看幾個例子:
組(有Tap事件)
- 層(有Tap事件)
點擊圖層將觸發圖層的點擊事件。該組的事件只能在不觸摸圖層的情況下點擊組,才能被觸發。
另一方面考慮這種情況:
組(有Tap事件)
- 層
點擊圖層會導致組的水龍頭觸發。由於該層不使用觸摸,它會傳遞給使用它進行分接事件的組。
組件工作方式相同:
組(有拖動事件)
- 組件
- 層(在組件中具有拖動事件)
拖動圖層將僅觸發圖層的拖動事件,因為它是最內層,而組上的拖動事件不會觸發。
可觸摸
可觸摸屬性允許您控制圖層是否捕獲觸摸,或允許觸摸通過。將事件(如輕擊)或內置的交互(如拖動)添加到圖層將標記為可觸摸的圖層。取消檢查觸摸可以移除事件並清除其“水平和垂直”屬性。層的可觸摸屬性不會影響其兒童的觸摸屬性:觸摸層將始終可觸摸,即使父母不可觸摸。
對於具有大清晰畫板的組件,無需檢查即可使觸摸不起作用,因此組件不會阻止觸摸進入其后面的其他層。另一方面,有時您希望圖層可觸摸,以防止其他圖層觸摸,例如在設計模態彈出式界面的疊加層時。
動畫
當事件被觸發時,原理在當前畫板和事件的目標畫板之間動畫。
動畫映射
如果不同畫板上的兩層具有相同的名稱,則原則將在轉換期間自動在它們之間生成動畫。如果源和目標畫板上沒有相同名稱的圖層,圖層將消失或出現,無動畫。
動畫面板將顯示名稱存在於源和目標畫板上的圖層的動畫屬性。如果我們在Artboard 1上位於(x:0,y:0)和Artboard 2(x:0,y:50)上有相同名稱的圖層。動畫面板將顯示y屬性的動畫信息,但不顯示x屬性。
自定義動畫
默認情況下,所有動畫的持續時間為0.3秒,並使用iOS和OSX中使用的默認緩動曲線。動畫視圖是您可以自定義的。單擊畫板上方的轉換箭頭將顯示Animate視圖,其中列出了所有將被動畫的屬性以及更改時間和寬松的時間軸。
關鍵幀
動畫視圖中的每一行顯示兩個關鍵幀,一個表示動畫的開始時間,另一個表示結束。拖動這些關鍵幀會改變動畫的延遲和持續時間。
緩解曲線
寬松曲線決定了一個屬性動畫的速度:它是否緩慢移動,然后加快?它是否快速到達最后,然后逐漸緩慢停止?像這樣的行為可以通過緩和曲線來控制。
單擊兩個關鍵幀之間的藍色區域將顯示曲線選擇器。曲線選擇器具有多個內置曲線,以及所選曲線的曲線圖。
內置曲線與iOS和OSX中使用的曲線相同。在任何時候,可以通過在預覽中拖動手柄來調整曲線,或者在彈出窗口底部的手柄上輸入新的坐標。
泉
可以通過在曲線選擇器中選擇“Spring”來使用彈簧動畫。這對於為圖層添加物理和娛樂性是有用的,但不應該被過度使用。曲線選擇器有彈簧張力和摩擦力的選項。春季動畫沒有結束關鍵幀,因為彈簧動畫的結束時間將由物理模擬確定。您可以通過更改張力和摩擦值來間接更改彈簧動畫的持續時間。
凍結屬性
有時,在轉換過程中,保持以前畫板中的屬性的值是有用的。原則稱這些類型的屬性為“Frozen”。您可以通過單擊動畫面板中的雪花圖標來凍結某個屬性。凍結財產可防止在過渡期間改變,從而動畫化。凍結的屬性可用於記住其他畫板的東西,例如滾動偏移,可拖動層的位置或組件所在的畫板。原則默認凍結Scroll X和Scroll Y屬性,以便在畫板之間保持滾動位置。如果您需要一個事件滾動到特定的位置,您可以解凍Scroll X和Y.
動畫是共享的
每個轉換的動畫信息都存儲在轉換目標畫板中。這意味着進入特定畫板的所有轉場將具有相同的動畫設置。例如,如果在從畫板A到畫板B的過渡中使用彈簧動畫,則在從畫板C到畫板B的轉換中也將使用彈簧動畫。
驅動程序
想做出互動視差效果?想要一個圖層在被拖動時旋轉?司機是給你的 驅動程序使用關鍵幀將屬性彼此連接。與動畫轉換不同,“過渡”出現在“畫板之間”中,驅動程序在畫板中工作。單擊驅動程序按鈕顯示或隱藏當前的畫板驅動程序。如果您的鼠標不支持水平滾動,請按住空格並拖動“驅動程序”面板滾動。
驅動程序與動畫時間軸類似,除了基於不斷變化的屬性而不是時間的驅動程序動畫。
驅動源
為了創建一個驅動程序,可以改變的屬性需要存在於畫板上,這被稱為驅動源。可拖動圖層,可滾動圖層和可選屬性將自動列為驅動程序視圖中的驅動程序源。
驅動屬性
一旦你有一個驅動程序源,你可以使用它來控制其他屬性。選擇您要控制的圖層,單擊驅動程序視圖中的藍色“+”按鈕,然后選擇要驅動的屬性。這將創建一個帶有當前值的關鍵幀的驅動程序。這個單一關鍵幀本身不會做任何事情,這導致我們:
驅動程序關鍵幀
要添加關鍵幀,請將灰色驅動程序光標拖動到要添加關鍵幀的位置,然后更改該屬性的值。原則將自動為您插入新的關鍵幀。可以通過點擊關鍵幀來刪除關鍵幀,然后單擊關鍵幀行左側的紅色按鈕。
組件
原則2.0中引入的組件允許您在多個場合重復使用設計元素,並將嵌入式交互添加到現有畫板中。在內部,組件工作就像一個標准的原則文件; 他們有自己的畫板,事件和動畫獨立於他們的父母。如果編輯組件的一個實例,組件的所有其他實例將被更新。組件還可以包含其他組件,使復雜的組合成為可能。
組件內的事件與組的子層上的事件相同。如果組或組件的子層具有點擊事件,則該點擊事件將被觸發,而不會在組或父項上點擊事件。
如果您需要制作更改大小的組件(如彈出菜單),則最佳方法是使組件成為折疊菜單的大小,然后使展開的菜單圖層位於其外。如果您使組件成為擴展菜單的大小,即使折疊,因為畫板太大,它也將阻止觸摸。
創建和編輯
要創建組件,請在畫板上選擇一個或多個圖層,然后單擊“原理”工具欄中的“創建組件”按鈕。這些層將在一個組件中組合在一起,您將被帶入組件以開始編輯它。單擊“原則”畫布左上角的“回到父母”按鈕,返回到創建組件的位置。如果將來需要再次編輯該組件,您可以選擇它,然后單擊檢查器中的“編輯組件”按鈕。您也可以雙擊要編輯的組件,或者在選擇組件時按Enter鍵。
您可以將現有的“原則”文件拖放到畫布上,將其作為組件導入。
觸摸路由
原則路線觸及最深層最上層。如果您的組件或透明層高於一切,它將接收觸摸。組件畫板可以被調整為較小的屏幕或關閉屏幕,以便當內容不可見時,組件的畫板層不會接收到觸摸。
如果組件中的觸摸事件和組件的父級中的觸摸事件有關,組件的觸摸甚至會得到觸摸,因為它是最深層次的。這與在兩個組和該組的子層上都有事件相同時,觸摸被路由。
進口
素描是一種常用於靜態界面設計的向量繪圖程序。在Sketch中創建的設計可以通過單擊工具欄中的導入按鈕導入原則,或者進入文件>導入。
草圖中需要導入一些東西:
1.草圖或草圖測試版必須運行
2.草圖必須打開文檔
3.草圖文檔必須在當前頁面上至少有一個畫板
如果Sketch有多個文檔打開,則活動文檔窗口將被導入原理。如果Sketch文件有多個頁面,當前頁面將被導入。
原則將按照他們在畫布上顯示的順序從左到右,然后從上到下導入草圖畫板。
特殊后綴
-
您可以通過在Sketch中的圖層名稱的末尾添加一個星號(*),將一個組平坦化為單個圖層。這也有助於減少導入原則的層數,保持文件清潔和敏捷。
-
要防止導入圖層,請在Sketch中的圖層名稱的末尾添加一個減號( - )。
縮放
在導入下拉菜單中,您可以選擇在從Sketch導入時,縮放圖像的縮放程度。比例因子不影響圖層的尺寸,只是其圖像的分辨率(如果有)。如果您的Sketch文件為1x分辨率,但您希望將原理原型在2x或3x視網膜屏幕上看起來不錯,則此功能非常有用。原則將記住您使用的最后一個比例因子,因此您每次導入時都不必選擇它。
重新導入
如果您對Sketch文件進行了更改,則可以將其重新導入原則,因此動畫,事件和圖層映射將保持不變。如果要更改從Sketch導入的圖層的位置或其他屬性,最好在Sketch中進行更改,然后重新導入。有時您可能會刪除Sketch中的圖層,然后重繪它,也許使用不同的方法; 在這些情況下,原則不會知道這個新層在概念上是相同的層,所以放置在舊層上的任何事件都將丟失。從Sketch文件中刪除或從另一個Sketch文件導入的繪圖板將不再受到導入的影響。
做出改變
如果您發現需要對圖層進行可視化更改,最好在原始Sketch文檔中進行更改,然后重新導入。這包括創建重復的畫板或圖層。在“原則”中復制導入的圖層將創建一個沒有與Sketch文檔進行1:1映射的圖層,因此它不會受到Sketch文件所做的更改的影響。
層壓扁
盡可能地,“原則”將嘗試將“草圖”圖層導入“原始”原色圖層,從而可以對其屬性進行動畫化。然而,原則和草圖的功能不同,因此導入不能始終為1:1。例如,Principle沒有混合模式,因此所有Sketch圖層都被導入為具有正態混合模式。通常,您可以通過將圖層或圖層組平坦化為單個圖像層來解決這些差異。
在草圖導入過程中,有幾件事情會導致圖層自動變成圖像:
-
路徑
不僅僅是具有單個半徑的圓角矩形的圖層將被平坦化 -
填充
層必須具有單一的純色填充,以避免被壓扁。 -
邊界層
最多只能有一個單一的,固體的,內部的邊界,或者它們將被平坦化 -
模糊和其他效果
具有模糊或其他效果的圖層將變平 -
掩模
組或畫板用掩模層將被削平成單層。為了最小化由於掩模而變平的層數,您可以對掩模層和其屏蔽層進行分組。 -
文本文本圖層被平坦化為圖像,因為原則不支持草圖中的所有文本選項。當在iOS上觀看原始文件時,平鋪文本具有確保所有字體正確呈現的副本,這與Mac上的字體不相同。
導入故障排除
如果導入失敗,您可以重新啟動原理,重新運行它的Sketch兼容性檢查。在某些情況下,需要從新版本的Sketch導入更新原則,這可能會改變其腳本API。如果沒有新版本的原則可以從您的Sketch版本導入,則原則將在導入對話框中顯示一個鏈接,以下載兼容版本的Sketch。如果導入仍然失敗,您可以與我們聯系,了解有關您所擁有的原型和素描版本的信息,我們將對此進行研究。
更新
您可以通過選擇“原則”菜單並單擊“檢查更新”來更新原則。如果檢查更新是灰色的,則更新已經下載並重新啟動,原則將安裝它。如果您的許可證是在最新版本的“原則”發布之前一年以上購買的,則可以購買新的許可證以使用最新版本。
出口
創建完美的互動后,您就可以展現世界。有幾種方法可以做到這一點。
圖片
您可以通過選擇圖層並在文件菜單中單擊“導出所選圖層的圖像”來將圖層導出為圖像。這將導出每個所選圖層的PNG圖像到原始文件保存的文件夾中,如果原始文件尚未保存,則將桌面導出。
視頻和動畫GIF
要導出設計的視頻或動畫GIF,請單擊預覽窗口右上角的相機圖標。您可以選擇使用圓形觸摸光標,箭頭光標或將光標隱藏在錄制中。選擇光標選項后,“原理”將開始“預覽”窗口的屏幕錄制。因為它是字面上錄制您的屏幕,視頻的導出大小受到顯示器分辨率的限制。當圖標開始閃爍時,錄制已經開始,您可以開始與您的設計進行交互(錄制開始可能需要一些時間)。完成錄制設計后,再次單擊相機圖標停止錄制。
視頻導出當前不支持音頻,因此如果您的設計使用聲音,則錄制的視頻將不會顯示。
Gif設置
導出GIF時,您可以從下拉列表中選擇預設或使用以下格式輸入設置來選擇自定義導出大小:
-
45%
任何數字后跟百分號將導出GIF,這是您錄制的縮放版本,輸出將按您輸入的百分比進行縮放。如果指定了百分比,則寬度和高度值將被忽略。 -
134h
導出具有指定高度的gif,保持與畫板相同的寬高比。 -
320w
導出具有指定寬度的gif,保持與畫板相同的寬高比。 -
400w 300h
出口一個指定大小的gif。記錄將按比例縮小以適應此維度,但將保留其原始寬高比。自動添加填充和陰影。顏色設置的顏色將用於填充gif的背景。
關於Gif文件格式的注釋
gif格式很舊(它是在1987年發明的),並且有一些奇怪的驚喜許多人。
-
Gif只支持256色
如果您的設計具有多種顏色或微妙的漸變,您可能會注意到某些顏色丟失,或者將其導出為gif時出錯。這是因為gif文件必須從您的設計中選擇256種顏色,並將整個設計裝入這些顏色。如果你想制作一個非常漂亮的gif,它有助於減少您的設計中的顏色和漸變的數量。或者,出口作為電影將會有更好的顏色。 -
Gif文件是非常大的
大多數人的印象是,gif文件很小,因為他們看到很多小,短的動畫GIF在線。實際上,gif文件格式非常難以將小文件大小與某些內容進行比較,這是不可能的。如果您嘗試導出長達數秒的1080p gif動畫,該文件可以輕松地達到數百兆字節。導出為.mov幾乎總是導致與gif相比較小的文件大小。制作小型gif文件的最佳方法是導出小而短的動畫。 -
Gif只支持1位alpha
不同於PNG,它有8位alpha,gif文件格式只支持1位alpha,這意味着像素完全可見或完全透明。由於不可能逐漸從不透明到透明的過渡,GIF的邊緣與透明度看起來非常鋸齒狀和像素化。不可能從原理導出具有清晰背景或透明元素的gif,因為它看起來很糟糕。 -
Gif動畫是一個資源豬
在幾個gifs的頁面上,您的Web瀏覽器打開,只能注意到您的計算機的粉絲瘋了,電池壽命消失了?這是因為動畫GIF是重要的資源。與現代動畫格式(如mp4)不同,計算機上沒有專門的硬件可以高效地動畫GIF。這就是為什么原則不支持動畫GIF作為圖層。更好地拖動電影。
導出為Mac
如果您想將設計分享給其他可能沒有原則的設計,您可以導出任何具有Mac可以打開的獨立Mac應用程序。注意:導出為Mac運行在Mac電腦,而不是iPhone。如果您想分享您的iOS設計,請參閱在設備上運行。要導出您的設計為Mac,請轉到文件>導出為Mac。所產生的應用程序可以根據您的需要進行共享,但視您的分享方式而定,可能會在將應用程序上傳到文件共享服務或通過電子郵件發送之前將其壓縮。
導出為Mac故障排除
你發送應用程序的人可能會收到一條消息,說“無法打開,因為它來自不明身份的開發人員”。這是因為它是由你(不明身份的開發者)創建的。或者在較新版本的MacOS上,它可能無法正常工作,根本不會提供警告。在任何一種情況下,其他人可以通過控制點擊應用圖標並點擊“打開”來打開應用。
在設備上運行
iOS的原理鏡可用於在iOS上查看和分享您的設計。將Principle Mirror應用程序下載到設備上,並將其連接到計算機的USB端口。Mac原理和原理鏡將自動找到,最頂層的原則文檔將發送到您的設備。在設計評論中,按Cmd〜快速切換打開的原理文檔,iOS應用程序也將切換文件。
即使在與USB斷開連接之后,設計也將繼續運行,從而使其能夠輕松顯示隊友。
分享互動設計
如果您想與他人分享您的設計,以便與他人進行交互,他們可以在iOS設備上安裝Principle Mirror,您可以向他們發送文件。您共享的文件必須具有.prd擴展名,並且無法壓縮,以便iOS在原始鏡像中打開它。
-
電子郵件
要從電子郵件中打開附加的PRD文件,請點擊附件,然后點擊iOS共享按鈕。如果原則不可見,請在共享面板中選擇“原則鏡像”或“打開...”按鈕。 -
您自己的服務器
如果出於安全考慮,您擔心使用文件共享服務,可以將.prd文件放在您自己的FTP服務器上。分享直接鏈接到該文件,其他人可以在手機上查看。Safari將顯示“原則打開”按鈕。 -
Dropbox,Google Drive,Box等
您可以將.prd文件上傳到文件共享服務,並生成文件鏈接。
關於Dropbox的注意事項:
默認情況下,Dropbox鏈接將帶您進入Dropbox頁面而不是文件本身。您可以通過將Dropbox鏈接的結束從“dl = 0”更改為“dl = 1”來繞過此選項。
有關Google雲端硬盤的注意事項:
Google雲端硬盤應用有特殊文件類型的問題,因此我們不建議您使用它來共享原則文件。
動畫值
原則當前不導出動畫值,但工程師可以在原理中看到它們。單擊並按住關鍵幀以查看其時間偏移量。單擊關鍵幀之間的藍色區域以訪問其緩動曲線。這些值與平台無關。
給予反饋
如果您有反饋意見,我們想聽聽!要注意的最好方法是通過轉到“幫助”菜單項並選擇“聯系客戶支持”,向“原則”本身發送反饋。不像發布到社交網絡,這確保它被添加到我們的工作隊列。
大多數修復的錯誤都由一個人報告!如果你看到一個問題,不要以為我們知道,或者別人報告。最有幫助的錯誤報告包括重現新文檔中的問題的步驟,以及可能需要觸發問題的任何支持媒體的鏈接(草圖文件,圖像等)。
功能要求是值得贊賞的,但如果您描述您的問題,而不是建議一個功能來解決您的問題,這將更為有用。
性能
與靜態設計工具不同,原理需要以平滑的60幀每秒動畫設計。你通常不必考慮這個,但是為了獲得最佳的表現,請記住以下幾點:
- 使用他們將要顯示的層的大小的圖像和視頻。
如果您正在設計照片查看界面,則可能會有一些照片來自非常大的照片,例如超過3000×3000像素。由於界面只能顯示一些圖像的150x150像素圖標,因此可以在將圖像拖入原理之前調整大小並裁剪圖像。 - 將非動畫組合成單個圖層。一些組表示靜態元素,如圖標或狀態欄,並且不會相對於彼此動畫。將這些層作為單個扁平層組合是有幫助的。如果您從草圖導入,您可以在草圖中將星號*附加到組名稱的末尾,以使原則將該組導入為單個展平圖像層。
- 使用圖層作為組。原則矩形圖層可以包含子圖層,就像一個組。使用這個技巧來減少總層數。Fro示例:按鈕的文本圖層可以直接放置在其后面的矩形圖層中,而不是將兩個圖層包裹在一個組中。
快捷鍵
圖層
添加矩形:R(Alt + R添加為子)
添加文本:T(Alt + T添加為子項)
添加畫板:A
組:Cmd + G
取消組合:Cmd + Shift + G
轉到前面:Shift + Cmd + ]
向前轉:Cmd +]
向后發送:Cmd + [
發送到:Shift + Cmd + [
編輯
推動:箭頭鍵
大推子:Shift +箭頭鍵
旋轉:Cmd +拖動手柄
以15度遞增旋轉:Cmd + Shift +拖動手柄
重復:Cmd + D
重復和移動:Alt +拖動
Inspector Textfields:了解基本方程,如“320/2 + 10”
檢查器標簽:拖動文本框標簽快速擦除值
重命名層:Cmd + R
帆布導航
平移:空格+拖放
放大:Z +點擊
放大:Alt + Z +點擊:
連續縮放:Alt +空格+拖放
放大:Cmd + =
縮小:Cmd + -
全部縮放:Cmd + 1
縮放選擇:Cmd + 2
中心選擇:Cmd + 3
實際大小:Cmd + 0
司機導航
平移:空格+拖動
放大:Z +點擊
放大:Alt + Z +點擊:
連續縮放:Alt +空格+拖動
動畫導航
平移:空格+拖動
選擇
選擇父母:Esc
選擇孩子:輸入
選擇下一個兄弟姐妹:選項卡
選擇上一個兄弟姐妹:Shift + Tab
選擇所有兄弟姐妹:Cmd + A
預習
更改光標類型:視圖 - >切換預覽光標類型
回放原型:W
開始錄制視頻:Ctrl + V
開始錄制無光標的視頻:Ctrl + Alt + V
經常問的問題
你有教育折扣嗎?
我們為學生和教師提供了50%的教育折扣。一旦您嘗試免費試用並准備購買,請聯系我們,並附上您的課程表和學生證的圖片鏈接,我們將為您提供折扣鏈接!鏈接到達后兩天。
可以使用多少台機器?
只要您是唯一使用它的用戶,您的所有計算機都可以使用單一用戶許可證。可以使用多用戶許可證來增加其購買的人數。
如何將我的許可證轉移到新機器
輸入新機器上的鑰匙,你會很樂意去。
許可證如何工作?
許可證用於購買一年內發布的更新。您可以繼續使用您無限期的版本,即使在更新年份結束之后。如果您想要獲得將來的更新,您可以購買新的許可證密鑰。
你能給我發送我的收據的副本嗎?
每次購買都會自動發送收據,但可能已被您的電子郵件系統阻止或標記為垃圾郵件。如果您沒有看到它,請通過您購買的電子郵件與我們聯系,我們可以查看您的收據。
如何獲得增值稅退款?
具有增值稅號的公司購買后可以獲得增值稅退稅。在您的電子郵件收據上,單擊說明GENERATE的按鈕。在那里,您可以輸入您的增值稅注冊號碼,並自動處理您支付的增值稅的退款。這筆退款將需要2-3天才能到達您的信用卡或PayPal帳戶。
我可以添加其他用戶到現有許可證?
不是在這個時候,你必須購買新的許可證。
發票
您可以通過單擊購買后收到的電子郵件中的鏈接來生成發票。
我在VM上運行原理,有些事情不行
虛擬機不支持原則的所有功能,因此不起作用。原理設計為在Apple硬件上運行本地安裝的macOS。
Mac應用商店的原理是否可用?
我們不打算在Mac App Store發布原則,因為它的所有挫折。通過在店外銷售,我們可以隨意發布更新,如果原則在App Store中,則可以免費追求可能無法實現的高級功能。
原則的路線圖是什么?你要添加_ _嗎?
我們不談我們的未來計划。
原則支持什么平台?
原則在OS X 10.10或更高版本上運行,原則鏡像在iOS 8或更高版本上運行。
您是否提供批量,批量或組合折扣?
我們不。
EULA
經銷商問題
您是否提供經銷商折扣?
我們不。
你能提供報價嗎?你的定價是什么?
我們不提供超出購買頁面列出的定價的報價。列出的價格可能會隨時變化,不是保證。
為多個用戶購買
可以通過更改購買頁面上的數量來購買多個座位許可證密鑰。如果將數量設置為大於1,您將獲得單個許可證密鑰,而不是在多台計算機上使用。
為別人購買
可以通過在結帳時單擊禮物圖標為其他人購買許可。收件人將收到帶有許可證密鑰的電子郵件,買方將收到發票。
你接受采購訂單,傳真等嗎?
不,我們的網站處理整個采購過程。
你可以填寫這份表格,合同等嗎?
由於我們收到的查詢數量,我們不能以銷售方式填寫表格,合同等。結帳過程由我們的采購頁面完全自動處理,方便您的理解。
聯系我們
如果上述常見問題解答不能解答您的問題,請在此處與我們聯系。