DesignOps - デザイナー向けのベストプラクティス

GeneXus エコシステム向けのアプリケーションをデザインする際のベストプラクティスを示します。これは開発者への配慮です。
目次

ベストプラクティス

セマンティックな命名
セマンティックなグループ化
静的コンテンツ
入力コンテンツ
コンポーネントの再利用
スタイルの再利用
図形のエクスポート
画像の最適化
重なりの回避
テキストボックスの間隔
タッチターゲット

使用可能バージョン
適用範囲
参考情報

ベストプラクティス

セマンティックな命名

既定のレイヤー名を使用することは避けます。その代わりに、それが何を表しているかを記述し、開発者と協力して命名規則を確立します (たとえば、データベースに由来する項目属性の命名)。また、長い名前や英数字以外の文字を含む名前を使用することは避けます。常にアルファベット文字で始め、先頭や末尾の空白は取り除きます。

✘ すべきでないこと	✔ すべきこと
Frame 1 ├─ Text 1 └─ Rectangle 1	Home Panel ├─ Title Text └─ Panel Background

静的コンテンツ

コンテンツが変化しないテキストまたはビットマップレイヤーを配置する場合は、Static 規則を使用します。

✘ すべきでないこと

✔ すべきこと

Login Panel
├─ Title Text
├─ User Name Box
│  ├─ User Name Label
│  └─ User Name Value
├─ Button Confirm
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background

Login Panel
├─ Static Title Text
├─ User Name Box
│  ├─ Static User Name Label
│  └─ User Name Value
├─ Button Confirm
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background

入力コンテンツ

編集可能なものとしてテキストレイヤーを配置する場合は、Input 規則を使用します。

✘ すべきでないこと

✔ すべきこと

Login Panel
├─ Static Title Text
├─ User Name Box
│  ├─ User Name Label
│  └─ User Name Value
├─ Button Confirm
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background

Login Panel
├─ Static Title Text
├─ User Name Box
│  ├─ Static User Name Label
│  └─ Input User Name Value
├─ Button Confirm
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background

コンポーネントの再利用

異なるアートボード/トップレベルフレームでエレメントグループの複数のコピーを作成することは避けます。グループを概念化してシンボル/コンポーネントを定義し、必要な場合はオーバーライドするようにします。

✘ すべきでないこと

✔ すべきこと

Login Panel
├─ Static Title Text
├─ User Name Box
│  ├─ Static User Name Label
│  └─ Input User Name Value
├─ User Password Box
│  ├─ Static Password Label
│  └─ Input Password Value
├─ Button Confirm
│  ├─ Confirm Caption
│  └─ Confirm Background
└─ Panel Background

Login panel
├─ Static Title Text
├◇ User Name Field        {1}
├◇ Password Field         {1}
├◇ Button Confirm         {2}
└─ Panel Background

❖ Field Symbol/Component  {1}
├─ Label Text
└─ Input Field

❖ Button Symbol/Component {2}
├─ Caption Text
└─ Background Shape

スタイルの再利用

デザイン内のエレメントごとにスタイルを定義しないようにします。代わりにスタイルやカラーを定義して、複数のエレメントで再利用するようにします。

✘ すべきでないこと

✔ すべきこと

Home Panel
├─ Static Title Text
│  • font: Roboto
│  • size: 18
│  • color: #D6DCD6
│
└─ Panel Background
   • color: #24695C

Home Panel
├─ Static Title Text
│  • text-style: H1
│
└─ Panel Background
   • color: Primary

○ Text-Styles
├─ H1
│  • font: Roboto
│  • size: 18
│  • color: Neutral
└─ ...

○ Colors
├─ Neutral: #D6DCD6
├─ Primary: #24695C
└─ ...

GeneXus で扱えない図形 (星形、多角形、ベクトル、直線など) は、画像としてエクスポートします。
これらの図形は、多くの場合、アイコンの中の個々のエレメントとして使われます。このような場合は、各エレメントを個別にエクスポートするのではなく、アイコンのグループ全体をエクスポートすれば十分です。さらに、グループとアイコン自体の間に余白を持たせるようにします (通常、そのグループは正方形のボックスになります)。

✘ すべきでないこと

✔ すべきこと

User Panel
├─ User Name
├─ User Icon
│  │ • width: 20
│  │ • height: 25
│  │
│  ├─ Oval 1
│  └─ Path 1
└─ Panel Background

User Panel
├─ User Name
├─ User Icon
│  │ • width: 25
│  │ • height: 25
│  │ • export: 
│  │   - png @1x
│  │   - png @2x
│  │   - png @3x
│  │
│  ├─ Oval 1
│  └─ Path 1
└─ Panel Background

注:

1)	GeneXus は線の図形を解釈できないため、画像としてエクスポートすることを避けるために、代わりに高さ 1 の長方形の図形を使用することをお勧めします。

画像の最適化

