First, let’s clarify what exactly is a dropdown menu, and what is a combo box, aren’t they the same? Well … no, not really, let me explain.

首先，讓我們弄清楚什么是下拉菜單，什么是組合框，不是嗎？ 好吧……不，不是，讓我解釋一下。

Technically speaking, a dropdown menu is different from a combo box. A combo box is a combination of a dropdown menu and text input (confined to a set list of values).

從技術上講，下拉菜單與組合框不同。 組合框是下拉菜單和文本輸入(僅限于一組設置的值)的組合。

In other words a combo box is more difficult to prototype because of the dual nature of the control and in this article we will see how we can tackle this problem starting with a simple dropdown menu.

換句話說，由于控件的雙重特性，組合框更難以原型化，在本文中，我們將看到如何從一個簡單的下拉菜單開始解決這個問題。

So, this article has 2 parts, on the first part you will learn how to prototype a simple dropdown menu and in the second part we will expand this control into a combo box.

因此，本文分為兩部分，第一部分將學習如何為簡單的下拉菜單創建原型，第二部分將將該控件擴展為組合框 。

先決條件 (Prerequisites)

To follow along, you’ll need to be a little 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 the latest version from Axure Website.

另外，如果您尚未執行此操作，則可以從Axure網站下載最新版本。

第1部分-下拉菜單 (PART 1 — Dropdown menu)

Dropdowns menus are easy to prototype in Axure, using simple Shape widgets and a Repeater widget for the list of options. To make this control self-contained (without dependencies) we will not use global variables, this will help us to easily reuse the dropdown menu in other projects.

使用簡單的Shape部件和Repeater部件作為選項列表，可以輕松在Axure中創建下拉菜單的原型。 為了使該控件自成一體(沒有依賴項)，我們將不使用全局變量 ，這將幫助我們輕松地在其他項目中重用下拉菜單。

我們將創造什么 (What we will create)

In this part, we will create a simple dropdown menu (a well known input control pattern) used in mobile or desktop UI. There are multiple variations of this type of control (like: pull-down buttons, pop-up menus, droplist and so on) but the principles shown here can be applied to any variation. This type of control allows the user to select an option from a predefined list of options, usually the selected option is then displayed inside the dropdown. If you want to learn more about this control type you can take a look at the Apple HIG pull-down button (a.k.a pop-up menu) here: https://developer.apple.com/design/human-interface-guidelines/macos/buttons/pull-down-buttons/

在這一部分中，我們將創建一個簡單的下拉菜單 (一種眾所周知的輸入控件模式)，該菜單用于移動或桌面UI 。 此類控件有多種變體(例如：下拉按鈕，彈出菜單，下拉列表等)，但是此處顯示的原理可以應用于任何變體。 這種類型的控件允許用戶從預定義的選項列表中選擇一個選項，通常所選的選項隨后會顯示在下拉菜單中。 如果您想了解有關此控件類型的更多信息，可以在這里查看Apple HIG下拉按鈕(又名彈出菜單)： https : //developer.apple.com/design/human-interface-guidelines/ macos /按鈕/下拉按鈕/

