効果的なベースレイアウトの設計方法
  • 01 Nov 2022
  • 1 読む分
  • 寄稿者

効果的なベースレイアウトの設計方法


概要

この記事を読む前に、「ベースレイアウトの使用方法」を確認してください。

ベースレイアウトは、アプリケーションのフォーマットの中心となるものです。ベースレイアウトでフォーマットを正しく設定することで、各ステップの開発を効率化することができます。

効果的なベースレイアウトの設計方法

アプリを設計する際、最初に行うべきことの1つは、「ベースレイアウト」をどのようにするか決めることです。

ベースレイアウト」とは、アプリ内のすべてのStepに適用されるデザインのことです。 Base Layoutに追加されたウィジェットは、それ以降の全てのStepにデフォルトで表示されます。

Base Layoutは、App Editorの左下でアクセスできます。

BaseLayoutに Triggerを追加した場合、そのTriggerはアプリ内の全てのStepに適用されます。 ただし、Base Layout 以外のステップからアクセスすることはできません。

Base Layoutはアプリ内の他のステップのテンプレートなので、ステップの周辺にBase Layoutウィジェットをレイアウトするのは理にかなっています。

以下のステップでは、サンプルのBase Layoutの作成の概要を説明し、独自の設計方法についてアイデアを提供します。

1.1. すべてのステップ(またはほぼすべてのステップ)に必要なウィジェットを決めます。

妥当な例としては、次または前のステップに移動するボタン、会社のロゴ、オペレータが各ステップで費やした時間を追跡するためのタイマーなどがあります。

2.2. ベースレイアウトウィジェットをどこに配置するかを決めます。

アプリのヘッダーやフッターを作成することが良い出発点となります。下記は、長方形、ボタン、テキスト、アップロードされた画像を使用して構築されたヘッダーとフッターのビジュアルレイアウトを見ることができます。

3.3. 各ステップで新しいコンテンツ用に十分なスペースを確保する

Base Layout上のウィジェットは、ステップの中央に最大限のビジュアルエリアを確保するように配置するのが理想的です。

4.4. Base Layoutからアンロックしたい、またはアンロックする必要があるウィジェットをメモしておきます。

Base Layoutを設計するとき、特定のStepでどのWidgetをアンロックする必要があるかをメモしておくことが重要です。これらのウィジェットは、劇的な遷移を避けるために、Base Layoutの他の側面と視覚的に分離するようにしてください。

5.5. Base Layout デザインの拡張性を考慮する

Base Layoutを設計する際に考慮すべき最後の点は、設計の拡張性です。上のアプリの例では、「メニュー」ボタンがフッターの幅の大部分を占めるようにすることができます。しかし、これでは、別のウィジェットを追加することになった場合、デザインを変更する手間がかかります。ウィジェットを追加するためのスペースを残しておけば、将来的な入れ替えを減らすことができます。


探していたものは見つかりましたか?

また、community.tulip.coに質問を投稿したり、他の人が同じような質問に直面していないかどうかを確認することもできます。


この記事は役に立ちましたか?