Protopie學習筆記:如何插入相機,交互原型設計軟體入門教程

2020-12-11 小灰聊職場

上篇文章,和大家分享了Protopie如何在場景中插入音頻文件(文章連結見結尾),今天接著來看看如何在場景中插入相機

現在很多的App都包含了拍攝的功能,但我們如何在交互原型中去調用相機功能呢?Protopie給我們提供了相機的功能,可以實現在原型中調用原生的相機進行演示。

首先我們使用插入相機工具,在場景中插入相機元素,可以在場景中看到的黑色區域就是相機了。

默認情況下,相機是沒有鋪滿屏幕的,我們可以根據自己的設計調整相機的大小,先看一下默認狀態下的相機,是如何展示的。

這是一張我手機的截屏,可以看到,在Protopie中默認相機的大小,在實際展示中也會顯示相同的大小。所以我們需要自己調整。

調整完成後,我們繼續接著做,今天我想給大家分享一下,如何製作一個通過按鈕控制相機打開和關閉的特效,看完這個教程,大家理解起來也會更加直觀一點。

第一步,我們需要將插入場景的相機元素的透明度調整成0,並且設置為不自動開啟,為什麼這麼做?有2點原因:

我們需要的特效默認情況下是不顯示相機的,當點擊按鈕後才會顯示,所以我們要讓相機默認情況下是不可見的,所以調整成透明度為0未勾選自動開啟,也是一樣的道理  第二步,我們在場景中添加2個圖片按鈕,用來控制相機的打開和關閉,如圖

第三步,我們為按鈕添加交互動作,點擊打開相機,點擊關閉相機。首先我們選中「相機」的圖片,為他添加單擊的觸發動作,並且為單擊增加2個反應動作。

為按鈕添加單擊的觸發動作
調整相機的透明度
設置相機開啟,並且設置攝像頭

第四步,按照相同的方法,我們為關閉按鈕,添加相機點擊關閉的效果。

設置相機透明度

完成以上的設置,這個動效我們就做完了,在這個教程中,我也順帶簡單介紹了一些觸發動作和反應動作的設置,但是沒有詳細的說明,在後面的分享中,我將會詳細說,因為觸發和反應動作,總共有幾十種,一次說不完的。

最後我們來看下實際的在真機上的演示效果。

下期預告

Protopie學習筆記:如何插入Lottie動畫,交互原型設計軟體入門教程

