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.mzph.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余篇源码文章。历史面试系列。另外…

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余篇源码文章。历史面试系列。另外…

【逃离一线】被裁后的面经与感慨

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

使命召唤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余篇源码文章。历史面试系列。另外…

鲸鱼网络连接_登陆鲸鱼:在网络上读书,第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月,我加入了迪士尼公园创意团…

最优资产组合步骤_重新设计投资组合网站之前,请按照以下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 …

裁员潮之下,13次面试拿下字节前端岗offer!

|前言很多粉丝私信,这两个月求职没有往年那么好跳,还有不少粉丝已经收到公司的“优化”通知下面分享一位粉丝的最近的面试经历,在疫情裁员潮的环境下,经历了成长、膨胀、闭关打磨等一系列的跌宕起伏,最终拿下字节总包5…

hdu 1754/zstu 3121 I Hate It(线段树)

http://acm.hdu.edu.cn/showproblem.php?pid1754 http://acm.zstu.edu.cn:8080/JudgeOnline/showproblem?problem_id3121 (1)线段树的基本操作:建树,查询,更新。 (2)重新写一遍时,…

sketch放入app组件_使用Sketch App设计CSS网格

sketch放入app组件首先定义您的网格 (Start by defining your grid) Sketch has 2 built-in layout features — Layout and Grid. In most cases, layout is a great way to organize content on a typical website utilizing a 12 column grid. However for this exercise we…

鲜为人知的CSS实用技巧

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

猎鹰spacex_我如何重新创建SpaceX仪表板UI

猎鹰spacexA couple of weeks ago, SpaceX Crew Dragon launched from Kennedy Space Center to transport astronauts Robert L. Behnken and Douglas G. Hurley to the ISS. Lots of things were revolutionary about this launch, but the one that caught my attention was…