Protopie的點擊類觸發動作包含哪些-交互原型設計軟體學習筆記

2020-12-12 小灰聊職場

職業技能,一學就會。大家好,我是IT小白。在上一篇分享中,我給大家演示了一個註冊表單的交互動效,該動效中用到了「插入圖形、調整屬性、添加交互動作」等功能。

在本篇分享文章中,我將會開始和大家介紹一下Protopie的交互功能,交互功能主要包含了:觸發反應2大部分。

首先,我們來聊聊「觸發」,在Protopie的交互功能中,包含了6大類的觸發動作:

點擊類觸發:智能設備上廣泛使用的觸發方式。有最基本的點擊、長按、拖拽等,也有雙手指夾捏、旋轉等多手指手勢。滑鼠類觸發:通過電腦上的滑鼠觸發交互動作。有滑鼠懸浮、滑鼠移出兩種觸發方式。鍵盤類觸發:在模擬鍵盤和移動端鍵盤上點擊指定鍵時,發生反應動作。輸入類觸發:輸入類觸發是和輸入圖層配套使用的觸發動作。條件性觸發:運行原型、接收特定信號ID、圖層屬性達到特定值等滿足特定條件時,可觸發交互的發生。傳感類觸發:將智能設備內部傳感器的值和圖層反應值相對應後,交互就可以根據傳感被觸發。  因為Protopie大多數是應用於移動端的交互原型設計,所以點擊類的觸發動作最多,我們來看下,包含了哪些點擊類的觸發,我將會用gif動畫的形式,演示給大家,這樣看起來更加直觀一些:

單擊:手指觸碰屏幕並馬上離開的動作。

雙擊:手指連續觸碰屏幕兩次的你工作。

下擊:手指向下點觸屏幕的動作。

抬起:觸摸著屏幕的手指向上離開屏幕的動作。

長按:手指向下點擊屏幕 保持一段時間後離開的動作。

快擲:手指按照在屬性欄設置的方向,快速滑動圖層,達到一定速度以上時就會觸發相應的反應動作。

推拉:推拉觸發是一種含有成功和失敗概念的觸發方式。圖層被拖動超過一定距離或一定速度時,則認為拖動成功。成功時圖層將按照用戶指定的距離發生移動,失敗時圖層回到原來的坐標。

拖拽:手指觸控螢幕幕的同時滑動的動作。

夾捏:雙手指在屏幕上合攏或分開的動作。

旋轉:雙手指在屏幕上向同一方向旋轉的動作。

以上10個點擊類的觸發,包含了移動端的大部分觸發動作,點擊類的觸發動作比較容易理解,所以簡單的介紹一下。

針對其他類型的觸發,在後面的文章中,我會逐步和大家分享。今天的分享就到此結束了,希望本文能夠對你有些幫助。

下期預告

Protopie的條件類觸發動作包含哪些-交互原型設計軟體學習筆記

