Segmented controls are not very easy to tackle in prototyping. This is especially true when you have more than 2 segments. This article will show you how to create a segmented control with 3 segments in Axure in just 2 simple steps. The technique can be applied for any number of segments.

在原型设计中，分段控件并不是很容易解决。 当您具有两个以上的细分时，尤其如此。 本文将向您展示如何通过两个简单的步骤在Axure中创建具有3个细分的细分控件。 该技术可以应用于任何数量的段。

Ready? Let’s begin!

准备？ 让我们开始！

先决条件 (Prerequisites)

To follow along, you’ll need to be a little bit familiar with Axure and have some understanding about widgets, interactions, local variables and expressions.

要继续学习，您需要对Axure有所了解，并对小部件，交互，局部变量和表达式有所了解。

Also, if you haven’t done it yet, you can download Axure latest version from Axure Website.

另外，如果您尚未执行此操作，则可以从Axure网站下载最新版本。

您将创造什么 (What you will create)

You will create a segmented control (a very well known input control pattern) used in mobile or desktop UI. This type of control allows the user to switch to a specific option within a group. If you want to learn more about this control type you can take a look at the Apple HIG here: https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/

您将创建在移动或桌面UI中使用的分段控件 (一种众所周知的输入控件模式)。 这种控制类型允许用户切换到组中的特定选项。 如果您想了解有关此控件类型的更多信息，可以在这里查看Apple HIG： https ： //developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/

To make everything work(on the interaction part), we will use a little bit of logic to respond to the Click or Tap event in order to change the selected option (but we will not gonna use global variables for this, instead we will take advantage of local variables).

为了使一切正常工作(在交互部分)，我们将使用一点逻辑来响应Click或Tap事件，以更改选定的选项(但我们不会为此使用全局变量，而是将局部变量的优势)。

The reason for not using a global variable to handle the selected state is because we want this component to be self contained (without dependencies) to be easily reused across projects.

不使用全局变量来处理选定状态的原因是因为我们希望该组件是自包含的(没有依赖项)，以便可以在项目中轻松重用。

分步说明 (Step by step instructions)

The level of difficulty is easy to medium. Everything was broken into 2 steps so you can follow along more easily.

难易程度中等。 一切都分为2个步骤，因此您可以更轻松地进行后续操作。

步骤1 —建立必要的形状 (Step 1 — Building the necessary shapes)

In this step we are going to create all the necessary shapes for our segmented control. To see an overview of the shapes and structure take a look at the image below.

在这一步中，我们将为分段控件创建所有必要的形状。 要查看形状和结构的概述，请看下面的图片。

Basically, we have only one group called “Segmented Control” and inside we have:

基本上，我们只有一个称为“分段控制”的组，内部有：

• “Options” group — In this group there are all the options for this control, these are named with the “+” prefix to indicate that will hold the interaction (in the next step)
  “选项”组-该组中有此控件的所有选项，这些选项都以“ +”前缀命名，以表示将保持交互(在下一步中)
• “Selector” — this shape indicates the current selection
  “选择器”-此形状表示当前选择
• 2 separator shapes (Separator 1, Separator 2) to separate the segments
  2种分隔符形状(分隔符1，分隔符2)用于分隔段
• “Options background” — this is the gray background that makes the control to feel like one shape
  “选项背景”-这是使控件感觉像一个形状的灰色背景
• “Control background” — out control background for the component (can be optional)
  “控制背景”-组件的控制背景(可以是可选的)

If you don’t have too much experience with Axure shape widgets then you can read more about them here: https://docs.axure.com/axure-rp/reference/shapes/.

如果您对Axure形状小部件没有太多经验，则可以在这里阅读有关它们的更多信息： https : //docs.axure.com/axure-rp/reference/shapes/ 。

The “Options” group is actually made of Label Widgets and the way they are laid out is to overlap a little bit the boundaries of the separator shapes. These boundaries are set up in such a way that can be used to determine the left and right limit for each segment.

“选项”组实际上是由标签小部件组成的 ，它们的布局方式是使分隔符形状的边界重叠一点。 这些边界的设置方式可用于确定每个线段的左边界和右边界。

Also, notice that the “Selector” sits under the “Options” group and it has a wider length.

另外，请注意，“选择器”位于“选项”组下，并且长度更大。

See all shapes properties below.

请参阅下面的所有形状属性。

Shape properties (of course you can adjust these properties to fit your needs):

形状属性(当然，您可以调整这些属性以适合您的需求)：

