We are going to play with Figma’s auto layout, creating a flexible modal which can be stretched and accommodate multiple lines of content.

It seems that the title will align vertically to the close button after we shrink the entire modal, though it is made with auto layout.

Body and action section of modal

Like general modal, we got header, body and action section in our modal.

We set up the body section and action section with auto layout frame in order to control the padding of them.


本章節使用 Jump 製作牌卡後的互動,跳轉至其他 Scene,並使用 Chain 製作其他互動效果。

為什麼要分場景做呢?


了解 ProtoPie 中的 Origin 設定

Origin 影響定位 (Position)

使用 ProtoPie 時注意錨點 (Origin) 的應用非常重要,因為它會影響物件在畫布上的定位 (Position) ,進階影響變形與位移的「起始點」。

Top Left

白色色塊的定位是從「左上」開始算起。

Top Center


使用 Drag、Chain 與 Condition 觸發,實作類 Tinder 滑卡片的互動。

最終可以做到…

在這章節你會學到

  • Start 互動:在場景 (Scene) 開始時,設定元件的樣式。
  • Drag 互動:自由地拖曳牌卡,產生相對應的元件回饋。
  • Chain 互動:搭配拖曳牌卡,產生角度轉變的回饋。
  • Touch Up 、Condition:釋放拖曳的牌卡時,依照條件將卡片滑出。
備註
為了教學更聚焦在互動的設定上,教學內容不帶入太多設計的元素。

牌卡拖曳互動: Drag, Chain, Touch Up

建立三張牌卡

先建立三張牌卡,圖層的順序由最上層到最下層分別為:黃 > 橘 > 紅,把他們疊在一起。
並且 Origin 的點設定在 中下位置。


完成的 component 可以活用在各種介面上。

使用簡單的方式在 ProtoPie 上實作 Skeleton loading,最終我們將會把這個效果包成一個可以重複使用的 ProtoPie component。

載入效果原理

從上面的介面發現 skeleton loading 可以拆解成:

  • 底色
  • 移動的漸層

其實載入效果可以看成一個在既定底色上不斷重複由左至右的連貫動畫,平常看到的通常是淺灰底加上深色(黑色系)漸層移動。
這裏用明顯的色塊呈現載入效果的結構:


我們將透過觸發、反應的先後順序熟悉以 觸發 Start 反應 Reset 製作頁面的出場動畫。

如果你想要找特定章節,請點此。

是否在 dribbble 上、Muzli 上看過一些酷炫的動態效果,進入 app 後元件淡入或是翻轉出現,今天我們就來做進入畫面後元件出現的動畫,這裏我們暫時稱之出場動畫;以下是今日成品:

匯入圖層

第一步總是匯入設計稿,除了注意匯入的尺寸 3x ,更要注意的是 ProtoPie 匯入的特性;ProtoPie 會將 Sketch 設計稿中的群組結一併匯入,但會把元件轉變成圖像。

文字

文字元件被匯入後會是文字圖像,我們可以透過元件設定項的 Convert to Text 將圖像化的文字再次轉換成可編輯的文字。


Interaction = Object + Trigger + Response
利用單純的 Trigger 和 Response快速製作簡易的 Prototype

如果你想要找特定章節,請點此

本日成果

我們將用簡單的觸發,設定反應跳轉至我們想要到的場景(Scene)。

互動 = 物件 + 觸發 + 反應

第一天將學會如何使用觸發、反應串起簡易流程,就像使用 Marvel 等 Prototype 工具製作出的成品,目的在於熟悉設定觸發和反應。

ProtoPie 中的互動(Interaction)是由物件(Object)、觸發(Trigger)與反應(Response)組成。


這一系列教學期望讓你在試用期結束時完整駕馭 ProtoPie 這個 Prototype 工具,內文都建立在自己對於工具與 ProtoPie 的理解上。

ProtoPie 新註冊就享有 10 天試用期,如果你已經有 Prototype 或已經註冊了,就別浪費試用期時間啦,趕快找尋自己感興趣或想學習的章節。

介面導覽

粗略介紹一下 ProtoPie 大致上的介面,幫助你快速熟悉它的介面。

中間控制區域

中間為 Prototype 畫面,呈現你安排的元件。


以下的分享是基於自己使用上的感想,沒有絕對是正確的。

工具與效率

所有的工具、方法都可以幫助你達到目的,差別只在於效率。

舉例來說,你的目標只是要和 PM 討論設計方案可不可行,手繪的粗略線稿就可以達成目標,而你選擇製作精良的畫面和 Prototype,雖然都可以達到目標,但等你完成 Prototype 的時候可能也花了不少時間。

什麼時候會用到 Prototype 工具?沒有什麼絕對的因素,列出 checklist 幫助你確認是否要使用,如果一項都沒有符合,可以考慮一下是否要做 Prototype。

  • 當溝通那一方完全不熟悉專案或新功能
  • 須要深究整體專案流程
  • 須要深究畫面元件的互動優劣
  • 想要呈現自己的點子,帥一波(喂
  • 和工程師溝通畫面動態效果
  • 專案規模巨大,須確認改版方向正確
  • 探索新的、未知的產品方向
  • 處理複雜的議題

Pro …


Icon Library 3
Icon Library 3

學會如何以 Sketch 設計稿轉換為 TTF和可支援網頁的字型檔案,如何落實在工作流程上才真正讓這個工具更有意義!

章節列表

  1. Icon Library Part1 :Sketch 製作 TTF 檔案
  2. Icon Library Part2:Icon 的製作規範
  3. ***Icon Library Part3:導入設計師的工作流程
*** 為 目前章節 記號

應用於 Web Service

由於之前負責的項目比較偏 Web,App 部分雖然有確認大致上的作法但無法很詳盡的描述,還請工程師們現身說法。

Sheng Pan

Hi, I’m Sheng. A designer based in Taipei, Taiwan. Contact me: sandokaishy@gmail.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store