Kumi

UIUX Designer

Kumi

UIUX Designer
  • 固定された記事

ProtoPie Tips

# はじめに- About ProtoPie Tips # ProtoPie Tips の対象読者- ProtoPie でなんとなく動く画面（紙芝居）が作れる方 - プロトタイピングスキルを上げたい方 - ユーザーテスト用に動的なプロトタイプを作りたい方 - Figma などUI作成ツールが使える方 ある程度 ProtoPie の操作に慣れている方を対象にしています。 # Foundation- はじめてのProtoPie - ProtoPie の変数 - 変数の中身を

Kumi

    • Alert Dialog

      OSのSystem Dialogなど、PopUpでDialogを表示するシーンはプロトタイプを作るときに良く登場します。 変数を使わない簡単な設定で実装できますので、覚えておきましょう。 用意する要素Dialog 表示のTriggerとなるUI 画面をカバーするフルスクリーンのOverlay DialogのUI 実装方法↑ Dialogをコンテンツの上に表示したいので、レイヤー構成は、overlayとalert dialogが最上位に来るようにします。 また、各要素の

      Kumi

      • Scroll Container

        Scroll Containerの作り方 Protopie でスクロールを実装するときは「Scroll Container」を使用します。 ↑ Scroll Container を選択し、スクロールさせたいエリア(可動域)を作成します。 ↑ スクロールさせたいエリアを作成したら、コンテナの下階層にスクロールさせたいコンテンツを入れます。 ↑ Scroll Container を選択し、右ナビゲーションで詳細設定をします。 意図した挙動にするため、横スクロール、または縦ス

        Kumi

        • ステータス管理 - 実装編

          前回の記事でステータス管理についてどんなものか簡単にご説明しました。 説明を読んで直感的に理解できない部分もあると思いますので、今回は実際に簡単なステータス管理を実装して理解します。 実装するもの ユーザーが選択したボタンの番号によって、次の画面で番号の英表記を表示するプロトタイプ 1. 2つのシーンを用意する お好きなデバイスサイズでシーンを2つ用意します。 1つは、ユーザーが選択するボタンを配置します。 2つ目にはユーザーが選択したボタンに対する結果を表示します。

          Kumi
        • 固定された記事

        ProtoPie Tips

        Kumi

        マガジン

        • Protopie Tips
          9本

        記事

          はじめてのProtoPie

          ProtoPieを使って簡単なプロトタイプを作りましょう。 まずは、ボタンを押すことで画面遷移していくプロトタイプを作ってProtoPieに慣れましょう。 今回はFigmaで作成した画面を使ってプロトタイプを作成します。 FigmaのプラグインをインストールProtoPieにはFigmaから直接ProtoPieに画面を読み込めるプラグインがありますので、事前にインストールしておきましょう。 ProtoPie｜Figmaからのインポート ProtoPieで新規Pieを作

          Kumi

          はじめてのProtoPie

          Kumi

          ステータス管理

          動的プロトタイプを作るとき、ステータス管理という手法を用いるとより複雑な条件分岐を管理できるようになります。 今回は簡単な例を用いて説明していきます。 ステータス管理とは？プロトタイプを実際に操作するユーザーの操作状態を管理することを指します。 ユーザーの操作状態は、例えば以下のようなものがあります。 ・ユーザーが選択したもの（項目など） ・ユーザーアクション（タップした/しない など） ・操作回数（初回操作・2回目以降の操作 など） ・ユーザーの操作によるレスポンス

          Kumi

          ステータス管理

          Kumi

          変数の中身を表示する

          ProtoPieの変数について少しでも良いので理解できたら、実際に変数を使って変数の中身を表示してみましょう。 今回は変数のテキスト型を使って、画面に文字列を表示させます。 1. 変数の中身を表示するテキストを用意する 画面にテキストボックスを配置します。 ここで表示されているテキストは変数の中身に置き換わるので、空欄でも構いません。 2. 変数を定義する 左側のレイヤーパネル下の変数エリアの「＋」ボタンから、スコープを選び変数を作成します。今回は 1 画面でしか使

          Kumi

          変数の中身を表示する

          Kumi

          ProtoPieの変数

          ProtoPieである程度動的なプロトタイプを作る時、変数の理解が必要になってきます。 ProtoPieの変数は難しいものではないので、使えるようにしておきましょう。 変数とは？変数とは名前を付けて値を保存しておけるものです。 変数に保存した値は、時間経過や画面タップなどのトリガーに応じてインタラクティブに書き換えることが可能です。 ProtoPieの変数は初心者でも扱い易くなっていますので、複雑に考えなくて大丈夫です。 変数の種類 ProtoPie の変数では、以下

          Kumi

          ProtoPieの変数

          Kumi

          About ProtoPie Tips

          ProtoPie Tips は社内のUIUXデザイナーのプロトタイピングスキル向上に繋がれば良いなという思いから、ノウハウ共有を目的として始めました。 noteに公開することで、他の誰かのお役にたてれば嬉しいです。 Special Thanks to Gina!! Thank you for introducing me to ProtoPie.

          Kumi

          About ProtoPie Tips

          Kumi