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

概要

:::(Info) (注意）この記事を読む前に、「ベースレイアウトの使い方」をよく理解していることを確認してください：

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

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

アプリをデザインするとき、最初にすべきことのひとつは、ベースレイアウトをどのようにするかを決めることです。

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

ベースレイアウトはアプリエディタの左下からアクセスできます。

:::(Info) (注）トリガーを ベースレイアウトに追加した場合、トリガーはアプリ内のすべてのステップに適用されますが、ベースレイアウト以外のステップからはアクセスできません：

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

以下のステップでは、サンプルのベースレイアウトの作成方法を説明します。

1. すべての（またはほとんどすべての）ステップに必要なウィジェットを決めます。

妥当な例としては、次のステップや前のステップに進むボタン、会社のロゴ、オペレータが各ステップに費やす時間を記録するタイマーなどがあります。
2. ベースレイアウトウィジェットをどこに配置するかを決めます。

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

1. すべてのステップで新しいコンテンツが表示されるように、余裕を持たせてください。

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

1. ベースレイアウトからアンロックしたい、またはアンロックする必要があるウィジェットをメモしてください。

ベースレイアウトをデザインするとき、特定のステップでどのウィジェットをアンロックする必要があるかをメモしておくことが重要です。これらのウィジェットを、ベースレイアウトの他の側面から視覚的に分離しておくと、劇的なトランジションが少なくなります。
2. ベースレイアウトの拡張性を考慮する。

最後に、デザインの拡張性を考慮しましょう。上のアプリの例では、メニューボタンがフッターの幅の大部分を占めていますが、これでは、別のウィジェットを追加することになった場合、デザインのやり直しが多くなってしまいます。ウィジェットを追加するためのスペースを残しておくことで、将来的に既存のウィジェットを再構成する必要性を減らすことができます。

お探しのものは見つかりましたか？

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