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

2020-12-06 小灰聊職場

IT技能,一學就會。大家好,我是IT小白。在前面的幾篇教程中,已經和大家分享了如何插入圖片、多媒體文件,今天和大家分享下,如何插入最常用的圖形,這裡說的圖形包含了2個最基本的形狀:方形和圓形;以及ios背景虛化的功能

在上圖中,你可以看到我在場景中插入了一個正方形和一個圓形,默認呈灰色,你可以在屬性欄調整他的坐標、顏色、尺寸、邊框等。可以說圖形的屬性欄是最通用的,我們來看一下圖形的屬性欄包含哪些屬性。

圖形的屬性很普通,下面給大家介紹一下,Protopie專為IOS原型打造的「iOS背景虛化」功能。從該功能的名稱上可以看出,背景虛化,其實就是為了實現一種高斯模糊的特效。

我們來看一下,背景虛化設置後的預覽效果。在預覽框中,大家可以看到,有部分的區域是模糊的,這個模糊的效果就是使用背景虛化的功能來完成的。

那麼Protopie的背景虛化,由包含了哪些效果和參數的設置呢,我們看一下下圖。

在我更新了5.0的Protopie後,我發現背景虛化功能有增強了許多參數。

有興趣的朋友們,還不快去試一試?今天就和大家分享到這裡了,歡迎關注我們。

下期預告

Protopie學習筆記:如何插入普通文本和輸入文本,交互原型設計軟體入門教程

相關文章

該教程為系列教程,可點擊頭像,進入個人主頁查看所有教程。

