最近のアクセス:
DesignOps - 開発者向けガイド

デザインファイルをインポートしてアプリケーションを開発する開発者向けのガイドを示します。ヒントとベストプラクティスも紹介します。
デザイン統合サイクルの初期段階では、開発者は一度に数パネルだけを含むデザインのインポートを開始することをお勧めします。こうすることで、開発者とデザイナーがお互いから学べるだけでなく、アプリケーションがどのようにできあがっていくのかを確認することができます。開発者がコードの記述に着手したら、デザイナーは次の新しいパネルの描画を始めます。このサイクルを、完全に機能するアプリケーションが完成するまで繰り返します。
開発者には、UI を実行環境で確認できる強力なツールがあります: ライブ編集です。このツールにより、不適切なデザインを発見し、容易に修正できるため、優れたデザインのアプリケーションを作成できます。モバイルデザインをインポートする場合は「ネイティブ モバイル アプリケーションのプロトタイプ」を参照してください。

デザインエレメントを理解する

デザイン インポート ツールは、デザインファイル内のエレメントを以下のオブジェクトとして識別し、解釈することができます。見栄えの良い結果を得るためには、デザイナーはデザイナー向けガイドに記載されているガイドライン、規約ベストプラクティスに従う必要があることを考慮してください。

Stencil

Stencil オブジェクトは、デザイナーが定義するシンボル/コンポーネントから生成されます。
このオブジェクトは、複数のパネルで再利用することを目的とするため、アプリケーション内で再利用したほうがいいコンポーネントがあるかどうかを確認し、デザイナーに新しいシンボルの作成を依頼します。また、インスタンスが正しく適用されているかどうかも確認します (値のオーバーライド、テーマクラスの適用など)。インスタンスはターゲットステンシルの参照を確認することで見つけることができます。

パネル

Panel オブジェクトまたは Web Panel オブジェクトは、 [ Web パネルとしてインポート ] オプションをチェックしたかどうかに応じて、デザイナーが定義するアートボード/トップ レベル フレームから生成されます。
これらのオブジェクトの [ レイアウト ] タブは、デザイナーが定義したグループから生成され、コントロールは、適用された表記規則を通じて生成されます。各テーブルでは、セルサイズ (幅/高さ、絶対または相対) と位置が、デザイナーが定義するサイズ変更の制約から生成されます。適切な結果を得るためのルールをデザイナーがデザインに適用し忘れた場合のために、インポート時にはこのことを考慮に入れるようにします。また、デザイナーがパネルをリンクした場合は、 [ コード ] タブに対応する Call イベントがあります。デザイナーがアニメーションを含めた場合は、フォームの [ Enter Effect ] / [ Exit Effect ] トランジションが適用されます。

画像

Image オブジェクトは、デザインに含まれる画像から、また「エクスポート可能」とマークされているレイヤーから生成されます (デザイナーが描画したロゴなど)。こうした画像がターゲットプラットフォームで正しく表示されるためには、デザイナーが正しい密度 (1x、2x、3x など) でエクスポートしている必要があります。正しくなかった場合、プレースホルダーとして黒い画像が表示されます。

フォント

デザインファイル内のすべての組み込みフォントに対して、一連の File オブジェクト (.otf、.ttf) が生成されます。そして、これらのファイルはデザインシステムの [ Styles ] エレメントで @font-face ルールとして参照されます。最後に、対応するテーマクラスで設定を行います (ターゲットコントロールの [ Class ] プロパティの値)。

デザインシステムのカラー

#color グループがデザインシステムの [ Tokens ] エレメントで生成され、デザイナーがスタイル、特に塗りつぶし境界線、またはテキストのスタイルとして定義した色が含まれます (すべての色にこの 3 つのカテゴリのいずれかの接尾辞が付加されます)。また、デザインで色変数/スタイルとして定義されているすべての色が含まれます。

デザインシステムのスタイル

一連のスタイルクラスがデザインシステムの [ Styles ] エレメントで生成されます。デザイナーがスタイルを定義していない限り、すべてのコントロールに独自のスタイルクラスが設定されます。デザインファイルを再インポートすると、手動で変更したプロパティがオーバーライドされることに注意してください。
各スタイルクラスは、接頭語「ExternalDesign」が付いた親から継承されます。たとえば、GeneXus が変数のスタイルクラスを推測する場合、「ExternalDesignAttribute」クラスから継承する Attribute クラスのテーマクラスを生成します (ほかのテーマクラスカテゴリと同様)。

ワークフロー戦略

プロジェクトの要件に応じて、デザインのインポートツールを使用する際には、それぞれの長所/短所や留意事項を考慮した上で、さまざまな戦略 (あるいはハイブリッド戦略) を採用することができます。

完全なアプリケーションのデザイン

このアプローチでは、デザイナーがアプリケーションの各メインフレームを要素とともに定義し、インポートできるようにします。このプロセスは、最良の結果を得るためにデザイナーとの反復作業に時間がかかるかもしれませんが、フロントエンドが完全に準備され、開発中に曖昧になる余地がないことを保証します。

イテレーティブなアプリケーションのデザイン

前のアプローチと似ていますが、開発との交換サイクルが短くなります。デザインのインポートツールはオブジェクトをマージせずに上書きすることに注意してください。その点から、あらかじめ定義されたモジュール ( [ モジュール ] オプションを使用) にデザインの新しいイテレーションをインポートし、メインブランチに手動でマージすることを強くお勧めします。イテレーションを注意深く評価し、軽微な変更であれば、新たなインポートを避けるために手動での調整を検討します。

アプリケーションコンポーネントの定義

アイコン、ボタン、カードなど、個々のコンポーネントの定義に重点を置きます。開発者のための参照用として、これらのコンポーネントのインスタンスを含むメインフレームを作成し、各コンポーネントの動作 (フォーカス時、ホバー時など) について従うべき明確な指示を提供します。既知の制限事項 (「よくある質問とトラブルシューティングのセクション」に記載されています) に注意し、設計どおりにモデル化できない場合は代替案を試します。

使用可能バージョン

このセクションは、GeneXus 17 以降に適用されます。

参考情報



サブページ
Created: 21/04/20 02:19 by Admin Last update: 24/12/18 03:04 by Admin
カテゴリ
Powered by GXwiki 3.0