アトミックでHi-Fidelityプロトタイプを作る

Sep 14, 2025

操作方法

静的モックアップやフラットファイル描画ツール内でアイデアを開発しようとするのは簡単ですが、 プロトタイプ 千の会議の価値があります。インタラクティブな方法であなたのアイデアを探索するよりも少ないものに落ち着くのはなぜですか？

多分あなたは移行がどのように振る舞うことができるかについてのアイデアを持っています、しかしあなたはそれがユーザーに正しいと感じるかどうかは確かではありません。すばやくトランジションをプロトタイピングし、それと対話すると、最終製品が現実の世界でどのように機能するかについてのはるかに現実的な経験を与えます。

私たちはツールがデザインスペースにプロトタイピングをもたらすことを見ましたが、それほど好きなものはありません。原子。現在、外観のように見え、本物のような振る舞いをする完全に対話型のHi-Fidelityプロトタイプを構築する方法があります。

アトミックのプロトタイピングは非常に速いです。あなたはあなたのモバイルデバイス上で直接プロトタイプでプレビューすること、またはフィードバックのためにチームメイトと共有することができるでしょう。私たちはまたあなたが始める必要があるすべての資産を事前に作ったので、物事をインポートする必要はありません（あなたはスケッチからインポートすることができます Photoshop CC も。

このチュートリアルでは、原子力で作成した天気アプリの中の単純なスワイプトランジションを探ります。クラフト遷移のための簡単なステップを歩きます、そしてあなたが挑戦を必要とするならば、私はあなたが探検するためのいくつかの高度なプロトタイピング機能をカバーするでしょう。

01.サインアップ

始めましょう！あなたがまだアカウントを持っていない場合は、Google Chromeを開く、訪問アトミックそして無料の試用版にサインアップしてください。これは30日間続き、それはあなたが原爆を探索し、あなたの最初のプロトタイプを作るために十分な時間があるべきです。

02.見回してください

The Sample Project contains sample files to help you get familiar with Atomic — サンプルプロジェクトには、アトミックに精通しているのを助けるためのサンプルファイルが含まれています

今、あなたはあなたのアカウントにサインインしています、これは探求するのに素晴らしい時です。サンプルプロジェクトがあなたのために設定されていることに気付くでしょう。これには、アトミックに精通している間に遊ぶことができるいくつかの紹介サンプルファイルがあります。代わりに私たちのものを訪問することができますショーケースこれには、他の人によって建てられたプロトタイプのコレクションがあります。あなたが立ち往生したら、解決策を探すのに最適な場所が私たちのものですヘルプセンター。

03.新しいプロジェクト

「新しいプロジェクト」をクリックして「レシピアプリ」をクリックして新しいプロジェクトを作成します。 ENTERを押すとプロジェクトフォルダが開きます。ここでは、この特定のプロジェクト内のすべてのデザインを表示できます。これは新しいプロジェクトですので空です。ただし、作成すると、デザインはここで充実します。

04.サンプルをつかむ

There's a ready-made sample file for this project — このプロジェクトのための既製のサンプルファイルがあります

新しい空のデザインを作成する代わりに、ここに頭。これにより、開始するのに役立つサンプルファイルが開きます。

右下隅にある「コピーと編集」ボタンを参照してください。それをクリックしてRecipe Appプロジェクトに追加します。 [今編集]をクリックしてください。そのように、私たちのサンプルファイルのコピーはあなたのプロジェクト内に編集する準備ができています。

05.編集者を探索する

編集者へようこそ！過去にデザインツールを使用した場合、アトミックはおそらくおなじみの感じになります。周りを見てみましょう。左側には、図面、レイアウト、およびプロトタイプのツール、およびページとレイヤーパネルの間で切り替える2つのタブへのアクセスがあります。右側には[プロパティ]パネルに気付くことができます。これにより、ページサイズを変更できます。また、スタイルやトランジションの設定を行います。

06.要素をチェックしてください

In the sample file's Assets page you’ll find the elements you need — ファイルのアセットページのサンプルには、必要な要素が見つかります