相關焦點

  • Protopie學習筆記:如何插入音頻文件,交互原型設計軟體入門教程
    上篇文章,和大家分享了Protopie如何在場景中插入視頻文件(文章連結見結尾),今天接著來看看如何在場景中插入音頻文件。Protopie的導入,支持3種音頻模式:mp3、wav、m4a。插入音頻比較簡單,就說到這裡,下一期比較好玩,可以插入相機,讓我們期待吧~下期預告Protopie學習筆記:如何插入相機功能,交互原型設計軟體入門教程相關文章
  • Protopie學習筆記:如何插入圖形,交互原型設計軟體入門教程
    在前面的幾篇教程中,已經和大家分享了如何插入圖片、多媒體文件,今天和大家分享下,如何插入最常用的圖形,這裡說的圖形包含了2個最基本的形狀:方形和圓形;以及ios背景虛化的功能在上圖中,你可以看到我在場景中插入了一個正方形和一個圓形,默認呈灰色,你可以在屬性欄調整他的坐標、顏色、尺寸、邊框等。可以說圖形的屬性欄是最通用的,我們來看一下圖形的屬性欄包含哪些屬性。
  • Protopie學習筆記:如何插入Lottie動畫交互原型設計軟體入門教程
    今天我要來和大家分享一下如何在Protopie中插入Lottie動畫。首先我們來了解一下,什麼是Lottie。什麼是LottieLottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案,設計師可以使用 Adobe After Effects 設計出漂亮的動畫之後,使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式,就可以直接運用在 iOS、Android
  • Protopie交互原型設計軟體學習筆記:認識Protopie
    由於工作的原因,我會用到原型軟體和交互軟體,也會下載不同的軟體進行比較,最近我下載了一款叫做Prorotpie的互動設計軟體,通過免費試用後,覺得很棒,我也進行了訂閱。今天開始,我會定期和大家分享一下我的學習筆記,也許對你也有一些幫助,如果喜歡,請關注我,謝謝!
  • Protopie交互原型設計軟體學習筆記:如何導入XD或Figma文件
    上篇文章,和大家分享了Protopie的界面功能(文章連結見結尾),今天接著來看看如何導入XD或Figma文件。如果你需要導入Figma,則需要在導入前,進行授權,但是不代表完成授權就可以導入,因為你的Figma帳戶中可能存在多個設計稿的情況,Figma只會導入你最近正在編輯的設計稿。
  • Protopie的點擊類觸發動作包含哪些-交互原型設計軟體學習筆記
    在上一篇分享中,我給大家演示了一個註冊表單的交互動效,該動效中用到了「插入圖形、調整屬性、添加交互動作」等功能。在本篇分享文章中,我將會開始和大家介紹一下Protopie的交互功能,交互功能主要包含了:觸發和反應2大部分。
  • Protopie學習筆記:如何在交互原型中使用滾頁和滑頁動效
    今天我要和大家分享一下,如何在交互原型中插入滾頁和滑頁。今天所分享的「滾頁和滑頁」,在Protopie中有一個專屬的名字「容器層」。什麼是容器層?容器層可以在多圖層編組及管理,以及製作滾頁或滑頁交互時使用。
  • Figma 免費入門視頻教程 - 2020年大廠都在用的原型/UI設計工具的保姆級教程
    來自B站up主的簡單易懂並且歡樂的 Figma 免費入門視頻教程,從零開始了解 Figma。Figma:新晉的設計利器Figma 是一款近年來推出的基於瀏覽器的在線設計工具,不僅可以用來完成像Sketch那樣製作 UI 界面,也能快速製作產品原型,滿足產品經理原型設計的需求,最大的特色還是強大的協同工作能力,無需藉助其他軟體完成從原型設計-視覺設計-代碼開發-功能測試等全產品線的協同。
  • SAI軟體入門筆刷繪畫教程:不怕設計沒文化,就怕設計會插畫
    大家好,我是萬能的可可醬今天給大家帶來的這套教程真的特別實用!它很適合想學而不知道如何學繪畫的粉絲!幫他們一點點的入門一點點學會繪畫,這套教程就是:SAI軟體入門筆刷繪畫教程【141期】SAI是一個已經成功商業化的繪圖軟體Easy Paint Tool SAI的簡稱,是SYSTEAMAX開發的。它在繪畫界影響很大,堪稱最好用的繪圖軟體!
  • 軟體設計利器原型圖,什麼是軟體原型圖,原型圖如何繪製?
    原型圖用於開發設計軟體確定軟體功能擺放位置以及互交效果,是團隊開發非常必要的設計工具,有利於確定設計方案,很直觀的讓團隊所有人都可以看到設計的結果,可以完美呈現系統的最終樣子,但是原型圖只是設計圖,只能看到界面和互交效果,是無法有實際的操作功能的。
  • Principle for Mac(動畫互動設計軟體)v5.13
    Mac上好用的動畫互動設計軟體——Principle for Mac,這款軟體的設計動畫讓交互式用戶界面變得容易,支持多種尺寸的原型設計,用很短的時間就可以製作出一個具有完整交互動畫的原型,你可以把設計的交互動畫生成視頻分享到社交平臺。
  • 玩攝影,如何選一款適合學習入門的相機?(2021版)
    前言:如何選擇一款適合學習入門的相機,是耗子哥經常被朋友反覆諮詢的問題。由於以往的回答太過於「碎片化」,所以耗子哥決定整理一下,給大家一份完整的、簡單易懂的入門選購指南。入門推薦有「時效性」?下面耗子哥簡單舉幾個例子:1、相機產品結構性的革新例如最近十年,微單相機逐步取代了單眼相機成為了專業市場的主流產品,在這個過程中,佳能、尼康的單眼相機便從「學習首選」逐步淪為「淘汰品」、「雞肋」。
  • 零基礎學習UI設計需要掌握什麼軟體
    ,轉載請註明 俗話說:工欲善其事,必先利其器,掌握了軟體操作,我們設計才能遊刃有餘,那很多零基礎學習UI設計的小夥伴們,不清楚剛學習UI設計的時候,需要掌握的軟體到底要學哪些,東學一個西學一個,導致自己所學的內容不夠全面,比較雜,因此UI設計華斌給大家整理了目前UI設計行業必備要學習的軟體有哪些,希望能幫助到大家更好的學習UI設計。
  • 零基礎學習CAD軟體難嗎?超全CAD入門學習教程送給你!
    CAD軟體作為一種製圖工具,真要學起來其實並沒那麼困難。它好比你手中寫字的筆,吃飯的筷子,拿筆拿筷子實在算不上多難的事情,且在你下定決心要進行CAD入門學習時,就已經成功了一半,難得是保持這份決心。借用陸遊詩人的一句話「汝果欲學詩,工夫在詩外。」
  • iPad如何學手繪,iPad手繪軟體教程入門指南,含iPad手繪筆刷素材
    ipad的便攜性和系統的流暢性以及Apple pencil的加持,讓越來越多的手繪設計師,插畫設計師選擇其創作作品, 但很多新手剛入門的設計小白卻不知道該如何使用iPad進行手繪作品創作,不知道從哪裡入手學習,今天世紀man給大家分享推薦幾款iPad上的手繪神器,同時也會分享常用的手繪筆刷素材和如何學習手繪插畫教程
  • 以個人書架業務為例,解析原型圖的設計流程
    原型圖到底該怎麼畫?這是大多產品經理入門時遇到的問題。有人會把原型圖畫成一幅精美的設計圖;也有人在紙上手繪線框圖;甚至有人不畫圖直接就進入開發了。本文作者從自身工作經驗出發,結合實際業務對如何設計原型圖進行了分析。
  • 零基礎板繪應該如何入門?板繪入門教程分享
    零基礎板繪應該如何入門?板繪入門教程分享!近幾年我國無論是遊戲,影視,還是動畫漫畫行業都顯露出了蓬勃發展的景象。伴隨著受日本歐美動畫電影影響的一代人逐漸長大,我們也開始了自己的文化輸出。越來越多的人開始了解和接觸板繪。
  • 互動設計師應具備的技能樹(10)|選擇適合你的原型工具
    當你全部設計好後,還可以導出PDF格式的文檔,頁面還支持點擊和跳轉,其他人收到文檔就能直接看,可以說是很方便了。二、框架原型概念原型主要還是用來討論和快速修改用的,產品經理也可以用它來給設計師們提需求。互動設計師們最主要的輸出物,還是用Axure和Sketch等軟體畫的交互框架。
  • 如何入門學習的日漫畫風?新手漫畫技法教程
    如何入門學習的日漫畫風?新手漫畫技法教程!學日本漫畫需要保持思考的頭腦,同時學日本漫畫還需多加練習,如果學日本漫畫不想動手多練,第一步就輸了,日本漫畫學習是模塊化的,日本漫畫學習又是系統化的,下面開始今天的日本漫畫學習思路分享。
  • 零基礎想學美工設計要掌握什麼軟體?如何入門學美工設計?
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享零基礎想學美工設計要掌握什麼軟體?如何入門學美工設計?至於學習方法,就目前的網際網路時代來說,還是比較少看書的,建議可以找視頻教程即可,軟體下載就更簡單了。二、自學該從何入手呢?