今天看啥  ›  专栏  ›  AT阿宝哥

《Axure官方文档译读》之0317:Shape Widgets(图形部件)

AT阿宝哥  · 简书  ·  · 2020-01-14 22:38
Axure RP

Shape Widgets

图形部件

Box 1 widget
Ellipse widget
Placeholder widget
Button widget
Heading 1 widget
Label widget
Paragraph widget
Sticky 1 widget

1、Creating Shapes

创建图形

1.1、Drag from the Libraries Pane

从库窗格拖放

Axure RP comes with a wide variety of ready-to-use shapes that you can access in the Libraries pane. To add one to your design, drag it from the pane and drop it onto the canvas.

Axure RP提供了各种现成的形状,您可以在“ Libraries ”窗格中访问它们。要将它添加到设计中,请从窗格中拖动它并将其拖放到画布上。

1.2、The Insert Menu

插入菜单

The Insert menu at the top-left of the interface contains a number of additional shapes you can add to your designs. Select a shape and click-and-drag on the canvas to draw it. You can constrain its dimensions by holding SHIFT as you drag.

界面左上角的“插入”菜单包含许多可以添加到设计中的附加形状。选择一个形状,在画布上点击并拖动来绘制它。你可以按住 SHIFT 来限制它的尺寸。

The most commonly used shapes can also be drawn using the following single-key shortcuts:
最常用的图形也可以使用以下单键快捷键绘制:

  • R ectangles
    矩形

  • O vals
    椭圆

  • L ines
    线

  • T ext (paragraph widgets)
    文本(段落部件)

  • P en tool for freehand drawing
    用于手工绘图的钢笔工具

shapes-insert-menu

1.3、The Pen Tool

钢笔工具

using the pen tool to draw a curved line

You can draw your own vector shapes using the pen tool, available in the Insert menu or by pressing <kbd>P</kbd>. The pen tool works similarly to its equivalent in other vector drawing applications:

您可以使用钢笔工具绘制自己的矢量形状,可以在 Insert 菜单中找到,或者按下 P 。钢笔工具的工作原理类似于它在其他矢量绘图应用:

  • Click the canvas to add a new vector point
    单击画布以添加一个新的向量点

  • Click-and-drag to add a curved point
    点击-拖动添加一个弯曲点

  • Hold SHIFT while dragging to auto align the curve handles to the X or Y axis
    按住 SHIFT ,拖动可使曲线手柄自动对齐到X或Y轴

  • Hold ALT while dragging to move the drag handles independently of one another
    按住 ALT ,拖动可以独立移动拖动手柄

  • Click the first point to close the path, or double-click the canvas to create an open path
    单击第一个点关闭路径,或者双击画布创建一个打开的路径

1.4、Convert SVGs to Shapes

将svg转换为形状

You can edit SVG assets you've imported into Axure RP by right-clicking and selecting Convert SVG to Shapes . This will replace the SVG image with one or more shape widgets, which you can then edit just as you would any other shape widget.

您可以通过右键单击并选择 将SVG转换为形状 来编辑已经导入Axure RP中的SVG资产。这将用一个或多个形状小部件替换SVG图像,然后可以像编辑其他形状小部件一样编辑这些小部件。

1.5、Import from Sketch

从Sketch导入

You can copy assets directly from Sketch and paste them into Axure RP as shape widgets.
您可以直接从Sketch中复制资产,并将它们作为形状小部件粘贴到Axure RP中。

  1. Download and install the Axure plugin for Sketch.
    下载并安装用于Sketch的Axure插件。

  2. In Sketch, select the elements you want to copy and go to Plugins → Axure → Copy Selection . (Alternatively, you can copy all assets with the Copy All Artboards option.)
    在Sketch中,选择你想要复制的元素,然后进入 Plugins→Axure→copy Selection 。(或者,您可以使用** copy all Artboards**选项复制所有资产。)

  3. In Axure RP, use Edit → Paste or right-click the canvas to paste the Sketch elements into the project.
    在Axure RP中,使用 Edit→Paste 或右键单击画布将草图元素粘贴到项目中。

2、Adding and Editing Text

添加和编辑文本

You can add text to a shape widget or edit its current text via any of the options below:
您可以添加文本到形状小部件或编辑其当前文本通过以下任何选项:

  • Double-click the shape to enter text-editing mode
    双击形状以进入文本编辑模式

  • Select the shape and press ENTER to enter text-editing mode
    选择形状并按 ENTER 进入文本编辑模式

  • Right-click the shape and select Edit Text in the context menu
    右键单击形状并在上下文菜单中选择 Edit Text

  • Select the shape and begin typing. (This option is only available if you have disabled the single-key shortcuts)
    选择形状并开始键入。(此选项仅在您禁用单键快捷方式时可用)

You can also automatically fill a shape widget with placeholder text by right-clicking it and selecting Fill with Lorem Ipsum .
您还可以通过右键单击形状小部件并选择** fill with Lorem Ipsum**来自动用占位符文本填充形状小部件。

3、Image Fills

图片填充

shapes-image-fills

In addition to the other style options available in the Style pane, shape widgets can also be given background images. To give a shape a background image, select it and use the Image button under Fill in the Style pane.

除了** style 窗格中提供的其他样式选项外,还可以为形状小部件提供背景图像。要给背景图像一个形状,选择它并使用 Style 窗格中 Fill 下的 image **按钮。

