本以為這是篇 step to step 的基礎(chǔ)教程，然而并不是...小白們看不太明白，看得明白的也不需要它。有基礎(chǔ)的同學(xué)就當(dāng)練習(xí)來看吧。小白同學(xué)也有福利，大神們早就為我們準(zhǔn)備好了 Principle 中文文檔，哪里不會看哪里，聰明的你琢磨琢磨只要半小時，就能輕松駕馭目前最好用的移動端 UX 原型設(shè)計軟件，搭配 Sketch 那簡直雙劍合璧！
為了方便同學(xué)們實踐這個教程，我特意“復(fù)刻”了一份 Sketch 原稿外加兩個例子，點這里， 密碼: 2j8e（僅供學(xué)習(xí)交流，禁止一切商業(yè)用途）。
<small>ps：這一切的基礎(chǔ)是，你要有一臺Mac電腦，祝大家食用愉快~</small>
<small>pps：本篇為譯文，英文無障礙的同學(xué)建議直接看原文</small>
以下為正文內(nèi)容：
如何制作一個包含所有交互動作并且可點擊的原型。
有多少次你嘗試和開發(fā)小哥解釋你那天才般的設(shè)計？你一邊用手比劃，用故事板，或者是簡單的原型配合已經(jīng)完成的設(shè)計圖稿——有沒有發(fā)現(xiàn)完全雞同鴨講。現(xiàn)在只需要簡單的幾步操作，Principle 就可以幫助你展示基礎(chǔ)的交互動作。在看完這篇文章之后，這四個技巧會助你更直觀地表達(dá)自己的想法。
這是我為 HUB Mobile 這個應(yīng)用制作的日歷設(shè)計稿，起初我通過在 InVision app 上傳部分設(shè)計稿來試圖向我的朋友們解釋我的交互構(gòu)想。但是失敗了。然后我花了2個小時制作了這個原型。最終他們開竅了。
開始
使用 Principle 前有一點需要記?。合仍?Sketch 上畫好設(shè)計圖，這樣你可以在兩個軟件之間來回復(fù)制粘貼，節(jié)約大量時間。同時還要確保畫板（artboard）的尺寸在兩個軟件中是一樣的，這樣可以讓兩邊的部件完美匹配。
創(chuàng)建 Principle 畫板（Artboard）
在 Sketch 上完成設(shè)計稿之后，你需要去思考動畫的圖層種類。每個動畫某種程度上都不太一樣，所以我們要分開處理。
像“漸隱”或是“在 x／y 軸上移動”這樣的動作不需要做其他處理。你只要把部件從 Sketch 上復(fù)制到 Principle 的畫板（artboard）中就行。要注意的是非對稱的陰影不會自動居中，Principle 不包含這個規(guī)則。
如果是“伸縮”、“改變圓角大小”或是“改變文字”這樣的變化，我建議你最好在 Principle 里重新創(chuàng)建圖層。別擔(dān)心，在 Principle 內(nèi)創(chuàng)建的文字會和 Sketch 里的完美匹配。
我創(chuàng)建的是 750x1334 尺寸的畫布（artboard）。
譯者：這里需要說明一下的是，從 Sketch 上直接復(fù)制圖層和部件在 Principle 中不能修改“陰影”，“圓角”等樣式，我們僅把它理解為復(fù)制了一張圖片，所以文中的“非對稱陰影不會自動居中”就是：復(fù)制過來的圖片如果含有非對稱的陰影（因為“圖片”的高度包含了陰影的高度），那么它的中心點就不在“形狀”正中心。不管也不要緊，現(xiàn)在 Principle 已經(jīng)支持一鍵導(dǎo)入 Sketch 里的內(nèi)容，再也不用復(fù)制粘貼了～
動作事件
優(yōu)秀的動效會幫助用戶理解兩個頁面之間的關(guān)系，還能讓人感受到流暢的切換效果，但是這里有一個關(guān)鍵點——UI不是迪士尼動畫，所以在連續(xù)的動效中做好每一個步驟吧。
<big>“沒有無聊的項目，只有無聊的執(zhí)行”-Irene Etzkorn</big>
在這一部分我將會向你展示在原型中我是如何設(shè)計動效的。如果你想填補(bǔ) Principle 基礎(chǔ)的空白，請毫不猶豫地出門左轉(zhuǎn) Principle 官方基礎(chǔ)教程。
浮動標(biāo)簽（Label）
為了節(jié)省屏幕空間和提供優(yōu)質(zhì)的用戶體驗，記住即便用戶只是掃了一眼也要讓他們聚焦在內(nèi)容上。
創(chuàng)造一個浮動標(biāo)簽（label）的效果你需要準(zhǔn)備三個文字圖層：預(yù)填充文字（灰色），標(biāo)簽（label）文字（藍(lán)色）和主文字（黑色）。
在第一個畫板上你要正確地設(shè)置這三個文字圖層的樣式：
- 預(yù)填充文字透明度設(shè)置為100%以及合適的大小，比如32pt。
- 標(biāo)簽（Label）文字透明度設(shè)置為0%，文字大小以及位置和預(yù)填充文字一樣。
- 主文字透明度設(shè)置為0%，文字大小以及位置和預(yù)填充文字一樣。
復(fù)制一個畫板（artboard），在這個畫板（artboard）中分別設(shè)置這三個文字圖層的樣式如下：
- 標(biāo)簽（Label）文字設(shè)置為100%透明度以及合適的大小，比如14pt，然后移動到恰當(dāng)?shù)奈恢谩?/li>
- 預(yù)填充文字設(shè)置為0%透明度，文字大小以及位置和標(biāo)簽（Label）文字一樣。
- 主文字設(shè)置為100%透明度。
分離的指示器
增加一些賞心悅目的元素到你的設(shè)計中吧！
這個動效第一眼看上去沒什么特別的，但是需要注意的是：Principle 不允許我們指定修改某個圓角。如果你想如上圖那樣只修改其中兩個，你需要在上面遮蓋一層。
創(chuàng)建兩個矩形然后把他們的圓角設(shè)置為 100。
然后再創(chuàng)建兩個矩形，疊加在上層，位置大小如圖所示。
復(fù)制一個畫板（artboard），設(shè)置上層兩個矩形的圓角為100，然后把右邊兩個圖層向右移動100個像素點。
時間選擇器
這看上去像是系統(tǒng)原生的控件，我們也可以通過簡單地自定義把它義展示在我們的設(shè)計中。
當(dāng)你開始創(chuàng)建一個如上圖的“滾柱”時，需要記住一件事：Principle 是基于圖層的命名來識別圖層和生成動畫的。這是正確顯示動效的決定因素。
畫板（artboard）中要有至少7個文字圖層來完成一次循環(huán)（5個可見，2個隱藏）?，F(xiàn)在他們的透明度分別設(shè)置為100%，50%，20%和0%，然后調(diào)整文字的大小。我建議文字大小跨度在2-4 pts之間。
就像我之前說的那樣，Principle 是基于命名來識別圖層的，所以在第二步中，你需要復(fù)制這個畫板（artboard）然后如上圖改變?nèi)掌诰秃昧耍ㄇf別動圖層的名字，也不要移動圖層哦）。
確認(rèn)
用戶喜歡得到反饋。在你的設(shè)計中加入炫酷的確認(rèn)成功的插畫來使頁面更加生動吧！
像這種自定義運動方式的動畫，我們需要用到“Animate”功能。你可以在頂部地菜單欄里找到它。
把你的確認(rèn)卡片移到畫板（artboard）邊界之外并設(shè)置透明度為0%。另外為了運動更加順滑，我會把角度設(shè)置為-5度。
復(fù)制一個畫板（artboard），將其中的確認(rèn)卡片移動到合適的位置并且調(diào)整透明度為100%，最后把角度設(shè)置回0度。
點擊“轉(zhuǎn)換箭頭（transition arrow）”并打開我之前說的“Animate”功能。點擊“X”軸會彈出動作菜單然后選擇“Spring”。你可以根據(jù)喜好調(diào)整“拉力（Tension）”和“摩擦力（Friction）”的參數(shù)，我使用500/30，得到一個比較柔和的運動效果。
如果你想設(shè)置自動回到上一個的狀態(tài)，選擇整個畫板（artboard）然后從動作列表中選擇“自動（Auto）”。頁面就會在gif動畫結(jié)束后回到選中的畫板（artboard）。
Dribbble
你有令自己驕傲的設(shè)計構(gòu)想嗎？是時候展示出來了！如果你熟悉Dribbble社區(qū)——那它肯定是為你準(zhǔn)備的。你也許正十分努力地做著設(shè)計，但是請注意，如果導(dǎo)出失敗那就悲劇了。
Dribbble 要求上傳的圖片要小于 8mb 。這太大了不是嗎？如果你主要是使用形狀和文字圖層，這足夠你制作10甚至是20秒的動畫了。如果你主要是用照片做設(shè)計，同時還牽涉到很多不同的頁面，那將會大幅度增加導(dǎo)出圖片的大小。對我來說，考慮到網(wǎng)速不好的用戶，8-10秒是導(dǎo)出的界限。
個人而言我更傾向于從 Principle 導(dǎo)出 .mov 格式的文件。然后我會把它放到800x600px 畫布大小的 Photoshop 中并配上一些好看的背景。導(dǎo)出的話就點擊菜單欄中的：文件 > 導(dǎo)出 > 存儲為web所用格式。然后使用如下的設(shè)置：
在這個預(yù)設(shè)下導(dǎo)出的圖片要至少小于 3mb 。這個大小用來顯示 10s 的動畫是再好不過的了，同時圖片的質(zhì)量也有保障。記住在循環(huán)播放的選項里選“永遠(yuǎn)”，否則你的圖片就只能循環(huán)一次，用戶的對它印象也會減弱！
請記住，在設(shè)計中添加令人愉悅的元素會幫助提升用戶的參與感和信任。每個人都喜歡細(xì)節(jié)豐富的產(chǎn)品。
