1. ブランドを第一に考える

ブランドは、人々があなたの会社、製品、またはアプリに対して抱く知的かつ感情的な連想を表します。まずブランドを組み込むことからアプリのデザインを始めてみてはいかがでしょうか。 Mendix テーマカスタマイザーを使用すると、ブランドの色、フォント、会社のロゴをアプリのデザインに統合できます。

ブランドのフォントと独自のカラー パレットを組み合わせてロゴを組み込むと、ビルディング ブロックとウィジェットがアイデンティティに適合し、1 回限りのスタイル変更が不要になります。アプリの構築を開始すると、アプリが会社の独自のブランドを反映するため、真の所有感を感じられるでしょう。

テーマカスタマイザーにアクセスするには、 Mendix Web モデラー。

2. テンプレートから始める

皆さんはどうか分かりませんが、ビジョンがはっきりしないときは、真っ白なキャンバスに圧倒されることがあります。幸いなことに、 Mendix Atlas UI フレームワークで構築された充実したテンプレート ライブラリを提供し、アプリ開発を迅速に開始できます。ページ テンプレートは、時間を節約し、創造力を高めるのに最適です。各ページ テンプレートには、すぐに接続できるビルディング ブロックとウィジェットを備えた、完全に設計されたユーザー インターフェイスが含まれています。

ユーザーは、ほとんどの時間を、自社の UI 以外の UI (Facebook、Twitter、ニュース Web サイトなど) の使用に費やします。車輪の再発明は必要ありません。Atlas テンプレート (カード、パンくずリスト、ヒーロー ヘッダー、ハンバーガー メニューなど) はすべて、Web 全体で見られる確立されたパターンに基づいて設計されており、一般的なユーザー インターフェイスの問題に対するソリューションです。スマートな設計決定により、ユーザーを苛立たせたりイライラさせたりするのではなく、楽しませ、満足させましょう。

3. 新しい親友、Flexboxを知ろう

不思議なことに、Web アプリやモバイル アプリを作成するときに最も難しいことの 1 つは、コンテンツを中央に配置することです。コンテンツを水平方向に中央に配置するのは比較的簡単ですが、垂直方向に中央に配置するのはほとんどの場合難しいです。「CSS 中央配置」を Google で検索するだけで、簡単なはずのタスクを実現するためのハックに関するブログが多数見つかり、それを実現するのがいかに難しいかがわかります。

幸いなことに、 Mendix 数多くの魅力的な flexbox ビルディング ブロックが追加されました。

• フレックスコンテナ左
• フレックスコンテナ 左中央
• フレックスコンテナ右
• フレックスコンテナ右中央

Flexbox を使用すると、align-content プロパティを使用して、あらゆるもの (垂直方向または水平方向) を簡単に配置できます。

Flexbox には他にも利点があります。Flexbox コンテナ内のアイテムは、利用可能なスペースに応じてサイズを「調整」できるため、モバイル画面やレスポンシブ コンテンツに最適です。ブロック/インライン レイアウト モード (ブロックは垂直、インラインは水平) とは異なり、方向に依存しないため、コンテンツを任意の方向 (左、右、下、上) に配置できます。また、フロートや「クリアフィックス” ハックは必要ありません。Flexbox がすべてを処理するからです。

Flexboxを学ぶためのガイドが見つかります こちら.

4. 一貫性を可能な限り維持し、構築します。

アプリ全体の一貫性は、継続的かつ予測可能で、期待どおりのものにすることに尽きます。アプリのメンテナンス、そしてさらに重要なユーザー エクスペリエンスのために、ビルディング ブロック、ページ テンプレート、ウィジェットの選択は重要です。

ユーザーの期待が正しければ正しいほど、ユーザーはシステムをコントロールできていると感じ、システムをもっと好きになるでしょう。」 – ヤコブ・ニールセン

アプリケーション設計に一貫性があれば、ユーザーは新しいコンテキストに知識を簡単に移すことができます。たとえば、「保存ボタン” は緑を「保存”アクション。ユーザーは、認知的な努力をすることなく、アプリケーション全体で緑色のボタンが表示されたときに発生する UI インタラクションを知っています。上記の例のようなパターンを確立すると、アプリケーションの開発と使いやすさが向上します。

5. デザイン要素を創造のきっかけとして活用する

先ほど、Atlas UI テンプレートがアプリケーション開発の開始にどのように役立つかについて説明しました。ただし、Atlas UI は、事前にパッケージ化されたページ テンプレート、ビルディング ブロック、ウィジェット以上のものです。提供されるコンポーネントは、独自のエンタープライズ デザイン言語を実装するための出発点となります。

デザイン言語の旅を始めるには、 Atlas UI リファレンス アプリ Mendix App Store から、事前設定された Atlas UI ビルディング ブロック、ページ テンプレート、ウィジェットのカスタマイズを開始し、独自のものの構築に取り組みます。エンタープライズ デザイン言語に投資することで、アプリ ポートフォリオ全体とチーム全体に統一された UX とデザイン ルールのセットが提供され、設計から開発への移行がスピードアップします。

6.実験

何が機能し、何が機能しないかを知る唯一の方法は、実験することです。Web Modeler の WYSIWYG インターフェイスは、実験を容易にする優れたツールです。ビルディング ブロックやウィジェットを変更したり、既存のデザイン要素のデザイン プロパティを調整したりすることで、簡単に新しいアイデアを生み出すことができます。Atlas UI で実験すればするほど、エンゲージメントを高める UX/UI 要素と、フラストレーションや放棄を引き起こす UX/UI 要素を早く理解できるようになります。

作業中にAtlas UIアプリを使用する

新しくリリースされた Atlas UI モバイル アプリを使用すると、モバイル フォンですべてのページ テンプレート、ビルディング ブロック、ウィジェットを参照できます。どこにいても Atlas UI ソリューションを探索できます。モデリング中にも使用できるため、ブラウザーに戻る必要がありません。

さあ、Atlas UI で何か素晴らしいものを作ってみましょう。 ダウンロード Mendix 携帯アプリ インスピレーションを得るため。