相關焦點

  • Protopie學習筆記:如何插入相機,交互原型設計軟體入門教程
    現在很多的App都包含了拍攝的功能,但我們如何在交互原型中去調用相機功能呢?Protopie給我們提供了相機的功能,可以實現在原型中調用原生的相機進行演示。首先我們使用插入相機工具,在場景中插入相機元素,可以在場景中看到的黑色區域就是相機了。
  • Protopie交互原型設計軟體學習筆記:認識Protopie
    由於工作的原因,我會用到原型軟體和交互軟體,也會下載不同的軟體進行比較,最近我下載了一款叫做Prorotpie的互動設計軟體,通過免費試用後,覺得很棒,我也進行了訂閱。今天開始,我會定期和大家分享一下我的學習筆記,也許對你也有一些幫助,如果喜歡,請關注我,謝謝!
  • Protopie學習筆記:如何插入圖形,交互原型設計軟體入門教程
    在前面的幾篇教程中,已經和大家分享了如何插入圖片、多媒體文件,今天和大家分享下,如何插入最常用的圖形,這裡說的圖形包含了2個最基本的形狀:方形和圓形;以及ios背景虛化的功能在上圖中,你可以看到我在場景中插入了一個正方形和一個圓形,默認呈灰色,你可以在屬性欄調整他的坐標、顏色、尺寸、邊框等。可以說圖形的屬性欄是最通用的,我們來看一下圖形的屬性欄包含哪些屬性。
  • Protopie交互原型設計軟體學習筆記:如何導入XD或Figma文件
    在軟體的左上角我們可以看到一個導入按鈕,點開後發現Protopie是支持對XD和Figma文件進行直接導入的。注意點如果你要導入XD,則需要在導入前,打開XD軟體,並且加載需要導入的XD文件。如果你需要導入Figma,則需要在導入前,進行授權,但是不代表完成授權就可以導入,因為你的Figma帳戶中可能存在多個設計稿的情況,Figma只會導入你最近正在編輯的設計稿。
  • 什麼是傳感觸發?交互原型中傳感類觸發包含哪些
    很多傳輸文件的APP都包含了類似「碰一碰、面對面加群」這樣的功能,有沒有人相關,這樣的功能如果在移動端原型上表現出來,該如何去做?今天,分享的傳感類觸發,可以滿足這些原型展示功能的實現。讓我們來看看吧!
  • Protopie學習筆記:如何插入音頻文件,交互原型設計軟體入門教程
    插入音頻比較簡單,就說到這裡,下一期比較好玩,可以插入相機,讓我們期待吧~下期預告Protopie學習筆記:如何插入相機功能,交互原型設計軟體入門教程相關文章Protopie學習筆記:如何插入視頻文件,交互原型設計軟體入門教程
  • Protopie學習筆記:如何插入Lottie動畫交互原型設計軟體入門教程
    什麼是LottieLottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案,設計師可以使用 Adobe After Effects 設計出漂亮的動畫之後,使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式,就可以直接運用在 iOS、Android
  • Protopie學習筆記:如何在交互原型中使用滾頁和滑頁動效
    今天我要和大家分享一下,如何在交互原型中插入滾頁和滑頁。今天所分享的「滾頁和滑頁」,在Protopie中有一個專屬的名字「容器層」。什麼是容器層?容器層可以在多圖層編組及管理,以及製作滾頁或滑頁交互時使用。
  • UI設計是什麼要學習哪些軟體
    UI設計是什麼要學習哪些軟體?當年輕人談到高薪職業時,UI設計可謂是近幾年年行業的領軍人物。引起許多年輕人的擁戴,甚至躍躍欲試要加入。可以說UI設計應用的領域非常廣泛,發展空間有目共睹的。儘管很多人聽說過但是學習UI需要學習哪些軟體?UI設計主要做什麼?下面AAA教育胡老師就給大家來介紹一下UI設計是什麼要學習哪些軟體?
  • 零基礎學習UI設計需要掌握什麼軟體
    ,轉載請註明 俗話說:工欲善其事,必先利其器,掌握了軟體操作,我們設計才能遊刃有餘,那很多零基礎學習UI設計的小夥伴們,不清楚剛學習UI設計的時候,需要掌握的軟體到底要學哪些,東學一個西學一個,導致自己所學的內容不夠全面,比較雜,因此UI設計華斌給大家整理了目前UI設計行業必備要學習的軟體有哪些,希望能幫助到大家更好的學習UI設計。
  • 軟體設計利器原型圖,什麼是軟體原型圖,原型圖如何繪製?
    原型圖用於開發設計軟體確定軟體功能擺放位置以及互交效果,是團隊開發非常必要的設計工具,有利於確定設計方案,很直觀的讓團隊所有人都可以看到設計的結果,可以完美呈現系統的最終樣子,但是原型圖只是設計圖,只能看到界面和互交效果,是無法有實際的操作功能的。
  • 如何做出產品/技術/測試都喜歡的「交互原型文檔」?
    一份恰到好處的交互原型文檔,能夠體現出產品的互動設計規劃以及大概展示效果,並保證設計師、開發、測試對交互效果展現達成一致,避免中途翻車產品上線延期。很多互動設計師都會遇到的問題,疫情期間在線辦公更是問題重重——交互評審反饋問題較多?開發和測試對交互理解有偏差?最終實現的效果與預期不符?
  • 以個人書架業務為例,解析原型圖的設計流程
    ,同時讀過的書也需要隨時記錄讀書筆記加強沉澱2.那業務邏輯已經清晰了,下一步就該進入原型圖的設計了,在這之前,先來了解一下原型圖的概念二、原型圖設計原型圖就是在產品成型之前的一個簡單框架,將頁面的重要元素和功能模塊簡單豪邁的進行布局和排版,加入點擊交互事件形成的產品最初始的設計圖。說到這裡其實就可以將原型圖分為靜態原型和交互原型。
  • Mac上好用的原型設計軟體:Axure RP 9 for Mac
    為您帶來Mac上好用的原型設計軟體Axure RP 9中文正式版,axure mac 是專為UX專業人員和業務分析師設計的專業網站原型設計工具!可以幫助他們快速創建應用程式和網站的線框,原型和規格!新功能包括一系列廣泛的改進:全面的 UI,新的設計和文檔特徵,以及將引擎優化到前所未有的程度。
  • 互動設計師應具備的技能樹(10)|選擇適合你的原型工具
    慣例更新技能樹Map,版本已經是2.0了,剛好代表新的開始:既然是互動設計師,手段部分首先要講的當然就是交互原型工具了,根據它們各自擅長畫的原型類型,我把原型工具分為三類:概念原型:用簡單的草圖將口頭原型可視化,甚至還能做頁面跳轉和簡單的可用性測試;框架原型:包含所有頁面和邏輯細節的原型呈現方式,這也是交互原型最主要的輸出形式;仿真原型:適合用來表現複雜的動畫邏輯
  • 從0設計App(6):根據流程圖4步解決原型稿、交互稿
    但很多中小公司裡產品經理同時身兼互動設計師的身份,更有甚者兼任視覺設計師。作為從0設計App的唯一負責人,我當然是同時身兼原型和交互哈!另外,原型有人還會分為線框圖、低保真和高保真原型,我用下釐清一下。其實名稱不重要,重要的是不同公司分工不同,按照實際情況應對就好了。
  • 全套的vi視覺交互系統設計包含哪些內容?
    而自己的品牌一定要通過vi視覺系統來詳細展現,通過vi視覺交互系統,我們能夠把企業的文化,企業的理念,企業的發展方向和市場定位全部濃縮融入其中,進而讓消費者理解、接受並贊同企業的文化特徵。那麼全套的vi視覺互動設計系統包含哪些部分呢?今天成都藝正堂就帶大家走進vi視覺互動設計系統,為大家揭開它的神秘面紗。
  • 搞定移動應用設計,你還差一款App原型設計工具!
    近期他們還推出了企業版,可供30人以上的團隊協同設計。新手製作App原型設計無從下手?別擔心!Mockplus提供了豐富的App設計模板(從iOS到Android)供用戶學習和臨摹。想要自己動手設計App? 沒問題,打開Mockplus軟體,直接選擇手機項目類型即可開始設計。然後,在左側的組件庫中搜索需要的組件,拖拽到工作區即可應用。
  • Principle for Mac(動畫互動設計軟體)v5.13
    Mac上好用的動畫互動設計軟體——Principle for Mac,這款軟體的設計動畫讓交互式用戶界面變得容易,支持多種尺寸的原型設計,用很短的時間就可以製作出一個具有完整交互動畫的原型,你可以把設計的交互動畫生成視頻分享到社交平臺。
  • 十款學習軟體硬核推薦
    分類整理了一些對醫學生來說十分有用的寶藏APP,從專業知識、方法效率、考試考研到學習資源,包含解剖、用藥、交流、文獻、題庫、網課、筆記等方面,全面且好用()想要豐富自己專業知識的同學,接著往下看↓↓↓>> 專業知識類