Prototype an Input Stepper with ProtoPie's Formula Feature

導入

入力ステッパー（Steppers）は、ユーザーが数値を段階的に増減しやすくする一般的なデザイン要素です。数値の変動幅が小さい入力欄で使うと特に効果的です。音声やジェスチャーなど、他のさまざまなインターフェースでも使われますが、この記事ではグラフィカルユーザーインターフェース（GUI）向けの標準的なステッパーの種類を扱います。

ProtoPieでは、追加の手間なく数値に対して直接数式を使えるため、ステッパーのインタラクションを簡単にプロトタイプ化できます。例として、ここで紹介するのは2種類の数式バリエーションのうちの1つです: number(Layer Name.text)+1

このレッスンで学ぶこと

このレッスンでは、次の内容を実装します:

1. テキストレイヤーに「Make Editable」を適用する

2. 数値を増やす数式（ + ）

3. 数値を減らす数式（ - ）

4. 例外ケース用の条件分岐

このチュートリアルが終わるころには、これが作れるようになります！

[開始用 Pie ファイル] [完成版 Pie ファイル]

手順の詳細

1. テキストレイヤーに「Make Editable」を適用する

1. 画面右側のプロパティパネルでテキストレイヤー（Number）を選択し、Make Editableをクリックします。

💡 別のデザインツール（例：Figma、Adobe XD、Sketch）からレイヤーを読み込むと、すべてのレイヤーはオブジェクトとしてインポートされます。ProtoPie内でそれらを編集するには、オブジェクトを編集可能なレイヤーに変換する必要があります（つまり、読み込まれたテキストオブジェクトを編集可能なテキストレイヤーに変えるということです）。

「Number」レイヤーを選択し、「Make Editable」機能を使って編集可能にしている様子を示すGIF。

2. 数値を増やす数式（ + ）

1. +グループにTapトリガーを追加し、このTapトリガーに対してNumberレイヤーからのTextレスポンスを追加します。

「+」ボタングループの新しいTapトリガーの一部として、「Number」レイヤーからの[Text]レスポンスを示すGIF。

　2. 新しいTextレスポンスでは、コンテンツセクションでTextの代わりにFormulaに変更します。

[Text]レスポンスのコンテンツが[text]から[formula]に変わる様子を示すGIF。

　3. fxボタンをクリックします。すると数式バーが表示され、次の内容を入力できるようになります: number('Number'.text)+1 これは内部の変換関数で、ProtoPieにNumberのテキストを数値として読み取らせます。これにより、ProtoPieはテキストに対して直接計算を実行できます。

数式バーにnumber('Number'.text)+1の数式を入力する方法を示すGIF

ここでプロトタイプを試してみましょう。+ボタンをタップするたびに数値が1ずつ増え、-ボタンはまだ無効なままのはずです。ここまでで学んだことを使って、-ボタンのインタラクションを有効にします。

3. 数値を減らす数式（ - ）

1. 前のセクションの最初の手順と同様に、'-'グループに[Tap]トリガーを作成し、'Number'レイヤーからの[Text]、[formula]レスポンスを設定します。

「-」グループ向けに、同様の[Tap]トリガーと[Text]レスポンスの設定を示すGIF。

　2. -ボタングループがタップされるたびに数値を減らしたいので、今回使う数式は次のとおりです: number('Number'.text)-1

元の数式に-1を加えて、減少するインタラクションをプロトタイプ化している様子を示すGIF。

ここでプロトタイプを試してみましょう。+ボタンと-ボタンの両方で、それぞれ数値を増減できるはずです。また、ステッパーが負の値まで進んでしまうことにも気づくでしょう。条件分岐を使えば、ユーザーが負の値を入力するのを防げます。

4. 例外ケース用の条件分岐

ProtoPieのconditionals機能は、負の数のような例外ケースを防ぐ方法をテストするのに役立ちます。条件分岐は優先度の高い項目として認識され、ProtoPieは他のレスポンスを実行する前にそれをチェックします。

この場合、ユーザーがテキストが0のときに-ボタングループをクリックすると、割り当てた元の減少用数式はスキップされ、0の条件に応答するアクションが実行されます。

1. Tapトリガーの-グループに、Numberレイヤーへ次のconditionを追加します: Text of 'Number' = 0

2. このconditionの下に、NumberレイヤーからのTextレスポンスを追加します。レスポンス内容はTextに設定し、0を入力します。

「0」の値の条件を設定している様子を示すGIF。'Number'レイヤーは[Text]を0に設定して応答します。

Numberのテキスト値が0に達すると、プロトタイプはそれ以上減少しません。

これで完了です！

編集可能な数量を使ったEC商品のチェックアウトにこのステッパーのインタラクションを適用する例を見てみませんか？ 詳しくはコンポーネントを使ってショッピングカート内の支払総額を計算するをご覧ください。

このユースケースチュートリアルは役に立ちましたか？教育コンテンツの改善に役立てるため、1分アンケートにぜひご参加ください。