figma下載_在Figma上進行原型制作的各種觸發選項

figma下載

Prototypes are model versions of digital products. They’re used to measure usability by testing with potential users of a product. When making prototypes with Figma, it is necessary that the actions that trigger reactions aren’t strangers and they are used on the appropriate platforms and in the right instances.

原型是數字產品的模型版本。 它們通過與產品的潛在用戶進行測試來衡量可用性。 使用Figma制作原型時,觸發React的動作一定不要陌生,并且必須在適當的平臺和正確的實例中使用它們。

These are the interaction triggers on Figma and how they work.

這些是Figma上的交互觸發器以及它們如何工作。

延遲后。 (After Delay.)

People don’t instantly interact with a call to action without a very small window of time, which could be at least a second. I mean, they’re not high-speed?robots. You can use this small window of time creatively to, for example, show snapshots of how your product works or animate an illustration.

在沒有非常短的時間間隔(可能至少是一秒鐘)的情況下,人們不會立即與號召性用語互動。 我的意思是,它們不是高速機器人。 您可以創造性地使用這一小時間窗口,例如顯示產品工作原理的快照或為插圖制作動畫。

This interaction is only available when a frame is selected in prototype options.

僅當在原型選項中選擇框架時,此交互才可用。

Image for post
Look! it’s the iPhone 9!
看! 這是iPhone 9!

懸停時。 (While Hovering.)

Hovering is like touching a cup of coffee before picking it up, hovering in this case, is the touch. It’s not a confirmatory interaction, it just aids affordance that is, it just helps to show that the call to action works — or that the cup of coffee isn’t a cup of cold water.

懸停就像在拿起咖啡之前先觸摸一杯咖啡,在這種情況下,懸停就是觸摸。 這不是確定性的互動,它只是幫助提高負擔能力,也只是有助于表明號召性用語有效,或者這杯咖啡不是一杯冷水。

Hovering isn’t a valid trigger in?touchscreen?interfaces.

在觸摸屏界面中,懸停不是有效的觸發器。

Image for post
Thank goodness it’s not a dummy button.
謝天謝地,這不是一個虛擬按鈕。

點按。 (On Tap.)

The first thing a person is most likely to do after at least scanning through content on a page is to click on a significant call to action, yes? Clicking is one of the basic ways people interact with a product (or prototype).

在至少瀏覽頁面內容之后,人們最有可能做的第一件事就是點擊重要的號召性用語,對嗎? 點擊是人們與產品(或原型)互動的基本方式之一。

Pretty much works on any device that isn’t controlled by only voice.

在不受語音控制的任何設備上,幾乎都可以工作。

Image for post
Clicking on a single-page, single-button website.
單擊單頁,單按鈕的網站。

在拖動。 (On Drag.)

Dragging interaction— ‘swiping' as we know it is useful for example to simulate scrolling. Some popular products have integrated this in other small yet useful interactions like exiting the full-screen view of picture or video playback.

拖動交互-我們知道“滑動”對于例如模擬滾動很有用。 一些受歡迎的產品已將此集成到其他小的但有用的交互中,例如退出圖片或視頻播放的全屏視圖。

It is mostly used in touch-controlled interfaces because it’s one of the major ways users navigate around them.

它主要用于觸摸控制界面,因為它是用戶在它們之間導航的主要方式之一。

Image for post
Swiping stuff around.
在周圍刷東西。

同時按下。 (While pressing.)

Simulates “press and hold” in devices with a touchpad. This interaction is mostly used for options that are important but do not need to be discovered instantly. For instance, pressing and holding on app icons in mobile devices reveals the option to uninstall.

使用觸摸板模擬設備中的“按住”。 這種交互作用主要用于重要但不需要立即發現的選項。 例如,按住移動設備中的應用程序圖標可顯示卸載選項。

Image for post
A bouncy button.
彈性按鈕。

按鍵/游戲手柄。 (Key/Gamepad.)

Many times you tend to use keyboard shortcuts when you’ve become proficient in the use of a product or used a product for a long time? Key triggers help simulate simple app navigation shortcuts with keys on a keyboard or Game controllers in a prototype.

當您精通產品使用或長時間使用產品時,往往會傾向于使用鍵盤快捷鍵? 按鍵觸發器可使用鍵盤上的按鍵或原型中的游戲控制器來模擬簡單的應用程序導航快捷方式。

Check out what this page does when the up and down arrow keys are tapped.

當點擊向上和向下箭頭鍵時,請查看此頁面的功能。

Image for post
Look! No cursor!
看! 沒有光標!

鼠標觸發器。 (Mouse triggers.)

These are hover and click actions broken into two pairs:

這些是懸停和單擊操作,分為兩對:

Mouse enter [Hover start],

鼠標輸入[懸停開始],

Mouse Down [Press start],

鼠標按下[按開始],

Mouse Up [Press end],

鼠標向上[按結束],

Mouse leave [Hover end].

鼠標離開[懸停結束]。

These ’start and end’ pairs work together i.e. Mouse down is triggered when you press down a mouse?button, Mouse up is its counterpart that is triggered when you release the click.

這些“開始”和“結束”對協同工作,即,按下鼠標按鈕時觸發鼠標按下,釋放單擊時觸發鼠標按下。

However, the mouse-enter and leave options, just like hover, cannot be used in touch-controlled interfaces.

但是,像懸停一樣,鼠標輸入和離開選項不能在觸摸控制界面中使用。

Here’s a demo:

這是一個演示:

Image for post
Nothing much, just checking the checkbox out.
沒什么,只需要檢查一下復選框即可。