サンプルファイルの[資産]ページで、このプロトタイプで使用されているすべての要素を作成しました。レイヤーパネルに切り替えて、キャンバス上の要素の一部をクリックします。選択した要素は、レイヤーパネルで自動的に強調表示されます。 'を押すとあなたのワークフローをスピードアップしてください。キーボードショートカットの範囲を確認するには、使用できます。

07.プレビュー

エディタの右下隅にある[プレビュー]をクリックして、プロトタイプをプレビューして対話できます。後でこれを使用して、私たちの移行がどのように感じるかをテストします。 'Preview'を選択すると、フルスクリーンモードで資産が表示されますが、矢印を使用して2ページに移動した場合は、プロトタイプの最初の状態の参照例が表示されます。ヘッダーの[保存したレシピ]ボタンをクリックして参照例と対話してみて、作成しようとしているものをプレビューしてください。

08.始めましょう

今、あなたは私たちが構築しているプロトタイプに精通しています、それは始める時が来ました！ [編集]を選択し、エディタに戻り、[アセット]ページですべての要素を選択してクリップボードにコピーします。 1ページに進み、その要素をページに貼り付けます。

09.あなたの資産を手配してください

選択されている要素が選択されていない場合は、キャンバスの背景の塗りつぶしを＃F6F7F8（右手のプロパティパネルで見てください）。キャンバス、上部と中央にヘッダーを置きます。

あなたはあなたの最初の状態（すべてのレシピ）がキャンバスに配置されているように資産を並べ替えたいと思うでしょう、そしてあなたのすぐに創造された2番目の状態（保存されたレシピ）の資産は右側のキャンバスから離れています。ここで：同じオブジェクトが1ページと2ページに存在すると、Atomicはそれらの間の変更を自動的にアニメートします。

10.カードをスタックします

プロトタイプを最初にプレビューした場合、「参照 - すべてのレシピ」ページのレシピのニュースフィードが垂直方向にスクロールできない場合があります。この効果を追加するには、最後に配置されるべき「戻って戻る」テキストを含む、垂直スタックにレシピカードを配置します。

11.スクロールコンテナを作成します

レシピカードを選択し、[明日の説明]テキストを選択し、キャンバスの上部中央に表示されたコンテナツールを選択します。「スクロールコンテナを作成する」を選択します。その後、コンテンツをグループ化してスクロールコンテナを呼び出すものの内側に配置し、デフォルトで垂直スクロールを有効にします。要素をマスクしてキャンバスを満たすために、下部境界をドラッグすることで、コンテナの境界を定義してください。

あなたの要素を置きます

この特定の遷移のために、私たちは「保存したレシピ」グリッドが右から入ってくることを望みます。これが起こることを確認するには、各要素をそれぞれの開始位置に配置します。たとえば、「保存されたレシピ」は、1ページ、キャンバスから右に置く必要があります。「追加の」テキストを追加するのは、キャンバスの外に、以下のページに配置する必要があります。

13.トランジションをタップします

次のページの要素をスライドさせるためにタップ遷移を作成しているので、それらの開始位置を定義するために、1ページにも存在することが重要です。いつでも、このページをどのように手配するかを確認するには、[参照すべてのレシピ]ページを参照できます。

重複

For our transition, duplicate page 1 — 私たちの移行のために、二重ページ1

今度は最初のページを設定しました、それは移行のための2番目の状態を作成する時が来ました。これは新しいページで行います。ページパネルが選択されていることを確認してから、ページカードの右下にハンバーグメニューを表示するには、1ページの上にホバーしてください。メニューをクリックして「重複」を選択します。

15.保存されたレシピ

Atomic will animate any changes you make between Page 1 and your new Page 2 — アトミックは、ページ1と新しいページ2の間で行った変更をアニメートします。

新しく複製されたページに移動して、2番目の状態を作成します。保存したレシピ。このページ上の要素を削除しないのは、ここでは重要です。ページを複製したので、アトミックは両方のページの要素が同じ接続要素であることを知っています。したがって、2ページの要素のプロパティに加える変更をアニメートすることを知っています（サイズ、位置、回転、不透明度など）。

16.その他の遷移