Options (+Option 1/+Option 2/+Option 3):

选项 (+选项1 / +选项2 / +选项3)：

• Width/Height: 115/28
  宽度/高度：115/28
• Fill: none
  填写：无
• Shadow: fill: #000000, opacity: 15%, x: 0, y: 3, blur: 8
  阴影：填充：＃000000，不透明度：15％，x：0，y：3，模糊：8

Selector:

选择器 ：

• Width/Height: 117/28
  宽/高：117/28
• Fill: #FFFFFF
  填写：#FFFFFF
• Border: 1, fill: #000000, opacity: 4%
  边框：1，填充：＃000000，不透明度：4％
• Corner: 7
  角球：7
• Shadow: fill: #000000, opacity: 12%, x: 0, y: 3, blur: 8
  阴影：填充：＃000000，不透明度：12％，x：0，y：3，模糊：8

Separator (Separator 1/Separator 2):

分隔符 (分隔符1 /分隔符2) ：

• Width/Height: 1/16
  宽度/高度：1/16
• Fill: #8E8E93
  填充：＃8E8E93

Options background:

选项背景 ：

• Width/Height: 343/32
  宽度/高度：343/32
• Fill: #767680, Opacity: 12%
  填充：＃767680，不透明度：12％
• Corner: 9
  角球：9

Control background:

控制背景 ：

• Width/Height: 375/44
  宽/高：375/44
• Fill: #ffffff
  填写：#ffffff

第2步-添加互动 (Step 2 — Adding interactivity)

The only interaction that you are going to add is on the +Option(1/2/3) widgets on the Click or Tap event. Basically, what you need is to move the “Selector” shape on the horizontal axis to the left bound of the widget that triggered the event.

您要添加的唯一交互是在Click或Tap事件上的+ Option(1/2/3)小部件上。 基本上，您需要将水平轴上的“选择器”形状移动到触发事件的小部件的左边界。

You are going to add this interaction only on one of the +Option widgets (in this case +Option 1) and using the copy/paste function replicate this interaction on the rest of the widgets +Option 2, +Option 3.

您将仅在其中一个+ Option小部件(在本例中为+ Option 1 )上添加此交互，并使用复制/粘贴功能在其余小部件+ Option 2 +3中复制此交互。

As you can see it is really easy to add the interaction to new segments all you need is to copy/paste the existing one.

如您所见，将交互添加到新段中确实很容易，您所需要的只是复制/粘贴现有​​段。

To achieve the required interaction (basically to move the “Selector” widget to the appropriate position) you will use some expressions inside one action with the following settings:

为了实现所需的交互(基本上是将“选择器”小部件移动到适当的位置)，您将在具有以下设置的一个动作内使用一些表达式 ：

1. Action Move:

   动作动作 ：

• Target: Selector
  目标：选择器
• Move: to
  搬去

• Move X = [[LVAR1.x]] — this expression give us the new X position

  移动X = [[LVAR1.x]]-此表达式为我们提供了新的X位置

• Move Y = [[LVAR1.y]] — here we use the local variable y position to maintain the “Selector” at the same Y position
  移动Y = [[LVAR1.y]]-在这里，我们使用局部变量y位置将“选择器”保持在相同的Y位置
• Animate: ease with cubic, 200ms
  动画效果：立体感轻松200ms

LVAR1 is a local variable and it represents the current widget that triggered the event, in Axure is referred as This widget.

LVAR1是一个局部变量，它代表触发事件的当前窗口小部件，在Axure中称为此窗口小部件。

If you are not really familiar with events, actions, cases you can read more about them on the Axure website https://docs.axure.com/axure-rp/reference/events-cases-actions/.

如果您不太熟悉事件，操作和案例，则可以在Axure网站https://docs.axure.com/axure-rp/reference/events-cases-actions/上阅读有关它们的更多信息。

All right now that you have the interaction completed all you need is to copy/paste on the rest of the +Option widgets and that is it.

现在，您已经完成了交互，您需要复制/粘贴其余的+ Option小部件，仅此而已。

Creating a segmented control is relatively easy in Axure if you have the appropriate document structure. Now, you can use your new segmented control in future projects.

如果您具有适当的文档结构，则在Axure中创建分段控件相对容易。 现在，您可以在以后的项目中使用新的分段控件。

You can also download the Axure file from here: https://hi.switchy.io/1SLZ

您也可以从此处下载Axure文件： https ://hi.switchy.io/1SLZ