4、Editing Shapes

编辑图形

4.1、Change Shapes

改变图形

To change a shape widget to a different shape, right-click and select Select Shape in the context menu. This will bring up a list of Axure RP's preconfigured shapes that you can choose from.

要将形状小部件更改为不同的形状,右键单击并在上下文菜单中选择** select shape **。这将显示一个Axure RP的预配置形状列表,您可以从中进行选择。

You can change any shape widget in this fashion. Doing this instead of creating a new shape widget when you want to change shapes preserves all of the widget's notes and interactions.

您可以以这种方式更改任何形状小部件。当您想要更改形状时,这样做可以保存小部件的所有记录和交互,而不是创建一个新的形状小部件。

4.2、Edit Vector Points

编辑向量点

After you've created a shape, you can tweak it further by editing its vector points. To get started, select the widget and double-click its border or right-click and select Edit Points in the context menu.

创建形状之后,可以通过编辑它的向量点进一步调整它。首先,选择小部件并双击其边框或右键单击,然后在上下文菜单中选择 Edit Points

Drag a vector point to move it. To add a new point, click a blank spot on the border. To delete a point, select it and press DELETE or right-click and select Delete in the context menu.

拖动一个向量点来移动它。若要添加新点,请单击边框上的空白点。要删除一个点,选择它并按** delete 或右键单击并在上下文菜单中选择 delete **。

To toggle a point between curved and sharp, double-click it or right-click and select Curve or Sharpen in the context menu. You can also curve or sharpen all points at once by right-clicking the widget and selecting either option under Transform Shape .

要在曲线和锐化之间切换一个点,双击它或右击,然后在上下文菜单中选择 曲线 锐化 。您还可以通过右键单击小部件并在 Transform Shape 下选择任意一个选项来一次弯曲或锐化所有点。

editing a shape's vector points

4.3、Shape Transformations

图形变换

You can apply a number of transformations to one or more selected shape widgets. Right-click your selection and go to Transform Shape to access these options.
您可以将许多转换应用于一个或多个选定的形状小部件。右击您的选择,并前往 转换形状 访问这些选项。

Flip Horizontal/Vertical: Flips the shape across the the y-axis (horizontally) or the x-axis (vertically)
翻转水平/垂直方向: 翻转形状横轴(水平方向)或横轴(垂直方向)

Unite: Unites multiple shapes into a single path
Unite: 将多个图形统一成一条路径

unite transformation

Subtract: Subtracts one or more shapes from another. The front shapes will be subtracted from the backmost shape, based on their z-index (stack order) as indicated in the Outline pane
从另一个图形中减去一个或多个图形。前面的形状将从最后面的形状中减去,根据它们在 Outline**窗格中显示的z索引(堆栈顺序)

subtract transformation

Intersect: Preserves only the intersecting portions of two or more shapes
Intersect: 只保留两个或多个形状的相交部分

intersect transformation

Exclude: Joins two or more shapes together, excluding any overlapping segments. The overlapping area is eliminated, and the remaining sections of each shape are preserved in one shape that could potentially have multiple paths
排除: 将两个或多个形状连接在一起,不包括任何重叠段。重叠区域被消除,每个形状的其余部分保留在一个形状中,这个形状可能有多个路径

exclude transformation

Combine: Combines two or more shapes into a single shape and preserves each original path (as opposed to Unite)
组合: 将两个或多个形状组合成一个形状,并保留每个原始路径(与Unite相反)

Break Apart: Breaks previously combined shapes into separate shapes
拆分: 将之前组合的形状拆分为单独的形状

Curve/Sharpen All Points: Curves or sharpens all vector points in the selected shape(s)
曲线/锐化所有点:**曲线或锐化所有选定形状中的向量点

5、Convert to Image

转换为图片

If you want to swap out a placeholder or other shape for a real image, you can convert your shape widget to an image widget while preserving all its notes and interactions. Just right-click the shape widget and select Convert to Image in the context menu.

如果您想将占位符或其他形状替换为真实的图像,您可以将您的形状小部件转换为图像小部件,同时保留其所有注释和交互。只需右键单击形状小部件并在上下文菜单中选择 转换为图像

6、Reference Pages

引用页面

If a widget has a reference page, it means the text on the widget is the page's name, the widget’s text is updated when the page is renamed, and clicking the widget in the HTML output links to the referenced page.

如果小部件有一个引用页面,这意味着小部件上的文本是页面的名称,小部件的文本在页面重命名时更新,并在HTML输出链接中单击小部件以链接到引用的页面。

selecting a reference page for a shape widget

To assign a reference page to a shape widget, click Reference Page in the Interaction pane's More Properties menu.

要将参考页面分配给形状小部件,请单击 Interaction 窗格中的 More Properties 菜单中的** reference page **。

7、Selection Groups

选项组

You can create a relationship between a group of shape, line, image, and/or dynamic panel widgets in which only one widget at a time can be set to its selected state with the Set Selected/Checked action. (This is similar to the relationship between radio buttons in a radio group.)

您可以在一组形状、线条、图像和/或动态面板小部件之间创建关系,其中一次只能使用** set selected /Checked**操作将一个小部件设置为其选定状态。(这类似于单选组中的单选按钮之间的关系。)




原文地址:访问原文地址
快照地址: 访问文章快照