本以為這是篇 step to step 的基礎教程，然而并不是...小白們看不太明白，看得明白的也不需要它。有基礎的同學就當練習來看吧。小白同學也有福利，大神們早就為我們準備好了 Principle 中文文檔，哪里不會看哪里，聰明的你琢磨琢磨只要半小時，就能輕松駕馭目前最好用的移動端 UX 原型設計軟件，搭配 Sketch 那簡直雙劍合璧！
為了方便同學們實踐這個教程，我特意“復刻”了一份 Sketch 原稿外加兩個例子，點這里， 密碼: 2j8e（僅供學習交流，禁止一切商業(yè)用途）。
<small>ps：這一切的基礎是，你要有一臺Mac電腦，祝大家食用愉快~</small>
<small>pps：本篇為譯文，英文無障礙的同學建議直接看原文</small>

以下為正文內容：

如何制作一個包含所有交互動作并且可點擊的原型。

有多少次你嘗試和開發(fā)小哥解釋你那天才般的設計？你一邊用手比劃，用故事板，或者是簡單的原型配合已經完成的設計圖稿——有沒有發(fā)現完全雞同鴨講。現在只需要簡單的幾步操作，Principle 就可以幫助你展示基礎的交互動作。在看完這篇文章之后，這四個技巧會助你更直觀地表達自己的想法。
這是我為 HUB Mobile 這個應用制作的日歷設計稿，起初我通過在 InVision app 上傳部分設計稿來試圖向我的朋友們解釋我的交互構想。但是失敗了。然后我花了2個小時制作了這個原型。最終他們開竅了。

開始

使用 Principle 前有一點需要記住：先在 Sketch 上畫好設計圖，這樣你可以在兩個軟件之間來回復制粘貼，節(jié)約大量時間。同時還要確保畫板（artboard）的尺寸在兩個軟件中是一樣的，這樣可以讓兩邊的部件完美匹配。

創(chuàng)建 Principle 畫板（Artboard）

在 Sketch 上完成設計稿之后，你需要去思考動畫的圖層種類。每個動畫某種程度上都不太一樣，所以我們要分開處理。
像“漸隱”或是“在 x／y 軸上移動”這樣的動作不需要做其他處理。你只要把部件從 Sketch 上復制到 Principle 的畫板（artboard）中就行。要注意的是非對稱的陰影不會自動居中，Principle 不包含這個規(guī)則。

移動和漸隱

如果是“伸縮”、“改變圓角大小”或是“改變文字”這樣的變化，我建議你最好在 Principle 里重新創(chuàng)建圖層。別擔心，在 Principle 內創(chuàng)建的文字會和 Sketch 里的完美匹配。

伸縮和圓角變化

我創(chuàng)建的是 750x1334 尺寸的畫布（artboard）。

譯者：這里需要說明一下的是，從 Sketch 上直接復制圖層和部件在 Principle 中不能修改“陰影”，“圓角”等樣式，我們僅把它理解為復制了一張圖片，所以文中的“非對稱陰影不會自動居中”就是：復制過來的圖片如果含有非對稱的陰影（因為“圖片”的高度包含了陰影的高度），那么它的中心點就不在“形狀”正中心。不管也不要緊，現在 Principle 已經支持一鍵導入 Sketch 里的內容，再也不用復制粘貼了～

動作事件

優(yōu)秀的動效會幫助用戶理解兩個頁面之間的關系，還能讓人感受到流暢的切換效果，但是這里有一個關鍵點——UI不是迪士尼動畫，所以在連續(xù)的動效中做好每一個步驟吧。

<big>“沒有無聊的項目，只有無聊的執(zhí)行”-Irene Etzkorn</big>

在這一部分我將會向你展示在原型中我是如何設計動效的。如果你想填補 Principle 基礎的空白，請毫不猶豫地出門左轉 Principle 官方基礎教程。

浮動標簽（Label）

為了節(jié)省屏幕空間和提供優(yōu)質的用戶體驗，記住即便用戶只是掃了一眼也要讓他們聚焦在內容上。

創(chuàng)造一個浮動標簽（label）的效果你需要準備三個文字圖層：預填充文字（灰色），標簽（label）文字（藍色）和主文字（黑色）。

step 1

在第一個畫板上你要正確地設置這三個文字圖層的樣式：