相關焦點

  • Protopie學習筆記:如何插入音頻文件,交互原型設計軟體入門教程
    上篇文章,和大家分享了Protopie如何在場景中插入視頻文件(文章連結見結尾),今天接著來看看如何在場景中插入音頻文件。Protopie的導入,支持3種音頻模式:mp3、wav、m4a。插入音頻比較簡單,就說到這裡,下一期比較好玩,可以插入相機,讓我們期待吧~下期預告Protopie學習筆記:如何插入相機功能,交互原型設計軟體入門教程相關文章
  • Protopie學習筆記:如何插入Lottie動畫交互原型設計軟體入門教程
    今天我要來和大家分享一下如何在Protopie中插入Lottie動畫。首先我們來了解一下,什麼是Lottie。什麼是LottieLottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案,設計師可以使用 Adobe After Effects 設計出漂亮的動畫之後,使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式,就可以直接運用在 iOS、Android
  • Protopie學習筆記:如何插入相機,交互原型設計軟體入門教程
    上篇文章,和大家分享了Protopie如何在場景中插入音頻文件(文章連結見結尾),今天接著來看看如何在場景中插入相機。現在很多的App都包含了拍攝的功能,但我們如何在交互原型中去調用相機功能呢?Protopie給我們提供了相機的功能,可以實現在原型中調用原生的相機進行演示。首先我們使用插入相機工具,在場景中插入相機元素,可以在場景中看到的黑色區域就是相機了。默認情況下,相機是沒有鋪滿屏幕的,我們可以根據自己的設計調整相機的大小,先看一下默認狀態下的相機,是如何展示的。
  • 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 界面,也能快速製作產品原型,滿足產品經理原型設計的需求,最大的特色還是強大的協同工作能力,無需藉助其他軟體完成從原型設計-視覺設計-代碼開發-功能測試等全產品線的協同。
  • 零基礎學習UI設計需要掌握什麼軟體
    ,轉載請註明 俗話說:工欲善其事,必先利其器,掌握了軟體操作,我們設計才能遊刃有餘,那很多零基礎學習UI設計的小夥伴們,不清楚剛學習UI設計的時候,需要掌握的軟體到底要學哪些,東學一個西學一個,導致自己所學的內容不夠全面,比較雜,因此UI設計華斌給大家整理了目前UI設計行業必備要學習的軟體有哪些,希望能幫助到大家更好的學習UI設計。
  • SAI軟體入門筆刷繪畫教程:不怕設計沒文化,就怕設計會插畫
    大家好,我是萬能的可可醬今天給大家帶來的這套教程真的特別實用!它很適合想學而不知道如何學繪畫的粉絲!幫他們一點點的入門一點點學會繪畫,這套教程就是:SAI軟體入門筆刷繪畫教程【141期】SAI是一個已經成功商業化的繪圖軟體Easy Paint Tool SAI的簡稱,是SYSTEAMAX開發的。它在繪畫界影響很大,堪稱最好用的繪圖軟體!
  • 軟體設計利器原型圖,什麼是軟體原型圖,原型圖如何繪製?
    原型圖用於開發設計軟體確定軟體功能擺放位置以及互交效果,是團隊開發非常必要的設計工具,有利於確定設計方案,很直觀的讓團隊所有人都可以看到設計的結果,可以完美呈現系統的最終樣子,但是原型圖只是設計圖,只能看到界面和互交效果,是無法有實際的操作功能的。
  • CAD教程:利用EXCEL中的坐標來複製CAD軟體中的圖形
    在使用浩辰CAD製圖軟體繪製圖紙的過程中,能不能用EXCEL表格中坐標來批量繪製點、圓,插入圖塊呢?當然是可以的。接下來給大家分享一下利用Excel表格中的坐標來複製CAD製圖軟體中圖形的相關CAD教程吧!
  • Principle for Mac(動畫互動設計軟體)v5.13
    Mac上好用的動畫互動設計軟體——Principle for Mac,這款軟體的設計動畫讓交互式用戶界面變得容易,支持多種尺寸的原型設計,用很短的時間就可以製作出一個具有完整交互動畫的原型,你可以把設計的交互動畫生成視頻分享到社交平臺。
  • PhotoShop軟體初學者如何快速入門學習
    ps有很多功能,應用在圖像、圖形、文字、視頻、出版物等,行業中的廣告攝影、影像創意、後期修飾、網頁製作、照相館、影樓等都會用到該軟體。如何學習PS初學者面對完全陌生的軟體PS,如何快速入門呢?是剛開始學習時想到的一些問題,都想快速學會。
  • 零基礎學習CAD軟體難嗎?超全CAD入門學習教程送給你!
    CAD軟體作為一種製圖工具,真要學起來其實並沒那麼困難。它好比你手中寫字的筆,吃飯的筷子,拿筆拿筷子實在算不上多難的事情,且在你下定決心要進行CAD入門學習時,就已經成功了一半,難得是保持這份決心。借用陸遊詩人的一句話「汝果欲學詩,工夫在詩外。」
  • UI設計是什麼要學習哪些軟體
    UI設計是什麼要學習哪些軟體?當年輕人談到高薪職業時,UI設計可謂是近幾年年行業的領軍人物。引起許多年輕人的擁戴,甚至躍躍欲試要加入。可以說UI設計應用的領域非常廣泛,發展空間有目共睹的。儘管很多人聽說過但是學習UI需要學習哪些軟體?UI設計主要做什麼?下面AAA教育胡老師就給大家來介紹一下UI設計是什麼要學習哪些軟體?
  • iPad如何學手繪,iPad手繪軟體教程入門指南,含iPad手繪筆刷素材
    ipad的便攜性和系統的流暢性以及Apple pencil的加持,讓越來越多的手繪設計師,插畫設計師選擇其創作作品, 但很多新手剛入門的設計小白卻不知道該如何使用iPad進行手繪作品創作,不知道從哪裡入手學習,今天世紀man給大家分享推薦幾款iPad上的手繪神器,同時也會分享常用的手繪筆刷素材和如何學習手繪插畫教程
  • 華安鑫創:人機互動圖形設計業務獲得較快發展
    公司自主研發了3項發明專利、19項實用新型專利、3項外觀設計專利,90項軟體著作權。基於當前的技術儲備,能夠參與到概念和新品車型的前沿開發,研發成果已經應用於下遊的主流車型,當前公司的技術研發實力處於細分領域的領先地位。
  • 互動設計小白的第一個框線圖從這裡開始
    如果你還沒有在互動設計中用到線框圖,是時候試試看了。 線框充當著紙草圖與第一個原型之間的傳遞帶,它可幫助設計師規劃用戶的布局和交互模式,而不用考慮顏色或者風格等細節。 通常保持版面的簡潔,因為線框圖的目的是展示交互框架而不是平面設計。
  • 零基礎板繪應該如何入門?板繪入門教程分享
    零基礎板繪應該如何入門?板繪入門教程分享!近幾年我國無論是遊戲,影視,還是動畫漫畫行業都顯露出了蓬勃發展的景象。伴隨著受日本歐美動畫電影影響的一代人逐漸長大,我們也開始了自己的文化輸出。越來越多的人開始了解和接觸板繪。