まず、「すべてのレシピ」スクロールグループを左、キャンバスから離れて、「保存されたRecipes」要素と「追加」のテキストを新しいポジションに追加します。キャンバスの下半分、そしてそれぞれ中央にあります。この遷移では動かない唯一の要素はヘッダーです。これは、ヘッダーが画面上に残っており、微妙に変更されているためです。

17.さらにアニメーション

ヘッダーの場合は、青色の背景が2番目の状態でスライドすることを望みます。 2ページの場合は、レイヤーパネルが開いている場合は、 'header'というタイトルのグループを展開して青い長方形を選択します。それからそれが「保存されたレシピ」の後ろに置かれているようにこれを右に動かします。いい素晴らしい！

18.楽しい部分

Add an interaction hotspot over the area you want users to interact with — ユーザーが対話できる領域の上にインタラクションホットスポットを追加します。

今すぐ移行を作成するための楽しい部分が来ます。 1ページの「保存したレシピ」テキストの上にホットスポットを描画します。これは私達のユーザーが私達のユーザーが対話するための領域です。エディタの左端の[ツール]パネルから[Interaction HotSpot]ツールを選択します（またはHを押します）。キャンバスに長方形を描画するために使用するのと同じ方法でホットスポットを描画できます。クリックしてドラッグするだけです。

遷移設定

Customise your transition, including the trigger gesture and motion type — トリガージェスチャとモーションタイプを含む、遷移をカスタマイズする

ホットスポットを描いたら、それでまだ選択されていると、インタラクションセクションが[プロパティ]パネルに右側に表示されます。これは、トリガジェスチャー、宛先ページ、モーションタイプ、および遷移の期間を指定できる場所です。この遷移では、次の設定を指定します。ジェスチャ： クリックまたはタップします ;に行きます： 2ページ ;動き：E. ASEインアウト ;期間： 250 。

20.前後

2つの遷移の間で前後に切り替えることができますので、2ページにホットスポットを入れるには、2ページに戻るには、キーボードショートカットを使用してホットスポットをコピーして貼り付けます。 'header'の「すべてのレシピ」テキストの上に2ページの2ページ。 Page 1に新しいホットスポットの宛先ページ設定を更新することを忘れないでください。

21.プレビュー

Click the Preview button to see your transition in action — アクションの移行を確認するには、[プレビュー]ボタンをクリックします。

あなたの移行をプレビューする時が来ました！ページパネルのページ1に移動し、エディタの右下にある[プレビュー]をクリックします（ショートカット） CMD + Enter. ）。プロトタイプの「保存したレシピ」をクリックまたはタップして2ページに進みます。次に、「すべてのレシピ」プロトタイプを選択して、1ページ目に戻ります。

22.すべて終わった！

今あなたはプロです！（ページのハンバーガーメニューを選択してから「ページを削除」を選択することで、「編集」を選択し、（ページのハンバーガーメニューを選択してから「ページの削除」を選択してください）。エディタの右下にある[共有]を押して、シェアリンクを簡単に作成できます。

この記事は最初に登場しました ネットマガジン 問題283; ここで購入してください ！

アトミックでHi-Fidelityプロトタイプを作る

01.サインアップ

02.見回してください

03.新しいプロジェクト

04.サンプルをつかむ

05.編集者を探索する

06.要素をチェックしてください

07.プレビュー

08.始めましょう

09.あなたの資産を手配してください

10.カードをスタックします

11.スクロールコンテナを作成します

あなたの要素を置きます

13.トランジションをタップします

重複

15.保存されたレシピ

16.その他の遷移

17.さらにアニメーション

18.楽しい部分

遷移設定

20.前後

21.プレビュー

22.すべて終わった！

操作方法 - 最も人気のある記事

8最先端のCSS機能（およびそれらの使用方法）

脳を使用してニューラルネットワークを構築する

猫を描く方法

NPMで生産性を向上させるための21の方法

水彩の輝く夜空への3つのステップ

本物のマンガコミックストリップを作成する方法

ANATOMY MASTERCLASS：あなたの数字

Photoshopで強いポーズでキャラクターを作成する

カテゴリ