专栏名称: AT阿宝哥
15年IT互联网从业经验,专注产品方案,人才...
目录
相关文章推荐
新闻君  ·  海口“三港”因雾停航,预计复航时间→ ·  12 小时前  
新闻君  ·  海口“三港”因雾停航,预计复航时间→ ·  12 小时前  
湛江日报  ·  大雾停航预警! ·  昨天  
FM1007福建交通广播  ·  韩国生育率9年来首次同比回升 ·  2 天前  
环球网  ·  韩方就对华关系最新表态 ·  2 天前  
环球网  ·  韩方就对华关系最新表态 ·  2 天前  
51好读  ›  专栏  ›  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: 将多个图形统一成一条路径







请到「今天看啥」查看全文