用Principle製作高保真日曆原型

前言

本原型是我按照簡書上的一篇進階（相比我這篇）翻譯教程寫出來的。

翻譯教程原文

原作者省略的內容很多，大部分只講了最根本的方法，所以那片文章不適合做練習，適合進階思考。

但是我這篇會更加的詳細，對不知道如何具體做的同學來講應該可以順利做出效果。

我還在學習中，如果本文有任何問題，請聯繫我，我的微信號是 mepolizhan , 歡迎交流

下面就正式開始。

所需硬體：Mac電腦 所需軟體：Sketch+Principle

先來看看最終的效果

可以看出，我基本上 1 : 1 製作出了原作者的效果，我製作的這個也是可交互的，整個過程是可逆的。

這裡提一下 Principle 對 Sketch 支持導入，用導入鍵導入是可編輯的，也分組和圖層。

然後還有幾個問題需要注意：

• 兩個軟體的畫板設置大小最好一樣，iPhone7 都是 iPhone7 ，Plus 都是 Plus 尺寸。
• 在Sketch中複製的「元素」，可以直接複製到 Principle ，但是是以圖片形式複製的，並且位置不是原始位置。
• 推薦將想導入的東西複製到新建的 Sketch 里再導入。

第一步：元素創作

現將所有出現的界面元素按照設計大小畫出。不過之後有一部分是要在 Principle 中重畫的。

第二部：開始日期和結束日期動效

原文作者也叫它「浮動標籤」 Label。

首先建立兩個畫板，分別放入如下元素

左側頁面上半部分，圖層中共有三部分文字：

1. 預填充文字「設置開始日期」透明度設置為100%以及合適的大小。

2. 標籤文字「開始日期」，文字透明度設置為0%，文字大小以及位置和預填充文字一樣。

3. 主文字透明度設置為0%，文字大小以及位置和預填充文字一樣。

右側頁面上半部分，圖層中還是這三部分文字

1. 預填充文字「設置開始日期」透明度由100變為0%，文字位置和大小變為和「開始日期」一致」。

2. 標籤文字「開始日期」，文字透明度由0變為100%，文字位置和大小不變。

3. 主文字透明度由0變為100%，文字大小位置不變。

請注意每個元素對應的名稱應該是一樣的，Principel 根據名稱來匹配動畫。設置好後，點擊閃電符號設置兩頁之間的跳轉。得到的效果如下。

第三部分：日期動效

這裡的動效看似簡單，實際上還需要幾步設置。

建立一個畫板(圖中左側)，先繪製好背景和三個日期文字。

這裡是一個直角變為圓角的動畫，由於 Principle 不支持單獨編輯矩形的角，而我們只想修改里側的角。所以我們用特殊的辦法實現。

在左側畫板中，先創建兩個矩形，加上圓角。為他們之間加上深色塊。

在左側畫板中，我們繼續創建兩個矩形（用來產生圓角動畫）大小位置如下圖所示，並且顏色和圓角矩形一致。並且覆蓋住深色塊。

現在複製一個畫板，將剛才新創建的兩個矩形（用來產生圓角動畫的）也調整為圓角。

設置兩畫板之間的跳轉，即可達成效果。

第四部分：日期選擇器

同樣先來看效果。

需要先說清楚的是，可以看出這個日期選擇器擁有三個狀態分別是星期一在中間，星期二在中間，星期三在中間。只要設置好就可以任意跳轉。

那麼首先我們來做星期二到星期一的動畫，做成之後自然反著的也就有了。

如圖右先創建文字一共七行，

最上邊和最下邊是隱藏的，也就是透明度為0，

正數第二和倒數第二行，字體較小並且透明度 20%

正數第三行，和倒數第三行，字體適中並且透明度 50%

中間一行，字體最大並且透明度 100% ，加粗。

這時候複製畫板到圖左。（左右順序無所謂，我這裡反著講的，因為我先做的左邊）

一樣的配置不過因為我們只做了7行，所以這次是下方兩行字是 0%透明度。如圖

然後在按剛才的透明度和字體大小排列，注意圖層的名字一定要一一對應，這是 Principle動畫的關鍵。並且要注意對齊哦，否則動畫不美觀。

兩個狀態的做完了，照此進行第三個狀態，也就是星期三在中間，然後設置好跳轉就行了

總體配置如下圖，這下我們完成了時間選擇器的製作。

第四部分：整合與動效優化

我們現在擁有了三個模塊的製作方法，現在只要整理好思路，製作出全流程的各個狀態，就可以完成整個交互了。

狀態一（畫板一）至 狀態二（畫板二）

可以看到三個模塊，最下方的是不變的安排模塊。

想要的效果是點擊17號日期後，開始日期變換為2017年 10月 17 日。下方漸入出現時間選擇器並且時間選擇器時間和點選日期一致（這裡我犯了一個錯誤，錯弄成19號了），安排模塊漸隱消失。

這裡提一下漸入和漸隱的動畫，狀態一其實是存在時間選擇器的，它的透明度為 0%，並且比狀態二高度高一些，這樣動畫就會自動產生漸入的效果，同樣還是狀態二也有一個透明度為 0% 的日程安排模塊，位置比狀態一要低一些，這樣會產生漸隱的效果。

接下來單擊18號日期，設置結束時間變為 2017年 10月 18日。

在接下來單擊19號，運用我們剛才的日期製作技巧，產生圓角動畫變換到狀態4，此時結束時間和日期選擇器隨之變化。同樣的單擊20號日期，結束時間和日期選擇器同樣隨之變化。

單擊SET，跳轉到狀態6，和狀態一和二一樣的漸隱漸入，日程安排模塊回來。這裡左方有一個成功的動畫預設在屏幕外，然後狀態7 在屏幕中間，這樣一點擊後就可以自動生成動畫。

這裡做好跳轉後點擊Animate,選擇狀態6-7的跳轉線可以將成功插畫的動畫類型調到 Spring，數值大家看著給就可以，Tension代表著彈力，越大動畫的動作就越誇張，Friction代表阻力（摩擦力）越大停下的越快。

狀態6 設置「添加」鍵跳轉到狀態7，這樣點擊「添加」後就會從左側彈出成功的插畫。

這7個狀態中前6個都是可逆的，大家自由添加各種元素的之間的跳轉，就可以形成最開始的Demo了。

最好再提醒，圖層的名字一定一一對應的，只要是同一個模塊，名字一定相同才會有動畫，否則很容易漫天亂飛。

最後我將提供我的 Sketch 源文件 和 Principle 源文件，覺得不錯的話，可以把本文分享給小夥伴哦！

百度雲鏈接: https://pan.baidu.com/s/1qYmeZ9q

密碼: i31s

轉載請聯繫我的微信。

感謝你的閱讀！

推薦閱讀：