精华内容
下载资源
问答
  • 内含80个高品质的UI设计组件 Adobe XD设计专用 Adobe XD设计专用
  • 您可以使用这些样本来了解有关如何为Adobe XD生成插件的更多信息。 对于每个样本,请务必阅读自述文件和代码注释。 需要注意的是,与起始采样how-to-有伴侣的教程在,这可以在直播上观看我们的开发人员门户: 样品...
  • Adobe XD使用心得及简单使用技巧-附件资源
  • Adobe XD转换为Xamarin.Forms导出器 Adobe XD插件可将资产导出到Xamarin.Forms XAML样式和资源。 演示版 选择Plugins -> Xamarin.Forms Exporter 预览将打开,显示XAML资源。 您可以从预览中选择并复制一些资源,...
  • 一个小型库,用作在Adobe XD CC的插件中创建中等复杂对话框(包含用户可以选择的选项,不仅包括错误消息之类的选项)的抽象层。 用法 安装库 您可以通过两种主要方式安装该库。 使用软件包管理器:如果您的插件...
  • 使用现代React样板的Adobe XD插件 使用现代React的Adobe XD插件示例。 当前支持React v17.0.1 发展 1.安装yarn如果没有) npm install -g yarn 2.安装依赖包 yarn install 2.1如果要单独安装软件包 依存关系 yarn ...
  • Adobe XD

    2021-06-02 20:16:07
    所学内容:在画板中应用和编辑布局网格Adobe XD 中的布局网格是列网格,当您需要对齐设计内容或针对不同设备大小进行设计时,此网格非常有用。您可以根据自己的需求,轻松快速地进行调整。应用布局网格选择一个或多...

    所学内容:在画板中应用和编辑布局网格

    Adobe XD 中的布局网格是列网格,当您需要对齐设计内容或针对不同设备大小进行设计时,此网格非常有用。您可以根据自己的需求,轻松快速地进行调整。

    应用布局网格

    选择一个或多个画板后,在“Property Inspector”(属性查看器)的“Grid”(网格)部分,从菜单中选中“Layout”(布局)并选择该选项。此时将应用默认布局网格。

    编辑布局网格选项

    在画板中应用布局网格后,您可以在“Property Inspector”(属性查看器)的“Grid”(网格)部分调整设置。

    列数:对于网页设计,我们通常设计为 12 列或 16 列网格。可根据需要更改列的数量。

    颜色:可通过单击颜色选项调整布局网格列的颜色。通过将“Opacity”(不透明度)设置为 0,可以删除列的填充颜色并显示轮廓。

    Gutter 宽度:“Gutter Width”(Gutter 宽度)是每列之间的距离。默认情况下,XD 会根据列数、页边距和画板的整体宽度为您计算相应值。

    页边距:“Margins”(页边距)是指布局网格与画板四个边缘之间的距离。默认情况下,您可以同时对它们进行编辑,或者通过单击“Property Inspector”(属性查看器)的“Grid”(网格)部分中的“Different Margin For Each Side”(每个边使用不同的页边距)图标分别进行编辑。

    提示:您可以通过单击“Property Inspector”(属性查看器)的“Grid”(网格)部分中的“Use Default”(使用默认设置)按钮,将布局网格选项重置为默认设置。

    保存和应用自定义布局网格

    要将当前布局网格保存为新的默认设置,以便可以将其应用于之后的任何画板,可以单击“Property Inspector”(属性查看器)的“Grid”(网格)部分中的“Make Default”(设为默认)按钮。此时所选画板的布局网格选项将保存为默认设置。

    可以通过单击“Property Inspector”(属性查看器)的“Grid”(网格)部分中的“Use Default”(使用默认设置)按钮,将新的默认设置应用于任何选定的带有布局网格的画板。

    展开全文
  • xd-awesome:社区创建的很棒的资源,用于扩展Adobe XD
  • XD要使用官方的UI Kits需要从官方网站上下载,所以整理出了一份,方便大家使用
  • plugin-docs:Adobe XD插件API文档
  • Adobe XD到Flutter项目 该存储库包含已被复制到Flutter dart代码中的flutter代码,apk文件和相应的Adobe XD文件。 创建此存储库时,我的目标是向人们(希望是可能的招聘公司)展示我可以根据给定的设计(最好是Adobe...
  • adobe xd安装包

    2018-07-24 15:38:27
    安装包adobeXd安装包adobeXd安装包adobeXd安装包adobeXd
  • 这是Adobe XD的一个简单插件,可以通过url将图像填充为形状。 该插件是和。 感谢作者。 开发安装 克隆存储库 git clone https://github.com/satriaajiputra/tunda-image.git 安装套件 npm install 开始开发 node...
  • adobe xdAnimations… For a long time, these really were a mystery to me. I didn’t know what to use to make them, or how to use them, or, really, anything about them. So when the time came that my ...

    adobe xd

    Animations… For a long time, these really were a mystery to me. I didn’t know what to use to make them, or how to use them, or, really, anything about them. So when the time came that my boss asked me to design some nice animations for a website we were building, I was lost.

    一个 nimations ......很长一段时间,这真的是一个谜给我。 我不知道该用什么来制作它们,或如何使用它们,或者实际上是关于它们的任何东西。 因此,当老板要求我为我们正在构建的网站设计一些精美的动画时,我迷失了。

    At first I tried Adobe Ae. It’s the right tool, at least for creating nice motion graphics, and to the best of my knowledge was the best route to take to build out a nice looking animation to get the concept over to the developers. But after fiddling with it and watching a couple hours of tutorials I was still only getting very basic animations and not ending up with the idea I was going for.

    一开始我尝试使用Adobe Ae。 这是正确的工具,至少用于创建漂亮的运动图形,据我所知,这是构建漂亮的动画以将概念传达给开发人员的最佳途径。 但是在摆弄它并看了几个小时的教程之后,我仍然只得到非常基本的动画,而没有得到我想要的想法。

    I was already using Adobe Xd to build out the design of the website. In the middle of messing around in Ae, a life saver popped up. An update, which included improvements to Xd’s Auto-Animate feature. At last, something that made it overly simple to create something convincing without having to add yet another tool to my workflow!

    我已经在使用Adobe Xd来构建网站的设计。 在Ae的混乱中,弹出了一个救生员。 一个更新,其中包括对Xd的自动动画功能的改进。 最后,有些事情使创建令人信服的事情变得过于简单,而不必在我的工作流程中添加其他工具!

    So, sorry for the long intro. Let’s dig into the basics of Auto-Animate to show you some of what you can do!

    因此,很长的介绍对不起。 让我们深入了解“自动动画”的基础知识,向您展示一些您可以做的事情!

    Step 1: Create a new document

    步骤1:创建一个新文档

    A screenshot of a blank XD project with a single artboard
    A new Xd project, with a 400x40 artboard
    一个新的Xd项目,带有400x40画板

    I set up a new project with a custom size. When you select this option, a new project opens up with no artboard in the window. Select your “artboard” tool by using the keyboard shortcut “a”, or in the tool panel on the left.

    我用自定义尺寸设置了一个新项目。 选择此选项时,将打开一个新项目,窗口中没有画板。 使用键盘快捷键“ a”或在左侧的工具面板中选择“画板”工具。

    Click and drag out a new artboard, don’t worry about the size. Now, in the properties panel on the right, you should see options to change the artboards width and height. Set this to 400px wide, and 40px tall. You should end up with the image shown above.

    单击并拖出新的画板,不必担心大小。 现在,在右侧的属性面板中,您应该看到用于更改画板宽度和高度的选项。 将其设置为400px宽和40px高。 您应该最终得到上面显示的图像。

    Step 2: Make a square

    第2步:制作一个正方形

    Go ahead and create a square in the center of the artboard. Using the “R” shortcut, select your rectangle tool, then move your cursor to roughly the center of the artboard.

    继续,在画板的中心创建一个正方形。 使用“ R”快捷方式,选择矩形工具,然后将光标大致移动到画板的中心。

    There’s a couple keybaord shortcuts you can use here:

    您可以在此处使用几个快捷键快捷键:

    1. Shift: Constrains the dimensions to scale evenly, in this case making a square. This also works with the ellipse and polygon tools.

      Shift:约束尺寸以均匀缩放,在这种情况下为正方形。 这也适用于椭圆和多边形工具。
    2. Option (alt on windows): This will scale the element from the center of your click, expanding all sides out from that point.

      选项(在Windows上为Alt):这将从您的点击中心缩放元素,从该点开始将所有侧面展开。

    Hold both of these buttons down, and drag outward from the center of your artboard. You should end up with something like the image below.

    按住这两个按钮,然后从画板中心向外拖动。 您应该得到如下图所示的结果。

    Image for post
    our happy little square
    我们快乐的小广场

    Step 3: Set up your next artboard

    第3步:设置下一个画板

    Hold down the “option” key (alt on windows) and click the artboard name, and drag it down below. You should have two identical artboards now.

    按住“ Option”键(在Windows上为Alt)并单击画板名称,然后将其向下拖动。 您现在应该有两个相同的画板。

    Image for post
    duplicated artboard sitting beneath the original
    坐在原图下方的重复画板

    So far, we’ve been working in “design mode”. Let’s switch into “prototype mode” by clicking the option in the top left corner of our screen. This is where we wire things together for interactivity. It’s also where we gain access to the amazing auto-animate feature.

    到目前为止,我们一直在“设计模式”下​​工作。 通过单击屏幕左上角的选项,我们可以切换到“原型模式”。 在这里,我们将事物连接在一起以实现交互性。 这也是我们获得惊人的自动动画功能的地方。

    Click your first artboard. It will highlight it in blue. This shows that the entire artboard is selected as our trigger. Rather than that, let’s click on the square within the artboard.

    单击您的第一个画板。 它将以蓝色突出显示。 这表明整个画板都被选作触发器。 与其相反,让我们单击画板上的正方形。

    Image for post
    artboard with the little square selected
    选择了小方块的画板

    Now drag the little blue tab onto our other artboard to link them together.

    现在,将蓝色的小标签拖到我们的其他画板上,以将它们链接在一起。

    Image for post
    linking our artboards together
    将我们的画板连接在一起

    Now, you can see in our properties panel we have all the options for the desired trigger, action, etc. Now, if you were to auto-animate this, nothing would happen. That’s because the artboards are identical. That leads us to our next step.

    现在,您可以在属性面板中看到所需触发器,动作等的所有选项。现在,如果您要对此进行自动动画处理,则什么也不会发生。 那是因为画板是相同的。 这将我们引向下一步。

    Step 4: Moving the square

    步骤4:移动方块

    The most important basic principle behind auto-animate is that it combs through the artboards you have linked together, and finds any changes in the positioning, scale, rotation, and shape of groups and components that are contained within them. Right now, there is no change between our artboards.

    自动动画背后的最重要的基本原理是,它会梳理您链接在一起的画板,并发现其中包含的组和组件的位置,比例,旋转和形状的任何变化。 目前,我们的画板之间没有任何变化。

    So, let’s make one. Click and drag your square to the far left of the bottom artboard.

    所以,让我们做一个。 单击并将正方形拖到底部画板的最左侧。

    Image for post
    moving our square to the left of the artboard
    将我们的方块移到画板的左侧

    Now, auto-animate will see that the box has moved. So let’s get the transition set up in the properties panel to our right. Leave the trigger to “tap”, but for action, we are going to choose “auto-animate”.

    现在,自动动画将显示该框已移动。 因此,让我们在右侧的属性面板中设置转换。 将触发器保留为“点击”,但要采取行动,我们将选择“自动动画”。

    Now at the top right of your screen, click the play button. Click on our square and watch the magic happen!

    现在,在屏幕的右上角,单击播放按钮。 单击我们的广场,观看魔术发生!

    Image for post
    the auto-animated beauty
    自动动画的美女

    Pretty simple right? Auto-animate played a transition from our previous artboard, to the new one. It saw that the square moved, and animated that object to it’s new position at the speed defined in the properties panel.

    很简单吧? 自动动画从以前的画板过渡到了新的画板。 它看到正方形移动,并以属性面板中定义的速度将该对象动画化为它的新位置。

    Now, here’s another little fact about auto-animate. It can only detect the change to the square as long as the two squares have the same layer name. For example, if you look in the layers panel on the left of the screen, and click between the two different artboards, you will notice that the square is called “Rectangle 1” in both. If you were to change that on one of them, auto-animate will no longer transition the position of the square. This is because it now sees them as two different objects, thus the position hasn't changed. Auto-animate will think that you have deleted the first rectangle, and created an entirely new one in the second artboard.

    现在,这是关于自动动画的另一个小事实。 只要两个正方形具有相同的图层名称,它就只能检测到正方形的变化。 例如,如果您查看屏幕左侧的“图层”面板,然后在两个不同的画板之间单击,您会注意到该正方形在两个面板中均被称为“矩形1”。 如果要更改其中之一,则自动动画将不再转换正方形的位置。 这是因为它现在将它们视为两个不同的对象,因此位置没有改变。 自动动画会认为您已经删除了第一个矩形,并在第二个画板上创建了一个全新的矩形。

    Put simply, do not change the names of elements, groups or components you wish to animate between artboards, unless you rename that element on every artboard on which it exists!

    简而言之,除非在每个存在的画板上重命名该元素,否则不要更改要在画板上进行动画处理的元素,组或组件的名称!

    Conclusion:

    结论:

    Yes, this was a very basic overview. It was really just meant to explain the basics of auto-animate and how to get started. In my next story, we will consider how to add different easing, timing and other shapes to create more complex animations and see how to use those in a more realistic use case. Thanks for reading, and please let me know if there are changes I should make to this!

    是的,这是一个非常基本的概述。 它实际上只是用来解释自动动画的基础知识以及如何入门。 在我的下一个故事中,我们将考虑如何添加不同的缓动,定时和其他形状以创建更复杂的动画,并了解如何在更现实的用例中使用它们。 感谢您的阅读,如果您对此有任何更改,请告诉我!

    翻译自: https://uxdesign.cc/getting-started-with-animations-in-adobe-xd-2ce59b76022a

    adobe xd

    展开全文
  • Adode-XD-Designs:我在Adobe XD中所做的设计
  • XD的TailwindCSS颜色生成器 描述 这是一个Adobe XD插件,可帮助您生成TailwindCSS的所有颜色 执照 阿帕奇2.0
  • adobe xdWelcome to part 2 of my tutorial series on the Auto-Animate feature in Adobe XD! In the first article in this series, we went through some of the most basic of features in XD, working our way ...

    adobe xd

    Welcome to part 2 of my tutorial series on the Auto-Animate feature in Adobe XD! In the first article in this series, we went through some of the most basic of features in XD, working our way into animating a small square. If you haven’t read that yet, and have little experience in XD or with the auto-animate feature, you can read that article here.

    欢迎来到我的教程系列的第2部分,它是关于Adobe XD中自动动画功能的! 在本系列的第一篇文章中,我们介绍了XD中一些最基本的功能,并逐步制作了一个小正方形的动画。 如果您尚未阅读该文章,并且对XD或自动动画功能的了解很少,则可以在此处阅读该文章。

    https://medium.com/@morgan_58513/getting-started-with-animations-in-adobe-xd-2ce59b76022a?source=friends_link&sk=fbab14adc0a22e1b512bcc8d6ac9ea08

    https://medium.com/@morgan_58513/getting-started-with-animations-in-adobe-xd-2ce59b76022a?source=friends_link&sk=fbab14adc0a22e1b512bcc8d6ac9ea08

    In that article, we learned a few key things about Auto-Animate:

    在那篇文章中,我们了解了有关自动动画的一些关键知识:

    1. It looks for differences between two artboards, and animates between those changes.

      它寻找两个画板之间的差异,并对这些变化进行动画处理。
    2. For a layer to animate, it’s name must be the same on both artboards. This includes but is not limited to groups and components.

      要使图层动起来,两个画板上的名称必须相同。 这包括但不限于组和组件。
    3. Each element within a group or component can be animated separately (This is because Auto-Animate sees the changes to each element within the group independently).

      组或组件中的每个元素都可以单独设置动画(这是因为“自动动画”可以独立查看组中每个元素的更改)。

    Knowing these 3 basic principles, we can start expanding our animations to do some more interesting things. But before we start creating more animations, I want to go over some more of the properties available within auto-animate, namely, easing and timing. These properties can create an entirely different feel from a relatively basic animation, so let’s get started!

    了解了这三个基本原理后,我们就可以开始扩展动画以做一些更有趣的事情。 但是在开始创建更多动画之前,我想回顾一下自动动画中可用的更多属性,即缓动和定时。 这些属性可以创建与相对基本的动画完全不同的感觉,所以让我们开始吧!

    第1部分:轻松 (Part 1: Easing)

    In the real world, motion is not instant. Things take time to accelerate and decelerate. For example a car doesn’t just go instantly from 0 to 60, it takes time. This is where easing animations comes in. We use this so that animations don’t feel jarring or unnatural to the user.

    在现实世界中,运动不是瞬间的。 事情需要时间来加速和减速。 例如,一辆汽车不仅会立即从0行驶到60,还需要时间。 这是放宽动画的地方。我们使用它是为了使动画不会对用户造成刺激或不自然。

    Let’s start with our file from the previous article, and we will apply some easing to our little box. Here’s where we left off last time:

    让我们从上一篇文章中的文件开始,我们将对我们的小盒子应用一些缓动。 这是我们上次中断的地方:

    Image for post

    If you take a look in the properties panel to the right, you will see a few options. We will talk about the trigger more in future tutorials, but for now let’s focus on Easing.

    如果您在右侧的属性面板中查看,将会看到一些选项。 在以后的教程中,我们将更多地讨论触发器,但是现在让我们专注于缓动。

    If you click on the Easing property, you will see quite a few options here. Let me explain the basic principle of each:

    如果单击“缓动”属性,您将在此处看到很多选项。 让我解释一下每个的基本原理:

    1. Ease Out: This means that the object will instantly move at top speed, only slowing down as it reaches the end of its animation.

      缓出:这意味着对象将立即以最快的速度移动,直到到达动画结束时才减速。
    2. Ease In: Exactly the opposite of Ease Out. It accelerates from 0 to top speed, and then stops abruptly back to 0 at the end of the animation.

      缓入:与缓入正好相反。 它从0加速到最高速度,然后在动画结束时突然停止回到0。
    3. Ease In-Out: The most basic, realistic of animation easing. It accelerates from 0 to its top speed, and the slows back down to the end of the animation. This creates a nice, smooth animation.

      缓入缓出:最基本,最逼真的动画缓动。 它从0加速到最高速度,然后减速回到动画结束。 这将创建一个流畅的动画。
    4. Snap: This one is interesting. Instant top speed, moves slightly beyond its final position, then goes backwards to the ending point of the animation.

      Snap:这个很有趣。 瞬时最高速度,略微超出其最终位置,然后向后移动到动画的终点。
    5. Wind Up: Same as snap, but in reverse. The object moves slightly backward, before moving at top speed to its final stopping point.

      结束:与捕捉相同,但相反。 在以最高速度移动到其最终停止点之前,对象会稍微向后移动。
    6. Bounce: Exactly what it sounds like. The object moves at top speed to its stopping point, the “bouncing” back a little before actually stopping.

      弹跳:听起来确实一样。 物体以最快的速度移动到其停止点,然后在实际停止之前“弹跳”回一点。

    While some of these are not as smooth as others, they all provide a sense of “normal” movement to the user. Something that’s predictable and looks nice. Keep in mind though, certain easing properties look better in certain circumstances. For now, try each of those easing options on your box, and see just how the effect looks, and try to get a feel for exactly what each one does. Once you’ve done that, we will use what we have seen to create an animated check-box.

    尽管其中一些不如其他平滑,但它们都为用户提供了“正常”运动的感觉。 可以预见并且看起来不错的东西。 但是请记住,某些缓和属性在某些情况下看起来更好。 现在,尝试使用盒子上的每个缓动选项,看看效果如何,然后试一试每个选项的效果。 完成此操作后,我们将使用我们看到的内容创建一个动画复选框。

    第2部分:创建我们的复选框 (Part 2: Creating our check-box)

    The following part of this tutorial assumes a basic knowledge level of creating elements in XD using the shape tools (box, circle, line, etc.)

    本教程的以下部分假定您具有使用形状工具(框,圆,线等)在XD中创建元素的基本知识水平。

    Let’s start by making our artboard little bigger. Go ahead and delete the second artboard we made, so you only have one, with the box centered. I also adjusted that artboard to be taller, 60px in height, and made the box 30px square, with a 2px black border. You should have a screen like this:

    让我们开始增加画板的尺寸。 继续并删除我们制作的第二个画板,因此只有一个画板处于居中状态。 我还调整了画板的高度,使其高度为60px,并使该框为30px正方形,带有2px黑色边框。 您应该有一个这样的屏幕:

    Image for post

    Our next step is to make the “check”. I used the pen tool, and created 2 separate segments, set the border to 2px, black, and carefully lined them up to get the desired result.

    我们的下一步是进行“检查”。 我使用了钢笔工具,并创建了2个单独的线段,将边框设置为2px(黑色),并仔细地将它们对齐以获得所需的结果。

    If you used the pen tool to make 2 lines, double click on the shorter part first. You will notice you now have just 2 dots, one on each end. You can move these around to adjust the alignment of your lines. Do this with both lines to match them up nicely as shown below:

    如果使用钢笔工具划出2条线,请先双击较短的部分。 您会发现您现在只有2个点,每个点一个。 您可以四处移动以调整线条的对齐方式。 用两行来做到这一点,以使其很好地匹配,如下所示:

    Image for post

    Now that I have my end state for the animation, I’m going to create my starting state, which will just be the empty box. To do this, I just click on the title of the artboard, hold ctrl/option, and drag upwards. This duplicates my artboard. Now with that copy in place, I’m going to make the check mark invisible, so we can animate it in later.

    现在我有了动画的结束状态,我将创建我的开始状态,它将是一个空框。 为此,我只需单击画板的标题,按住ctrl / option,然后向上拖动即可。 这复制了我的画板。 现在,有了该副本,我将使复选标记不可见,以便稍后进行动画处理。

    I’m going for a drawing effect, to make it look like someone is writing the check mark in the box. Usually, someone would draw the check mark from the far left, drawing down to the right, and the moving up and to the right to finish the long tail. How do we accomplish this XD? Simple!

    我要画图效果,以使其看起来像有人在框中写对勾标记。 通常,有人会从最左边绘制对勾标记,向右向下绘制,然后向上和向右移动以完成长尾巴。 我们如何完成此XD? 简单!

    Double click the short line again, and with the handle on the lower right side, shorten the line as far as it will go, and then set the opacity to 0.

    再次双击短线,将手柄置于右下角,将其尽可能短地缩短,然后将不透明度设置为0。

    Image for post

    Repeat that process for the long line, shorting it to the lower left, where you would draw it from, and decrease opacity to 0.

    对长线重复该过程,将其缩短到左下角(从此处绘制),并将不透明度降低到0。

    You should now have 2 artboards, like this:

    您现在应该有2个画板,如下所示:

    Image for post

    We could in theory auto-animate this right now, but it would end up choppy. Why? Well, try it, then I’ll show you. Go into prototype mode, and connect the box in the first artboard to the lower artboard. Set the trigger to tap, and the action to auto-animate like so:

    从理论上讲,我们现在可以对此进行自动动画处理,但是最终会变得断断续续。 为什么? 好吧,尝试一下,然后我告诉你。 进入原型模式,然后将第一个画板中的框连接到下部画板。 将触发器设置为点击,将动作设置为自动动画,如下所示:

    Image for post

    Now preview it!

    现在预览!

    Image for post

    It’s not bad, but we have some timing and drawing issues. First off, you may notice both lines draw simultaneously. That’s not how we draw for real, is it? Also, you can see how the opacity changes over the course of the entire animation. We don’t want that either! So, since we need to add more steps, we need to add more artboards…

    这还不错,但是我们有一些时间安排和绘图问题。 首先,您可能会注意到两条线同时绘制。 那不是我们真实绘画的方式,对吗? 此外,您还可以看到不透明度在整个动画过程中如何变化。 我们也不想要那个! 因此,由于我们需要添加更多的步骤,因此我们需要添加更多的画板...

    First, get rid of your prototyping connector by clicking it and dragging it over empty space so it’s not connected to anything. Now, move your upper artboard even higher up, and let’s duplicate it below to give us a third artboard.

    首先,通过单击原型连接器并将其拖动到空白处以使其不连接任何东西,从而摆脱原型连接器。 现在,将上层画板进一步向上移动,让我们在下面进行复制,以提供第三个画板。

    Image for post

    Now we need to make the opacity change instant, so that it doesn’t change over time. We don’t want both lines to become visible at the same time though. So let’s just find that shorter line, and set it’s opacity to 100%.

    现在我们需要立即使不透明度发生变化,以使它不会随时间变化。 但是,我们不希望这两行同时显示。 因此,让我们找到较短的行,并将其不透明度设置为100%。

    Image for post

    Now we can drag a prototyping line from the first box, to the second artboard, and set up our auto-animate transition. We want this one to be as quick as possible. Set the easing to none, and the duration to 0.1s. We don’t want the user to notice this transition, since we are just setting things up to make our animation draw correctly.

    现在,我们可以将原型线从第一个框拖到第二个画板上,并设置我们的自动动画过渡。 我们希望这个尽快。 将缓动设置为无,并将持续时间设置为0.1s。 我们不希望用户注意到此过渡,因为我们只是在进行设置以使动画正确绘制。

    So, now that we have our line prepared, let’s draw it. Duplicate the second artboard down to create yet another, and in this one, lengthen your line to where it matches up with the longer one. To line it up correctly, I increased the opacity on the longer line, so I could see where the shorter one needed to end up, and I left it at the full opacity because the first line is covering it anyways. The animation will happen quickly enough the user won’t notice the change, and we will already have that longer line prepped for drawing in the next stage.

    因此,既然我们已经准备好线,就可以绘制它。 向下复制第二个画板,以创建另一个画板,在该画板中,将线条加长到与更长的画板匹配的位置。 为了正确对齐,我在较长的线上增加了不透明度,因此我可以看到较短的线要结束的地方,并且我将其保留为完全不透明度,因为第一行仍然覆盖了它。 动画将以足够快的速度发生,用户将不会注意到更改,并且我们已经准备好较长的线以在下一阶段进行绘制。

    Image for post

    Now we can prototype it. Connect a prototyping line from the artboard (not the box), to this new artboard. We could animate it like this. With our current settings, we would click the previous artboard, and the line would draw to this new length. But we don’t want to have to click for every stage of the animation!

    现在我们可以制作原型。 将原型线从画板(而不是盒子)连接到此新画板。 我们可以像这样制作动画。 使用我们当前的设置,我们将单击上一个画板,并且线条将绘制到新的长度。 但是我们不需要在动画的每个阶段都单击!

    Instead, in the properties panel on the right, set the trigger to “time”. Time is only available when using an artboard as the trigger object, which is why we used that rather than the previous box. We don’t want the animation to pause here, so we set the delay to 0s. Use the settings seen in the image below:

    而是在右侧的属性面板中将触发器设置为“时间”。 只有将画板用作触发对象时,时间才可用,这就是为什么我们使用它而不是前一个框的原因。 我们不希望动画在此处暂停,因此我们将延迟设置为0s。 使用下图所示的设置:

    Image for post

    Now when you click the first artboard and hit play, your animation should look like this:

    现在,当您单击第一个画板并点击播放时,您的动画应如下所示:

    Image for post

    Check it out! You have a nice drawing effect for the first line in your check mark! Let’s break down what’s happening here.

    看看这个! 您的复选标记的第一行具有不错的绘图效果! 让我们分解一下这里发生的事情。

    The first artboard is your click, which triggers the opacity change on the first line, which then automatically (via a time trigger) moves to the third artboard, which animates the line from it’s length in the second artboard, to it’s new legth in the third artboard. Read that a few times until it makes sense!

    第一个画板是您的点击,它会触发第一行的不透明度更改,然后自动(通过时间触发器)移动到第三个画板,该动画将从第二个画板的长度到第二个画板的长度进行动画处理。第三画板。 读几次,直到有道理!

    Really all you are doing is defining a step-by-step sequence of events. Once you have this concept down, you can create virtually anything with auto-animate.

    实际上,您要做的只是定义事件的逐步步骤。 一旦有了这个概念,您几乎可以使用自动动画创建任何东西。

    Knowing what we know about auto-animate, we already have the second line’s opacity back at 100%. So all you need to do is wire up another timed animation to the finished artboard we created a while back, and that longer line will animate to that finished length. Done! Here’s what it looks like:

    知道了有关自动动画的知识后,我们已经将第二行的不透明度恢复为100%。 因此,您需要做的就是将另一个定时动画连接到我们不久前创建的成品画板上,并且更长的线将动画化为该成品长度。 做完了! 看起来是这样的:

    Image for post

    Feel free to play around with the different types of easing, and durations for each stage. Toying with these values will help you create interesting effects. Remember though to keep it realistic and not go overboard! Overcomplicating the animation, making it too short or too long, could be irritating to the user.

    随意体验不同类型的宽松政策以及每个阶段的持续时间。 玩弄这些值将有助于您创建有趣的效果。 请记住,尽管要保持现实性,不要过分! 使动画过于复杂,使动画太短或太长,可能会给用户带来不便。

    So keep playing around with what you’ve learned so far, and in my next article we will look into composing multiple animations at the same time to create yet more interesting effects!

    因此,请继续学习到目前为止所学的知识,在我的下一篇文章中,我们将研究同时合成多个动画以创建更有趣的效果!

    翻译自: https://uxdesign.cc/easing-and-timing-animations-in-adobe-xd-b002a0758007

    adobe xd

    展开全文
  • 布尔马义吉 Bulma UI Kit是一个基于bulma.io的入门工具包,与Adobe XD兼容。
  • adobe xd 重点 (Top highlight)So, it seems as though our newest UI design trend for 2020 is going to be Neumorphism, aka Soft UI. What is it? It means using shadows and highlights to make shapes appear...

    adobe xd

    重点 (Top highlight)

    So, it seems as though our newest UI design trend for 2020 is going to be Neumorphism, aka Soft UI. What is it? It means using shadows and highlights to make shapes appear as though they are slightly extruded. It gets it’s name from a term called “skeumorphism.” Skeumorphism is a design style in which the goal is to make something as closely resemble it’s real life counterpart as possible. “Neumorphism” is a play on words, adding the word “new” to the beginning. This design style, I admit is pretty cool. It catches the eye and brings back some almost retro 3D styling to the more modern flat trend. Let me set something straight though: Neumorphism is not a replacement for flat design. Many of us remember the switch between ios6 and ios7. That switch is often used as the prime example between skeumorphic and flat design styles. Neumorphic design, though, proposes a far less drastic shift in design, but rather compliments flat design style. The combinations of these styles looks really nice, and it can really set your designs apart from the hoardes of flat UI’s out there.

    S 0,就好像2020年我们最新的UI设计潮流将是Neumorphism,又名软UI。 它是什么? 这意味着使用阴影和高光使形状看起来好像稍微被挤压了。 它的名字来自“拟态”。 Skeumorphism是一种设计风格,其目的是使某些东西与现实生活中的东西尽可能相似。 “同态”是对单词的一种玩法,将“新”一词添加到开头。 我承认这种设计风格非常酷。 它引起了人们的注意,并将一些几乎复古的3D样式带回了更现代的扁平化趋势。 不过,让我直言不讳:神经同质不能替代平面设计。 我们许多人都记得ios6和ios7之间的切换。 该开关通常用作拟态和平面设计样式之间的主要示例。 不过,Neomorphic设计提出的设计远没有那么剧烈,而是补充了平面设计风格。 这些样式的组合看起来非常好,并且确实可以将您的设计与平面UI的ho杂区分开。

    When I first started playing with this style, I was experimenting in Photoshop, and created the effect using the bevel/emboss layer style. But, as I wanted to start using it in my UI designs, I ran into a problem. How do I create that beveled look in Adobe XD without layer styling options? Turns out, the answer is pretty simple. I’m going to show you how to create a series of different button and border styles that you can replicate into your own designs! So, let’s get started.

    当我第一次开始使用这种风格演奏时, 实验中 在Photoshop中,并使用斜角/浮雕图层样式创建效果。 但是,当我想在UI设计中开始使用它时,我遇到了一个问题。 如何在没有图层样式选项的情况下在Adobe XD中创建斜面外观? 事实证明,答案很简单。 我将向您展示如何创建一系列不同的按钮和边框样式,您可以将它们复制到自己的设计中! 因此,让我们开始吧。

    We will start with a blank document. I just used the standard web page artboard size, 1920x1080, and then colored the background a dark blue (#2B3134).

    我们将从空白文件开始。 我只使用了标准的网页画板尺寸1920x1080,然后将背景颜色涂成深蓝色(#2B3134)。

    Image for post

    Now we want to create our first button. We can create a rectangle by hitting “R” on the keyboard. Just drag one out, and then resize it to 200 pixels wide by 80 pixels tall.

    现在我们要创建第一个按钮。 我们可以通过点击键盘上的“ R”来创建一个矩形。 只需将其拖出,然后将其调整为200像素宽乘80像素高。

    Image for post

    Now, to create our “soft UI” effect, we need the button to look 3D. How do we do that? Well, we simulate lighting. Imagine setting something on a table. Light casted over the table will “hightlight” one side of the object, and cast a “shadow” on the other side. We can replicate this in XD pretty easily. Let’s first make sure our box has a fill color identical to our background. This will make the button appear as if it’s just an extruded part of the background itself, which is what is popular now with the “soft UI” effect. Keep the rectangle selected.

    现在,要创建“软UI”效果,我们需要该按钮以3D外观。 我们该怎么做? 好吧,我们模拟照明。 想象一下在桌上摆放一些东西。 投射在桌子上的光将“突出显示”对象的一侧,而在另一侧投射“阴影”。 我们可以很容易地在XD中复制它。 首先让我们确保盒子的填充颜色与背景相同。 这将使按钮看起来就像只是背景本身的突出部分一样,这就是现在流行的“软UI”效果。 保持选中矩形。

    Now, we will start adding shadows and highlights. To start, let’s add a drop shadow. I used the settings below.

    现在,我们将开始添加阴影和高光。 首先,让我们添加一个阴影。 我使用了以下设置。

    Image for post

    X: 5

    X:5

    Y: 5

    Y:5

    Blur: 11

    模糊:11

    Shadow Opacity: 15%

    阴影不透明度:15%

    You should now have an effect like what you see in the image, just a soft shadow off the bottom right of our rectangle button. Now, to finish the effect we need a highlight opposite of the shadow to make it really appear 3D. To do that, hit CMD+C to copy the button, and then paste the button directly on top of itself with CMD+V. Now, on this second copy, we reverse the shadow to the other side by flipping our X and Y settings for the shadow to the negative like so:

    现在,您应该具有类似于图像中看到的效果,只是矩形按钮右下角的柔和阴影。 现在,要完成效果,我们需要与阴影相对的高光才能使其真正呈现3D。 为此,请按CMD + C复制按钮,然后使用CMD + V将按钮直接粘贴在其顶部。 现在,在第二个副本中,我们将阴影的X和Y设置翻转为负值,从而将阴影反转到另一侧,如下所示:

    Image for post

    X: -5

    X:-5

    Y: -5

    Y:-5

    Blur: 11

    模糊:11

    Shadow Opacity: 15%

    阴影不透明度:15%

    Almost there! But it needs to be a highlight, not a shadow. So let’s change the color of the shadow. I used #717171. This color is just light enough to create the illusion of a highlight without being too bright and looking unnatural. Our button is looking pretty good!

    差不多了! 但这需要成为亮点,而不是阴影。 因此,让我们更改阴影的颜色。 我用#717171。 这种颜色足够浅,足以创建高光的幻觉,而又不会太亮且看起来不自然。 我们的按钮看起来不错!

    Image for post

    However, in my own experiments, I’ve noticed that the effect is less convincing with the sharp corners. So I prefer to add a little bit of a radius. To compare, go in your layer panel and select both rectangles you used to create the button, and group them. Then, copy that group directly below the first button so that we now have 2. On the second button, adjust both rectangles to have a corner radius of 20.

    但是,在我自己的实验中,我注意到该效果对于尖锐的角点不太令人信服。 所以我更喜欢增加一点半径。 为了进行比较,请进入图层面板并选择用于创建按钮的两个矩形,然后将它们分组。 然后,将该组复制到第一个按钮的正下方,这样我们现在有了2。在第二个按钮上,将两个矩形的角半径调整为20。

    Image for post

    In my opinion, this corner radius makes the overall effect much more convincing.

    我认为,该拐角半径使整体效果更具说服力。

    Now, with that technique, you can create whatever shapes you’d like and apple these shadows and highlights to create a “soft UI” effect. There’s one other cool effect we can do here, a border. To do this in XD though, we need to use a slightly different technique.

    现在,使用该技术,您可以创建所需的任何形状,并绘制这些阴影和高光,以创建“软UI”效果。 我们可以在这里做一个很酷的效果,一个边框。 但是,要在XD中执行此操作,我们需要使用稍微不同的技术。

    For the first step, create another rectangle the same size as before, 200x80. This time though, we need to turn off the fill color, and leave a 5px border, coloring the border the same as our background. Set the border to “outside”, and then apply a shadow.

    第一步,创建另一个矩形,大小与以前相同,为200x80。 但是这次,我们需要关闭填充颜色,并保留5px边框,使边框的颜色与背景相同。 将边框设置为“外部”,然后应用阴影。

    Image for post

    Looks pretty good already. The reason behind using an outside border rather than the standard or centered, is because the shadows will overlap one another if we do not use outside. So now that we have our shadow, copy and paste the bordered rectangle again, flip the shadow X and Y, and change the color to our highlight color, #717171.

    看起来已经不错了。 使用外部边框而不是标准边框或居中边框的原因是,如果不使用外部边框,阴影将相互重叠。 现在我们有了阴影,再次复制并粘贴带边框的矩形,翻转阴影X和Y,然后将颜色更改为突出显示颜色#717171。

    Image for post

    And there you have it! Experiment with different shapes and using borders around them to create interesting UI elements. Now, one last button type to show you!

    在那里,您拥有了! 试用不同的形状,并使用它们周围的边框创建有趣的UI元素。 现在,最后一个按钮类型向您显示!

    We can create a nice little round button with a simulated rounded top, rather than the flat raised top we are seeing on the buttons we already created. To get started, create a circle and apply the same “soft UI” effect we’ve been using on the other buttons.

    我们可以创建一个带有模拟圆形顶部的漂亮的小圆形按钮,而不是在已经创建的按钮上看到的平顶顶部。 首先,创建一个圆圈并应用我们在其他按钮上一直使用的相同“软UI”效果。

    Image for post

    Now to create our rounded top, it’s just as simple as applying a linear gradient. So, change the fill of the circle on the top to a linear gradient, and line it up with the direction of our other highlights and shadows.

    现在创建圆形顶部,就像应用线性渐变一样简单。 因此,将顶部的圆填充更改为线性渐变,并将其与其他高光和阴影的方向对齐。

    Image for post

    Now, change the colors of each side of the gradient. For the highlight side, use the color picker, and grab the color from the highlight we applied to the shadow, like I did below:

    现在,更改渐变每一侧的颜色。 对于高光方面,请使用颜色选择器,然后像下面所做的那样从应用于阴影的高光中获取颜色:

    Image for post

    Then, do the same on the shadow side to get the final effect.

    然后,在阴影侧执行相同操作以获得最终效果。

    Image for post

    And that’s how you create a nice “soft UI” effect in Adobe XD with just a few simple steps! A word of caution though, try not to over use this effect in your UI and other designs, because it can really clutter things up. Play around with this effect and learn how to use, it’s getting popular already and clients may want to see it, and it’ll look great in your profile!

    这就是您只需几个简单的步骤即可在Adobe XD中创建漂亮的“软UI”效果的方法! 请注意,不要在您的UI和其他设计中过度使用此效果,因为它确实会使事情变得混乱。 试一试这种效果并学习使用方法,它已经变得越来越流行,客户可能希望看到它,并且在您的个人资料中看起来很棒!

    Image for post

    翻译自: https://uxdesign.cc/create-soft-ui-neumorphism-in-adobe-xd-bc08bb4cb79d

    adobe xd

    展开全文
  • Adobe XD 允许您创建交互式原型,直观地展示如何在屏幕或线框之间导航。您可以预览交互,验证用户体验并对设计进行迭代,从而节省开发时间。您还可以录制交互过程并与利益相关者分享,以获取他们的反馈。放大/缩小并...
  • 对于为网络设计的任何人,Adobe XD都是理想的图形工具。 它允许在一个应用程序中进行设计,原型设计以及与其他人协作。 但是,由于它仍然是一个相当新的应用程序,因此关于如何充分利用它的信息很少。 因此,您...
  • adobe_xd-源码

    2021-02-18 19:00:05
    Adobe XD:用户界面设计(Windows e Mac)Udemy-Leando Rezende 用户体验设计和用户界面设计,以及Adobe的详细信息
  • 在本Adobe XD教程中,您将学习如何使用简历网站模板创建简历网页设计。 您还将学习如何轻松对其元素的各个部分进行动画处理。 您将在此Adobe XD教程中学到什么: 如何在Adobe XD中使用简历网站模板 如何遮罩和...
  • 一个帮助程序库,使Adobe XD CC插件的本地化或国际化更加容易。 用法 包括图书馆 首先,您需要包括该库。 这可以通过两种方式完成: 如果您使用像webpack这样的捆绑程序,以及像npm这样的软件包管理器,则可以简单...
  • Adobe XD和Sketch,谁才是王者?

    千次阅读 2020-05-09 09:28:30
    Adobe XD 和 Sketch,你更看好谁?
  • 7款Adobe XD必备插件

    千次阅读 2021-06-12 17:17:07
    Adobe XD作为一款跨平台的交互制作工具,且随着功能的不断完善,越来越受到交互设计师们的追捧。去年10月份Adobe XD首次支持第三方插件功能,更使Adobe XD成为了包括Sketch在内的一批交互工具强有力的竞争对手。本文...
  • 1、提前准备好Adobe XD软件安装包(没有的看下图) 2、系统必须是Windows 10 64bit 3、保证电脑中有任意一款解压软件 安装步骤 1.找到下载好的安装包,并将其解压到当前位置 2.双击打开解压好的【Xd 2021 安装包】...
  • 数据填充者 该插件的文档已移至 。 保持联系 在上加入对话。 在Twitter上关注以获取更新。 请报告错误,意见,想法和功能要求的或。 有助于 如果您有想法或需要Data Populator的新功能,或者遇到您想克服的限制,请...
  • Todo-后端--- NodeJs-e-MongoDB:Projeto完成了全栈开发,包括Adobe XD,NodeJs,MongoDB,ReactJs和Udemy。 进步党的进步派
  • adobe XD重命名插件

    2021-10-20 10:44:01
    插件是用于重命名画板和图层的工具。它提供了原始名称、宽度、高度和序列号的命名规则。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,508
精华内容 1,003
关键字:

adobexd