分步說明 (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. Building the necessary shapes
   建立必要的形狀
2. Adding interactivity
   增加互動

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

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

在這一步中，我們將為下拉菜單控件創建所有必要的形狀。 要查看形狀和結構的概述，請看下面的圖片。

Basically, we have only one group called “dropdown” and inside we have 2 main groups:

基本上，我們只有一個稱為“ 下拉列表 ”的組，內部有兩個主要組 ：

• “dropdown_selection” group — In this group we have all the necessary elements to form the dropdown selection part

  “ dropdown_selection ”組-在此組中，我們具有構成下拉選擇部分的所有必要元素

• “dropdown_list” group — this group defines the list of options

  “ dropdown_list ”組-該組定義選項列表

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/ 。

Here are more details about each group shapes and properties (these properties can be changed to fit your needs):

以下是有關每個組的形狀和屬性的更多詳細信息(可以更改這些屬性以滿足您的需要)：

The “dropdown_selection” group contains:

“ dropdown_selection ”組包含：

selected_value:

selected_value ：

• Width/Height: 258/26
  寬/高：258/26
• Fill: #FFFFFF
  填寫：#FFFFFF

dropdown_label:

dropdown_label ：

• Text fill: #1A1816, opacity: 60%
  文字填充：＃1A1816，不透明度：60％
• Font size: 12
  字體大小：12

dropdown_bg:

dropdown_bg ：

• Width/Height: 38/38
  寬/高：38/38
• Fill: #FFFFFF
  填寫：#FFFFFF
• Corner: 4
  角球：4
• Shadow: fill: #1A1816, opacity: 20%, x: 0, y: 1, blur: 2
  陰影：填充：＃1A1816，不透明度：20％，x：0，y：1，模糊：2

The “dropdown_selection” group contains:

“ dropdown_selection ”組包含：

dropdown_values_list | option_value:

dropdown_values_list | option_value ：

• Text fill: #1A1816
  文字填充：＃1A1816
• Font size: 16
  字體大小：16

dropdown_list_bg:

dropdown_list_bg ：

• Width/Height: 38/38
  寬/高：38/38
• Fill: #FFFFFF
  填寫：#FFFFFF
• Corner: 4
  角球：4
• Shadow: fill: #1A1816, opacity: 20%, x: 0, y: 1, blur: 2
  陰影：填充：＃1A1816，不透明度：20％，x：0，y：1，模糊：2

An important thing to mention here is how the dropdown_values_list Repeater is set up, on the data section we have only one column Value and the values are: 1,2,3

這里要提到的重要事情是如何設置dropdown_values_list轉發器，在數據部分上，我們只有一列Value ，值分別為：1,2,3

You can learn more about String functions from here: https://docs.axure.com/axure-rp/reference/repeaters/

您可以從此處了解有關String函數的更多信息： https : //docs.axure.com/axure-rp/reference/repeaters/

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

The dropdown menu has 2 interactions added on different groups/elements to make everything work. Here are the details:

下拉菜單在不同的組/元素上添加了2種交互方式，以使一切正常。 詳細信息如下：

The first interaction is added to the dropdown_selection group on the Click or Tap event to Show/Hide the list of values but also to Rotate the dropdown arrow accordingly

第一次交互將添加到Click或Tap事件的dropdown_selection組中，以顯示/隱藏值列表，還相應地旋轉下拉箭頭

1. Action Show/Hide:

   動作顯示/隱藏 ：

• Toggle
  切換
• Target: dropdown_list
  目標：dropdown_list
• Animate Show: slide down, 250ms, ease in out cubic
  動畫顯示：向下滑動250毫秒，向內移動三次
• Animate Hide: slide up, 250 ms, ease in out cubic
  動畫隱藏：向上滑動250毫秒，漸出立方

2. Action Rotate:

2.動作旋轉 ：

• Target: arrow_icon
  目標：arrow_icon
• Rotate: clockwise, by: 180
  旋轉：順時針旋轉：180
• Animate: ease in out cubic, 250ms
  動畫：緩入立方，250ms

Another interaction is added to the dropdown_values_list Repeater on the Item Loaded event to set up the way the option is rendered

在Item Loaded事件上，將另一個交互添加到dropdown_values_list轉發器中，以設置呈現選項的方式

1. Action Set Text:

   動作集文字 ：

• Target: option_value
  目標：option_value
• Set to: text
  設置為：文字

• Value: [[Item.Value]] lbs (this is an expression where Item.Value is the value from the Value column)

  值：[[Item.Value]]磅(這是一個表達式，其中Item.Value是“值”列中的值 )

The last interaction is on the option_value item from the Repeater on the Click or Tap event to respond to the changing of the selection(option)

最后一次交互是在Click或Tap事件中來自Repeater的option_value項目上，以響應選擇(選項)的更改

1. Action Set Text:

   動作集文字 ：

• Target: selected_value
  目標：selected_value
• Set to: text
  設置為：文字

• Value: [[Item.Value]] lbs (this is an expression where Item.Value is the value from the Value column)

  值：[[Item.Value]]磅(這是一個表達式，其中Item.Value是“值”列中的值 )

2. Action Show/Hide: — here we are hiding the list of options

2.動作顯示/隱藏 ：-這里我們隱藏了選項列表

• Hide
  隱藏
• Target: dropdown_list
  目標：dropdown_list

3. Action Rotate: — we rotate back the arrow

3. 旋轉動作：—向后旋轉箭頭

• Target: arrow_icon
  目標：arrow_icon
• Rotate: clockwise, by: 180
  旋轉：順時針旋轉：180
• Animate: ease in out cubic, 250ms
  動畫：緩入立方，250ms

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/上閱讀有關它們的更多信息。

This is it, we now have a simple and functional dropdown menu so let’s move on to combo boxes..

就是這樣，我們現在有了一個簡單實用的下拉菜單，因此讓我們繼續使用組合框。

第2部分-組合框 (PART 2 — Combo box)

Combo boxes are a little more complex to prototype. I’m not going to repeat the same steps from the drop down menu, but we are going to concentrate on the differences.

組合框的原型要復雜一些。 我不會從下拉菜單中重復相同的步驟，但是我們將專注于差異。

One thing to mention before moving on, is that in our case we will use a global variable to temporarily store a selection value, we can avoid doing this by creating a hidden Label widget to hold this temporary value (this option can be explored by you if you want).

在繼續之前要提到的一件事是，在我們的例子中，我們將使用全局變量來臨時存儲選擇值，我們可以通過創建一個隱藏的Label小部件來保存此臨時值來避免這樣做(您可以探索此選項)如果你想)。