Using these trigger options appropriately and creatively (with the transition options) will help you create a seamless navigation experience in your design and in your final product eventually.

適當且創造性地使用這些觸發選項(帶有過渡選項)將幫助您在設計和最終產品中創建無縫的導航體驗。

Keep practicing and keep being awesome!

繼續練習并保持卓越!

翻譯自: https://uxdesign.cc/prototyping-with-figma-interactions-228dbc82fe00

figma下載

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274672.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274672.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274672.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

通過動畫讓你深入理解 ES modules

大家好,我是若川。持續組織了8個月源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

海量數據處理之倒排索引

前言:本文是對博文http://blog.csdn.net/v_july_v/article/details/7085669的總結和引用 一,什么是倒排索引 問題描述:文檔檢索系統,查詢那些文件包含了某單詞,比如常見的學術論文的關鍵字搜索。 基本原理及要點&#…

ux和ui_如何為您的UX / UI設計選擇正確的原型制作工具

ux和uiAll UX/UI designers might encounter the situation of creating prototypes for wireframes or visual designs. In some cases, you may also receive the need to craft motion designs, for instance, animating icons or illustrations.所有UX / UI設計人員都可能遇…

Vue 性能指標逐漸開始反超 React 了!

大家好,我是若川。持續組織了8個月源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

制作Ubuntu U 盤啟動盤在ubuntu12.04中

制作U盤啟動盤,這樣就可以通過U盤來裝系統了,簡單便攜。 在Ubuntu下,從dash home中找到Startup disk creator,當然之前把U盤插好,然后很簡單的兩個選擇就好了。 轉載于:https://www.cnblogs.com/allenzhaox/archive/20…

figma下載_我如何使用Figma,CSS Grid和CSS Flexbox構建登錄頁面

figma下載I enjoy looking at website designs that are on platforms like Behance, Dribble, etc. as they are visually very pleasing to the eye. While scrolling through these designs, I always wonder about one thing, that is, how difficult would it be to expre…

2022年Web平臺的新動態

大家好,我是若川。持續組織了8個月源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

【原創】ABAP動態編程之功能實現

根據名字獲取結構 DATA: STRUCTTYPE TYPE REF TO CL_ABAP_STRUCTDESCR. STRUCTTYPE ? CL_ABAP_TYPEDESCR>DESCRIBE_BY_NAME( SPFLI ). 根據變量獲取結構 DATA: DATATYPE TYPE REF TO CL_ABAP_ELEMDESCR,W_CHAR TYPE CHAR5. DATATYPE ? CL_ABAP_TYPEDESCR>DESCRIBE_BY_D…

【逃離一線】被裁后的面經與感慨

大家好,我是若川。持續組織了8個月源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

document.body.scrollTop以及一些備忘

網頁可見區域寬:document.body.clientWidth; 網頁可見區域高: document.body.clientHeight; 網頁可見區域寬: document.body.offsetWidth (包括邊線的寬); 網頁可見區域高: document.body.offsetHeight (包括邊線的寬); 網頁正文全…

使命召喚ios_使命召喚的精巧UI:戰地

使命召喚iosWith over 50 million players worldwide it’s safe to say Warzone has become a global sensation. Featuring cross-platform play, multiple game modes, customisation and wealth of features too long to mention here — it’s captured its audience and …

深入淺出 package.json,目測大多數人不了解它

大家好,我是若川。持續組織了8個月源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

圖片旋轉代碼

http://code.google.com/p/jqueryrotate/wiki/Examples轉載于:https://www.cnblogs.com/booth/archive/2012/08/16/2642163.html

鯨魚網絡連接_登陸鯨魚:在網絡上讀書,第1部分

鯨魚網絡連接I don’t know when it was I started using the text of Moby Dick in my workshops and talks. Likely it dates back to some of my earliest explorations of web typography. Since it’s out of copyright, it’s one those texts you can find online in va…

2022年值得使用的 Node.js 框架

大家好,我是若川。持續組織了8個月源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

更改apk安裝包對android系統等級要求

此篇文章解決的為問題: █問題1.系統等級與apk等級不匹配. █問題2.更改api等級后的簽名問題. 1.工具準備: 解壓縮tool.zip文件夾: 2.開始反編譯apk安裝包 3.切換目錄到tool目錄下: 4.反編譯: apktool.bat d 待編譯apk目錄名 存放編譯后的文件目錄 apktool.bat d Onenote_v14.…

推薦一個前端技術選型神器!真好用~

大家好,我是若川。持續組織了8個月源碼共讀活動,感興趣的可以 點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

靜態原型設計 加載中_見解1:原型設計有助于填補靜態設計留下的空白。

靜態原型設計 加載中In April 2015, I joined the Disney Parks creative team to design mobile experiences for the happiest place on Earth. I learned a lot from a diverse group of humble, creative, and smart people.2015年4月,我加入了迪士尼公園創意團…

tar 壓縮與解壓縮打包命令

tar [-cxtzjvfpPN] 文件與目錄 參數: -c :建立壓縮文件的參數命令(creat的意思) -x :解壓縮文件的參數命令 -t :查看tar包里文件的命令特別注意,在使用參數時,c/x/t只能有一個,不能同時存在 因為不可能同時壓縮與解壓縮…

最優資產組合步驟_重新設計投資組合網站之前,請按照以下5個步驟進行操作

最優資產組合步驟The portfolio website is one of the most important assets for a designer. Without it, it can be tough to find your next job or client.作品集網站是設計師最重要的資產之一。 沒有它,很難找到下一份工作或客戶。 The temptation is high …