デザインに組み込む前に、画像のサイズと解像度を最適化します。
最適化されていない画像は、アプリケーションのパフォーマンスに影響を与える可能性があります。さらに、塗りつぶし画像 ("Choose Image" オプションで追加した画像) は、画像そのものであるため、画像としてエクスポートするようマークしないでください。これを行うと、ナレッジベース内で画像が重複することになります。

✘ すべきでないこと

✔ すべきこと

Home Panel
├─ Header Row
│  ├─ Header Row Title
│  └─ Header Row Background
│     • fill: image.png 
│             (2000x3500)
│     • export:
│       - png @1x
│       - png @2x
│       - png @3x
│
├─ ...
└─ Panel Background

Home Panel
├─ Header Row
│ ├─ Header Row Title
│ └─ Header Row Background
│    • fill: image.png
│            (500x875)
│
├─ ...
└─ Panel Background

重なりの回避

できる限りレイヤーが重ならないようにします。デザインするときは、デザインレイヤーをテーブルのセルに配置することをイメージしてください。重なりが避けられない場合は、レイヤーをグループ化する最適な方法を検討します。
たとえば、フローティングボタンがある場合、スクロール可能な領域を最初にグループ化し、ボタンをそのグループの外側に配置します。同様に、やむを得ず重なり合う 2 つ以上のエレメントを扱う場合は、それらを 1 つのユニットとしてグループ化することを推奨します。

✘ すべきでないこと

✔ すべきこと

Home Panel
├◇ Header Row
│  • x: 0
│  • y: 0
│  • width: 1440
│  • height: 695 <╌╌╌┐
│                    ┆
├◇ Button Chat       ┆(*)
│  • x: 1280         ┆
│  • y: 660 ╌╌╌╌╌╌┐  ┆
│  • width: 120   ├╌╌┘
│  • height: 120 ╌┘
│
├─ ...
└─ Panel Background

❖ Header Row Symbol/Component
├─ Header Row Title
└─ Header Row Background

❖ Button Symbol/Component
├─ Chat Icon
└─ Chat Rounded Background

(*) 重なりが必要です。Button Chat レイヤーは、Header Row レイヤーの上から始まり、下端より下に延びています。

Home Panel
├─ Header Row Group
│  │ • x: 0
│  │ • y: 0
│  │ • width: 1440
│  │ • height: 780
│  │ 
│  ├◇ Header Row
│  │  • x: 0
│  │  • y: 0
│  │  • width: 1440
│  │  • height: 695
│  │  • z-index: 0
│  │
│  └◇ Button Chat
│     • x: 1280
│     • y: 660
│     • width: 120
│     • height: 120
│     • z-index: 1
│
├─ ...
└─ Panel Background

❖ Header Row Symbol/Component
├─ Header Row Title
└─ Header Row Background

❖ Button Symbol/Component
├─ Chat Icon
└─ Chat Rounded Background

注:

1)	フレームの背景として機能する長方形や画像は、必要な重なりの概念から除外されます。GeneXus はそれらを background-color、background-image、border-radius などで解釈するためです。

テキストボックスの間隔

テキストボックス内に十分なスペースを確保することで、改行やエレメントのクリッピングを防ぎます。
テキストボックスは、テキストが切り捨てられたり、内容が判読できなくなったりするのを防ぐため、フォントサイズや行の高さより決して小さくしてはならないことを覚えておいてください。さらに、テキストボックスは、望ましくない改行を避けるために、その中のテキストよりも広くする必要があります。特に、テキストがコンポーネントで定義され、インスタンス化時に他の値で上書きされる場合です。

✘ すべきでないこと

✔ すべきこと

User Panel
├─ User Name
│  • caption: Jhon
│  • font-size: 20
│  • line-height: 25
│  • width: 80
│  • height: 18
│
├─ ...
└─ Panel Background

User Panel
├─ User Name
│  • caption: Jhon
│  • font-size: 20
│  • line-height: 25
│  • width: 100
│  • height: 30
│
├─ ...
└─ Panel Background

タッチターゲット

モバイル設計の場合、エンドユーザーが触れることのできるすべてのレイヤー (ボタン、編集、アイコンなど) には、少なくとも 48x48 dp のタップ可能な領域が必要です。
Android マテリアルデザインと Apple Human Interface Guidelines を確認してください。

✘ すべきでないこと

✔ すべきこと

Update User Panel
├─ Input User Name (*)
│  • font-size: 20
│  • line-height: 25
│  • width: 100
│  • height: 18
│
├─ ...
└─ Panel Background

(*) タップ可能な領域

Update User Panel
├─ Input User Name
│  • font-size: 20
│  • line-height: 25
│  • width: 100
│  • height: 48
│
├─ ...
└─ Panel Background

使用可能バージョン

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

GeneXus 17 Upgrade 1 以降:
- 色変数がサポートされます。
GeneXus 18 以降:
- Scalable Vector Graphics (SVG) 画像がサポートされています。
- 画像としてエクスポートされたビットマップおよびレイヤーの静的な定義がサポートされています。

適用範囲

ジェネレーター

.NET、.NET Core、Java、Android、Apple、Angular