UIデザイン

リッチなユーザー インターフェイスを設計するにはどうすればよいでしょうか?

ユーザーインターフェースは、ドラッグアンドドロップインターフェースとWYSIWYGページエディターの組み合わせによって構築されます。 Mendix Studio Pro環境は、 アトラスUI 完全にレスポンシブなフレームワークで、 オープンソースのユーザー インターフェイスを構築するためのデザイン思考アプローチを促進する拡張可能なデザイン言語です。

検索可能なリスト、データ ビュー、ダッシュボード、ウィザードなどの一般的なページ パターンは、開発を加速し、複数のデバイス間で一貫した標準ユーザー インターフェイスを確保するために役立つスターター テンプレートとして利用できます。

• ナビゲーションレイアウト

  構築するとき Mendix アプリを作成する場合、最初に行うことはナビゲーション レイアウトを選択することです。これらのレイアウトは、動的なページが格納されるフレームであり、アプリ全体で一貫した構造を提供します。

  ナビゲーション レイアウトはプラットフォーム レイアウト エディターを使用して構築され、ページに必要なレイアウト パターンを作成できます。

  レイアウトでは、レイアウト グリッド、コンテンツ プレースホルダー、スクロール コンテナー、スライド メニュー バー、スニペットなどの特定のコントロールを使用して、アプリケーションの UI を構築するときに使用される必要なページ レイアウト パターンを一元的に定義します。

• ページテンプレート

  ページ テンプレートは、そのまま使用することも、カスタム ビルディング ブロックやウィジェットで拡張することもできる、事前に設計されたビルディング ブロックのコレクションです。

• ビルディング·ブロック

  ビルディング ブロックは、複数のウィジェットとスタイルで構成された単一目的の UI 要素です。通常、1 つのページで複数のビルディング ブロックが一緒に使用されます。ビルディング ブロックをそれぞれのモバイル ページ、タブレット ページ、またはレスポンシブ ページのいずれかにドラッグして、共通の UI パターンを実装できます。これにより、カスタム ページの開発が大幅にスピードアップします。

• ウィジェット

  ウィジェットは、既存のビルディング ブロックを強化するために使用される小さなユーザー インターフェイス要素 (アラート、ボタン、グラフなど) です。

  Mendix すぐに使えるウィジェットが多数用意されており、オープンソースのウィジェットも数百種類用意されています。 Mendix マーケットプレイス。JavaScriptを使用して独自のウィジェットを作成することもできます。 どうすれば延長できますか？ Mendix フロントエンド？ of フロントエンド.

• デザインプロパティ

  ウィジェットのデザイン プロパティを変更することで、ウィジェットをさらにカスタマイズできます。スタイルや配置が適切でない場合は、色、テキスト、その他の多くの変数を変更して、ケースごとにウィジェットをカスタマイズできます。テーマ開発者は独自の (会社の) デザイン プロパティを実装できるため、他のユーザーはウィジェットの外観を簡単に変更して会社のブランドに合わせることができます。

UI要素の役割 Mendix すぐに使えるものを提供しますか?

Mendix すぐに使えるウィジェットのリストがどんどん増えています。以下は最も一般的なウィジェットの一部です。

• メニューウィジェット – エンドユーザーがアプリケーション内を移動できるようにする（メニューバー、ナビゲーションツリーなど）
  

• データウィジェット – 建築形態の中心となる Mendix エンドユーザーがアプリケーション内のデータを表示および編集できるようにする（たとえば、データビュー、データグリッド、テキストボックスやラジオボタンなどの一般的な入力ウィジェットなど）
  

• レイアウトウィジェット – インターフェースのバックボーンを形成し、通常はレイアウトで使用されます（レイアウト コンテナ、タイトルなど）
  

• 共通ウィジェット – あらゆるページ、レイアウト、スニペット（ラベル、画像など）によく見られます

• コンテナウィジェット – 他のウィジェット（例えばテーブル、
  グループボックス)
  

• 入力ウィジェット – 属性と関連付けの値を表示および編集できるようにする（例：テキストボックス、日付ピッカー）
  

• ファイルウィジェット – ファイルに保存された画像を含むファイルを操作できます
  

• ボタンウィジェット – これらのボタンはアクションをトリガーします（たとえば、保存ボタン、ページを閉じるボタン、マイクロフローボタンなど）
  

• 視覚化ウィジェット – よりグラフィカルなウィジェット（チャート、マップなど）

新しいウィジェットはコアと開発者の両方によって常に構築されています Mendix 開発チームと開発者コミュニティは、標準のツールを使ってウィジェットを見つけることができます。 Mendix マーケットプレイス アプリケーションで使用するためにダウンロードします。

アプリの外観と操作感をカスタマイズするにはどうすればよいですか?

この Mendix フロントエンドでは、Atlas UI フレームワークを使用して、レスポンシブ ページまたはネイティブ モバイル ページをレンダリングします。フレームワークは、完全にカスタマイズ可能なデフォルトのテーマに基づいています。テーマ カスタマイザー ツールを使用すると、ブランドの色を決定するために使用されるロゴを簡単にアップロードできます。さまざまな色、フォント、サイズの設定をすばやく構成してプレビューできます。

次に、 Mendix 使用されます サス スタイルを定義します。プラットフォームには、テーマを設定および調整するために使用できる多くの変数を含む構成ファイルが含まれています。構成は、カスタム Sass ファイルを提供することで簡単に変更および拡張できるように設定されています。カスタム CSS を使用してスタイルを直接拡張することもできます。一貫したユーザー エクスペリエンスの作成に関する次のセクションで説明するように、スタイルを共有することもできます。

詳細については、 Atlas UI の使い方 会場は Mendix ドキュメンテーション。

 ネイティブモバイルアプリ、スタイルはJavaScriptに基づいています。詳細については、 ネイティブスタイル.

どのように Mendix デザインパターンと要素の再利用をサポートしますか?

Atlas UI は、アプリケーション設計に対する階層化およびコンポーネント化されたアプローチを容易にすることで、要素とレイアウトの再利用を促進します。さらに、Atlas UI を使用すると、UX デザイナーはすぐに使用できるコンポーネントを拡張し、独自のビルディング ブロックを組み立て、カスタム ウィジェットを作成し、デフォルトの設計プロパティをオーバーライドすることができます。

新しいデザイン要素や強化されたデザイン要素は、各要素が使用されているすべてのアプリケーション全体に自動的に伝播されます。

再利用の主な種類を以下に説明します。

スニペット

スニペットは、デザイン要素、ウィジェット、データを含むページ デザインの断片です。スニペットはモデル レベルで一元的に構築および管理され、アプリケーション内の複数のページで再利用できます。

このビデオでは、アプリ プロジェクトでスニペット呼び出しウィジェットを使用する方法を説明します。

レイアウト、ナビゲーション、ページテンプレート

レイアウトは、ウィジェット、ナビゲーション プレースホルダー、およびブランディングを再利用可能なコンポーネントの集中リポジトリに統合するワイヤーフレーム ページ デザインです。レイアウトは、デバイス間で共通のユーザー エクスペリエンスを作成するために、特定のフォーム ファクターをサポートするように設計できます。レイアウトは作成されると、設計時にアプリケーション ページに適用されます。