我們將創造什么 (What we will create)

In this second part, we will create a simple combo box. There are multiple variations of this type of control but the principles shown here can be applied to any variation. If you want to learn more about this control type you can take a look at the Apple HIG for combo boxes here: https://developer.apple.com/design/human-interface-guidelines/macos/fields-and-labels/combo-boxes/

在第二部分中，我們將創建一個簡單的組合框。 這種控制類型有多種變體，但此處顯示的原理可以應用于任何變體。 如果要了解有關此控件類型的更多信息，可以在此處查看Apple HIG組合框： https : //developer.apple.com/design/human-interface-guidelines/macos/fields-and-labels/組合框/

分步說明 (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. Building the necessary shapes
   建立必要的形狀
2. Adding interactivity
   增加互動

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

The structure for this combo box is similar to the dropdown, so we will concentrate on what is different.

該組合框的結構類似于下拉列表，因此我們將集中于不同之處。

First off, I’ve replaced the “selected_value” Label with an Text Field named “input_value”. We will use this input field to allow the user to input any number (eg: 1,2,3,4,5 and so on), once the user has finish with the input on Lost Focus event we will reformat the render to be displayed as “X lbs”, where the X is the number input.

首先，我用名為“ input_value ”的文本字段替換了“ selected_value ” 標簽 。 我們將使用此輸入字段來允許用戶輸入任何數字(例如：1,2,3,4,5，依此類推)，一旦用戶完成Lost Focus事件的輸入，我們將重新格式化為顯示為“ X lbs”，其中X是輸入的數字。

I’ve also added 2 more shapes:

我還添加了2種形狀：

• dropdown_hotspot — is now used to trigger the the list of values (instead of the dropdown_selection group)

  dropdown_hotspot —現在用于觸發值列表(而不是dropdown_selection組)

• separator_vertical — used to visually separate the input part from the dropdown button

  spacer_vertical-用于從下拉按鈕中直觀地分離輸入部分

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

The first interaction is added to the dropdown_hotspot (which is the same from the dropdown menu dropdown_selection group) on the Click or Tap event to Show/Hide the list of values but also to Rotate the dropdown arrow accordingly.

第一次交互將添加到Click或Tap事件上的dropdown_hotspot (與下拉菜單dropdown_selection組相同)以顯示/隱藏值列表，并相應地旋轉下拉箭頭。

Most of the interactivity is happening on the input_value Text Field we will respond to the Got Focus/Lost Focus events and optionally to the Loaded event.

大多數交互發生在input_value文本字段上，我們將響應“ 獲得焦點” /“失去焦點”事件，并可選地響應“ 已加載”事件。

Let’s see what is happening, we have some actions on the Got Focus/Lost Focus events to handle the user input, so while the input_value Got Focus we will clear the existing value (this is the reason why we need the input_valuer_var to simply hold the current value) and wait for user input, now the tricky part is on the Lost Focus event, here we need to check if the user has typed a new value or he simply exit without any change and to properly handle this in Axure we make use of Cases/Conditions.You can learn more about Conditional Logic on Axure website https://docs.axure.com/axure-rp/reference/conditional-logic/

讓我們看看發生了什么，我們對Got Focus / Lost Focus事件采取了一些措施來處理用戶輸入，因此，在input_value Got Focus時，我們將清除現有值(這就是為什么我們需要input_valuer_var來簡單保存輸入值的原因。當前值)并等待用戶輸入，現在棘手的部分是Lost Focus事件，在這里我們需要檢查用戶是否鍵入了新值，或者他只是直接退出而沒有任何更改，并在Axure中正確處理此問題例/條件 。您可以了解更多有關條件邏輯上Axure網站https://docs.axure.com/axure-rp/reference/conditional-logic/

Below are the action details for each event (FYI: the current widget is input_value).

以下是每個事件的操作詳細信息(僅供參考：當前小部件為input_value )。

Event: Loaded — this is optional and is used to initialize with the global variable value

事件： 已加載 -這是可選的，用于使用全局變量值進行初始化

1. Action Set Text: — here we are clearing the text from the input_value widget

   操作集文本 ：—在這里，我們從input_value小部件中清除文本

• Target: This
  對象：這個
• Set To: value of variable
  設置為：變量值
• Value: input_value_var
  值：input_value_var

Event: Got Focus

事件： 獲得關注

1. Action Set Variable Value: — we are storing the current value to the global variable

   動作集變量值 ：—我們將當前值存儲到全局變量

• Target: input_value_var
  目標：input_value_var
• Set to: text on widget
  設置為：小部件上的文本
• Widget: This
  窗口小部件：此

2. Action Set Text: — here we are clearing the text from the input_value widget

2.操作集文本 ：—在這里，我們從input_value小部件中清除文本

• Target: This
  對象：這個
• Set To: text
  設置為：文本
• Value:
  值：

Event: Lost Focus

事件： 失去焦點

Case: NoChange | Condition: If text on This equals “”

案例：NoChange | 條件： 如果 “此”上的文字等于“”

1. Action Set Text: — here we are clearing the text from the input_value widget

   操作集文本 ：—在這里，我們從input_value小部件中清除文本

• Target: This
  對象：這個
• Set To: value of variable
  設置為：變量值
• Value: input_value_var
  值：input_value_var

Case: NewText | Condition: Else If text on This not equals “”

案例：NewTex t | 條件： 否則如果 “此不等于”上的文字

1. Action Set Text: — here we are clearing the text from the input_value widget

   操作集文本 ：—在這里，我們從input_value小部件中清除文本

• Target: This
  對象：這個
• Set To: value of variable
  設置為：變量值
• Value: [[This.text.trim()]] lbs
  值：[[This.text.trim()]]磅

2. Action Set Variable Value:

2.操作集變量值 ：

• Target: input_value_var
  目標：input_value_var
• Set to: text on widget
  設置為：小部件上的文本
• Widget: This
  窗口小部件：此

The last interaction is on the option_value item from the Repeater on the Click or Tap event to respond to the changing of the selection(option) which is the same as on the dropdown menu.

最后一次交互是在Click或Tap事件上的Repeater的option_value項上，以響應對選擇(選項)的更改，該更改與下拉菜單上的相同。

Yee! That’s it!

!！ 而已！

Creating a dropdown menu is easy in Axure but the combo box can be a little challenging. I hope this article helped you to easily tackle dropdown menus and combo boxes.

在Axure中創建下拉菜單很容易，但是組合框可能會有些挑戰。 我希望本文能幫助您輕松解決下拉菜單和組合框。

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

您也可以從此處下載Axure文件： https ://hi.switchy.io/1j2y