最新のAtomic.ioアップデートにはスクロール可能なコンテナが含まれています
数か月前に、私はatomic.ioを使ってモーションをプロトタイプ化する方法を示しました。私が作品で作った重要なポイントの1つは、クライアントまたはチームの想像力にそれを残すよりも、 "動きを見せている"ことが重要でした。実際、これは非常に重要なものになってきており、全く新しいカテゴリーのUX / UIツールが現れています。 Apple Keynote、AdobeのEdge Animate、After Effects、UXPinなどがあります。このブロックの新しい子供は、私が最初に製品について書きましたが、オープンベータ版のAtomic.ioです。
オープンベータについてのすばらしい点は、フィーチャセットに欠けている機能を含むユーザーのフィードバックを収集し、アプリケーションに追加し、商用リリース前にテストすることです。アトミックの場合、私が本当に欠けていた機能の1つは、コンテンツを縦方向または横方向にスクロールすることでした。これには、カード、スライドショー、またはユーザーがアプリまたはサイトのインターフェースの範囲内でスワイプまたはドラッグするようなものが含まれます。
今月はスクロール可能なコンテナがアプリに導入されたばかりで、プロトタイプのスクロール可能なコンテンツを作成することは簡単に使えないため、多くのユーザーからの質問がありました。
ここには…
02/03アトミックで垂直スクロールコンテンツを作成する方法
最初に無料の30日間の試用にサインアップし、その期間の終わりに3つの料金プランが提示されます。
まず知っておくべきことは、あなたがやる仕事はすべてブラウザにあり、アプリはGoogle Chromeを厳密に対象としていることです。ログインすると、あなたは プロジェクト ページ。アプリを開くには、新規プロジェクトボタン.
インターフェイスが表示されたら、限られた数のツール、ページとレイヤーをページに追加する機能、アートボード、右にコンテキスト依存のプロパティパネルが表示されます。この例では、320 x 568のiPhone 5プリセットから始めました。次に、スクロールされる画像を含むフォルダを開き、キャンバスにドラッグします。それらは自動的にプロジェクトに追加され、あなたが レイヤータブをクリックします。次に、矢印ツール（選択）を選択し、画像を選択して新しい位置にドラッグして、その間にスペースを追加しました。私はすべての画像を選択し、 Distribute Verticallyボタンをクリックした ツールバーに表示されます。これにより画像が均等に配置されます。 次のステップでは、スクロールされるすべてのコンテンツを選択し、 コンテナボタンをクリックするか、グループボタンからスクロールコンテナの作成を選択します。 ポップダウン。コンテナが作成されると、レイヤーパネルにそのコンテナが表示されます。 コンテナをクリックし、下のハンドルを上にドラッグしてキャンバスの下に移動します. プレビューボタンをクリックします。 プロパティパネルの一番下に表示され、ブラウザウィンドウが開きます。マウスのスクロールホイールを使用してコンテンツをスクロールします。あなたのプロジェクトに戻るには、 編集ボタンをクリックします。 ブラウザウィンドウの右下に表示されます。 水平スクロールは、達成するのと同じくらい簡単です。 この場合、一連の画像をキャンバス上にドラッグしてお互いに突き合わせる。画像が選択された状態で、Top Alignボタンをクリックして、それらがすべて一列に並んでいることを確認します。 私はShiftキーを押しながらレイヤーパネルで各レイヤーを選択しました。選択された画像で、私は コンテナボタンをクリックした そしてプロパティパネルで、水平方向に選択します。 ビヘイビア領域で 次に、プレビューボタンをクリックして、ブラウザウィンドウでプロジェクトをテストしました。 私は、スクロール可能なコンテンツをコンテナ内に置く限り、個々のバージョンのVerticalとHorizontalスクロールを作成する方法を示しましたが、これらのコンテナを画面の別々の領域に配置することができます。例えば、ウェブページは、サイドメニュー内に垂直方向にスクロールするコンテンツを有し、同じページ上でスライドショー内のコンテンツを水平方向にスクロールすることができる。実際、コンテナは、十数個のサムネイルを持つ画像ピッカーのようなアイテムに対して、垂直スクロールと水平スクロールの両方を行うことができます。 atomic.ioのこの機能の詳細については、次を参照してください。 アトミックで水平スクロールコンテンツを作成する方法