1. 預填充文字透明度設置為100%以及合適的大小，比如32pt。
2. 標簽（Label）文字透明度設置為0%，文字大小以及位置和預填充文字一樣。
3. 主文字透明度設置為0%，文字大小以及位置和預填充文字一樣。

step 2

復制一個畫板（artboard），在這個畫板（artboard）中分別設置這三個文字圖層的樣式如下：

1. 標簽（Label）文字設置為100%透明度以及合適的大小，比如14pt，然后移動到恰當的位置。
2. 預填充文字設置為0%透明度，文字大小以及位置和標簽（Label）文字一樣。
3. 主文字設置為100%透明度。

分離的指示器

增加一些賞心悅目的元素到你的設計中吧！

這個動效第一眼看上去沒什么特別的，但是需要注意的是：Principle 不允許我們指定修改某個圓角。如果你想如上圖那樣只修改其中兩個，你需要在上面遮蓋一層。

step 1

創(chuàng)建兩個矩形然后把他們的圓角設置為 100。

step 2

然后再創(chuàng)建兩個矩形，疊加在上層，位置大小如圖所示。

step 3

復制一個畫板（artboard），設置上層兩個矩形的圓角為100，然后把右邊兩個圖層向右移動100個像素點。

時間選擇器

這看上去像是系統原生的控件，我們也可以通過簡單地自定義把它義展示在我們的設計中。

當你開始創(chuàng)建一個如上圖的“滾柱”時，需要記住一件事：Principle 是基于圖層的命名來識別圖層和生成動畫的。這是正確顯示動效的決定因素。

第一個畫板（artboard）的文字圖層

畫板（artboard）中要有至少7個文字圖層來完成一次循環(huán)（5個可見，2個隱藏）。現在他們的透明度分別設置為100%，50%，20%和0%，然后調整文字的大小。我建議文字大小跨度在2-4 pts之間。

第二個畫板（artboard）的文字圖層

就像我之前說的那樣，Principle 是基于命名來識別圖層的，所以在第二步中，你需要復制這個畫板（artboard）然后如上圖改變日期就好了（千萬別動圖層的名字，也不要移動圖層哦）。

確認

用戶喜歡得到反饋。在你的設計中加入炫酷的確認成功的插畫來使頁面更加生動吧！

像這種自定義運動方式的動畫，我們需要用到“Animate”功能。你可以在頂部地菜單欄里找到它。

把你的確認卡片移到畫板（artboard）邊界之外并設置透明度為0%。另外為了運動更加順滑，我會把角度設置為-5度。
復制一個畫板（artboard），將其中的確認卡片移動到合適的位置并且調整透明度為100%，最后把角度設置回0度。

點擊“轉換箭頭（transition arrow）”并打開我之前說的“Animate”功能。點擊“X”軸會彈出動作菜單然后選擇“Spring”。你可以根據喜好調整“拉力（Tension）”和“摩擦力（Friction）”的參數，我使用500/30，得到一個比較柔和的運動效果。

如果你想設置自動回到上一個的狀態(tài)，選擇整個畫板（artboard）然后從動作列表中選擇“自動（Auto）”。頁面就會在gif動畫結束后回到選中的畫板（artboard）。

Dribbble

你有令自己驕傲的設計構想嗎？是時候展示出來了！如果你熟悉Dribbble社區(qū)——那它肯定是為你準備的。你也許正十分努力地做著設計，但是請注意，如果導出失敗那就悲劇了。
Dribbble 要求上傳的圖片要小于 8mb 。這太大了不是嗎？如果你主要是使用形狀和文字圖層，這足夠你制作10甚至是20秒的動畫了。如果你主要是用照片做設計，同時還牽涉到很多不同的頁面，那將會大幅度增加導出圖片的大小。對我來說，考慮到網速不好的用戶，8-10秒是導出的界限。
個人而言我更傾向于從 Principle 導出 .mov 格式的文件。然后我會把它放到800x600px 畫布大小的 Photoshop 中并配上一些好看的背景。導出的話就點擊菜單欄中的：文件 > 導出 > 存儲為web所用格式。然后使用如下的設置：

在這個預設下導出的圖片要至少小于 3mb 。這個大小用來顯示 10s 的動畫是再好不過的了，同時圖片的質量也有保障。記住在循環(huán)播放的選項里選“永遠”，否則你的圖片就只能循環(huán)一次，用戶的對它印象也會減弱！
請記住，在設計中添加令人愉悅的元素會幫助提升用戶的參與感和信任。每個人都喜歡細節(jié)豐富的產品。