デザイナーがアプリケーションをデザインする際に、描画した内容が GeneXus でどのように解釈されるのかを説明します。
注: この記事を読む前に、優れたデザインのアプリケーションを一度で実現するためには、次の 2 つのルールがあることを覚えておいてください:
1. デザインはシンプルにします。
2. デザインする際には整理整頓を心がけます。
デザイナーがこれらのルールに従うことが開発者への配慮となります。
共通のエレメントをデザイン内で再利用する場合に使用します。
GeneXus では、これらのデザインエレメントが
Stencil オブジェクトとして解釈され、デザインで付けた名前が使用されます。
関連情報:
Sketch のシンボル、
Figma のコンポーネント。
デザイナーがアプリケーションのパネルを描画する領域を定義します。
GeneXus では、これらのデザインエレメントが
Panel オブジェクト (モバイルアプリケーションの場合) または
Web Panel オブジェクト (Web アプリケーションの場合) と解釈され、デザインで付けた名前に接頭語「View」を付加した名前が使用されます。
関連情報:
Sketch のアートボード、
Figma のトップレベルフレーム。
デザイナーは、アニメーションを含むアートボード間の関係を定義できます。
GeneXus では、アートボード間のリンクがパネル間の
呼び出し、またはバックリンクの場合は
Return コマンドとして解釈されます。
フォームの [ Enter Effect ] / [ Exit Effect ] トランジションが設定されている場合はそれが使用されます。
関連情報:
Sketch のリンク、
Figma の操作。
注:
- これらの操作は GeneXus で、リンクが設定されたレイヤーを表すコントロールのイベントを通じてモデル化されます。
- アートボード間のリンクを通じて操作をデザインするときは、ループにならないようにします。
- Figma ファイルでは、アニメーションはサポートされていません。
画像は、どのようなアプリケーションでも、ユーザーエクスペリエンスを改善し、ユーザーの関心を引くために重要なリソースです。また、複雑なコントロール (カレンダーなど) や描画 (アイコンなど) は、(適切な密度で) エクスポート可能とマークし、画像を生成したほうがいい場合があります。そうすれば、開発者がこれらを容易にアプリケーションに統合できます。
GeneXus では、いずれのリソースも
Image オブジェクトとして解釈され、ナレッジベースに格納されます。その後、
Image データタイプに基づく変数でターゲットパネルにロードされます。
関連情報:
Sketch の画像、
Sketch のエクスポート可能なレイヤー、
Figma の画像、
Figma のエクスポート可能なレイヤー。
テキストは、エンドユーザーに情報を伝達するためにデザインに欠かせないエレメントです。内容だけではなく、サイズ、色、配置、フォント、大文字/小文字、固定化 (レスポンシブ動作) などの表示方法も情報の伝達に影響します。それぞれのビジュアル情報を再利用するためには、テキスト-スタイルの使用をお勧めします。
GeneXus では、テキストは
VarChar データタイプの変数として解釈され、開発者が必要に応じて変更できます。すべてのテキストに
デザインシステムのスタイルセクションでスタイルクラスが定義されます。ただし、テキストスタイルを定義した場合は、同じテキストスタイルを持つテキストレイヤー間で同じ
[ Class ] プロパティ値が共有されます (つまり同じスタイルクラス)。テキストスタイルで色を定義すると、対応する
デザインシステムのトークンセクションの #color グループに追加され、ターゲットのスタイルクラスから参照されます。
また、テキストにカスタムフォントがある場合、GeneXus では
File オブジェクトとしてインポートされ、
@font-face rule として
デザインシステムのスタイルセクションに含められ、対応するスタイルクラスで設定されます。
関連情報:
Sketch のテキストレイヤー、
Sketch のテキストスタイル、
Figma のテキストレイヤー、
Figma のテキストスタイル。
スタイルは、ビジュアルデザインを再利用する手段として用意されており、次の ２ つのカテゴリがあります: テキストスタイル (上記) とレイヤースタイルです。レイヤースタイルの場合、デザイナーは塗りつぶしと境界線のスタイルを定義できます。
GeneXus では、スタイルが
デザインシステムのスタイルセクションのスタイルクラスとして解釈されます。塗りつぶし/境界線のスタイルで色を定義すると、関連する
デザインシステムのトークンセクション、具体的には #color グループに追加され、ターゲットのスタイルクラスから参照されます。
関連情報:
Sketch のスタイル、
Figma のスタイル。
カラーは、デザイン用に色スキームを定義することが目的です。カラーはデザインの印象を左右し、アプリケーションや操作方法の理解に役立ちます。
GeneXus は、
デザインシステムのトークンセクションで、カラーを #color グループのエレメントとして解釈します。これは、
デザインシステムのスタイルで定義されるターゲットのスタイルクラスから参照されます。
関連情報:
Sketch の色変数、
Figma の色ペイント。
サイズ変更の制約は、レスポンシブデザインの処理に重要な機能です。アプリケーションが、サイズや解像度が異なるデバイスで実行される可能性を考慮に入れます。レイヤーが拡大/縮小に対応していない場合は固定サイズを使用し、位置を変更できないエレメントは端に固定します。
GeneXus では、デザイナーが描画したコントロールを含める
テーブルコントロールの生成時に、サイズ変更の制約が解釈されます。設定する制約に応じて、すべてのコントロールがテーブル内のセルに、相対的 (%) または絶対的 (dip/px) なサイズと位置で配置されます。コントロールが重なる場合、GeneXus では
キャンバスコントロールが生成されますが、重なりの順番を定義する
[ Z-Order ] プロパティも適用されます。
関連情報:
Sketch のサイズ変更の制約、
Figma の制約、
Figma 自動レイアウトサイズ変更。
[ Fix position when scrolling ] プロパティは設計プロパティであり、これにより、オブジェクトの位置を固定し、スクロールしても同じ位置に表示されるようになります。たとえば、ヘッダー、フッター、フローティングボタンに使用します。
GeneXus は、デザインのエレメントのうち [ Fix position when scrolling ] プロパティが選択されたものすべてをメインテーブル (キャンバスコントロールとして設定) の一部として解釈します。このプロパティが選択されていないエレメントは、テーブルコントロールの一部になります ( [ Control Name ] プロパティには「Scrollable」の接尾語が付きます)。
モバイルでは、スクロール時の固定位置がないエレメントを含むテーブルは、
[ Auto Grow ] プロパティが False で、
[ Overflow Behavior ] プロパティの値が Add Scroll になります。
Web では、
Design System オブジェクトで [ Fix position when scrolling ] プロパティが定義されているエレメントのスタイルが「position: absolute」と設定されており、それぞれの位置/サイズは、top、left、bottom、right、width、height のプロパティで指定されます。
関連情報:
Sketch での固定エレメントの作成、
Figma での固定オブジェクトの作成。
注:
- [ Fix position when scrolling ] プロパティがチェックされていないエレメントが重なった場合、スクロール可能なテーブル ( [ Control Name ] プロパティが「Scrollable」の接尾語を持つ) は必ずキャンバスになり、テーブルのラッピングはキャンバル上で実行されます。
- シンボルまたはコンポーネントに対しては [ Fix position when scrolling ] プロパティは適用しないでください。位置はシンボルに対して定義されます。インスタンス化されるアートボード (またはトップレベルフレーム) に対しては定義されません。
このセクションは、
GeneXus 17 以降に適用されます。
開発者向けガイド